invalidnaaaame / dsh-scroll-timeline

dsh-scroll-timeline

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.

English | 中文

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: an official bundle plugin (dsh.bundle + dshClient channel, browser-only, empty Node half), 0 patches.

Derived from 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

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):

[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):

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

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 (MIT, Copyright (c) 2026 Sam Gao (vlln)); see LICENSE.