kelearns/dsh-navigation-bar
Piano-key in-conversation navigation for the Web UI: one key per user message with hover ladder, message-preview tooltip, and active-message highlight; click to smooth-scroll.
A piano-key style in-conversation navigation bar for the DeepSeek Harness Web GUI: one key anchors one user message of the current session (including steering messages sent while an agent is running), in chronological order, and model replies share their turn's key and appear in the preview. Hovering shows a "user message + model reply" preview — the user message ellipsized to one line and the model reply to at most three lines — and clicking smooth-scrolls to that message. The visuals are reference-accurate: fixed 10px key pitch, 2px bars, 6px resting / 26px hovered length (≈4.3×), vertically centred in the message area, with a hover ladder over the three neighbouring keys and the current key highlighted by colour only. It adapts to dark and light themes.
Install
dsh plugin --profile web add @kelearns/dsh-navigation-barREADME (English README.en.md) install: installed into the web profile through the official DSH plugin mechanism, from npm with the scoped form, or in local development with link mode (dsh plugin --profile web add link:<this-directory>; edits to lib/client.js apply on page refresh). The plugin roster is loaded at instance startup, so after adding a plugin restart the dsh web instance, then refresh the page.
Compatibility
DSH web profile. Built on the official dual-face plugin mechanism (host + browser half) with no DSH source changes. Host half is a no-op Cordis plugin (index.js); browser half is a hand-written bundle (lib/client.js, no build step) using window.ModuleLoader.load. Data comes from official APIs only — ctx.sessions.binding(currentId).session returning a ConversationSnapshot subscribed through useSyncExternalStore, plus DOM anchors [data-conversation-scroll] and [data-chat-anchor-key].
Details
- Repo: kelearns/dsh-navigation-bar
- Category: UI Enhancements
- Stars: 0
- Version: 0.2.1 (npm @kelearns/dsh-navigation-bar; registry repository field → github.com/KeLearns/dsh-navigation-bar, verified 2026-09-12)
- Last push: 2026-08-16
- First seen: 2026-08-15
Recent updates
README notes the colour values were measured pixel-by-pixel from the reference images (light #D2D3D3 / #767779 / #1A1C1F, dark #454545 / #A3A3A3 / #FFFFFF), and that the package is listed in the awesome-dsh-plugin curated registry and searchable as navigation-bar in the Plugin Market tab of dsh settings.
FAQ
- How do I install dsh-navigation-bar?
- Run dsh plugin --profile web add @kelearns/dsh-navigation-bar (published on npm), then restart the dsh web instance and refresh the page. A link:<directory> form is available for local development.
- What does the navigation bar show?
- One piano key per user message of the current session, in chronological order. Hovering shows a preview of that turn's user message plus the model reply, and clicking smooth-scrolls to the message.
- Does dsh-navigation-bar modify DSH source code?
- No — it is built on the official dual-face plugin mechanism (host + browser half) and reads data only through official APIs such as the conversation snapshot.