FraYoshi/dsh-widechat

@furayoshi/dsh-widechat

一个 DeepSeek Harness 插件，可将对话列加宽至超出默认上限，将会话统计条右对齐，限制用户消息气泡宽度，并限制输入框内部滚动区域，使长输入不会遮挡上方的对话内容。在“常规”页面新增一行设置，让你无需重启 DSH 即可调整以上所有选项。

兼容性
| DSH 版本     | 最低版本    |
| :--- | :--- |
| 0.1.2-rc.1 | 0.8       |
| 0.1.1-rc.1 |  是标准的安装方式：它会运行 pnpm add ，然后当（且仅当）已安装的 package.json 声明了 dsh.bundle.patch 时，自动将该包追加到 bundles —— 本包正是如此。

从 npmjs 安装

dsh plugin --profile web add @furayoshi/dsh-widechat
dsh plugin add 命令会运行 pnpm add 将包安装到 ~/.dsh/profiles/web/node_modules/，然后协调 ~/.dsh/profiles/web/package.json 中的 dsh.profile.bundles 数组，将新的 bundle 包含进去。用户无需手动编辑 package.json。

从 GitHub URL 安装

dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat

github:/ 是 pnpm 对 https://github.com//.git 的简写。要固定特定版本：

特定标签
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#v0.8.0

分支（例如 main）
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#main

特定提交 SHA（用于可复现安装）
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#a1b2c3d4

pnpm 会克隆仓库，从克隆的 package.json 运行 npm pack 来构建 tarball（因此 files: ["lib", "cordis.patch.yml", ...] 列表很重要），然后安装它。只要 cordis.patch.yml 在 files 中，DSH 的 bundle 加载器就会在下次启动时找到它。

从本地路径或克隆安装

如果你本地有源代码（或者想对其进行修改），可以直接安装：

dsh plugin --profile web add @furayoshi/dsh-widechat@file:/home//work/dsh-widechat

file: 是 pnpm 从本地路径安装的方式。pnpm 会将包的 files 链接到 profile 的 node_modules/@furayoshi/dsh-widechat/ 中。profile 的 pnpm-workspace.yaml 设置了 nodeLinker: hoisted，因此链接的文件是副本，而不是符号链接——这意味着重新构建源代码不会自动反映到已安装的副本中。在编辑 src/ 并运行 npm run build:client 之后，重新链接该包：

在 profile 目录内：
rm -rf node_modules/@furayoshi && pnpm install

然后重启 DSH 以加载新的 bundle。（该插件的未来版本可能会提供一个监视并重新构建的开发脚本；目前手动 rm 就是工作流程。）

更新、移除、验证

因为 dsh plugin 只是 pnpm 的转发器，你可以使用任何 pnpm 子命令。在 profile 目录内：

更新到最新版本
pnpm update @furayoshi/dsh-widechat

编辑源代码后重新链接
rm -rf node_modules/@furayoshi && pnpm install

移除插件（同时会从 dsh.profile.bundles 中删除对应条目）
dsh plugin --profile web remove @furayoshi/dsh-widechat

验证安装

打开 Web UI，点击设置齿轮，进入 General——你应该会看到一行 "Wide chat"，带有四个控件。拖动滑块，聊天栏 / 用户气泡 / 输入框会即时更新，无需重新加载。

要验证 DSH 确实加载了该 bundle，请在 profile 目录内运行：

dsh web --dump-config | grep -i "widechat\|furayoshi"

你应该会看到 host 行以新包名注册。
如果你想编辑源码，构建命令是 npm run build（它会为宿主库调用 tsc，为浏览器打包调用 tsx scripts/build-client.ts）。lib/ 目录是发布产物；src/ 目录是源码。

工作原理

该插件由两部分组成：

- 宿主端（lib/index.js）通过 ctx.settings.register("dsh-widechat", schema) 在宿主 settings 服务上注册设置命名空间 dsh-widechat，并使用 z.object schema（chatGutterPct、statsAlign、userBubblePct、composerMaxHeightPct）。schema 的边界与滑块范围完全一致。
- 客户端（lib/client/index.js）将一个 SettingsScope 绑定到该命名空间，在每次作用域变化时重新注入一小段 CSS 覆盖，并在 settings.general.item 插槽中注册一行。

