dsh-ui-enhance

Readme

# Dsh UI 增强

为 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) Web 界面提供一组可选的交互与样式增强。

![dsh-ui-enhance](assets/screenshot.png)

当前版本：`0.4.0`

## 功能

### 语音输入

在“发送消息”按钮左侧增加麦克风按钮，通过浏览器 Web Speech API 将语音识别结果写入消息输入框。

- 点击麦克风开始或停止识别。
- 识别结果会追加到当前输入内容，不会自动发送。
- 权限被拒绝或浏览器不支持时会显示对应状态。
- 需要浏览器授予麦克风权限；建议使用支持 `SpeechRecognition` 的 Chromium 浏览器。

### 工具调用折叠

自动将连续且类型相同的工具调用合并为一张可展开的汇总卡。例如：

```text
Read 3 Files
```

展开汇总卡后会恢复原有工具行、文件链接和详情交互。不同工具调用，或被思考、文本等内容隔开的同类调用，不会被合并。

该功能默认开启，可在以下位置即时切换：

```text
设置 → 插件 → 插件配置 → Dsh UI 增强 → 工具调用折叠
```

开关会自动保存，关闭时页面会立即恢复为 Harness 原生工具调用列表。

### 自定义 CSS

在插件设置中提供多行 CSS 编辑器。内容修改后立即应用于整个 Harness 页面，并自动保存。

```css
button[aria-label="发送消息"] {
  border-radius: 999px;
  background: #7c3aed;
  color: white;
}
```

清空编辑器即可移除自定义样式。自定义 CSS 作用于整个页面，错误或过于宽泛的选择器可能影响 Harness 原有布局。

## 环境要求

- Node.js `^22.19.0` 或 `>=24.0.0`
- pnpm `11.19.0`
- DeepSeek Harness Web profile
- 当前开发依赖以 DeepSeek Harness `0.1.0-rc.6` 客户端包为基准

## 在线安装

```bash
dsh plugin --profile web add "dsh-ui-enhance"
```

## 本地安装

克隆或下载本项目后，在项目根目录执行：

```bash
pnpm install
pnpm build
dsh plugin --profile web add .
```

然后启动 Harness Web profile：

```bash
dsh --profile web
```


如果 profile 已安装本插件，修改源码后重新构建并重启 Harness 即可加载最新客户端包：

```bash
pnpm build
```

卸载插件：

```bash
dsh plugin --profile web remove dsh-ui-enhance
```

> `dsh plugin` 会将后续参数转发给 pnpm，并在成功后自动更新 profile 的 bundle 配置。

## 开发

安装依赖：

```bash
pnpm install
```

运行自动化测试：

```bash
pnpm test
```

运行 TypeScript 类型检查：

```bash
pnpm typecheck
```

生成类型声明及客户端、Host 构建产物：

```bash
pnpm build
```

构建结果位于 `lib/`，该目录不会提交到 Git。

## 项目结构

```text
.
├─ cordis.patch.yml                 # 插件 bundle 配置层
├─ src/
│  ├─ index.ts                      # Host 设置 schema 注册
│  ├─ settings-contract.ts          # Host 与客户端共享的设置契约
│  └─ client/
│     ├─ index.ts                   # 客户端入口与 Harness slot 注册
│     ├─ MicrophoneButton.tsx       # 语音输入按钮
│     ├─ speech-recognition.ts      # Web Speech API 类型与适配
│     ├─ CustomCssCard.tsx          # Dsh UI 增强设置卡
│     ├─ custom-css-controller.ts   # CSS 即时预览与持久化
│     ├─ tool-call-group-controller.ts
│     │                              # 连续工具调用分组与恢复
│     └─ tool-call-collapse-setting.ts
│                                    # 折叠开关同步与持久化
├─ tsdown.config.ts                 # Host/客户端打包配置
└─ vitest.config.ts                 # 测试配置
```

## 实现说明

- Host 端注册 `ui-enhance` 设置命名空间，当前包含 `customCss` 和 `toolCallCollapse`。
- 客户端通过 Harness slot 注入麦克风按钮和插件设置卡。
- 工具调用分组只控制原生行的显隐，不替换 Harness 的工具渲染器，因此运行状态、错误状态、文件链接及详情能力会被保留。
- 插件卸载或关闭折叠功能时，会移除插件生成的汇总卡并恢复全部原生工具行。
- `refs/` 仅用于本地参考 DeepSeek Harness 源码，已由 `.gitignore` 排除。

## 浏览器兼容性

自定义 CSS 和工具调用折叠使用标准 DOM API，可运行于 Harness 支持的现代浏览器。

语音输入依赖浏览器提供 `SpeechRecognition` 或 `webkitSpeechRecognition`。不支持该 API 的浏览器会禁用麦克风按钮，不影响其他功能。

## License

[MIT](./package.json)