ghbhiee/dsh-plugin-mobile-shell

dsh-plugin-mobile-shell

为 DeepSeek Harness Web UI 提供窄视口适配：带汉堡按钮和遮罩的抽屉式侧边栏、滑动手势，以及带部署标识的浏览器标签页标题。

它取代了一组手动应用到 @deepseek-ai/dsh-client-ui-layout 编译产物的补丁——那种每次 npm i -g 之后都得重新打、而且上游构建一改哈希类名就会静默失效的补丁。

安装

尚未发布到 npm。构建产物 lib/ 已提交到仓库，因此可以直接从
GitHub 安装——无需下载，无需构建步骤：

dsh plugin --profile web add github:ghbhiee/dsh-plugin-mobile-shell

或者从本地克隆安装（以 link: 方式，因此本地重新构建会被自动采用）：

git clone https://github.com/ghbhiee/dsh-plugin-mobile-shell.git
dsh plugin --profile web add ./dsh-plugin-mobile-shell

同系列插件也以相同方式安装：dsh-plugin-workbench
和 dsh-plugin-cli-session。

开发

pnpm install
pnpm run check   # typecheck → vitest → tsdown build

由于 lib/ 已纳入版本管理（git 安装所提供的就是它），每次修改源码后都要重新构建并
提交。在同一次检出中，未变更源码的构建是字节级可复现的，因此 lib/ 下出现 diff 就
一定意味着真实变更——注意 CSS Module 的哈希值源自构建路径，所以请从本克隆目录构建，
而不要用 worktree。

配置

- id: mobile-shell
config:
narrowMaxWidth: 1440        # frame width at or below which the drawer takes over
documentTitle: 'WB · {host}' # '' leaves the shell's own session title alone

客户端入口永远看不到自己那一行的配置，因此浏览器端会通过一个小的宿主路由请求这些
配置；如果请求不到，就回退到默认值（1023 / DSH · {host}）。

功能

在低于配置的框架宽度（默认 1023px——即 shell 自身用于自动折叠侧边栏的阈值）时：

- 抽屉式侧边栏。 网格折叠为单列，侧边栏浮在对话之上而不是挤压它，左上角有
汉堡按钮，其后方有遮罩。
- 方向感知滑动。 右滑打开，左滑关闭。（它所取代的补丁在任一方向都会切换，
因此在抽屉关闭时左滑反而会打开它。）
- 点击分组会保持抽屉打开。 可展开的行带有 aria-expanded；叶子节点则没有，
点击叶子节点会关闭抽屉，符合导航之后的预期。

在任何宽度下：

- 标签页标题显示为 DSH · ， 这样一排标签页中就能区分多个部署。
它通过  上的 MutationObserver 固定，因此能在 shell 自身的会话标题投影
之下存活。

接入方式

一切都在插件空间内：

- 这些控件是一次 shell.overlay 注册——这个横跨整个框架的层正是为此而存在的。
- 行为驱动 ctx.layout.toggleSidebar()，即跨插件面板界面。
- 抽屉的几何样式是一个全局样式表，仅以稳定的 DOM 契约为键：[data-shell-overlay] 层（用于通过 :has() 识别框架）以及框架的 data-sidebar-collapsed 属性。任何地方都没有引用编译后的 CSS-Module 哈希类名，颜色来自 --dsw-alias- 令牌。

如果你要扩展这部分，有两件事值得了解：

- 打开时 data-sidebar-collapsed 是缺失的，而不是 "false" —— React 会丢弃值为 false 的 data- prop。应匹配 :not([data-sidebar-collapsed='true'])。
- 一个阈值，而不是两个。 抽屉的 CSS 以组件根据其测量结果设置的 data-mobile-shell-narrow 标记为键，而不是以 @media 查询为键 —— 媒体查询会成为阈值的第二份副本，一旦配置就会悄然产生分歧。
- 窄度是通过 ResizeObserver 从框架盒子测量的，而不是通过 matchMedia。这与 shell 的判定方式一致，而且媒体查询监听器可能会漏掉那些从不触发 change 的视口变化（devtools 模拟、窗格调整大小），这会让汉堡按钮滞留在宽布局上。

测试

pnpm test（26 个测试）覆盖了开发期间被破坏的两个契约 —— 打开时属性缺失以及基于框架测量的窄度 —— 外加抽屉控件、叶子与分组的关闭、滑动方向，以及客户端 bundle 的可复现性。这张网是测量出来的，不是假设出来的：还原“打开时属性缺失”的修复会让 6 个测试变红，还原框架测量会让 10 个变红，取消 CSS 类映射的排序会让 2 个变红。

已知限制

- “回收垂直内边距”的调整被放弃了。 它来自的补丁针对的是编译后的 CSS-Module 类名（.wSkVaW_header），而当前构建有五个变体 —— 它会在下一个上游版本中静默失败。取而代之的是，中间列获得顶部内边距，这样汉堡按钮就不会覆盖内容。
- 滑动监听整个文档， 因此在可滚动区域内的水平拖动仍然可以移动抽屉。