dsh-ui-tweaks

DeepSeek Harness（DSH）Web UI 插件：在设置面板中实时调整对话界面——字体大小、表格样式、对话框宽度、可开关的对话时间线，以及输入框上方的 GitBar（git 状态胶囊：分支 / 差异 / 提交）。

预览

对话时间线：右侧竖轨，悬停展开消息预览、点击跳转、随滚动高亮当前位置，自动避让右侧边栏	表格样式：Claude Desktop 浅灰圆角卡片风格
对话框宽度：消息列、输入框、统计栏同步变宽	设置面板：字体大小 / 表格样式 / 对话框宽度 / 时间线 / Git 状态栏
GitBar：输入框上方的 git 状态胶囊（分支 / 差异 / 提交），支持分支切换、删除、推送到远程，差异面板与提交弹窗

功能

• 消息字体大小（px）：直接输入数字（10–32），作用于消息正文、标题、表格与代码。
• 表格样式：可选 默认 或 Claude Desktop 风格（浅灰圆角单元格卡片、单元格间有间隙、无边框、单元格与行内代码同底色、表头不加粗）。
• 对话框宽度（px）：直接输入数字（600–1600）；消息列、输入框、输入框下方的统计栏（轮数/步数/耗时/tok/s）三者同步变宽。
• 对话时间线（可开关，默认关闭）：在消息区右侧显示细竖导航轨——每条用户消息一根指示线，悬停展开面板预览消息、随滚动高亮当前位置、点击平滑跳转到对应消息（自动加载更早历史）。浅色/深色模式都正常显示，且始终贴在消息区右侧：即使安装了右侧边栏（如 dsh-better-sidebar）并展开，时间线也会自动避让、不会与侧边栏重叠。会话中用户消息少于 2 条时自动隐藏。
• GitBar（默认开启，可在设置中关闭）：当会话的工作目录是一个 git 仓库时，在输入框上方显示三颗 DSH 原生风格的紧凑胶囊（与输入框同宽、随“对话框宽度”设置联动）：
  • 分支胶囊（左）：当前分支名（有未提交改动时带橙色圆点）；点击向上弹出分支面板——本地 / 远程分支列表（点击即 git switch），底部可新建分支（git switch -c 并自动切换）。
  • 差异胶囊（右）：+N −M · K 个文件；点击从右侧滑出差异面板：文件列表 + 逐文件 diff（默认只显示有差异的 hunk，右上可切“完整文件”视图）。面板支持拖动拉伸宽度，展开时自动把对话区往左挤（不影响右侧时间线），底部可直接提交 / 提交并推送。
  • commit message 胶囊（右）：点击弹出提交对话框——输入说明（留空点提交会自动生成，LLM 优先、失败回退启发式规则）、待提交文件清单（只显示文件与 ±行数，点击文件即打开差异面板定位到该文件），按钮：取消 / ✨ 生成 / 提交 / 提交并推送（新分支自动 -u 设上游）。
  • 非 git 仓库或无会话 cwd 时整行自动隐藏；所有操作走服务端 execFile('git', …)（无 shell、带超时）。

所有修改即时生效，无需刷新。同一份配置也可以直接在设置文档里手改：

ui-tweaks:
  fontSize: 16
  tableStyle: claude
  dialogWidth: 880
  timelineEnabled: true   # 默认 false（关闭），设为 true 开启
  gitBarEnabled: false    # 默认 true（开启），设为 false 关闭 GitBar
  # suggestModel: 'provider:model'   # 可选：指定生成提交说明的模型

设置入口：设置 → 界面调整。

安装

# 方式一：从 npm 安装（推荐，预构建产物，一条命令装好）
npx -y @deepseek-ai/dsh plugin --profile web add dsh-ui-tweaks

# 方式二：从 GitHub 仓库安装（源码，会运行自包含的 prepare 构建）
npx -y @deepseek-ai/dsh plugin --profile web add github:wlj521/dsh-ui-tweaks

从 GitHub 安装时，pnpm 可能要求批准该包的构建脚本——把提示的包键加进该 profile 的 pnpm-workspace.yaml：

allowBuilds:
  dsh-ui-tweaks: true

然后重新执行 add。安装完成后重启一次 dsh web（bundle 插件在进程启动时扫描）。

若 pnpm 报符号链接/hoist 相关错误，可在 profile 的 pnpm-workspace.yaml 中设置 nodeLinker: hoisted。

开发

pnpm install
pnpm build          # tsc（服务端）+ tsc（客户端）+ 打包 lib/client.js
pnpm typecheck

本地加载（覆盖层）或作为 bundle 安装：

npx -y @deepseek-ai/dsh web --patch ./cordis.patch.yml   # 开发覆盖层
npx -y @deepseek-ai/dsh plugin --profile web add .        # 从本目录作为 bundle 安装

工作原理

• 服务端（src/index.ts）：注册 ui-tweaks 设置命名空间，并挂载同源路由 /_dsh/ui-tweaks/settings——rc.6 的 Web 设置 RPC 只暴露固定白名单命名空间，因此自定义路由是插件拥有配置页的方式。另在 src/timeline.ts 注册 dshChatTimeline 会话投影单元，持久化枚举用户消息。
• Git 后端（src/git.ts + src/git-web.ts）：通过 ctx.get('sessions')（可选服务）解析会话 header 的 cwd 作为“当前项目”，用 child_process.execFile('git', …)（无 shell、cwd 固定、超时 + 中止传播）执行只读/写操作；同源路由 /_dsh/ui-tweaks/git/* 提供 status / branches / diff（hunk 或完整文件，含绝对行号）/ suggest / commit / push / checkout / create。提交说明生成优先走 ctx.get('llm')（可选服务，收集 text-delta 流），不可用时回退到启发式规则（按文件类型推断 conventional commit 类型与 scope）。
• 浏览器端（src/client/index.tsx）：读写该路由、渲染设置页，并通过运行时 <style> 元素实时应用样式，覆盖稳定的 DSH 锚点（[data-chat-flow]、[data-composer-card]、body 上的 markdown 字体 token、[data-slot="conversation.chat.node"] 内的 markdown 表格）。
• 时间线（src/client/timeline.tsx）：挂在 conversation.input.dock 插槽、portal 到 body。数据按速度优先：会话投影 → 已加载聊天节点 → 后台 loadOlder。位置通过测量 [data-conversation-scroll]（消息区）右缘与垂直中线动态锚定，因此 DSH 原生列布局与右侧边栏（#root 的 margin-right 布局推挤）变化时都会自动跟随；颜色全部使用 DSH 主题变量（--dsw-alias-*），浅色/深色模式均正常。
• GitBar（src/client/gitbar.tsx）：挂在同一个 conversation.input.dock 插槽。胶囊行以 width:100% + max-width 与 composer 卡片同宽（buildRuntimeCss 在“对话框宽度”变化时同步覆盖该宽度，实现联动）；差异面板展开时通过 #root { margin-right } 把对话区往左挤，时间线 rail（锚定消息区右缘）因此不被遮挡。

协议

MIT