dsh-code-ui

Readme

# dsh-code-ui

在 DeepSeek Harness（DSH）里的 **Cursor 风格 AI 代码编辑器**插件：文件树、多标签页编辑、语法高亮、引用/翻译给 AI。

它把 Cursor 那种「边看代码、边跟 AI 对话」的体验搬进 DSH：一个带活动栏、文件树、多标签页编辑器的代码工作区。**v1.2.0 起支持两种布局**：右侧停靠（code UI 固定占屏幕右侧、与聊天并排，默认布局）或悬浮窗口（可拖拽浮动窗口，内嵌 AI 输入框），插件卡片里可随时切换。

## 界面一览

**右侧停靠布局（默认布局）**——对话与 code UI 左右并排，边聊边看代码：

![右侧停靠布局：对话与 code UI 左右并排](https://github.com/soGoodayo/dsh-code-ui/raw/main/image/%E4%B8%8A%E4%B8%8B%E6%96%87%E4%B8%8EcodeUI%20%E5%B7%A6%E5%8F%B3%E5%B8%83%E5%B1%80.png)

**悬浮窗口布局**——可拖拽、可缩放的浮动编辑器窗口，内嵌 AI 输入框：

![悬浮窗口布局](https://github.com/soGoodayo/dsh-code-ui/raw/main/image/%E6%82%AC%E6%B5%AE%E5%B8%83%E5%B1%80.png)

**两种切换按钮（插件卡片「切换按钮」可选）**——点击在 code UI 与 dsh UI（DSH 原生界面）之间切换，与布局任意组合：

| 会话头按钮 | 悬浮模式条（默认，可拖动） |
| :---: | :---: |
| ![会话头 ⌨ code UI 按钮](https://github.com/soGoodayo/dsh-code-ui/raw/main/image/%E4%BC%9A%E8%AF%9D%E5%A4%B4%E6%8C%89%E9%92%AE.png) | ![悬浮模式条](https://github.com/soGoodayo/dsh-code-ui/raw/main/image/%E6%82%AC%E6%B5%AE%E6%8C%89%E9%92%AE.png) |

> 📍 **所有配置都在：设置 → 插件 → 插件列表 → dsh-code-ui 的配置卡片**——编辑器界面（右侧停靠 / 悬浮窗口 / 隐藏）、编辑器主题、语法配色、切换按钮、启用开关、检查更新，切换即时生效并持久化保存。

## 功能

- **双布局可选**：右侧停靠（默认布局，与聊天并排） / 悬浮窗口（可拖拽缩放），插件卡片切换、即时生效
- **切换按钮可选**：悬浮模式条（默认，可拖动） / 会话头 `⌨ code UI` 按钮，与布局任意组合
- **界面模式可持久化**：code UI / dsh UI（**默认隐藏**，不自动占屏，入口按钮随时唤回），所有入口切换均同步记忆
- **Cursor 风格工作区**：活动栏 + 文件树侧边栏 + 多标签页编辑器 + 状态栏
- **侧栏收起与调宽**：« 按钮 / 📁 三态 / 拖到最窄自动收起，» 把手展开，右缘拖拽调宽
- **停靠面板拖宽**：左缘手柄实时调整面板宽度，DSH 界面自动跟随
- **语法高亮**：highlight.js 11（193 种语言）替换自研 tokenizer——宿主路由懒加载不拖累启动，10 款语法配色可选（自动随明暗 / GitHub / Dracula / Monokai…），加载失败或桌面端自动回退内置轻量高亮
- **文件浏览与编辑**：展开目录、打开文件、直接编辑、`Ctrl+S` 保存写回磁盘；外部修改自动同步
- **选中代码右键**：
  - 📋 复制
  - 📥 粘贴到备注
  - 📝 添加备注
  - 🌐 翻译（创建翻译引用，交给 AI 翻译）
  - 🔗 引用给 AI
- **引用 chip**：引用后输入框上方显示 `文件名(起行-止行)` + ✕，删除引用
- **内嵌 AI 输入框**（悬浮布局）：直接输入、`Ctrl+Enter` 发送；发送时不粘贴引用正文，只附一行引用指针，内容由 AI 调用 `get_referenced_snippets` 工具读取
- **主题四态**：跟随 DSH（默认）/ 跟随系统 / 浅色 / 深色，插件卡片切换
- **以此文件夹为根**：文件浏览器里可选任意目录作为工作区根
- **根目录按会话隔离**：切换对话自动换根，各会话的手动根互不污染；新建对话（未发消息）也能立即定位其工作区
- **标签页右键菜单**：关闭 / 关闭其他 / 关闭右侧标签页 / 关闭已保存 / 关闭全部 / 复制路径；关闭未保存文件前确认（保存并关闭 / 不保存 / 取消，保存失败者保留打开）
- **检查更新 / 一键更新**：设置 → 插件 → 插件列表 → dsh-code-ui 的配置卡片，支持在线检查 npm 新版本并一键更新；未发布/开发期可填本地 `.tgz` 路径安装（pnpm 流式进度展示，失败自动归类给出建议，完成后提示重启 DSH 生效）

## 安装

通过 `dsh plugin` 一键安装（已声明 `dsh.bundle`）：

```bash
dsh plugin --profile web add dsh-code-ui
```

安装完成后重启 DSH，编辑器**默认隐藏**（dsh UI，不自动占屏）；页面顶部出现可拖动的**悬浮模式条**（默认切换按钮），点 `code UI` 即可打开编辑器——默认布局为右侧停靠、默认根目录为**当前会话的工作区**，想换会话头 ⌨ 按钮或悬浮窗口，到 **设置 → 插件 → 插件列表 → dsh-code-ui** 的配置卡片里切换。

或手动安装：

```bash
cd $DSH_HOME/profiles          # Windows: %USERPROFILE%\.dsh\profiles
npm install dsh-code-ui
```

然后在 `cordis.patch.yml` 追加：

```yaml
- insert:
    - id: dsh-code-ui
      name: 'dsh-code-ui'
```

## 使用

1. 点顶部悬浮模式条的 `code UI` 打开编辑器（默认切换按钮；也可在插件卡片换成会话头 `⌨` 按钮），默认布局为右侧停靠
2. 在文件树/浏览器里打开文件
3. 选中代码右键 → 引用 / 翻译 / 备注 / 复制
4. 悬浮布局底部输入框直接发消息（`Ctrl+Enter` 发送）；停靠布局用 DSH 原生输入条，引用只以标签显示，正文由 AI 工具读取
5. 也可对 AI 说「读取我引用的代码」，AI 会调用 `get_referenced_snippets` 工具

## 目录结构

```
dsh-code-ui/
├── package.json      # 包声明（含 dsh.bundle.patch / dsh.client）
├── lib/
│   ├── index.js      # Host 端：connection.rpc 文件/引用/备注 RPC + get_referenced_snippets 工具
│   │                 #        + webServer exact 路由（下发 lib/vendor 静态资产）
│   ├── client.js     # Client 端：__ModuleLoader__ + 编辑器 UI（highlight.js 懒加载接线）
│   └── vendor/       # highlight.js 全量包 + 作用域化主题 CSS（脚本生成，勿手改）
├── tools/            # vendor 重建脚本：node tools/vendor-hljs.mjs [版本] [--themes-only]
└── cordis.patch.yml  # bundle 插接层
```

纯 JavaScript 手写实现，无需构建，可直接 `npm publish`。

## 实现说明

- **语法高亮**：`lib/vendor/` 下为 highlight.js 全量包（core + 193 语言）与作用域化主题 CSS，由 `tools/vendor-hljs.mjs` 从 CDN 生成；宿主经 `webServer` 注册两个 exact 路由下发，客户端首次需要高亮时以 `<script>`/`<link>` 懒加载（绝不内联进 client.js），失败或 Electron（`file://`）自动回退内置轻量 tokenizer；重高亮带 ~60ms 防抖与 512KB 大文件降级。
- **Host↔Client RPC**：Host 通过 `connection.rpc.handle("/dsh-code-ui", handler)` 注册文件系统/引用/备注端点；Client 通过 `connection.rpc.call("/dsh-code-ui", endpoint, payload)` 调用。RPC 返回值遵循 DSH 的 `RpcResult` 协议（`{ ok: true, value }` / `{ ok: false, error }`）。
- **模型工具**：注册 `get_referenced_snippets`，让 AI 读取用户标记的代码片段。
- **Client UI**：`window.__ModuleLoader__.load({ id, factory })` 注册，React 通过 `require("react")` 获取，slot 通过 `ctx.get("slots")` 注册（`shell.overlay`），样式用 `--dsw-alias-*` 主题变量。

## 二次开发

- `lib/index.js`：改文件读写、引用/备注存储、或新增 RPC 端点（在 `connection.rpc.handle` 的 handler 里加 `if (endpoint === ...)`）
- `lib/client.js`：改编辑器 UI 布局、配色（`styles` 模板串里的 CSS）、或新增右键菜单项
- 引用/备注数据存模块内存（运行期有效，重启清空）

## 更新日志

> 约定：每次版本升级在本节顶部追加一行（时间 | 版本 | 修复/新增内容）。

| 时间 | 版本 | 修复 / 新增 |
| --- | --- | --- |
| 2026-09-08 | v1.4.0 | 里程碑：**语法高亮升级 highlight.js 11**（193 种语言，替换自研 tokenizer）。宿主 `webServer` exact 路由下发 `lib/vendor/` 全量包与主题 CSS，客户端首次高亮时懒加载、不拖累 SPA 启动；Electron（file://）/断网/路由缺失自动回退原 tokenizer 保底可用。插件卡片新增「语法配色」：自动（默认，随编辑器明暗 GitHub ↔ GitHub Dark）+ 10 款固定主题（GitHub / Dracula / Monokai / Nord / VS…），仅染 token 色、编辑器底色仍归「编辑器主题」管理，切换即时生效并持久化。性能：重高亮 ~60ms 防抖 + >512KB 大文件自动降级轻量高亮。`tools/vendor-hljs.mjs` 重建管线入库（支持 `--themes-only`、fetch 超时重试、Dracula 取官方源）。兼容性：适配 dsh 0.1.2+ 新版 settings 服务——不再 import 已删除的 `installSettingsSection`/`settingsNamespace` 具名导出（具名导出缺失会让宿主启动即退出），照 dshmarket 内联 `register`/`watch` 接线（服务 API 新旧一致），旧宿主 0.1.0-rc.7+ 同样可跑。交互优化：文件树选中态改为实心选中色 + 选中文字反白 + 左缘 2px 白色强调条——底色跟随宿主 `--dsw-alias-button-info-fill` 令牌（与 dshUI「对话/轨迹」页签同源，回退 #4176e6），宿主换肤自动同步；原层级灰在浅色主题下与侧栏底色仅差 5/255，选中几乎隐形。文件树根目录**按会话隔离**：宿主以 sessionId→root 映射记忆各会话的手动根（「以此文件夹为根」只影响当前会话，不再全局污染），切换会话即解析新会话的 cwd 或其记忆根——修复「新会话打开仍是旧会话地址」（原手动根为宿主级全局变量，且客户端跟随标志不持久化导致刷新后跟随失效且无提示）。未发消息的新会话也能解析根目录：会话创建时所选工作区路径已写入不可变 `SessionHeader.cwd`，经 `sessions` 服务可查（原仅查 `agents`，agent 要到首条消息后才存在）；重启后重开旧对话（agent 尚未恢复）时经 `sessionController.inspect` 读持久化 header 兜底。空新对话（blank 会话）根因：宿主对 blank 会话隐藏会话头 chrome（hideChrome），插件 InputBridge 所在 slot 不渲染、捕获不到新会话 id——新增常驻 SessionWatch（root 作用域 `shell.overlay` + 标准 props `useSessions`）监听当前选中会话，blank 会话（宿主侧 agent 在 session/create 时即建、cwd=所选工作区）也能即时换根。标签页**右键菜单**：关闭 / 关闭其他 / 关闭右侧标签页 / 关闭已保存 / 关闭全部 + 复制路径（无对象项自动置灰）；关闭波及未保存文件时弹确认框（保存并关闭 / 不保存 / 取消，多文件列清单、>5 折叠计数，保存失败者保留打开）——原标签 ✕ 按钮静默丢弃未保存改动，一并接入同一确认流程 |
| 2026-09-02 | v1.3.2 | 调整：**切换按钮默认改为悬浮模式条**（原会话头 ⌨ 按钮，已保存选择的用户不受影响）；**文件树默认根跟随当前会话的工作区目录**——打开编辑器即定位到当前对话的项目根，会话切换自动换根（有未保存文件时暂不跟随并提示，保存后点 ⟳ 即切换）；手动「以此文件夹为根」后不再自动跟随 |
| 2026-09-02 | v1.3.1 | 调整：安装后编辑器**默认隐藏**（dsh UI，新装不自动占屏，⌨ / 模式条随时唤回），布局默认仍为右侧停靠；配置卡片「编辑器界面」三态说明与 README 措辞同步。新增：一键更新 / 本地包更新成功后按钮文案临时变为「需重启 DSH 生效」（置灰防误点）；README 增加「界面一览」（双布局与两种切换按钮截图）并明确配置入口路径（设置 → 插件 → 插件列表 → dsh-code-ui） |
| 2026-09-02 | v1.3.0 | 新增：文件树右键操作（真实磁盘）。右键文件：打开 / 引用给 AI（整个文件）/ 复制路径 / 在资源管理器中显示 / 重命名 / 删除；右键文件夹：新建文件 / 新建文件夹 / 以此文件夹为根 / 刷新 / 复制路径 / 定位 / 重命名 / 删除（递归强确认）；空白区右键：根目录新建 / 刷新 / 更换根；新建重命名输入弹窗（Enter 确认）、危险操作确认弹窗、工作区根禁删；重命名自动同步标签页/缓冲/watcher，删除自动清理该路径下全部标签。引用体系升级：整文件引用只传绝对路径由 AI 自行读取；停靠布局下 DSH 原生输入条发送也自动附加引用指针（挂钩 submit，两布局统一）。配置卡片：「布局模式 × 界面模式」合并为三态「编辑器界面」（右侧停靠/悬浮窗口/隐藏 dsh UI，隐藏时记住布局）。打开文件弹窗：输入路径回车直接认定（文件夹=设为根 / 文件=打开）。提示条移至顶部居中、可拖拽自定位置（⠿ 把手）。右键菜单视口边界自适应、点击菜单项后自动关闭；⟳ 刷新不再折叠整棵树 |
| 2026-09-02 | v1.2.0 | 里程碑：双布局与全面可配置。新增右侧停靠布局（code UI 固定占右侧、DSH 界面推到左侧并排，Cursor 式；左缘拖拽实时调宽，壳层帧用 [data-slot=root] 语义属性定位 + 内联 margin-right 推挤）；插件卡片新增「布局模式」（右侧停靠=默认 / 悬浮窗口）、「界面模式」（code UI / dsh UI，状态持久化、所有入口同步记忆）、「切换按钮」（会话头 ⌨ 按钮=默认 / 悬浮模式条，与布局任意组合），全部即时生效 + 持久化；文件树侧栏可收起（« / 📁 三态 / 拖窄收起）+ » 展开把手 + 右缘拖宽；侧栏标题不折行；停靠面板去投影；界面文案更名（Code UI→code UI、原始风格-ui→dsh UI）；悬浮布局也获得侧栏收起/调宽能力 |
| 2026-09-02 | v1.2.0-beta.1 | 里程碑：右侧停靠模式（feature/native-layout 分支）--会话头「⌨ Code UI」开关按钮，Code UI 固定占右侧、DSH 界面推到左侧并排（Cursor 式布局）；左缘拖拽实时调宽；文件树侧栏可收起（« 按钮 / 📁 三态 / 拖到最窄松手收起）+ » 展开把手 + 右缘拖拽调宽；侧栏标题不折行；移除停靠面板投影。推挤采用 [data-slot=root] 语义属性 + 内联 margin-right，不依赖哈希类名 |
| 2026-09-01 | v1.1.10 | 调整：底部状态栏不再用反色按钮样式，改用输入框同款背景（bg-overlay）+ 次要文字色 + 顶部分隔线，深浅色模式下均与编辑器融为一体 |
| 2026-09-01 | v1.1.9 | 修复：反色按钮文字色随主题反转（浅色=黑底白字 / 深色=白底黑字）——选中模式标签、发送按钮、状态栏等此前文字硬编码白色，DSH 深色下 brand-primary 为近白导致白底白字不可见；语法高亮 token 色改为随主题两套配色（浅色背景不再看不清代码）；「跟随 DSH」模式下实时监听宿主外观切换 token 色 |
| 2026-09-01 | v1.1.8 | 修复：主题默认值改为「跟随 DSH」（恢复随宿主外观的原行为，避免系统浅色+DSH 深色时编辑器意外变浅色）；补上文件树/标签栏遗漏的 --dsw-specific-sidebar-fill 变量（修复"只有目录是深色"的混色）；主题选项变四态：跟随 DSH / 跟随系统 / 浅色 / 深色 |
| 2026-09-01 | v1.1.7 | 新增：编辑器主题三模式（浅色/深色/跟随系统）--卡片内切换、即时生效、局部换肤不影响 DSH 其他界面、跟随系统实时响应 OS 外观；仓库公开化清理并重建 git 历史（.git 曾被意外重置，代码无损） |
| 2026-08-31 | v1.1.6 | 新增：外部修改自动同步--host 端 fs.watch 监听已打开文件，编辑器 1 秒内自动刷新；有未保存修改时标 ⚡ 徽标手动加载；自写保存回声抑制 |
| 2026-08-31 | v1.1.5 | 新增：无会话时输入框给出明确提示（常驻警告行 + 置灰按钮点击弹原因 + Ctrl+Enter 兜底提示） |
| 2026-08-28 | v1.1.4 | 新增：卡片内编辑器启用/禁用开关，切换即时挂载/卸载（无需重启/刷新），状态持久化 |
| 2026-08-28 | v1.1.3 | 改进：引用/翻译统一标签制--翻译引用加 🌐 标签，引用不再把代码正文粘贴进消息，AI 经工具读取 |
| 2026-08-28 | v1.1.2 | 改进：插件配置卡片样式与宿主卡片（PluginCard/fields）逐条统一 |
| 2026-08-28 | v1.1.1 | 修复：插件配置卡片不显示--补 host 端 settings 命名空间注册 + client inject 边 |
| 2026-08-27 | v1.1.0 | 新增：检查更新 / 一键更新 / 本地包安装（pnpm 流式进度、失败诊断、防降级） |
| 2026-08-27 | v1.0.1 | 改进：标准化 npm 插件包结构（dsh.bundle 声明、可 `dsh plugin add` 安装） |
| 2026-08-26 | v1.0.0 | 初版：Cursor 风格工作区（文件树、多标签、语法高亮、引用/备注/翻译、内嵌 AI 输入框） |

## License

MIT