dsh-ui-topbar-compact
DSH web UI 紧凑顶栏插件:顶栏变窄、单行布局 + 药丸视图切换 + 淡分割线。
A DSH web UI client plugin: a compact, one-line top bar with a pill-style view switcher and subtler divider.
给 DeepSeek Harness Web UI 的一个纯样式插件,重新设计会话顶栏(conversation.session.header 槽位):
| 调整 | 原版 | 本插件 |
|---|---|---|
| 布局 | 标题行 + 下方独立的标签行(约 75px 高) | 单行:会话标题 \| 对话/轨迹药丸 \| Session log 下载,约 44px |
| 视图切换 | 下划线标签(Tab) | 药丸开关(圆角胶囊,选中段实心高亮),位于 Session log 下载按钮左侧 |
| 分割线 | 强色 border-l2 发丝线 |
极淡的 border-l1 混色,不再抢注意力 |
效果展示 / Showcase
| 原生 (Native) | 安装插件后 (With plugin) | |
|---|---|---|
| 亮色 Light |  |
 |
| 暗色 Dark |  |
 |
单行布局示意:
┌─────────────────────────────────────────────────────────────┐
│ Workspace / Session 标题 … (对话 | 轨迹) [Session log] │
└─────────────────────────────────────────────────────────────┘安装
DSH 通过 npm 包名 + profile 的 patch 层挂载插件,两步:
1. 把包装进你的 web profile
dsh plugin --profile web add dsh-ui-topbar-compact2. 在 profile 的 patch 层挂一行
编辑 ~/.dsh/profiles/web/cordis.patch.yml,追加:
- insert:
- id: ui-topbar
name: 'dsh-ui-topbar-compact'重启 dsh web 即可生效。
卸载
# 1. 从 cordis.patch.yml 中删掉上面的 insert 行
# 2. 移除包
dsh plugin --profile web remove dsh-ui-topbar-compact设计要点与兼容性
- 稳定锚点:所有选择器锚定在槽位系统的
data-slot属性上(conversation.session.header/conversation.session.header.utilities),不依赖官方包的 CSS Module 哈希类名,官方包重建不破坏本插件; - 主题友好:颜色全部使用
--dsw-alias-*主题 token,亮/暗模式与自定义主题自动适配; - 无依赖:纯 ESM,无运行时依赖;
package.json的dsh.client声明platform: "web",宿主侧无操作; - 与其他插件共存:只注入 CSS,不碰 DOM/状态/槽位注册。注册到
conversation.view的新视图标签会自动获得药丸样式;注册到header.utilities的按钮会排在药丸右侧; - 已知限制:依赖两个结构假设——标题行是 header 的第一个子元素、标签行是第二个。若 DSH 升级改变了这两处结构,或另一个 CSS 插件接管了
conversation.session.header槽位,本插件会静默降级(不生效或错位),而不会报错。
兼容版本:DSH 0.1.0-rc.6(更高版本未验证)。