Preface

In the DSH Web GUI, a session often involves multiple rounds of user messages, steering messages sent during agent execution, and corresponding model replies. As conversations grow longer, scrolling up and down to locate a specific round of messages becomes inconvenient.

The following introduces KeLearns/dsh-navigation-bar: it maps user messages within a single session to a row of “piano keys,” supporting hover previews and click navigation, designed for navigating multi-turn conversations within a session.

What Is This

KeLearns/dsh-navigation-bar is a DSH client plugin that provides multi-turn conversation navigation for individual sessions in the DSH Web GUI.

  • Maintainer: KeLearns
  • License: MIT
  • Platform declaration: dsh.client.platform is web
  • Plugin form: Based on DSH’s official two-sided plugin mechanism (host + browser half), without modifying DSH source code

Its core idea is: one key corresponds to one user message. Model replies do not occupy individual keys but are incorporated into the preview for the corresponding turn.

Core Features

In-Session Navigation

The navigation bar anchors only user messages:

  • One key = one user message
  • Includes steering messages sent during agent execution
  • Keys are arranged in chronological order
  • Model replies do not occupy individual keys; they are incorporated into the preview for the corresponding turn

This way, the granularity of the navigation bar is “one turn of user input,” rather than generating a navigation item for every individual message.

Visual Specifications

The navigation bar adopts reference-level visual specifications:

  • Key spacing: 10px
  • Key height: 2px
  • Minimum length: 6px
  • Hover length: 26px (approximately 4.3×)
  • Position: Vertically centered within the message area

Color schemes are measured pixel-by-pixel based on references:

Light theme: #D2D3D3 / #767779 / #1A1C1F
Dark theme: #454545 / #A3A3A3 / #FFFFFF

Hover Ladder

When hovering over a key, that key lengthens and changes color, with adjacent keys forming a 3-level ladder:

20px / 14px / 10px
≈77% / 54% / 38%

The 4th neighboring key returns to the minimum length. When hovering over the first or last key, the ladder naturally trims at the boundary on one side.

Hover Bubble

When hovering, a preview of the messages in that turn is displayed:

  • User message: Single-line with ellipsis
  • Corresponding model reply: Up to 3 lines
  • Truncation method: Dual insurance via width-based JS truncation and -webkit-line-clamp
  • Overflow content: Ellipsis (…)

Current Position Highlight and Jump

In non-hover state, the key corresponding to the currently viewed content only changes color without length change, and updates in real-time with scrolling.

Clicking the corresponding key jumps to the position of that turn’s messages. The plugin supports adaptive themes for light and dark modes:

data-ds-dark-theme
prefers-color-scheme

Installation and Enabling

Install the official package to the web profile:

dsh plugin --profile web add @kelearns/dsh-navigation-bar

After execution, you need to restart the dsh web instance and refresh the page to make the plugin effective on the browser side.

You can also search for navigation-bar in the Plugin Market (dsh-market) within the DSH settings page for one-click installation.

Local Development

For local development, you can install using the link method:

dsh plugin --profile web add link:<this-directory>

After modifying lib/client.js, refresh the page to see changes.

The runtime and dependency requirements are as follows:

{
  "engines": {
    "node": "^22.19.0 || >=24.0.0"
  },
  "peerDependencies": {
    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

The platform declaration is web:

dsh.client.platform: web

Data Source and DOM Anchors

According to the documentation, the plugin uses the official DSH API to fetch current session data:

ctx.sessions.binding(currentId).session → ConversationSnapshot

Page positioning relies on the following DOM anchors:

Scroll container: [data-conversation-scroll]
Message row: [data-chat-anchor-key]

This means the navigation bar primarily renders based on the current session snapshot and existing message anchors, without relying on additional self-created message structures.

Use Cases and Considerations

This plugin is suitable for use in the DSH Web GUI when you need to quickly locate a specific round of user input, agent steering messages, or corresponding model replies.

Before installation, it is recommended to:

  1. Check if the source code and MIT license are acceptable.
  2. Confirm that the runtime environment meets the Node version and peer dependency requirements.
  3. Note that the plugin runs with the permissions of the current dsh process, and the installation source should be verifiable.
  4. After installing the plugin, restart the dsh web instance and refresh the page.

This plugin is included in the awesome-dsh-plugin curated directory.

Links

  • GitHub: https://github.com/KeLearns/dsh-navigation-bar
  • Directory page URL provided in the plugin clue: https://www.skillhub.cn/plugins/KeLearns/dsh-navigation-bar (This URL comes from the plugin clue and has not been verified in the fetched materials; please confirm before visiting.)