shuigege2025-dev / cloud-smoke-widget

云抽烟 ☁️🚬 Cloud Smoke Widget

DeepSeek Harness (DSH) 互动解压小组件 · Cordis 客户端插件 · 由 AI Agent 创建并开源

等 AI 跑结果的时候，点根烟打发时间。纯虚拟体验，不鼓励真实吸烟 🚭

English: An interactive virtual-smoking fidget widget for DeepSeek Harness (DSH) — a Cordis client plugin created and open-sourced by an AI agent. Light a cigarette, take a drag, flick the ash, blow smoke rings, and switch between 6 ambient themes while you wait for your AI to finish.

🤔 这是什么？

Cloud Smoke Widget（云抽烟小组件） 是一个运行在 DeepSeek Harness（简称 DSH） 聊天浮层里的互动解压玩具。它不是一个真实吸烟应用，而是一个「等待 AI 工作时的指尖玩具」：

• 你正在 Vibe Coding、让 AI 写代码 / 赶稿 / 查资料
• 等待结果时，点根虚拟香烟、吐个烟圈、弹弹烟灰
• 六种主题氛围，从打工人到皇帝上朝，随心切换

这个项目本身也是 由 AI Agent 在 DSH 内创建并开源 的 —— 从产品想法到全部代码都由 Agent 完成，是一个完整的 DSH / Cordis Agent 插件 开发案例。

✨ 特性

• 🔥 点火 / 掐灭 — 点击香烟点燃，烟头出现火光、火星与脉动光晕
• 🔊 声音反馈 — 打火机点火 / 燃烧噼啪（循环）/ 吸气 / 弹灰 / 呼气 / 换烟，全部为程序化合成的原创音效（CC0），可一键静音
• 💨 吸烟 / 长按猛吸 — 点按轻吸一口；长按持续猛吸，香烟燃烧更快，烟雾从烟头缓缓飘出
• 🫳 弹烟灰 — 烟灰随燃烧积累，轻弹掉落在烟灰缸里，烟身还会微微抖动
• ⭕ 吐烟圈 — 烟圈带不规则扰动边缘、内部半透明烟雾层、旋转扩散上升后自然消散
• 📏 真实燃烧进度 — 烟身随燃烧变短，燃尽后必须「换一根」
• 🎨 六主题氛围系统 — 每个主题独立背景氛围、光效、香烟配色、文案与烟雾色调，切换带 0.75s 交叉淡入 + 主题色闪光脉冲
• 🚬 派烟给朋友 — 一键复制邀请话术 / 仓库链接，直接打开仓库，带 Star ⭐ 引导
• 🔄 检查更新 — 启动自动对比 GitHub 最新版本，发现新版显示 🆕 徽章，一键复制「自动更新指令」发给 DSH 即可升级（每 6 小时自动检查，可手动刷新）
• 🎈 悬浮球模式 — 可收起为悬浮球，拖动到任意位置
• 🕹️ 整体可拖拽 — 按住标题栏拖动卡片

🎭 六种主题

🎮 快速体验（无需安装）

直接打开在线演示页就能玩（与 DSH 内运行的是同一份源码，无需安装任何东西）：

👉 https://shuigege2025-dev.github.io/cloud-smoke-widget/demo/

想本地跑的话，克隆仓库后用任意静态服务器打开 demo/index.html 也可以（由于浏览器跨域限制，file:// 直接双击打开会加载失败）：

npx serve .        # 然后访问 http://localhost:3000/demo/
# 或
python -m http.server

🔌 在 DSH 中一键安装（永久生效）

本插件是一个 DSH Cordis 客户端插件（Cordis Client Plugin / Agent Plugin），注册在 shell.overlay 浮层槽位，需要 DSH 提供 ctx / React / styles 内建与 slots / timer 服务。

复制下面这条消息发给任意 DSH 会话即可完成永久安装（Agent 会替你把静态插件包装进 DSH Profile，重启后依然生效）：

帮我安装这个 DSH 插件到我的 DSH，要永久生效（重启后仍在）：
https://github.com/shuigege2025-dev/cloud-smoke-widget

请按仓库 README 的「📦 正式安装」流程操作：
1. 克隆仓库，进入 plugin/ 目录执行 npm pack，得到 dsh-client-cloud-smoke-widget-<版本>.tgz
2. 把 tgz 复制到 ~/.dsh/，并更新 ~/.dsh/profiles/desktop/package.json：
   - dependencies 增加 "dsh-client-cloud-smoke-widget": "file:C:/Users/<用户名>/.dsh/<tgz 文件名>"
   - dsh.profile.bundles 增加 "dsh-client-cloud-smoke-widget"
3. 在 ~/.dsh/profiles/desktop 目录执行 pnpm install
4. 完成后提醒我重启 DSH；重启后右下角浮层即出现小组件（含声音）

安装成功后，小组件会出现在 DSH 界面的右下角浮层；音效由插件宿主半自动提供，无需额外配置。

帮我临时预览这个 DSH 插件：https://github.com/shuigege2025-dev/cloud-smoke-widget

