dsh-plugin-message-timeline-navigation
A Codex-style message timeline navigation plugin for DSH (DeepSeek Harness) web clients.
It overlays a vertical rail of dense short ticks on the left edge of the conversation view — one tick per user turn (your message plus its assistant reply). Hover a tick to preview the message, click to jump straight to it, and watch the rail track your reading progress as you scroll.
DSH（DeepSeek Harness）web 端插件：在对话区左侧叠加一根 Codex 风格的消息时间线——密集的短横线，每条横线对应一个用户回合（你的消息及其完整的 agent 回复）。悬停可预览消息、点击可直接跳转、滚动时当前阅读进度会自动标记在时间线上。
Features / 功能
-
One tick per user turn / 每回合一个节点
Each tick represents a user message plus its whole assistant reply. Agent-only tail nodes are filtered out ([data-turn-tail]), so the rail never shows "phantom" agent ticks.
-
Hover preview with cascade effect / 悬停级联预览
Hover a tick: it stretches to a longer dark line while its 3 neighbors on each side lengthen in a stepped cascade (matching the classic Codex look). A small card shows the message text preview.
-
Click to jump / 点击跳转
Click any tick to smoothly scroll that message to the top of the viewport and briefly highlight it.
-
Reading-progress tracking / 当前阅读进度
The tick for the turn you are currently reading (the turn whose segment contains the scrollport top edge) stays dark even when not hovered — the moment a turn scrolls into view from the top, its tick turns dark. Length is unchanged; only the color changes.
-
Only user messages / 只显示用户消息
The rail strictly tracks user messages (ruled by the DOM contract below), so the timeline is dense and predictable.
Install / 安装
The plugin is a pure overlay and only needs a DSH web client. Install it as a DSH plugin (pnpm is recommended for DSH workspace setups):
dsh plugin add dsh-plugin-message-timeline-navigation
Or install directly from this repository:
dsh plugin add dsh-plugin-message-timeline-navigation@github:cokiscarazo-rgb/dsh-plugin-message-timeline-navigation
中文说明： 通过 DSH 的插件命令安装即可（推荐使用 pnpm 环境；不要把插件装成全局包）。安装后刷新对话页面（或等待 client HMR 热更 1–2 秒）即可看到左侧时间线。
注：本插件为纯前端浮层，不修改 DSH 本体；程序本体与个人配置分离，插件文件仅存在于你的 DSH 插件目录。
Usage / 使用说明
- Open any conversation in a DSH web client.
- On the left edge of the chat you'll see the vertical rail of ticks.
- Hover a tick → preview card + cascade expansion.
- Click a tick → jumps to that message, top-aligned, with a temporary highlight.
- Scroll the conversation → the tick for the current turn stays dark.
How it works / 实现原理
- The overlay mounts its own React root on
document.body (same pattern as other DSH client plugins).
- It reads the conversation DOM directly using DSH's public DOM contract:
- scrollport:
[data-conversation-scroll]
- user message:
div[data-time-hover-root] minus div[data-turn-tail]
- A
MutationObserver + ResizeObserver + scroll listener keep the rail in sync with message changes, view switches, and scrolling.
- Dashes are distributed by index down the scrollport height (with a fixed 10px rhythm mirroring the classic sidebar), so every tick stays visible even in very long conversations.
Directory / 目录结构
dsh-plugin-message-timeline-navigation/
├── package.json # manifest: dsh.bundle.patch + dsh.client.inject
├── cordis.patch.yml # bundle-level mount for the host half
├── LICENSE # MIT
├── lib/
│ ├── index.js # host half (minimal: config defaults)
│ ├── client.js # client half (the timeline rail core)
│ └── types/ # type declarations
└── README.md
Compatibility / 兼容性
- DSH web client (conversation view). Tested against recent DSH client releases (
dsh-client-ui-conversation DOM contract).
- Requires
react / react-dom 18+ and cordis rc line, declared as peer dependencies.
License / 许可证
MIT © 2026 cokiscarazo-rgb
