消息时间线导航cokiscarazo-rgb/dsh-plugin-message-timeline-navigation

dsh-plugin-message-timeline-navigation

一个面向 DSH（DeepSeek Harness） Web 客户端的 Codex 风格消息时间线导航插件。

它在对话视图的左边缘叠加一根由密集短刻度组成的垂直导轨——每个用户回合（你的消息及其助手回复）对应一个刻度。悬停刻度可预览消息，点击可直接跳转，滚动时导轨会跟踪你的阅读进度。

DSH（DeepSeek Harness）Web 端插件：在对话区左侧叠加一根 Codex 风格的消息时间线——密集的短横线，每条横线对应一个用户回合（你的消息及其完整的 agent 回复）。悬停可预览消息、点击可直接跳转、滚动时当前阅读进度会自动标记在时间线上。

Features / 功能

- One tick per user turn / 每回合一个节点
每个刻度代表一条用户消息加上其完整的助手回复。仅包含 agent 的尾部节点会被过滤掉（[data-turn-tail]），因此导轨永远不会显示“幽灵”agent 刻度。

- Hover preview with cascade effect / 悬停级联预览
悬停某个刻度时：它会拉伸成一条更长的深色线，同时其两侧各 3 个相邻刻度会以阶梯式级联方式变长（与经典 Codex 外观一致）。一张小卡片会显示消息文本预览。

- Click to jump / 点击跳转
点击任意刻度即可将该消息平滑滚动到视口顶部，并短暂高亮它。

- Reading-progress tracking / 当前阅读进度
你当前正在阅读的回合（其区段包含滚动视口顶部边缘的回合）对应的刻度即使未被悬停也会保持深色——当一个回合从顶部进入视图时，它的刻度就会变深。长度不变；只有颜色变化。

- Only user messages / 只显示用户消息
导轨严格跟踪用户消息（依据下方的 DOM 约定判定），因此时间线密集且可预测。

Install / 安装

该插件是纯浮层，只需要一个 DSH Web 客户端。将其作为 DSH 插件安装（对于 DSH 工作区设置，推荐使用 pnpm）：

dsh plugin add dsh-plugin-message-timeline-navigation

或直接从本仓库安装：

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 / 使用说明

1. 在 DSH Web 客户端中打开任意对话。
2. 在聊天区的左边缘，你会看到由刻度组成的垂直导轨。
3. 悬停某个刻度 → 预览卡片 + 级联展开。
4. 点击某个刻度 → 跳转到该消息，顶部对齐，并带有临时高亮。
5. 滚动对话 → 当前回合对应的刻度保持深色。

How it works / 实现原理

- 该浮层在 document.body 上挂载自己的 React root（与其他 DSH 客户端插件相同的模式）。
- 它使用 DSH 的公开 DOM 约定直接读取对话 DOM：
- 滚动视口：[data-conversation-scroll]
- 用户消息：div[data-time-hover-root] 减去 div[data-turn-tail]
- MutationObserver + ResizeObserver + 滚动监听器让导轨与消息变化、视图切换和滚动保持同步。
- 短横线按索引沿滚动端口高度分布（以固定的 10px 节奏镜像经典侧边栏），因此即使在非常长的对话中，每个刻度也始终可见。

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 客户端（对话视图）。已针对近期 DSH 客户端版本（dsh-client-ui-conversation DOM 契约）进行测试。
- 需要 react / react-dom 18+ 以及 cordis rc 系列，声明为 peer 依赖。

License / 许可证

MIT © 2026 cokiscarazo-rgb