宽屏对话 FraYoshi/dsh-widechat

@furayoshi/dsh-widechat

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

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

从 npmjs 安装

sh
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 安装 sh
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat

github:/ 是 pnpm 对 https://github.com//.git 的简写。要固定到特定版本： sh 特定标签
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 加载器就会在下次启动时找到它。

从本地路径或克隆安装

如果你本地有源码（或者想在其上进行修改），可以直接安装： sh
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 之后，需要重新链接该包： sh 在 profile 目录内执行：
rm -rf node_modules/@furayoshi && pnpm install

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

更新、移除、验证

由于 dsh plugin 只是一个 pnpm 转发器，你可以使用任何 pnpm 子命令。在 profile 目录内执行： sh 更新到最新版本
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 目录内执行： sh
dsh web --dump-config | grep -i "widechat\|furayoshi"
你应该会看到主机行注册在新的包名之下。

如果你想编辑源码，构建命令是 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; }
.bOPqQW_root { justify-content: !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、.bOPqQW_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
- .bOPqQW_root — 会话统计行（我们设置其 justify-content）— 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 重构了编辑器），请注释掉 src/client/WideChatRow.tsx 中匹配的规则和匹配的滑块，并更新本 README 的“注意事项”和“工作原理”部分以保持一致。
2. 运行 npm run build 以重新构建宿主和客户端 bundle。
3. 在 package.json 中提升版本号（面向用户的更改：单个哈希修复为补丁版本，类集合变更为次要版本，API 变更为主要版本）。

许可证

MIT — 参见 LICENSE。