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-compact

2. 在 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(更高版本未验证)。

License

MIT