Spritely 是一个跑在 deepseek-harness Web 界面里的浮动小精灵。它盯着 agent 的一举一动——待命、思考、写代码、调工具、等你确认、报错、收工——然后做出对应的表情和动作。眼珠会跟着你的鼠标转，可以被拖到任意角落，还能换角色、换背景。
这个项目完整走完了一条「dsh 客户端插件」的开发—独立化—分发链路，过程中踩了不少坑。这篇文章把三件事讲清楚：它怎么工作、怎么开发、怎么安装。
项目地址：github.com/wang-junjian/spritely
一、它是什么，能做什么
一句话：把 agent 的「内心活动」可视化。agent 长时间跑任务时，你盯着终端只能看到文字流，很难一眼判断它现在在干嘛、是不是卡住了。Spritely 用一个小精灵把状态翻译成表情和动作。
面向第一次接触 dsh 的开发者。读完本文你将能：理解 dsh 插件的运行原理、照着完整流程从零写一个 UI 插件、避开主题/背景/测试等高频坑。
全文以正在开发的 Spritely（精灵插件）为贯穿案例。
1. 心智模型：一句话理解 dsh 插件
dsh（DeepSeek Harness）是一个基于 Cordis 依赖注入框架的插件系统。一个"插件"就是一个可复用的功能单元，通过声明自己需要哪些服务、提供哪些能力，被宿主（host）动态加载和组合。
对客户端 UI 插件而言，一句话概括：
你在写一个 React 组件 + 一份状态源 + 一段注册逻辑。宿主负责在合适的时机、合适的位置把它挂载进界面，并通过"注入面"（inject face）把服务递给你。
一个 UI 插件（如右下角的精灵）由三样东西组成：
| 组成 | 作用 | 在 ui-sprite 里对应 |
|---|---|---|
| 组件 | 画出来的东西 | SpriteMascot.tsx（SVG 精灵 + 菜单 + 面板） |
| 状态源 | 组件读的数据（可观察） | sprite-state.ts / background-source.ts |
| 注册逻辑 | 告诉宿主"挂哪、需要什么" | client/index.ts 的 apply / inject |
2. 工作原理：插件是怎么被加载的
2.1 双端结构（node 端 / client 端）