dsh-session-timeline: Adding a Navigable Timeline to the Left of DSH Web Sessions

Preface

In long conversations, returning to a specific user input by scrolling and manually searching can disrupt the flow of reading. Below, I introduce dsh-session-timeline. It is a DSH session timeline plugin maintained by XiLuovo, which renders a horizontal short-line timeline on the left side of the session, designed for quickly locating, jumping, and previewing in long conversations.

DSH’s philosophy is “everything is a plugin.” This plugin is published in an independent community directory, not an official app store, and has no official affiliation with DeepSeek / 幻方.

What is this

dsh-session-timeline is a plugin for the DSH web platform, maintained by XiLuovo, licensed under MIT.

The problem it addresses is straightforward: it generates a horizontal short-line timeline on the left side of the conversation area, allowing user input positions in long conversations to be seen, previewed, and clicked for navigation.

Core Features

Horizontal Short-Line Timeline

The timeline only displays horizontal short lines at user input positions. The number of timeline bars equals the number of user messages in the entire session.

When scrolling the timeline, items scroll internally, and there is no scrollbar.

Full Statistics and Caching

The plugin uses DSH’s sessionProjections to incrementally count user messages and AI reply previews across the entire session and persists the cache.

Current Message Positioning and Wave Focus

The plugin provides scroll-spy: the active bar follows the user message currently visible in the right-side viewport.

When the mouse moves over the timeline, a wave focus effect is produced.

Hover Preview and Click-to-Jump

Hovering over a bar displays a rounded preview tooltip, including that turn’s user message and AI reply.

Clicking any bar jumps the conversation to the corresponding user input position; if the target message is outside the current window, earlier history is automatically loaded before jumping.

Collapse and Expand

There is a capsule handle above the first message. Hovering over the capsule fades it in, and clicking it collapses the timeline.

When collapsed, the timeline becomes a full-height, thin vertical bar. Hovering or clicking the vertical bar area fades it in or expands the timeline.

Installation and Enabling

First, confirm the environment meets the following requirements:

DSH ≥ 0.1.0-rc
dsh CLI installed
web profile includes sessionProjections service

It is recommended to install via npm. Run:

dsh plugin --profile web add dsh-session-timeline

After installation, start or restart the web:

dsh web

The package is implemented in pure JS, and client.js is the final bundle artifact, no prepare build script is required.

To uninstall, use:

dsh plugin --profile web remove dsh-session-timeline

Typical Usage

After following the steps above, opening any session will show the timeline on the left side of the conversation area.

  1. Hover over a timeline bar to view that turn’s user message and AI reply preview.
  2. Click a bar to jump to the corresponding message; history outside the window is automatically loaded.
  3. Move the mouse over the timeline; the active bar and decreasing lengths create a wave following effect.
  4. Scroll the timeline; items scroll internally without a scrollbar.
  5. Hover over the capsule above the first message; the capsule fades in; click the capsule to collapse the timeline.
  6. After collapsing, hover or click the vertical bar area; the bar fades in or expands the timeline.

If you only want a quick trial, you can also use dynamic in-session loading: in a DSH Web session, have the agent execute cordis_define, paste the contents of client.js as the client code, and then execute cordis_run to enable it. Dynamic loading has no host projection, full-session statistics are unavailable, and only in-window features are retained.

Applicable Scenarios and Notes

It is suitable for users and plugin authors who work with long sessions in DSH Web and need frequent review or navigation.

Please note the following:

  • DSH plugins run with the current dsh process permissions; check the source code and license before installation. This plugin is licensed under MIT.
  • The plugin declares its platform as web and injects the host runtime and UI layout via dsh.client.
  • The plugin only reads the sessions.binding(sessionId).session snapshot, projections, and DOM anchors (data-chat-anchor-key); it does not modify session data.
  • Dynamic loading has no host projection; full-session statistics are unavailable, and only in-window features remain.
  • When modifying the projection state structure, you must bump stateVersion, otherwise the old persisted cache will be incorrectly reused.

Dependencies are declared as follows:

@deepseek-ai/dsh-client-runtime
@deepseek-ai/dsh-client-ui-layout
@deepseek-ai/dsh-session-projection
zod ^4.4.3

Conclusion

dsh-session-timeline consolidates the user input positions in long conversations onto a left-side timeline: horizontal short-line positioning, scroll-spy, hover preview, click-to-jump, collapse/expand—all are directly operable features. If you need to quickly return to a specific turn in DSH Web, you can install and try it first.

Directory page:

https://www.skillhub.cn/plugins/XiLuovo/dsh-session-timeline

GitHub:

https://github.com/XiLuovo/dsh-session-timeline
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye