dsh-ui-rainbowspeak
Manifest validRainbowSpeak — a flowing rainbow marquee border around the chat composer card, driven by a conic-gradient ring. Live settings for speed, width, seven color schemes, direction, sides and breathing, plu
✨ 为什么选它
纯装饰,零侵入
不接管任何插槽、不打宿主补丁、不注册工具、不注入系统提示。纯浏览器端装饰:一条 conic-gradient 圆环经蒙版只留卡片边缘,靠注册的自定义属性旋转流动。客户端 bundle 仅 17 KB,引擎不支持 @property 时自动降级为静态渐变环。
边框就是会话状态
彩虹环实时反映会话:agent 运行中加速(4 s → 1.2 s/圈);工具审批或向用户提问待处理时转琥珀色慢脉冲;发送失败或 agent 出错转红色快脉冲;一轮完成播放一周期的庆祝闪光。不用盯屏幕,余光就知道它干活到哪一步。
七种配色,还能跟着主题走
经典彩虹 / 极光 / 日落 / 蜜桃 / 海洋 / 赛博霓虹之外,还有跟随主题——经 color-mix 从宿主品牌色派生,深浅主题切换即时跟随,永不出戏。
🌈 功能
-
彩虹跑马灯边框:输入框卡片(
[data-composer-card]宿主锚点)四周流动彩带,经注册的@property角度驱动渐变真实动起来;不支持@property的引擎降级为静态渐变环。 -
设置面板(
Settings→Rainbow border):启用/禁用、流速(1–10 秒/圈)、环宽(1–6 px)、配色、位置(四边/顶部/底部)、反向流动、呼吸亮度叠加。全部偏好持久化在localStorage,即时生效。
-
七种配色:经典彩虹、极光、日落、蜜桃、海洋、赛博霓虹(青/紫/品红,带白色灯闪段),以及跟随主题——经
color-mix从宿主品牌令牌派生。 -
会话状态感知:经宿主 dock 座位读取会话状态——agent 运行中环加速(4 s → 1.2 s/圈);工具审批或 ask-user 待处理时琥珀色慢脉冲;发送失败或 agent 出错红色快脉冲;一轮完成时播放一周期的庆祝闪光。优先级:错误 > 提醒 > 运行。
-
聚焦增亮:输入框聚焦时环增亮增饱和,失焦缓退。
-
无障碍:遵循
prefers-reduced-motion(动画禁用、保留静态环);设置控件带本地化标签与 aria 属性。 -
中英双语:文案经宿主 locale 注册表下发,跟随宿主语言设置。
🎨 配色一览
| 赛博霓虹 | 极光 | 日落 |
|---|---|---|
![]() | ![]() | ![]() |
跟随主题(浅色模式):边框取自宿主品牌色,主题切换即时跟随。

📦 安装
从 dsh CLI 安装:
dsh plugin add @kenz1117/dsh-ui-rainbowspeak
或手动加入 profile 的 package.json:
{
"dependencies": {
"@kenz1117/dsh-ui-rainbowspeak": "*"
}
}
本地开发可将依赖指向一个 checkout:
{
"dependencies": {
"@kenz1117/dsh-ui-rainbowspeak": "link:/absolute/path/to/dsh-ui-rainbowspeak"
}
}
然后在 profile 目录执行 pnpm install 并重启宿主。使用 link: 形式时,插件仓库里跑一次 pnpm bundle,宿主下次重启即取到改动——无需重装。
⚙️ 工作原理
- 插件在 apply 时挂载单张
<style data-plugin>样式表,dispose 时移除(effect 生命周期)。 - 输入框卡片的
::before绘制覆盖整个色轮的conic-gradient;mask合成把内部裁掉,只留边缘环带,圆角对齐卡片半径。环宽与流速从--dsh-rainbow-*变量读取。 --dsh-rainbow-angle经@property注册为<angle>,渐变起始角因此可插值;关键帧让它旋转 360°。- 用户偏好与会话状态投影到
<html>的data-rainbow-*属性与内联 CSS 变量,每个开关即时生效、无需重建样式表。 - 状态桥读取宿主会话座位与全局待交互座位(审批/ask-user)——只在插件层,不涉及 agent-loop。
🛠 开发
pnpm install # 依赖(peer 经 scripts/link-peers.mjs 链入 monorepo checkout)
pnpm test # vitest 套件(node 半边、偏好钳制、状态投影、bundle 冒烟)
pnpm typecheck # tsc --noEmit
pnpm bundle # tsdown: lib/index.js(node 半边)+ lib/client.js(浏览器 IIFE)
client 半边是注入宿主 web 客户端的自包含 IIFE;node 半边是保持清单对称的空载体。
🤝 兼容性
- 客户端平台:
web(desktop/web 宿主渲染)。流动动画需要@property支持(所有 Chromium/Electron 构建均可用);其他引擎显示静态环。 - Peer:
@deepseek-ai/cordis(由宿主在运行时提供)。
📄 许可证
MIT © 2026 KenZ (kenz1117)
Comments
Loading…
Similar plugins
by YaoaY
为 DSH Web 的助手 Markdown、工具调用和 Think 内容提供可自定义的语义配色。Customizable semantic color accents for assistant Markdown, tool calls, and Think blocks in DSH Web.
★ 3
↓ 25/wk
MIT
TypeScript
Oct 6, 2026
dsh plugin --profile web add dsh-conversation-accentsby huangfuren
Conversation outline panel for the DSH web surface: user questions as root nodes (index, time, tool count and text volume per turn) with the Markdown headings of assistant replies hanging beneath them
★ 0
MIT
JavaScript
Oct 9, 2026
dsh plugin --profile web add dsh-conversationby rezon-aki
流式折叠:一个更好的 DSH 会话窗口——最新思考小窗自动展开、旧窗与工具调用跑完自动折起;思考小窗底边与正文写头带火星特效。零依赖、零构建。
★ 18
↓ 1.1k/wk
MIT
JavaScript
Oct 7, 2026
dsh plugin --profile web add dsh-streamfoldby PerryLink
Voice-first session loop for DeepSeek Harness: a composer microphone button with browser/local speech-to-text (Web Speech, FunASR, whisper.cpp), a speak tool for text-to-speech replies (browser, edge-
★ 17
↓ 1.4k/wk
Apache-2.0
TypeScript
Oct 10, 2026
dsh plugin --profile web add dsh-talkby shao-01-test
dsh-chat-rail — DeepSeek Harness 聊天右侧导航拉条插件:按「提问→回答」轮次显示彩色节点(绿/黄/红/蓝表状态),点击即跳转对应提问与回答段落,悬停展开状态面板,刚回答完有闪光动画,关键词自动提炼成短句。一个拉条,快速定位整场对话。
★ 0
MIT
JavaScript
Aug 26, 2026
dsh plugin --profile web add dsh-chat-railby duoduoqian708
Voice conversation mode for the DSH Web GUI: tap the mic to start a full-screen call, talk hands-free, and hear each reply read aloud as it streams. Bilingual (Chinese/English) UI, light and dark them
★ 1
↓ 159/wk
MIT
HTML
Sep 13, 2026
dsh plugin --profile web add dsh-voice-talk


