# dsh-chat-history

English | [中文](README.zh.md)

<img width="920" height="864" alt="image" src="https://github.com/user-attachments/assets/7cdd836b-1cda-4c3e-9b10-1768b977ec55" />


用于 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) Web GUI 的 ChatGPT 风格对话历史侧边栏。对话记录右边缘有一竖条横线指示器，每条用户消息对应一根横线；悬停弹出浮层列出所有用户消息，点击某行即滚动到该消息。活跃横线跟随滚动位置，浮层打开后暂停跟随（点击锁定）。

## 功能

- **横线导航**：对话记录右边缘每条用户消息一根横线，会话至少包含两条用户消息时始终可见。
- **悬停浮层**：列出全部用户消息（序号 + 单行预览），点击跳转。
- **滚动同步**：活跃横线指向滚动容器顶部边缘处或以下的第一条用户消息；跳转后高亮锁定。
- **点击锁定**：浮层打开期间自动同步暂停，关闭后恢复跟随。
- **按条跳转**：直接按下侧边栏跳到最近横线，横线之间的空隙也能导航。
- 数据完全来自会话聊天快照（`user`/`steering` 节点），样式只使用设计令牌。

## 依赖要求

- 需要 DeepSeek Harness 的 **web profile**（GUI）。侧边栏注册到 `conversation.session.header.actions` 槽位——这是已发布 `@deepseek-ai/dsh-client-ui-conversation` 长期提供的会话头部动作槽位，**任何已发布版本的 ui-conversation 都能挂载，不依赖任何上游新槽位**。侧边栏本身以 `position: fixed` 渲染在对话滚动容器上，不占用头部布局。

## 安装

在运行 GUI 的 profile（如 `~/.dsh/profiles/web`）中添加该 bundle 并安装：

```sh
# 在 profile 目录，从 npm registry 安装
pnpm add @ttmouse/dsh-chat-history
```

或作为 GitHub 源依赖：

```sh
pnpm add @ttmouse/dsh-chat-history@github:ttmouse/dsh-chat-history
```

或使用 dsh 插件通道（可用后）：

```sh
dsh plugin --profile web add @ttmouse/dsh-chat-history
```

然后把 bundle 加入 `dsh.profile.bundles`（`dsh plugin add` 流程会自动完成）：

```json
{
  "dsh": {
    "profile": {
      "bundles": ["@deepseek-ai/dsh-base", "@deepseek-ai/dsh-web-app", "@ttmouse/dsh-chat-history"]
    }
  }
}
```

重启 `dsh web` 并刷新浏览器。侧边栏出现在活跃对话的右边缘。

## 开发

```sh
pnpm install
pnpm build     # tsc（lib/types + node half）+ tsdown（lib/client.js 浏览器 bundle）
pnpm test      # vitest，jsdom
```

浏览器 bundle 是 `window.__ModuleLoader__.load` 握手产物，CSS Modules 以内联 `<style>` 注入；外部依赖（`react`、`@deepseek-ai/dsh-client-runtime/client` 等）通过 DSH loader 模块表解析。

## License

MIT