@dsh-external/dsh-chat-jumper

Readme

# @dsh-external/dsh-chat-jumper

DSH 对话圆点导航：在页面右侧显示一条纵向圆点列，每个圆点对应一条**用户提问**，点击即可快速跳转到那一轮对话。

## 功能

- 右侧纵向圆点列，每个圆点 = 一条用户提问（`user` / `steering`）
- 鼠标悬停：显示该轮提问的截断预览（前 40 个字符）
- 点击圆点：平滑滚动到对应的用户提问位置
- 当前阅读位置附近的提问圆点会高亮
- 数据来自 **DSH 会话快照**（不是扫 DOM），历史消息未渲染也能统计
- 若还有更早消息未加载，圆点列顶部会出现 **↑ 按钮**
  - 点一次自动连续 `loadOlder()` 直到把全部更早历史加载完
- 点击尚未渲染进 DOM 的旧圆点时，会自动触发 `loadOlder()` 并重试定位

## 安装

### 方式 A：官方装配（推荐）

```powershell
# 1. 安装依赖
dsh plugin --profile web add <解压后的目录或 .tgz>

# 2. 把包名加进 profile 的 bundles 列表
#    编辑 ~/.dsh/profiles/web/package.json，在 dsh.profile.bundles 数组末尾加上：
#    "@dsh-external/dsh-chat-jumper"
```

然后重启 web / 刷新页面即可。

### 方式 B：dsh-super-injector

如果你机器上已经装了 [dsh-super-injector](https://github.com/yjh051108/dsh-super-injector)：

```text
dev_install_plugin <解压后的绝对路径>
```

或者只临时注入：

```text
dev_inject_plugin <解压后的绝对路径>
```

## 从源码构建

需要本机有 DSH checkout，并设置环境变量 `DSH_CHECKOUT` 指向源码根目录。

```bash
npm run build          # host tsc
npm run build:client   # client tsdown → lib/client.js
```

打包发布：

```bash
npm pack
```

## 文件结构

- `src/index.ts` — host 侧空实现（纯 UI 插件）
- `src/client/index.ts` — 圆点导航 UI（React 类组件 + session 快照订阅）
- `lib/` — 构建产物（host + client bundle）
- `scripts/build.sh` — host 编译脚本

## 原理

- 注册到 DSH 的 `shell.overlay` 框架浮层
- 通过 `ctx.sessions.currentProvideInfo` 拿到当前会话 id
- 再通过 `ctx.sessions.binding(id).session.getSnapshot()` 读取完整会话快照
- 从 `snapshot.chat.order` + `snapshot.chat.nodes` 里筛选 `kind === 'user' | 'steering'`
- 点击跳转时用 `[data-chat-anchor-key="..."]` 找 DOM 节点；找不到就自动 `loadOlder()` 后重试

## License

[MIT](./LICENSE)