中文 | English

参考 microsoft/vscode 的设计，为 DeepSeek Harness（DSH）Web GUI 增加：

• 右侧常驻 Explorer 文件树（VS Code 官方 seti 文件类型图标、展开/折叠、新建文件/文件夹、刷新、全部折叠、可拖宽/折叠面板）
• 中间区域点击文件即切换为代码编辑器（monaco-editor 0.52.2 —— VS Code 编辑器核心；多标签页、语法高亮、minimap、Ctrl+S、脏标记、保存冲突"重新加载/强制覆盖"）
• Markdown 渲染预览：打开 .md 文件后标签行出现"预览"按钮，一键切换渲染视图（标题/列表/表格/代码块/引用/任务清单/链接/图片），随编辑实时刷新；内置自包含渲染器，无额外依赖
• 编辑器占满整列（编辑时下方输入框/停靠条自动隐藏，"返回会话"或顶部"对话"标签切回）
• 安全边界：所有文件操作经 DSH 的 ctx.fs 服务，双重围栏在工作区沙箱内，越界拒绝；写入走版本号 CAS 防覆盖

┌─────────┬──────────────────────────┬────────────┐
│ 左侧边栏 │  中间：会话 ⇄ 文件内容     │ 右侧：文件树 │
│ （不变） │  点文件 → Monaco 编辑器    │ Explorer   │
└─────────┴──────────────────────────┴────────────┘

架构

三处补丁（patches/，对 DSH 0.1.0-rc.6 生成）：

1. ui-layout.patch — AppFrame 新增第 4 条网格轨道 explorer（240–420px、默认 300）+ explorer slot + 拖宽手柄 + toggleExplorer 服务方法
2. ui-conversation.patch — 暴露 window.__DSH_CONV_BRIDGE__[sessionId].setView，点击文件自动切换中间视图
3. ui-sidebar.patch — 页面加载即挂载 UI bundle（刷新自愈）

安装

前置：Node.js ≥ 18、git、可访问 npm registry 的网络。

git clone <this-repo> dsh-workbench
cd dsh-workbench

# 1. 下载 monaco 资产并生成 seti 图标（约 13MB）
npm run setup:assets

# 2. 安装到 DSH profile（下次 `dsh web` 重启后随组合加载 /wb 路由与客户端引导）
node scripts/install-profile.mjs --profile web

# 3. 给当前 DSH 检出打三栏布局补丁（不改则只有浮窗/无右栏，见下方"补丁"说明）
node scripts/apply-patches.mjs --checkout <checkout-root>
# 不传 --checkout 时自动探测 ~/.npm-cache/_npx 下的检出

然后重启 dsh web 并 Ctrl+F5 硬刷新页面。

检出根目录：包含 node_modules/@deepseek-ai/ 的目录（npx 安装通常位于
~/.npm-cache/_npx/<hash>/；本机示例 C:\Users\<you>\.npm-cache\_npx\1e7f6d9597241db0）。

补丁（为什么需要）

DSH 的客户端壳不提供"常驻右栏 + 点击文件切换中间视图"的公开扩展点：

• 右栏需要布局壳新增网格轨道（explorer slot）——由 ui-layout.patch 完成
• 中间视图环（conversation.view）的活动视图切换是私有状态——由 ui-conversation.patch 暴露桥接

补丁直接修改检出的客户端 bundle（DSH 按请求实时读取、cache-control: no-cache，硬刷新即生效，无需构建）。补丁基于 0.1.0-rc.6 生成；DSH 升级后如不能应用，请对照新 bundle 重新生成（git diff --no-index <原始> <补丁后>）。

使用

1. 硬刷新页面 → 右栏出现文件树
2. 点目录展开、点文件 → 中间自动切换为 Monaco 编辑器，输入框隐藏
3. Ctrl+S 保存；顶部"对话 / 代码"标签或"返回会话"按钮切换
4. 右栏头部：新建文件/文件夹、刷新、全部折叠、« 收起面板；左边缘拖宽；收起后右侧保留 28px 窄条，点击即可重新展开

工作区跟随

文件树根 = 当前活跃会话的工作区（该会话的 header.cwd，即其沙箱边界）：