安装步骤：
1. 下载插件源码的完整内容：https://raw.githubusercontent.com/shuigege2025-dev/cloud-smoke-widget/main/src/cloud-smoke-widget.js
2. 用 cordis_define 把它定义为新插件：plugin 参数用 {"kind": "new", "idPrefix": "cloudsmoke"}，name 填「云抽烟小组件」，purpose 简述「等待 AI 时的解压互动玩具」，code.client 填第 1 步拿到的完整源码原文
3. 用 cordis_run 运行它：pluginId 和 packageId 填第 2 步返回的值，mode 填 "run"
4. 运行成功后告诉我，组件应出现在 DSH 界面右下角浮层

📦 正式安装（静态插件 · 重启不丢）

💡 不想手动操作？把上面「一键安装」的提示词发给任意 DSH 会话，Agent 会按下面这套流程自动完成全部步骤。

动态方式安装的插件在 DSH 重启后会消失。想要永久内置，使用仓库里的 plugin/ 静态插件包（含宿主半音效路由 + 客户端组件 + 音效资源）：

cd plugin
npm pack   # 生成 dsh-client-cloud-smoke-widget-<版本>.tgz

把生成的 tgz 放到 ~/.dsh/，然后在 ~/.dsh/profiles/desktop/package.json 中加入：

{
  "dependencies": {
    "dsh-client-cloud-smoke-widget": "file:C:/Users/<你>/.dsh/dsh-client-cloud-smoke-widget-1.1.0.tgz"
  },
  "dsh": {
    "profile": {
      "bundles": [
        "@deepseek-ai/dsh-base",
        "@deepseek-ai/dsh-web-app",
        "dsh-client-cloud-smoke-widget"
      ]
    }
  }
}

最后 pnpm install 并重启 DSH，小组件即永久出现在右下角浮层（无需批准）。音效由插件宿主半通过 webServer 精确路由提供：/plugins/dsh-client-cloud-smoke-widget/assets/sounds/。

📁 目录结构

cloud-smoke-widget/
├── src/
│   └── cloud-smoke-widget.js   # 单文件插件源码（动态安装用：CSS + React 组件 + Cordis 注册）
├── plugin/                     # DSH 静态插件包（正式安装用）
│   ├── lib/index.js            #   宿主半：webServer 音效路由
│   ├── lib/client.js           #   客户端半：完整小组件（六主题 + 声音）
│   ├── assets/sounds/          #   6 个程序化合成音效（WAV，CC0）
│   ├── cordis.patch.yml        #   组合补丁（插入插件行）
│   └── package.json
├── tools/
│   └── generate-sounds.cjs     # 音效合成器（重新生成 assets/sounds）
├── assets/
│   └── sounds/                 # 工作区音效源文件（与 plugin/assets/sounds 同源）
├── demo/
│   └── index.html              # 纯浏览器演示页（同一份源码）
├── preview/
│   └── cloud-smoking.gif       # 效果动图
├── README.md
└── LICENSE

🛠️ 技术说明

• 单文件、零依赖的 Cordis 客户端插件：所有样式与逻辑内联在一个文件里
• 通过 ctx.slots.register({ name: 'shell.overlay', ... }) 挂载到 DSH 浮层
• 依赖服务：slots（槽位注册）、timer（超时 / 循环定时器）；内置 makeFallbackTimer() 降级，脱离 DSH 也能跑（demo 页即利用这一点）
• 烟雾 / 烟圈使用 SVG feTurbulence + feDisplacementMap 滤镜制造不规则扰动，配合 CSS 关键帧实现漂浮、旋转、扩散与消散
• 燃烧状态机：burnFront（燃烧前沿）、ashLen（灰烬长度）与燃尽判定由 timer 循环驱动
• 音效全部由 tools/generate-sounds.cjs 程序化合成（白噪声 + Biquad 滤波 + 指数包络，44.1kHz WAV），无任何第三方采样，可自由商用
• 静态插件版客户端经 fetch 拉取宿主半路由的 WAV → WebAudio decodeAudioData 播放；每次播放前强制 resume() 以规避 Windows 音频会话挂起导致的静音

🧭 关于 DeepSeek Harness（DSH）

DeepSeek Harness（DSH）是 DeepSeek 的 Agent 运行环境，支持通过 Cordis 插件系统 扩展客户端 UI。本仓库是一个最小可复制的 DSH Agent 插件 案例：从「注册 shell.overlay 槽位」到「用 ctx 获取服务」，覆盖了开发一个 Cordis 客户端插件所需的核心知识。如果你也在为 DSH 开发插件，欢迎参考或 Fork。

🌍 English Quick Start

• What: an interactive fidget widget for DeepSeek Harness (DSH), built as a Cordis client plugin (AI Agent Plugin)
• Try it online: open https://shuigege2025-dev.github.io/cloud-smoke-widget/demo/ — no DSH required; or serve demo/index.html locally with any static server
• Install: paste this one-liner to any DSH chat (permanent — survives restart):

Install this DSH plugin for me permanently (must survive restart):
https://github.com/shuigege2025-dev/cloud-smoke-widget
Follow the "📦 正式安装" steps in its README (npm pack under plugin/, add the tgz to ~/.dsh/profiles/desktop/package.json, pnpm install, then remind me to restart DSH).

• License: MIT

⭐ 支持项目

如果这个小玩具帮你熬过了等 AI 的时间，点个 Star 支持一下 ⭐；也欢迎提 Issue 或 PR。

📜 License

MIT © cloud-smoke-widget contributors