Under DSH’s plugin-based architecture, message positioning efficiency in long conversation windows directly affects the development and debugging experience. The dsh-user-message-timeline plugin introduces a visual rail inside the conversation column, addressing the need for quick positioning of historical messages.

What is this

dsh-user-message-timeline is a client-side plugin maintained by huang-chunc. Its core feature is to light up a pill for each user message inside the conversation column.

Core features

Pill funnel

By default, the rail uses a 12×4 layout with 10px spacing between pills. On hover or activation, the pill enlarges.

Sticky preview

On hover, after 150ms or 60ms of continuous hovering, a preview bubble with a dark jade glass effect appears, with a width of 240px and adaptive height. The text in the bubble supports copying.

Drag scrub

Drag operations are supported. The Scrub HUD follows the mouse and displays information such as “Round X/N · Preview first line”. After releasing the mouse, the view smoothly transitions to the target message.

Pagination loading

When there are many messages, a hollow pulse indicator appears at the top. Clicking it loads another 20 messages cyclically.

Scrollable viewport

When the number of messages exceeds 16, a scrollbar appears inside the rail. The height is limited to 386px, and the edges use a fade mask.

Smooth experience

Internally, the plugin uses ResizeObserver and requestAnimationFrame (rAF) to ensure rendering performance, and supports prefers-reduced-motion.

Preferences

In the plugin card in the sidebar, you can control the toggle and left/right position. Light and dark themes are adapted automatically (white background with black dots / black background with gray dots).

Installation and activation

Prerequisites

Make sure DSH (version ≥0.1.7) and Node.js (version ≥20) are installed.

Installation steps

  1. Run the installation command:
dsh plugin --profile web add dsh-user-message-timeline
  1. After installation, perform a hard browser refresh (Cmd/Ctrl+Shift+R) to activate the plugin.

Typical usage

  1. Hover over a funnel pill; the pill enlarges and a 240px-wide preview bubble appears.
  2. Click a pill to jump to the corresponding message.
  3. Drag the Scrub HUD; it follows the movement.
  4. When there are more than 16 messages, the rail becomes scrollable, and supports one-click switching left or right at the edges.
  5. Adjust the position and toggle in the sidebar plugin settings.

Configuration and debugging

Right-side adaptation

The right-side layout is currently only compatible with dsh-better-sidebar.

Debugging

In the browser console, run the following command to enable debug logs:

localStorage.setItem('umtl:debug', '1')

Summary

dsh-user-message-timeline improves the efficiency of locating messages in long conversations through a visual pill rail. Combined with interactive features such as pagination loading and drag scrub, it significantly optimizes the DSH user experience.