CSS 覆盖刻意保持最小化——它只涉及三处，每个设置对应一处（哈希值截至 DSH 0.1.2-rc.1；列、气泡和统计的哈希位于 dsh-client-ui-chat，其余位于 dsh-client-ui-conversation）：
css
:root, .wSkVaW_root, [data-phase] {
--dsh-chat-content-width:        calc(100% - 2 × %) !important;
--dsh-composer-card-max-width:   calc(100% - 2 × %) !important;
}
.Sixlwa_userStack { max-width: % !important; }
.uV2eYG_scroll   {
min-height: 52px !important;                                  /* 下限，见下文 /
max-height: calc(vh - 64px) !important; / 文本域的上限 */
}
.uV2eYG_hero .uV2eYG_scroll { max-height: calc(vh - 132px) !important; }
.-NDN2W_root     { text-align:  !important; }

chatGutterPct 和 userBubblePct 是相对于单元格的百分比；composerMaxHeightPct 是相对于视口的百分比。当侧边栏折叠为窄栏时（从 280px 变为 56px），单元格会变大，因此列和气泡也随之变大——而边距保持相同的百分比。相比之下，输入框的上限是相对于视口的绝对值，因此无论侧边栏状态如何，上方的对话始终可见。

输入框卡片本身没有 max-height，也没有 overflow: hidden 覆盖。卡片会自然增长，以容纳其内部滚动区域（上方已设上限）加上卡片的装饰部分（附件行、触发行、内边距、间隙）。早期版本确实在卡片上强制设置了 max-height: vh; overflow: hidden;——但弹出菜单（模型选择器、权限预设等）通过 bottom: calc(100% + 8px) 从卡片内的触发行向上展开，而卡片的 overflow: hidden 会裁剪掉任何超出卡片顶部的菜单部分。当卡片可以自由溢出时，菜单会向上延伸到卡片之外的对话区域，从而完全可见。输入框上方的对话滚动区域会收缩，为更高的卡片腾出空间。
.uV2eYG_scroll 上的 min-height: 52px 与已发布的 hero 变体的镜像下限保持一致。如果没有它，在视口较小且上限较低的情况下，滚动区域会收缩到约 28 px，其下方的触发行最终会在视觉上与输入区域重叠。52 px 的下限在这种情况下能保持 textarea 可用；低于该值时，滑块值对该上限不再起作用（滚动区域保持在 52 px，不会变得更小）。

DSH 已发布的规则保持不变。该列仍然是 width: 100%、max-width: var(--dsh-chat-content-width)、margin: 0 auto。切换、滚动、调整大小——全部保持 DSH 默认行为。该插件只更改变量的值（以及 composer 内部滚动区域的一些上限），这些变量 DSH 的 CSS 已经会读取。

配置

这四个设置位于 dsh-widechat 设置命名空间中。如果绕过 npm 安装流程，也可以直接在用户的设置文档中编辑它们（基于文件的设置文档位于 ~/.dsh/settings.yaml；规范字段名和边界请参见 src/index.ts 中的宿主端 schema）。

| 字段 | 类型 | 默认值 | 范围 / 取值 | 参考基准 |
|---|---|---|---|---|
| chatGutterPct | number | 1 | 0–10（会被钳制；整数） | 单元格宽度 |
| statsAlign | string | "right" | "left"、"center"、"right" | — |
| userBubblePct | number | 75 | 30–100（会被钳制；整数） | 聊天列 |
| composerMaxHeightPct | number | 50 | 20–80（会被钳制；整数） | 视口 |

滑块值是应用于该行参考基准的百分比。chatGutterPct 允许取 0（完全没有边距），userBubblePct 允许取 100（你的气泡填满整列）。composerMaxHeightPct 取 0 会完全裁剪掉 composer；滑块从 20 开始以保持其可用。

无效值会被丢弃并回退到默认值，同时会记录一条带有违规字段名的 console.warn。

注意事项

本插件会覆盖内部 CSS-module 类哈希

.wSkVaW_root、.EvIC1a_column、.uV2eYG_card、.uV2eYG_scroll、.Sixlwa_userStack、.-NDN2W_root 是来自 DSH UI 包的 CSS-Modules 生成的类名——自 0.1.2 起，根元素和 composer 的哈希来自 @deepseek-ai/dsh-client-ui-conversation，而列、气泡和统计信息的哈希来自新的 @deepseek-ai/dsh-client-ui-chat。它们的哈希（下划线之后的部分）在所属包每次重新构建时都会被重新计算。因此，这些包的任何一次发布都可能悄无声息地破坏本插件——具体来说，如果读取该变量或具有匹配类名的已发布规则形态发生变化，我们的覆盖就不再能作用到它。

