dsh-scroll-timeline

Readme

<h1 align="center">dsh-scroll-timeline</h1>

<p align="center">A ChatGPT-style scroll timeline for the chat sidebar: a rail of horizontal bar nodes (one per user message) with magnetic mountain hover, hover preview, and click-to-jump.</p>

<p align="center">
  <img src="https://badgen.net/badge/license/MIT/green" alt="license">
</p>

<p align="center"><a href="README.md">English</a> | <a href="README.zh.md">中文</a></p>

An evenly spaced node rail on the right edge of the sidebar (one horizontal bar per user message) — the peak bar follows your reading position, hovering grows a magnetic "mountain" (design ratios 39/30/21/15/9; base and peak widths are adjustable via CSS variables), a hover preview card (6-line clamp), click-to-jump with smooth scrolling and a brand-blue highlight, full history always visible, and auto-hide when there are fewer than 2 user messages. Form factor: a **bundle plugin in the official form factor** (`dsh.bundle` + dshClient channel, **browser-only**, empty Node half), 0 patches. Third-party plugin, not affiliated with the official DeepSeek Harness project.

> Compatibility: verified on dsh `0.1.0-rc.6` through `0.1.1-rc.2` (the anchor contract `data-time-hover-root` / `data-chat-flow` is still present in the latest release).

> Derived from [vlln/dsh-navbar](https://github.com/vlln/dsh-navbar) (MIT, spec issue dsh-external/issues#144), with the interaction redesigned: horizontal bar nodes, magnetic mountain hover, sidebar-adjacent positioning, and full history.

## Preview

![dsh-scroll-timeline (left: reading-position peak bar; right: hover magnetic mountain)](docs/preview/navbar.png)

## Features

| Feature | Description |
|---|---|
| Scroll timeline | Vertical node rail on the right edge of the sidebar, one horizontal bar per user message (3px tall, 14px hit area) |
| Reading position | Peak bar (39px brand blue) follows the current reading position |
| Magnetic mountain | While the pointer is over the rail, the nearest node becomes the peak and neighbors extend in progressively decreasing amounts (39/30/21/15/9) |
| Hover preview | Hovering a node shows a message preview card (6-line clamp, aligned with the official HoverCard look, opens to the right) |
| Click to jump | Smooth-scrolls to the message + brand-blue highlight ring |
| Full history | Always shows every historical node; long sessions scroll within the container |
| Auto-hide | Hidden with fewer than 2 user messages or outside the chat page |

Zero data-channel dependencies: driven only by the official anchor attribute (`data-time-hover-root`, user rows since 0806); no polling, no routes, no tools.

The base and peak widths can be tuned via CSS variables (on the rail container):

```css
[data-dsh-navbar] {
  --dsh-navbar-base-w: 9px;  /* base width */
  --dsh-navbar-peak-w: 39px; /* peak width (hover/active) */
}
```

## Install

**Recommended: one-line git install** (build artifacts are committed; git sources don't trigger a build):

```sh
dsh plugin --profile web add "github:invalidnaaaame/dsh-scroll-timeline#main"
```

Or from a local directory (with source): `git clone`, then `cd dsh-scroll-timeline && dsh plugin --profile web add .`.

After installing, **restart web** for it to take effect; the Settings → Plugins panel can disable/enable it.

## Usage

Works out of the box; no commands, no tools. The timeline appears on the right edge of the sidebar in the chat (Chat) view; hover to preview, click to jump. Animations are disabled under `prefers-reduced-motion`.

## Development

```sh
pnpm install
pnpm run build      # tsdown: client bundle (lib/client.js)
```

- client: `src/client/index.ts` (self-rendered DOM + official anchor contract, no React dependency)
- Node half: `src/index.mjs` (empty apply; the bundle mount carrier)

## License

MIT. Derived from [vlln/dsh-navbar](https://github.com/vlln/dsh-navbar) (MIT, Copyright (c) 2026 Sam Gao (vlln)); see [LICENSE](LICENSE).