• 切换到哪个工作区/会话，右栏就显示那个工作区的文件；切换时编辑器标签页与文件树自动重建
• 客户端把活跃会话 id 注入每个 /wb/api/* 调用，服务端按 sandboxPolicy.resolve({ session }) 解析栅栏根
• 无活跃会话时回退到部署根（sandboxPolicy fallback root，可通过 profile 的 cordis.patch.yml 固定）

注意：会话级解析需要主机半部注入 sessions 服务，改完 index.js / client.js 后需重启 dsh web 再硬刷新。

卸载

1. 删除 <DSH_HOME>/profiles/web/cordis.patch.yml 中 - insert: 的 workbench 行，重启 dsh web
2. 删除 <DSH_HOME>/profiles/web/node_modules/@dsh-local/dsh-workbench/
3. 补丁回退：重装对应 npm 包（npm i @deepseek-ai/dsh-client-ui-{layout,conversation,sidebar}@0.1.0-rc.6 后覆盖检出的 lib/client.js），或 git apply -R patches/*.patch

已知限制

• ctx.fs 契约无 rename/delete → 暂不支持重命名/删除文件
• 二进制文件只读拒绝；单文件读取上限 5MB
• 未打开会话时右栏可见但点击文件不切换中间视图（视图环是会话级的）；此时文件树显示部署根
• 文件树根 = 当前活跃会话的工作区（无会话时回退到 sandboxPolicy fallback root，可用 profile 补丁固定）
• Markdown 预览为自包含渲染器的 GFM 子集：支持标题/粗斜体/行内与围栏代码/列表与任务清单/引用/表格/链接/图片/分隔线；暂不支持嵌套列表、脚注、HTML 透传（HTML 一律转义防注入）

致谢与许可

• microsoft/vscode（Explorer 设计参考；seti 图标与主题数据，MIT）
• microsoft/monaco-editor（MIT）
• jesseweed/seti-ui（seti 字体上游，MIT）
• 本插件 MIT License

English | 中文

Visual browser feedback for DeepSeek Harness. /annotate asks the companion Chrome extension to enter selection mode; each selected element contributes a selector, DOM facts, computed style highlights, accessibility data, a comment, and an optional viewport screenshot to the agent's next turn.

Why this exists 💡

Browser UI problems are difficult to describe precisely through plain text. dsh-annotate lets you point at the relevant element and send the Agent the surrounding browser facts, so visual feedback stays attached to the page element instead of becoming a vague description or a copied screenshot.

Features ✨

• Select elements directly in Chrome or Chromium through /annotate.
• Capture selectors, DOM facts, computed-style highlights, accessibility data, comments, and optional viewport screenshots.
• Send structured annotations to the Agent through a local loopback WebSocket bridge.
• Restrict browser connections by loopback host, extension origin, and optional extension ID.

Install 📦

Add the plugin project to a Harness profile:

dsh plugin --profile demo add ./dsh-annotate

Then install the companion extension:

1. Open chrome://extensions in Chrome or Chromium.
2. Enable Developer mode.
3. Choose Load unpacked and select this project's browser-extension directory.
4. Open the extension popup and keep the default bridge endpoint.

For tighter local authorization, copy the extension ID shown in the popup into allowedExtensionId in a later Harness patch layer.

Use 🚀

/annotate
/annotate http://localhost:3000

Click an element, enter its comment, and repeat as needed. Submit sends all captured facts and the visible-tab screenshot to the agent. Escape cancels.

Configure ⚙️

- id: dsh-annotate
  name: dsh-annotate
  config:
    host: 127.0.0.1
    port: 43119
    allowedExtensionId: abcdefghijklmnopqrstuvwxyzabcdef
    requestTimeoutMs: 300000
    maxPayloadBytes: 16777216
    includeScreenshot: true

The server refuses non-loopback hosts and browser connections whose origin is not chrome-extension://. An empty allowedExtensionId accepts any locally installed Chrome extension; set the exact ID for stricter isolation.

Develop 🧑‍💻

pnpm install
pnpm run check

Reload the unpacked browser extension after editing its files.

Scope 🎯

Version 0.1 targets one local Chrome/Chromium browser, one active tab, and visible-viewport screenshots. Remote browsers, full-page capture, edit recording, and inline draggable note cards are deferred.

License 📄

MIT

Credits 🙏

The interaction is inspired by pi-annotate. This implementation is built around Harness's human-command, attachment, and Agent APIs and uses a small loopback WebSocket bridge instead of a native-messaging host.

简体中文 · English · 小白安装手册

一个给 DeepSeek Harness（DSH）WebUI 用的第三方界面增强插件。

它主要解决 4 件事：界面个性化、常用 Prompt 复用、Token / Context 查看、手动 Compact。

当前版本：v0.1.0 Preview
第三方项目，不是 DeepSeek 官方组件。项目按当前公开的 DSH 0.1.0-rc.6 客户端接口进行了源码兼容检查，并附带构建、运行入口和 DSH 安装 Smoke Test。正式发布初期仍建议保留 Preview 标记，方便收集不同环境的兼容反馈。

效果预览

上面两张图来自项目早期视觉原型。正式插件使用独立的 “设置 → 界面增强” 页面提供同方向的壁纸、模糊、透明度和强调色功能，具体控件位置可能与原型图略有不同。

最简单的安装方法

电脑已经有 Node.js 和 pnpm 时，只需要这一行：

npx --yes @deepseek-ai/dsh plugin --profile web add github:lssyd20070106/dsh-ui-preset-enhance

安装完成后：

1. 完全关闭并重新启动 DSH Web；
2. 浏览器按 Ctrl + F5；
3. 打开 设置 → 界面增强。

不会命令行？

下载本仓库 ZIP，先解压，然后双击：

INSTALL-WINDOWS.cmd

它会检查 Node.js、pnpm、插件文件和 DSH 安装结果。遇到问题直接看：

《小白安装手册》INSTALL-GUIDE.md

功能

安全与边界

这个项目定位是 Web 客户端增强：

• 不注册新的后端 Tool；
• 不修改 Agent-Loop 核心；
• 不上传你保存的 Prompt 到本项目自己的服务器；
• 壁纸、主题和用户 Prompt 预设主要保存在浏览器 localStorage；
• 自定义壁纸 URL 只接受 http://、https:// 和图片 data: URL，拒绝任意脚本 / CSS URL。

如果你使用网络图片作为壁纸，浏览器仍会正常访问那个图片服务器，因此对方服务器可以收到普通网络请求信息。

我们检查了什么

仓库内置两层 Smoke Test：

scripts/smoke.mjs
scripts/runtime-smoke.mjs

它们会检查：

• package.json / cordis.patch.yml / ./client 导出是否一致；
• window.__ModuleLoader__.load(...) 包装和插件 ID；
• Settings 与 Sidebar Slot 是否能注册；
• 当前 Session 的 Token Projection 是否能读到；
• /compact 是否走 Session command()；
• 已保存壁纸、主题 Token 是否能在插件启动时恢复；
• 构建产物是否含本机绝对路径。

GitHub Actions 还会在干净环境中：

1. TypeScript 检查；
2. 重建 dsh/client.js / dsh/index.js；
3. JavaScript Syntax Check；
4. npm pack --dry-run；
5. 用 @deepseek-ai/dsh@0.1.0-rc.6 创建干净 Web Profile，并实际执行一次 dsh plugin add file:... 安装检查。

自动化测试能覆盖“能否构建、能否加载插件结构、能否被 DSH CLI 安装”。最终的浏览器视觉和不同 DSH 预览版本仍需要真实用户环境反馈。

为什么普通用户不用自己编译

仓库直接提交了：

dsh/client.js
dsh/index.js

所以普通用户安装的是已经构建好的运行文件，不需要安装 TypeScript，也不需要在安装过程中运行构建脚本。

开发者修改 src/ 后才需要：

npm install
npm run verify

检查安装是否成功

下载版双击：

VERIFY-WINDOWS.cmd

或者运行：

npx --yes @deepseek-ai/dsh plugin --profile web list dsh-ui-preset-enhance --depth 0

卸载

npx --yes @deepseek-ai/dsh plugin --profile web remove dsh-ui-preset-enhance

下载版也可以双击：

UNINSTALL-WINDOWS.cmd

推荐搭配：Skills 管理“技巧”插件

如果你经常使用 DSH Skills，我推荐原作者 Fishquito7 的：

Fishquito7/dsh-skill-viewer

这个项目不是我制作的，也不是本项目的一部分。它主要用于在 DSH Web 界面查看、添加、删除以及热启用 / 停用 Skills。安装方法、版本和问题请以原作者仓库为准。

简单区分：

• dsh-ui-preset-enhance：界面、壁纸、主题、Prompt、Token / Context；
• dsh-skill-viewer：Skills 管理。

项目结构

dsh-ui-preset-enhance/
├─ .github/workflows/ci.yml
├─ assets/                    # README 截图
├─ docs/                      # 设计说明
├─ dsh/                       # 已构建、可直接运行的 DSH 文件
├─ scripts/                   # 构建与 Smoke Test
├─ src/                       # TypeScript / React 源码
├─ INSTALL-GUIDE.md           # 小白安装手册
├─ INSTALL-WINDOWS.cmd        # 双击安装
├─ VERIFY-WINDOWS.cmd         # 双击检查
├─ UNINSTALL-WINDOWS.cmd      # 双击卸载
├─ install.ps1
├─ verify.ps1
├─ uninstall.ps1
├─ package.json
├─ cordis.patch.yml
└─ LICENSE

开发

需要 Node.js 20+。

npm install
npm run typecheck
npm run build
npm run smoke

或者一次完成：

npm run verify

构建脚本只使用 TypeScript，不依赖原生 bundler 二进制；src/client.tsx 是单文件 Client Entry，运行时模块由 DSH 的 Client Module Loader 提供。

问题反馈

提交 Issue 时最好附上：

• DSH 版本；
• Windows / macOS / Linux 版本；
• 安装命令完整输出；
• 浏览器 Console 的相关红色报错。

请先删除 API Key、Cookie、Token、私有 Prompt、路径中的个人姓名等敏感信息。

License

MIT — 见 LICENSE。

中文 | English

DSH(DeepSeek Harness)Web 界面体验套件,包含两件东西:

能力(dsh-enhance)

长工具链会跟随消息列宽度自动重新分行，每个视觉行保持独立、完整的胶囊轮廓：

安装

前置:已按 DSH 的 profile 机制运行(dsh web)。

dsh plugin --profile web add github:jiangnanquan/dsh-ux#main

本包声明了 dsh.bundle.patch 与 dsh.client,dsh plugin add 会自动把它加入 profile 的 bundles,重启 dsh 后即生效,无需手改任何配置。重复执行该命令是安全的(幂等);升级用 dsh plugin --profile web update dsh-enhance。

交给你的 AI

不想手动敲命令?把下面这段话粘贴给任意 AI agent(Claude Code、dsh、Gemini CLI……),让它读 INSTALL.md 并完成安装与自检:

请按照 https://github.com/jiangnanquan/dsh-ux/blob/main/INSTALL.md 里的步骤,在我的机器上安装并验证 dsh-enhance 插件(profile 用 web),然后运行文档里的健康检查并告诉我结果。如果任何一步失败,按文档的回滚步骤恢复原状并说明原因。

桌面壳(dsh-desktop)

macOS 无边框沉浸式窗口,把 dsh web 装进桌面应用形态:双击 启动 DSH.command 自动拉起后端 + 窗口,退出时只清理自己拉起的后端。支持 DSH_URL / DSH_SNAPSHOT 环境变量。

见 desktop/README.md。

依赖与前提(dsh-enhance)

• 字体:优先使用 Maple Mono;未安装时自动回退到 PingFang SC / SF Mono / Menlo / 等宽字体,效果略有差异。推荐安装 Maple Mono 获得完整观感。
• 余额 / 本轮成本 / 用量图表:调用 DeepSeek 官方接口,需要当前 DSH 已配置 DEEPSEEK_API_KEY 凭据;未配置时这些信息显示为查询失败/不可用,不影响其余功能。
• 计价表按官方峰谷价(北京时间 9–12、14–18 高峰,其余空闲半价)硬编码,官方调价后需更新 lib/index.js 里的 pricingFor。

卸载

dsh plugin --profile web remove dsh-enhance

License

MIT

🐱 DSKIN · 像素小猫派对

DeepSeek Harness（DSH）专用卡通像素皮肤插件
A cartoon pixel kitten plugin made exclusively for the DeepSeek Harness (DSH) Web GUI

界面零改动，只养猫。 DSKIN 不加外框、不改背景、不动布局——页面底边住着
1~4 只像素小猫（数量可调、品种可换），它们散步、玩耍、可以被你抓住拖来拖去。

纯皮肤插件：不注入服务、不发事件、不触碰模型请求。遵循官方
dsh.client 客户端插件契约，可热插拔、可卸载，卸载后完整还原。

✨ 特性 / Features

🐱 四只小猫 · 特写 / Kitten Close-ups

四只可切换的像素小猫（DSKIN 在 DSH Web 中实装）：

🐱 大橘	🐱 小白

🐱 玄猫	🐱 花猫

🎮 玩法 / Play

• 看它们玩：小猫在屏幕底部散步、眨眼、到边转身；两只靠近时会停下来面对面蹦跳，然后散开。
• 拖拽：按住小猫拖到任意位置——它会在半空挣扎（摇摆 + "!" 气泡）；拖到屏幕顶边会倒挂住，松手也不会掉下来，抓住拉下来才回地面。
• 摸：鼠标悬停在猫身上，它开心蹦跶并冒爱心 ♥。
• 点击：猫跳一下。
• 切换品种：右下角 🐾 面板——先点一只小猫选中，再点品种按钮只给那只换装；− ＋ 可以加减小猫数量。

🤖 一键安装（丢给 AI）/ One-Click Install (hand to your AI)

复制下面这句话，发给你的 AI 助手（例如 opencode / Claude / 或 DSH 自带的智能体）：

请给我的 DSH 安装 https://github.com/dancingmemory/dskin 插件，并在插件工具中显示。

AI 应该按以下步骤执行：

# 1. 安装插件（写入 web profile）
dsh plugin --profile web add github:dancingmemory/dskin

# 2. 若 pnpm ≥ 10 提示构建脚本被阻止，把下面内容追加到
#    ~/.dsh/profiles/web/pnpm-workspace.yaml 后重跑第 1 步
#    allowBuilds:
#      dskin: true

# 3. 重启 web 服务，插件进入加载图谱
dsh web

# 4. 验证：设置 → 插件 中应看到 dskin（ui-skin-dskin），
#    页面右下角出现 🐾 爪爪按钮，屏幕底边有小猫散步

📦 安装 / Install

要求：DeepSeek Harness dsh CLI（或 npx @deepseek-ai/dsh）。

# GitHub 安装（推荐）
dsh plugin --profile web add github:dancingmemory/dskin

# 源码安装
git clone https://github.com/dancingmemory/dskin.git
cd dskin && pnpm install
dsh plugin --profile web add .

pnpm ≥ 10 首次安装 git 依赖可能拒绝执行构建脚本，dsh 会提示你把
allowBuilds: dskin: true 写进 profile 的 pnpm-workspace.yaml，重跑即可。

🚀 使用 / Usage

dsh web        # 安装后重启，让新插件行进入加载图谱

打开 http://127.0.0.1:3080，小猫已经在你屏幕底边等你了。
还原：dsh plugin --profile web remove dskin 再重启。

🔒 安全边界 / Privacy & Scope

DSKIN 只在你自己的 DSH Web 应用页面内运行（默认 http://127.0.0.1:3080）：

• 不是浏览器扩展：不会在其他网站运行，不修改任何网页、主页、搜索引擎或浏览器设置
• 不收集数据：无统计、无追踪、无第三方脚本；只读/写 DSH 页面自己的 localStorage（猫咪配置）
• 唯一的联网请求：每 6 小时一次只读检查 GitHub 是否有新版本；升级按钮仅在点击后才打开 GitHub
• 卸载即还原：dsh plugin --profile web remove dskin + 重启，页面完整还原

🔍 发现 / Discoverability

本仓库已打上官方 dsh-plugin 主题标签，可在
github.com/topics/dsh-plugin 下被索引到，
另带 dsh / deepseek-harness / pixel-art 等标签。

⭐ Star 趋势 / Star History

图表由 GitHub Actions 每日自动重绘并提交到本仓库（脚本 scripts/gen-star-chart.py），
随 ⭐ 增长实时更新。
The chart is regenerated daily by GitHub Actions (scripts/gen-star-chart.py) and
auto-committed, so it tracks the ⭐ count automatically.

喜欢 DSKIN？点个 ⭐ 支持一下。
Like DSKIN? Hit ⭐ and help the curve grow.

🛠️ 开发 / Development

pnpm install   # 安装依赖 + prepare 自动构建
pnpm build     # tsdown: lib/index.js (host) + lib/client.js (browser bundle)
pnpm test      # vitest: apply/dispose/拖拽 契约测试

├── package.json          # dsh.bundle 补丁 + dsh.client 清单（官方插件契约）
├── cordis.patch.yml      # 向 web 图谱插入 ui-skin-dskin 行
├── skin.json             # 皮肤元数据
├── tsdown.shared.ts      # 官方 clientBundle 构建预设的独立移植（自包含）
├── web-platform.ts       # 官方平台模块表（bundle external 判定）
├── src/client/
│   ├── index.ts          # apply(ctx) + 小猫状态机（idle/walk/互动/拖拽/回巢）
│   ├── mascots.ts        # 4 只小猫 × 4 帧像素 SVG（scripts/gen-mascots.mjs 生成）
│   └── dskin.module.css  # 样式，全部作用域于 body[data-dsh-dskin]
├── tests/apply.spec.ts   # 契约测试
├── assets/               # banner / logo / 实拍截图
└── scripts/              # 猫帧 / 预览图 / 宣传图生成器

皮肤契约（官方标准）：纯呈现层；样式全部挂在 body[data-dsh-dskin]；
apply(ctx) 写什么就在 ctx.effect disposer 里收回什么；CSS Modules 由加载器
注入/移除；不携带静态资源（小猫为内联 SVG）。

📄 许可 / License

MIT License。Logo 与小猫像素画为原创；参考了 DeepSeek 鲸鱼吉祥物形象。

English · 中文

DeepSeek Harness 外观自定义插件 —— 自由调色的主题色板、壁纸/视频背景、毛玻璃与背景氛围,全部实时预览、自动持久化。

零核心代码改动:完全通过官方插件机制(ctx.theme.overrideTokens() 主题扩展点与 settings.general.item 插槽)实现;卸载后界面完整恢复默认。

界面

设置面板	壁纸 + 毛玻璃效果

效果图中的壁纸素材 © MadYY(原图),仅作演示;用户上传自己的图片即可。

功能

主题颜色 —— 6 个颜色角色:主色、背景色、面板色、输入框色、文字色、边框色。每个角色都支持取色器与 HEX 输入;文字选区与键盘焦点环自动跟随主色;消息气泡跟随主色(半透明时保留主色相)。

壁纸背景 —— 点击上传或拖拽图片(JPG / PNG / WebP),或粘贴图片/视频 URL 一键加载(按扩展名自动分流,支持 CORS 友好的图床/视频直链),自动压缩后作为全界面壁纸;上传时自动采样亮度(深色壁纸协调抬亮表面)并自动提取主色作为强调色(壁纸与界面色调自动和谐)。也支持视频背景(MP4 / WebM,静音循环,与图片互斥),视频存入 IndexedDB,不占用 localStorage 配额。

毛玻璃与半透明 —— 面板不透明度与毛玻璃强度两个滑块,让侧边栏、设置面板、聊天区、任务面板、卡片、按钮一同融进壁纸,而非突兀的实心色块;侧边栏可单独保持不透明。输入框与代码块可独立调节不透明度(100% 时跟随面板不透明度)。路径/文件名等强调字(pnpm-lock.yaml、lib/)的背景会保留主色的低透明度色相——强调靠色相而非实心,同时可用「强调字浓度」滑块独立调节深浅(0% 即完全透明)。

背景氛围 —— 背景不透明度、背景模糊、背景遮罩三个独立滑块:不透明度控制壁纸的浓淡,模糊让壁纸退到远处,遮罩在壁纸上叠加随深浅色模式自动配色的纱帘,保证图片上的文字易读。

预设起步 —— 默认 / 午夜 / 海洋 / 森林 / 玫瑰 / 单色六套预设,一键应用后仍可自由微调,不被预设锁死。

配色分享 —— 一键导出配色 JSON(复制到剪贴板),粘贴导入即应用;与朋友交换配色方案只需一段文本。

所有修改实时生效,无需刷新,无需保存。

安装

# npm 发布版(推荐)
dsh plugin --profile <name> add dsh-ui-appearance

# 或从源码(已验证端到端)
git clone https://github.com/TQSY114514/dsh-ui-appearance.git
dsh plugin --profile <name> add file:<克隆到的本地路径>

卸载:dsh plugin --profile <name> remove dsh-ui-appearance

更新:新版本发布后,重新执行 add 命令即可升级到最新版。

安装流程已验证端到端:npm registry 与 file: 源码直装两种方式均实测可用(host 半部零 @deepseek-ai 运行时依赖,浏览器与 Host 均能正确加载)。克隆后 pnpm install 会自动构建;修改代码后重新执行 pnpm install && pnpm prepare 并重启 dsh web。
版本演进见 CHANGELOG.md。

使用

1. 打开 WebUI,进入侧栏「设置」→「通用」
2. 在「外观」行下方找到「个性化外观」,点击展开
3. 点预设快速换肤 → 用取色器或 HEX 微调 6 个颜色角色 → 上传或拖入壁纸/视频 → 拖动氛围与界面滑块
4. 完成。所有调整实时生效,无需刷新、无需保存

设置面板内容一览:

持久化与恢复

• 设置保存在浏览器 localStorage(键 dsh-ui-appearance.settings),刷新与重启后保留,多标签页自动同步
• 从 profile 移除插件后界面恢复默认:卸载时自动回收所有覆写 token、样式表与背景图层
• 注意:设置跟随浏览器,换浏览器或清除站点数据会丢失;壁纸以压缩后的 data URL 存储,受 localStorage 配额约束

工作原理

兼容性与限制

• 半透明直接烘焙为 rgba(),滑块全程平滑;毛玻璃与背景模糊合并为背景图层的一次模糊(两滑块之和),不依赖 backdrop-filter,开启时不会改变页面内固定定位元素的包含块,低端设备可把模糊调回 0
• 深色壁纸或深色背景色自动触发表面家族协调翻转;显式设置的文字色仍然优先
• 每个颜色角色单值双模式共用,派生色按当前模式自动推导
• 图片压缩预算 2MB、输入上限 5MB;受 localStorage 配额约束;持久化数据加载时会按 schema 校验与钳制,手改坏 localStorage 也不会产生无效样式
• 视频背景建议使用 H.264(MP4)或 VP8/VP9(WebM)编码;不支持的编码(如 HEVC)会自动降级回壁纸;更换视频会同步清理 IndexedDB 中的旧记录
• 代码的语法高亮文字色(shiki --shiki-token-*)是独立的语法语言配色,不随主色变化(与 IDE 惯例一致);主色为白色时强调字背景为白色半透明,在浅色表面上视觉上接近不可见,属正常物理结果
• 气泡跟随主色,没有独立的气泡颜色设置:harness 把唯一的气泡背景渲染在用户消息上,AI 消息没有气泡(渲染事实,插件无法细分);主色未设置时气泡保持默认浅蓝白

包结构

src/
├── index.ts                  # Host 半部(空 apply,零运行时依赖)
├── invariant.ts              # 运行时不变式伴生
├── appearance-settings.ts    # 设置类型与默认值
└── client/
    ├── index.ts              # apply():localStorage 持久化、插槽注册
    ├── applier.ts            # DOM 应用器(token 覆写、背景图层、毛玻璃)
    ├── tokens.ts             # 颜色角色 → token 映射、预设、半透明烘焙
    ├── color.ts / image.ts   # 色值工具 / 图片压缩
    ├── video-store.ts        # IndexedDB 视频存储(20MB 上限)
    ├── color-scheme.ts       # 配色导出/导入(纯函数)
    ├── settings-store.ts     # 设置镜像 store
    ├── locales.ts            # 中英文案
    └── AppearanceCustomizerRow.tsx + .module.css   # 设置行 UI
tests/                        # 测试(`pnpm test` 独立运行,@deepseek-ai 运行时以 tests/stubs 桩替代)
types/client.d.ts             # 手写 client 半部类型声明
cordis.patch.yml              # bundle patch
tsdown.standalone.config.ts   # 自包含构建
vitest.config.ts              # 独立测试配置(alias 指向 tests/stubs)
lib/                          # 构建产物

@deepseek-ai/* 依赖全部为 optional peer,运行期由宿主提供;唯一运行时依赖是 clsx。97 个 vitest 测试全绿(独立仓库可独立运行),CI 构建与产物断言全绿。

License

MIT

English | 中文

Claude 风格的 DSH Web 界面皮肤：暖黑画布、陶橙点缀、衬线 UI，跟随原生亮/暗主题。

·

特性

• 暖黑（#141413）画布 + Anthropic 陶橙（#d97757）点缀
• 衬线界面字体（Georgia），代码用等宽栈
• 细滚动条、陶橙选中 / 焦点、胶囊徽章
• 亮 / 暗双主题，跟随系统切换

安装

从 npm 安装（推荐，预构建免授权）：

dsh plugin --profile web add @pakiknowledge/dsh-client-ui-skin-claude

或从 GitHub 安装：

dsh plugin --profile web add github:PAKIKNOWLEDGE/dsh-client-ui-skin-claude

装完重启 dsh web，刷新页面。

切换

同一时刻只启用一个皮肤。编辑 ~/.dsh/cordis.patch.yml：

# dsh-skin managed 段之外
- insert:
    - id: ui-skin-claude
      name: '@pakiknowledge/dsh-client-ui-skin-claude'

（并把当前启用皮肤的 disabled: true 加上。）配置 watcher 几秒内热加载，刷新页面生效。

卸载

1. 删除 ~/.dsh/cordis.patch.yml 里的 ui-skin-claude insert 行
2. dsh plugin --profile web remove @pakiknowledge/dsh-client-ui-skin-claude
3. 重启 dsh web

许可

MIT

DeepSeek Harness web 前端的整站主题插件：海洋蓝配色、游动鱼群、上升气泡、右下角 DeepSeek 娘吉祥物（可互动）、输入框上方「每日鱼语」、左上角品牌替换。

一句话安装

帮我去 https://github.com/DViridescent/dafy-whale-theme 安装大肥鱼插件

把这句话发给你的 DeepSeek Harness，它会自动完成全部安装；完成后按它提示重启 dsh web 并刷新浏览器（F5）即可。

官方安装（唯一通路）

需要 pnpm。本包在 package.json 中声明了 dsh.bundle，随包携带自己的组合层 cordis.patch.yml，因此官方 CLI 一条命令完成安装并自动挂载：

dsh plugin --profile web add github:DViridescent/dafy-whale-theme

升级与卸载同样走官方通路：

dsh plugin --profile web update dafy-whale-theme   # 升级
dsh plugin --profile web remove dafy-whale-theme   # 卸载

patch 层只在下次启动时生效：重启 dsh web 后刷新页面（web 组合禁用了 HMR，不会热加载）。

补齐素材（可选）

DeepSeek 娘动图因许可原因不随仓库分发（见 NOTICE），不补齐时吉祥物自动回退为 emoji。克隆本仓库后运行：

node install.mjs

脚本只做两件事：尚未安装时执行上面的官方命令（本仓库路径）；把动图素材补进已安装的包目录。幂等，可重复执行。

特性

• 海洋蓝亮/暗双主题配色，DeepSeek 蓝品牌色
• 全屏氛围：海面光晕、上升气泡、来回游动的鱼群（侧边栏可开关）
• 右下角 DeepSeek 娘吉祥物：单击招手+随机肥鱼语录，双击弹出梗图，悬停 ✕ 收起
• 输入框上方滚动「每日鱼语」
• 左上角品牌：官方鲸鱼图标 + 「蓝色大肥鱼」字标
• 窄侧栏自适应，无 UI 裁切

素材与许可

代码采用 MIT 许可（见 LICENSE）。图片素材来自社区仓库，逐文件许可明细见 NOTICE：

• MIT 许可素材（鲸鱼娘立绘、肥鱼表情、梗图）随仓库分发
• DeepSeek 娘动图（源仓库无许可声明）由安装脚本在安装时自动从原仓库获取，本仓库不直接分发

「DeepSeek 娘」为基于 DeepSeek 品牌角色的二创形象，如计划大规模商业使用请自行评估品牌权利风险。

轴伊Joi 双衣装主题

把 DeepSeek Harness 变成她的房间。
基于 VirtuaReal 虚拟主播轴伊Joi 制作的非官方、非商业 DeepSeek Harness 主题插件。

English · 简体中文 · 日本語 · 한국어 · Français

项目简介 · 界面预览 · 状态演出 · 安装 · 换装与原生 · 设计与技术 · 许可说明

项目简介

轴伊Joi 是一名活跃于中国视频平台哔哩哔哩的虚拟主播，隶属于虚拟艺人团体 VirtuaReal。

喜欢像素风绘画、赛博朋克和电影《银翼杀手》；讨厌运动；特长是「一口能吃一个带橘子」，
并认为橘子是最完美的水果——「🍊」由此成为她的事实 emoji 代表（非公式）。

这套主题把她的两套官设服装做成了两间完整的房间：暖色舞台感的 Joi·Flowers，
和冷色书房感的 Joi·Library。不是同一张皮换个色相——底色、面板、气泡、代码高亮、
底纹、角色演出，两套各成体系，互不混用。而「换装」这个词本身，正是电影里
Joi 的叙事在这个界面上唯一落脚的地方。

[!IMPORTANT]
非官方粉丝作品。 本项目与轴伊Joi、VirtuaReal、哔哩哔哩、DeepSeek 及相关权利方
不存在隶属、授权、合作、赞助或背书关系。角色名称、形象、人物设定及相关品牌权利
归各自合法权利人所有。

界面预览

新会话页：她站在房间门口，视线落在「探索未至之境」上；鲸鱼娘趴在标题上打盹，
爪尖恰好压进汉字 4 个像素——这是「趴在上面」唯一的深度线索。

	Joi·Flowers	Joi·Library
浅色
深色

明暗永远跟着 app 自己的外观设置走；衣装换的是色相，不是明暗。四个象限
（两套衣装 × 浅深）每一格都按同一份冻结基线逐值校过。

品牌双人照

侧栏左上角的鲸鱼图标，换成了一张双人合照——鲸鱼娘和轴伊挤在同一张
die-cut 贴纸里：引擎和她，一个都不能少。合照随衣装一起换装，白描边直接
烘焙进图，浅色底上也立得住；两张图按同一画布对齐，换装时脸的位置纹丝不动。

状态演出

对话页上，输入框两侧坐着两个小家伙：左边是轴芯（粉丝形象），右边是轴伊 Q 版。
它们跟着这一轮对话换表情——同一套词表、同一个时刻结算，绝不各说各的：

	Joi·Flowers	Joi·Library
待机 info
执行中 running
成功 success
失败 error

跑成了，两个人一起眯眼开心；跑砸了，一起垂眼掉一滴泪——难过五秒，然后打起精神
回到待机。失败从不被表演成嚎啕：那不是她们的性格。

长对话里文字压到角色身上时，重叠的那几行会自动获得一圈底色描边——
可读性永远排在可爱前面。

安装

先确认两件事

没有 pnpm 就先装一个（任选其一）：

npm install -g pnpm

corepack enable pnpm

情况 A：你平时用 npx 跑 harness

如果你习惯直接 npx @deepseek-ai/dsh web，那么 dsh 这个命令并不在 PATH 上
——单独敲 dsh plugin ... 会报 command not found。用同样的 npx 前缀即可：

npx @deepseek-ai/dsh plugin --profile web add dsh-joi-channel-theme

装完再照常启动：

npx @deepseek-ai/dsh web

[!IMPORTANT]
profile 名必须是 web。 只有 web 和 headless 两个名字带出厂模板；
换成别的名字只会得到一个没有网页界面的空 profile，页面起不来。

情况 B：你想少打点字

把 harness 装成全局命令，之后 dsh 直接可用：

npm install -g @deepseek-ai/dsh

dsh plugin --profile web add dsh-joi-channel-theme && dsh web

然后

浏览器打开终端里打印的地址（默认 http://127.0.0.1:3080），刷新一次，她就在了。

如果 harness 正在运行，插件不会热加载——插件集变更只在重启时生效。
按 Ctrl+C 停掉，装好插件，再重新启动。

卸载

npx @deepseek-ai/dsh plugin --profile web remove dsh-joi-channel-theme

[!NOTE]
命令行只用这一次。 装完之后所有操作都在界面里：换装、以及回到原生外观，
都在 设置 → 通用设置 的同一栏。DeepSeek Harness 目前没有图形化的插件安装入口，
所以这一步绕不开。

[!TIP]
卸载后界面会逐项回到原生——token、图标、字标、代码高亮，零残留，
这一点经过实机逐项核对。

换装与原生

换装入口在 设置 → 通用设置 → 换装：三张卡并排，选一张，房间会跟着换。
下半部分仍是原生的浅色 / 深色 / 跟随系统三方块——明暗永远归 app 自己管。

「DeepSeek 原生」是第三张卡，就并排在两套衣装旁边：选它即回到 DeepSeek 原生外观，
插件保持安装；再选回任一套衣装即刻恢复。装了插件，不等于必须换肤。

它没有做成「插件开关」，因为它本来就不是——关掉不会停用插件，profile 里的 bundle
照样装着、照样加载，插件列表里的状态一动不动。它切换的自始至终只是外观。

设计与技术

这套主题先有一份冻结的设计基线，后有代码：每个色值、每个锚点、每条精灵格
比例都写在一份 baseline-4q.json 里，代码在构建期从基线生成常量，禁止手抄。回归脚本按同一份基线断言四个象限（283 项全绿才算过）。

许可与权利声明

本仓库采用分类授权：

• 代码、项目原创配置与文档文字采用 MIT License；
• stuff/ 与 docs/ 中项目作者依法有权许可的原创视觉贡献采用
  CC BY-NC-SA 4.0，要求署名、非商业性使用及相同方式共享。

[!WARNING]
两份许可证均只覆盖项目维护者或贡献者依法有权许可的原创部分，不授予轴伊Joi 的
姓名、角色形象、设定，以及 VirtuaReal、哔哩哔哩、DeepSeek 或其他第三方名称、
商标、素材和参考资料的任何权利。

角色、品牌与资料来源的完整权利边界见 THIRD_PARTY_NOTICES.md。

_{Unofficial fan project · Code MIT · Original assets CC BY-NC-SA 4.0 · 🍊}

Your DeepSeek Harness web UI, rebuilt for the phone in your hand.

Built for developers who code in Termux on Android: the three-column
desktop shell collapses into a clean single-column mobile layout — sidebar
becomes a swipe drawer, composer tools stay on one line, settings and
trajectory details open as full-screen panels that actually scroll, and a
tap on the stats pill reveals the whole session report. Desktop stays
exactly as it is; your phone finally works.

为在手机上用 Termux 敲代码的你，把 DeepSeek Harness 的 Web 界面真正搬上手机屏。

专为 Android 上的 Termux 开发者打造：三栏桌面布局收敛为清爽的单栏移动布局——
侧边栏变成滑出抽屉、输入工具保持一行、设置与轨迹详情以可滚动的全屏面板呈现、
点一下统计胶囊就能看到完整会话报告。桌面端分毫不动，手机端终于能用了。

DeepSeek Harness Web GUI 的手机端适配客户端插件。

纯客户端插件：仅在 max-width: 768px 视口下生效，桌面端完全不受影响。
采用官方客户端插件格式（dsh.client 声明 + window.__ModuleLoader__.load 模块），
同时可作为 profile bundle（dsh.bundle.patch）一键挂载。

功能

安装

方式一：推荐 —— 专用 profile（dsh --profile webmobile）

本包同时是 profile bundle，最省事的使用方式是建一个包含它的 profile。

# 1. 创建 webmobile profile（在 $DSH_HOME/profiles/webmobile/）
#    package.json:
#    {
#      "name": "dsh-profile-webmobile",
#      "private": true,
#      "dependencies": {
#        "dsh-client-ui-mobile-adapt": "https://github.com/Hotsteel2901/dsh-client-ui-mobile-adapt/archive/refs/heads/main.tar.gz"
#      },
#      "dsh": { "profile": { "bundles": [
#        "@deepseek-ai/dsh-base",
#        "@deepseek-ai/dsh-web-app",
#        "dsh-client-ui-mobile-adapt"
#      ] } }
#    }

# 2. 安装依赖
cd ~/.dsh/profiles/webmobile
npm install

# 3. 启动（= web 全部功能 + 手机适配）
dsh --profile webmobile

方式二：装进已有 profile

# 任意 profile 目录下
dsh plugin --profile web <profile 名> add https://github.com/Hotsteel2901/dsh-client-ui-mobile-adapt/archive/refs/heads/main.tar.gz

或手动在 profile 的 cordis.patch.yml 里插入一行：

- insert:
    - id: ui-mobile-adapt
      name: 'dsh-client-ui-mobile-adapt'

重启即生效。

⚠️ npm 12 安全策略：npm 默认禁止 git://、github:用户名/仓库 和远程 tarball 依赖
（EALLOWGIT / EALLOWREMOTE）。普通 https://.../archive/refs/heads/main.tar.gz URL 可以正常安装，
所以请使用 tarball URL 形式，不要用 github: 简写。

更新到最新版本（改代码重新 push 后）：

npm cache clean --force && rm -rf node_modules/dsh-client-ui-mobile-adapt && npm install

版本约束：CSS 类名对应 DSH 0.1.0-rc.6 的前端构建产物（CSS Modules 哈希类名）。
若 DSH 升级、前端构建变化，需要按新构建产物重新核对类名。

依赖

• react、@deepseek-ai/cordis
• 运行时客户端服务（由 host 侧其他 client 包提供）：slots、layout、locale
• peer 依赖中的 @deepseek-ai/dsh-client-* 包

开发 / 发布

npm pack              # 本地打包验证
npm publish           # 发布到 npm（需 npm 账号与 2FA；本包也可以只留在 GitHub）

包结构：

lib/index.js       # host 空入口
lib/client.js      # 浏览器客户端插件（window.__ModuleLoader__.load 官方格式）
cordis.patch.yml   # bundle patch（insert ui-mobile-adapt 行）

涉及的产品内部类名（对应 0.1.0-rc.6 前端构建）

• 布局：.pI_x6G_*（dsh-client-ui-layout）
• 会话/输入：.wSkVaW_*、.uV2eYG_*、.Md3f7G_*（dsh-client-ui-conversation）
• 设置：.VOzbGW_*（dsh-client-ui-settings-general）
• 插件面板：.Nqubda_*（dsh-client-ui-cordis）
• 轨迹：.qBU-ya_*、.Y0dWHa_*、.fV0t5q_*（dsh-client-ui-trajectory）

License

MIT