dshbase

Plugin directory / UI & Skins / dsh-scroll-timeline

dsh-scroll-timeline

Verified · install-tested on dsh invalidnaaaame

✓ Actively maintained Pure TypeScript

View on GitHub ↗ ← Back to plugin directory

5Stars
2Forks
0Open issues
TypeScriptLanguage
2026-08-14Last push
Cross-platformPlatform

What it does

DSH web plugin: ChatGPT-style scroll timeline on the chat sidebar — magnetic mountain hover, click to jump to user messages. Derived from v…

✅
Our take
Works — verified, early-stage project

DSH web plugin: ChatGPT-style scroll timeline on the chat sidebar — magnetic mountain hover, click to jump to user messages. Derived from v… It installs cleanly and boots without issues in our testing. It's early-stage but functional.

“Verified” means our automated CI actually ran dsh plugin add in a clean profile and it booted — nothing more. Feature descriptions and version compatibility are the author’s claims. This is not a security audit and not an endorsement of third-party code.

README

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.

license

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

dsh-scroll-timeline (left: reading-position peak bar; right: hover magnetic mountain)

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.

Install

🧩 Let your agent install it (recommended)

Install the catalog once, then DeepSeek Harness can find and install any plugin from this site automatically:

dsh plugin add dshbase-catalog

Then say "install dsh-scroll-timeline for me" — your agent finds it in the directory and installs it. Docs: dshbase-catalog · verified packs.

This plugin is GitHub source (not published to npm) — install it straight from the repo:

Web profile:

dsh plugin --profile web add github:invalidnaaaame/dsh-scroll-timeline

Headless (CLI) profile:

dsh plugin --profile headless add github:invalidnaaaame/dsh-scroll-timeline

Test report

Verified: L1 install + L2 load + L3 runtime from GitHub source on dsh 0.1.0-rc.6.

When to use it

Change how dsh looks or how you interact with it — a theme, a skin, or a new panel that reshapes the workspace.

Who it's for

Users who spend hours in the web UI and want it to look and feel the way they work.

For developers — extending it

Skins, panels, and theme tokens are the extension points — author a new skin, add a panel, or sync tokens with an upstream palette.

Security: not yet scanned — our daily static scan will cover it shortly.

Share this badge

More in UI & Skins

Browse all 7797 plugins →