升级 DSH 后，请检查聊天列是否变宽、用户气泡是否仍以配置的宽度右对齐、composer 的内部滚动区域是否限制在配置的高度（且永远不会小于 52 px），以及统计信息行是否仍然对齐。如果其中任何一项出现回归，说明上游 CSS-module 哈希发生了变化；请参阅下方的“更新”。

滑块优先于 DSH 的拖拽调整大小（0.1.2+）
DSH 0.1.2 在聊天列上添加了拖拽手柄，该手柄会将宽度持久化到 localStorage（dsh.conversation.contentWidth）中，并以 --dsh-chat-user-width 的形式内联写入。本插件对 --dsh-chat-content-width 的 !important 覆盖优先于该内联值，因此边距滑块始终是唯一事实来源，在插件安装期间拖拽手柄实际上是无效操作。

chatGutterPct 是相对于单元格解释的，而不是相对于视口

DSH 的聊天列宽度是其所在单元格的 width: 100%。插件的上限是 100% - 2 × chatGutterPct%，其中百分比是相对于单元格的。因此 chatGutterPct: 1 表示“在单元格两侧各留出 1% 作为边距”，而不是视口的 1%。当侧边栏打开时，单元格较小，因此边距的绝对像素值也较小。当侧边栏关闭时，单元格更宽，因此边距的像素值更大，但百分比仍然相同。这是 DSH 的默认行为——有意保留，以便在切换侧边栏时列能够平滑重排。

composerMaxHeightPct 是相对于视口解释的，而不是相对于单元格

与其他两个百分比不同，输入框的上限是 composerMaxHeightPct × 1vh。无论侧边栏状态如何，视口都是恒定的，因此切换侧边栏时该上限不会改变。这是有意为之：该上限的存在是为了保持对话可见，而这与视口相关。

cordis.patch.yml 的用途

该包附带了一个 cordis.patch.yml（位于 files: ["lib", "cordis.patch.yml", "README.md", "LICENSE"] 中），它向 DSH 的宿主组合中插入一行宿主记录。该行的 apply() 就是 src/index.ts 中注册 dsh-widechat 设置命名空间的函数。如果没有这个补丁，宿主根本不知道插件的存在，命名空间永远不会被注册，客户端侧的 bind() 调用将解析到一个只读作用域。如果你 fork 了这个插件并重命名了命名空间，请更新补丁中的 id 以保持一致。

更新

当上游哈希值发生变化时，修复工作是机械性的，但在 DSH 暴露用于布局覆盖的稳定公共 API 之前是不可避免的。该插件针对六个 CSS 模块类哈希（截至 DSH 0.1.2-rc.1）：

- .wSkVaW_root — 对话根节点（定义 chat-content-width 变量）— dsh-client-ui-conversation
- .EvIC1a_column — 聊天列（将该变量读取为 max-width）— dsh-client-ui-chat
- .uV2eYG_card — 输入框卡片（无覆盖——原因见“工作原理”）— dsh-client-ui-conversation
- .uV2eYG_scroll — 输入框内部 textarea 的滚动区域（我们限制其 max-height；将其下限设为 52px，以便触发行保持在输入区域下方）— dsh-client-ui-conversation
- .Sixlwa_userStack — 用户消息气泡堆栈（我们设置其 max-width）— dsh-client-ui-chat
- .-NDN2W_root — 会话统计行（我们设置其 text-align）— dsh-client-ui-chat
哈希位于 dsh-client-ui-conversation/lib/client.js 和 dsh-client-ui-chat/lib/client.js（在配置文件的 node_modules 中）。自 0.1.2 起，CSS 以内联形式作为 const css$N = "..." 字符串存在，因此请搜索你正在覆盖的规则（例如 chat-content-width），并从选择器中读出类哈希。更新方法：

1. 在两个 client.js 文件中搜索上述六个名称中的每一个。如果某个名称已更改（下划线之后的部分），请更新 src/client/css.ts 中对应的名称。如果某个名称已被移除（例如 DSH 重构了 composer），请注释掉 src/client/WideChatRow.tsx 中匹配的规则和匹配的滑块，并更新本 README 的“注意事项”和“工作原理”部分以保持一致。
2. 运行 npm run build 以重新构建宿主和客户端 bundle。
3. 在 package.json 中提升版本号（面向用户的变更：单哈希修复为补丁版本，类集合变更为次版本，API 变更为主版本）。

许可证

MIT — 参见 LICENSE。