dsh-web-icon-indicator 0.2.0 → 0.2.2

package/README.md

@@ -2,42 +2,68 @@
 
 > 📖 [中文文档](README.zh.md) · [English](README.md)
 
+[![awesome · DSH plugin](https://awesome-dsh-plugin.com/badge.svg)](https://github.com/awesome-dsh-plugin/awesome-dsh-plugin)
+
 Browser tab favicon reflects the current DSH session state — `idle` / `running` / `asking` / `done` — so you can see at a glance whether a session needs your attention, even when the tab is in the background.
 
-## States
+## ✨ What it does
 
-| State | Color (default) | Effect (default) |
-| --- | --- | --- |
-| `idle` | `#1a1a1a` (deep whale) | `static` |
-| `running` | `#FACC15` (yellow) | `static` |
-| `asking` | `#E5484D` + `#FACC15` | `blink` (400 ms) |
-| `done` | `#22A06B` (green) | `static` for `doneHoldMs`, then `idle` |
+- **Live session state on the tab favicon** — the browser-tab icon mirrors `idle` / `running` / `asking` / `done` (aggregate priority: `asking` > `running` > `done` > `idle`), so background tabs tell you at a glance what your agents are doing — including `ask_user_question` prompts and approval / sandbox-escalation waits, which pin the icon to `asking`.
+- **One SVG, recolored & animated in the browser** — ships a single whale template ([`icons/base.svg`](./icons/base.svg)); every state, color and frame is rendered client-side as a `data:image/svg+xml` URI. No per-color icon files.
+- **Six built-in effects** — `static`, `blink`, `breath`, `rainbow`, `heartbeat`, `bounce` — all driven by JavaScript, since favicons don't play SVG CSS animations.
+- **Fully configurable, applied live** — every state's color, effect and cycle speed, plus the asking/done hold timings, apply to the running tab within ~1 s — no reload, no restart.
+- **Built-in settings UI, zero YAML** — a *Favicon indicator* card in the DSH settings page edits the whole config with live color-swatch previews and persists it to `settings.yaml` for you (path below).
+- **Background-tab & restart-proof** — animated states keep a wall-clock fallback while `requestAnimationFrame` is paused in hidden tabs, and the status poll self-heals across host restarts.
 
-The plugin ships **one** base whale SVG ([`icons/base.svg`](./icons/base.svg)) and recolors / animates it in the browser — there are no per-color icon files anymore. Color and effect are fully configurable per state (see [Configure](#configure)).
+### 🛠 Configuration UI — how to get there
 
-### Dynamic color & animation
+| # | Step |
+| --- | --- |
+| 1 | Open the DSH Web GUI and go to **Settings / 设置**. |
+| 2 | In the **Plugins / 插件** tab, open **Plugin config / 插件配置**. |
+| 3 | Find the **Favicon indicator / 标签页图标指示器** card. |
+| 4 | Expand a state row (`idle` / `running` / `asking` / `done`) to edit **Effect / 特效**, **Colors / 颜色** (each swatch is a native color picker) and **Cycle (ms) / 周期（毫秒）** (shown only for animated states — static states have no cycle); use **Asking hold / 提问驻留** and **Done hold / 完成驻留** for the two timings. |
 
-All states share the same whale path; only the fill color (and optionally an animation) differ. Because a favicon is a plain image, SVG CSS animations never run inside the tab — the injected browser script builds each frame as a `data:image/svg+xml,…` URI, replacing the `__COLOR__` placeholder with the configured color and, for animated effects, injecting a `<g transform>` for scale/translate on every `requestAnimationFrame` tick. The available effects are:
+Changes are saved through the settings transport into the profile's `settings.yaml` and applied to the running tab within ~1 s — no reload, no restart. See [Configure](#configure) for the full key reference.
 
-| Effect | Behavior |
-| --- | --- |
-| `static` | A single colored frame, no motion — uses `colors[0]` |
-| `blink` | Toggles `colors[0]` ⇄ `colors[1]` (a darker second color is derived if missing) over `speed` |
-| `breath` | Pulsates between `colors[0]` and `colors[1]` (derived if missing) over `speed` |
-| `rainbow` | Uses `colors[0]` as the starting hue, then cycles the wheel over `speed` |
-| `heartbeat` | Scale pulses with a sharp lub-dub beat over `speed` — color is `colors[0]` |
-| `bounce` | The whale hops up and down over `speed` — color is `colors[0]` |
+## 🎬 Default configuration, visualized
+
+The four default states, exactly as they appear in the browser tab (the `asking` whale really blinks):
+
+<p align="center">
+  <img src="assets/states-default.svg" width="420" alt="Default states: idle dark whale, running yellow, asking red/yellow blinking, done green">
+</p>
+
+| State | Default color | Default effect |
+| --- | --- | --- |
+| `idle` | `#1a1a1a` — deep whale | `static` |
+| `running` | `#FACC15` — yellow | `static` |
+| `asking` | `#E5484D` ⇄ `#FACC15` — red/yellow | `blink` (400 ms) |
+| `done` | `#22A06B` — green | `static`, stays `doneHoldMs`, then back to `idle` |
+
+## ✨ All effects, animated
 
-A self-contained demo (no build, no deps) with these effects lives in [`demo/dynamic-color.html`](./demo/dynamic-color.html) — pick a state + effect and edit colors live, watching the browser-tab favicon update in real time.
+Every preview below is the real whale path, animated the same way the plugin renders it (the previews are self-contained animated SVGs — they play right in your browser):
+
+| Effect | What it does | Preview |
+| --- | --- | --- |
+| `static` | A single colored frame, no motion — uses `colors[0]` | <img src="assets/effects/static.svg" width="56" alt="static effect preview"> |
+| `blink` | Toggles `colors[0]` ⇄ `colors[1]` (a darker second color is derived if missing) over `speed` | <img src="assets/effects/blink.svg" width="56" alt="blink effect preview"> |
+| `breath` | Pulsates smoothly between `colors[0]` and `colors[1]` (derived if missing) over `speed` | <img src="assets/effects/breath.svg" width="56" alt="breath effect preview"> |
+| `rainbow` | Uses `colors[0]` as the starting hue, then cycles the color wheel over `speed` | <img src="assets/effects/rainbow.svg" width="56" alt="rainbow effect preview"> |
+| `heartbeat` | Scale pulses with a sharp lub-dub beat over `speed` — color is `colors[0]` | <img src="assets/effects/heartbeat.svg" width="56" alt="heartbeat effect preview"> |
+| `bounce` | The whale hops up and down over `speed` — color is `colors[0]` | <img src="assets/effects/bounce.svg" width="56" alt="bounce effect preview"> |
+
+Want to tweak colors and watch the tab favicon change live? Open the self-contained demo ([`demo/dynamic-color.html`](./demo/dynamic-color.html)) — pick a state + effect, edit colors, and the favicon updates in real time (no build, no dependencies).
 
 ## Install
 
 This is a standard DSH bundle plugin. Install it into the `web` profile (the GUI/TUI profiles pick it up automatically through the cordis patch layer).
 
-From npm (**recommended** — published as `dsh-web-icon-indicator@0.1.0`):
+From npm (**recommended**):
 
 ```bash
-dsh plugin --profile web add dsh-web-icon-indicator
+dsh plugin --profile web add dsh-web-icon-indicator@latest
 ```
 
 From the Git source:
@@ -102,15 +128,19 @@ service under the `web-icon-indicator` namespace (a schemastery schema in
 
 - **Web GUI:** open **设置 → 插件 → 插件配置** — a *Favicon indicator* card
   edits the same keys (asking/done hold, and per-state effect / colors /
-  cycle), staged and saved through the settings transport.
+  cycle), staged and saved through the settings transport. Each state is a
+  collapsible row showing a color dot and a one-line summary (`blink ·
+  #E5484D ⇄ #FACC15 · 400ms`); expanding a row reveals its three fields, and
+  the colors field previews parsed swatches live.
 - **Persistence:** values land in the profile's `settings.yaml` (default
   `~/.dsh/settings.yaml`) as a `web-icon-indicator:` section. The composition
   entry stays the `base` layer; resolution order is schema defaults →
   composition entry → settings document user layer.
-- **No server restart** for host-side timing changes (`askingHoldMs` /
-  `doneHoldMs` apply live). Visual changes need a tab reload — the injected
-  browser script bakes config at injection time, and the card re-injects it on
-  the next page load.
+- **No server restart, no tab reload** for settings-card saves: `askingHoldMs` /
+  `doneHoldMs` apply live host-side, and per-state visual config (effect /
+  colors / cycle) is synced into the running tab through the status poll within
+  ~1 s. Only code-level default changes in `lib/index.js` need a tab reload (or
+  a DSH web rebuild).
 - The browser half is a hand-written `lib/client.js` (ModuleLoader factory
   format — no build step, no runtime deps beyond the shell's `react`). The DSH
   client scanner picks a new `dsh.client` declaration up on the next profile
@@ -124,15 +154,37 @@ service under the `web-icon-indicator` namespace (a schemastery schema in
 - Status is aggregated across live `agents.list()` with priority `asking > running > done > idle`. The aggregation runs a `reconcile()` step on every request to detect running → idle transitions, because `agent/status`'s idle delivery is not guaranteed at turn end.
 - `ask_user_question` tool calls (via `tools/pre-execute` / `tools/result`) flip the session into `asking` with a configurable minimum-hold so the icon stays visible even when the user answers immediately.
 - Permission / **sandbox-interception** waits are also surfaced as `asking`: when the agent hits a sandbox denial and escalates (`sandbox_permissions` + `justification`), or any other tool asks for approval, the approval service appends an `approval/asked` session event and blocks the agent until you decide. The plugin watches `session/event` (with an authoritative fold over the live session log as a fallback) and pins the session into the `asking` state for that whole wait, clearing it on `approval/decided`.
-- The browser script polls `/dsh-web-icon-status.json` once a second, fetches `base.svg` once, and then on every `requestAnimationFrame` tick rebuilds the favicon as a `data:image/svg+xml,…` URI — replacing the `__COLOR__` placeholder with the state's configured color and applying the state's configured effect. Browsers don't play favicon SVG CSS animations, so all motion is JS-driven. Because browsers pause `requestAnimationFrame` in hidden tabs, the poll also repaints a wall-clock frame for animated states, so background tabs keep animating (coarsely) instead of freezing; full-speed animation resumes when the tab is visible again. The poll also survives host restarts: a transient fetch failure restores the original icon and retries on the next tick (the SPA reconnects in place, so the icon comes back without a manual refresh).
+- The browser script polls `/dsh-web-icon-status.json` once a second, fetches `base.svg` once, and then on every `requestAnimationFrame` tick rebuilds the favicon as a `data:image/svg+xml,…` URI — replacing the `__COLOR__` placeholder with the state's configured color and applying the state's configured effect. The status response also echoes the current per-state visual config, so a settings save reaches the running tab on the next poll (~1 s) without a reload. Browsers don't play favicon SVG CSS animations, so all motion is JS-driven. Because browsers pause `requestAnimationFrame` in hidden tabs, the poll also repaints a wall-clock frame for animated states, so background tabs keep animating (coarsely) instead of freezing; full-speed animation resumes when the tab is visible again. The poll also survives host restarts: a transient fetch failure restores the original icon and retries on the next tick (the SPA reconnects in place, so the icon comes back without a manual refresh).
+
+## Browser support & known limitations
+
+The favicon is a plain image, so browsers never run the SVG's own CSS/JS animation inside the tab UI — every frame is rendered here in JavaScript. How well a *changing* favicon is displayed differs by browser:
+
+| Browser | SVG favicon | Live per-state color/effect | Why |
+| --- | --- | --- | --- |
+| Chrome / Edge | ✅ | ✅ smooth | Re-reads `<link rel=icon>` live; `data:`-URI SVGs are fine. |
+| Firefox | ✅ | ✅ smooth | Renders SVG favicons well (and honors their `prefers-color-scheme`, unused here). |
+| Safari (macOS) | ✅ rendered static | ⚠️ best-effort | Ignores in-SVG CSS; aggressive icon caching. |
+| Safari (iOS) | ✅ rendered static | ⚠️ rarely | Unlikely to refresh without revisiting the tab. |
+
+Known limitations (current as of Safari 26.3):
+
+- **Favicons have their own cache.** Chrome keeps a favicon database, Firefox a `favicons.sqlite`, and **Safari a system-level icon cache** — none of which a normal *clear cache* touches, and WebKit even caches the "no icon" case. That is why a changed icon can linger for an existing tab. The plugin already mitigates this: it serves `base.svg` and the status endpoint with `Cache-Control: no-store`, bundles a freshness query (`?t=Date.now()`) on its fetches, and replaces the `<link rel=icon>` node on each state change.
+- **Safari renders SVG favicons but ignores their internal CSS** — no `@media`, no `prefers-color-scheme`, no CSS animation. So all recoloring must be baked into each frame's markup (which the plugin does) rather than driven by CSS variables.
+- **`data:`-URI SVG favicons are unreliable in Safari** (WebKit bug 236616, still open; reproduced on Safari 17.6). The plugin currently builds each frame as a `data:image/svg+xml` URI, so on Safari the tab icon may not render at all — the biggest known gap.
+- **Dynamic JS updates in Safari are hit-or-miss;** they may require a reload, and Safari "locks onto" the first icon it sees. There is no guaranteed, spec-supported way to swap a favicon live in Safari today.
+- **Pinned-tab icon (`<link rel="mask-icon">`) uses its own cache**, separate from the regular favicon, and is a single-colour silhouette tinted by the `color` attribute — macOS + pinned-tab only, read at page load, not live.
+
+Full mechanics with sources (WebKit bugs, Stack Overflow, browser-engineering blogs) and a recommended path toward smoother Safari colour changes live in [`docs/safari-favicon-research.md`](./docs/safari-favicon-research.md).
 
 ## Caveats
 
-- Favicon SVG CSS animations do not run inside the browser's tab UI — all effects are produced in JavaScript by rebuilding the data-URI each frame. This is a deliberate, zero-dependency design.
+- Favicon SVG CSS animations do not run inside the browser's tab UI — all effects are produced in JavaScript by rebuilding the data-URI each frame. This is a deliberate, zero-dependency design. (The animated previews in this README are demo assets for illustration only — the favicon itself is JS-animated.)
+- Favicon behavior differs by browser, and Safari is the most limited — see [Browser support & known limitations](#browser-support--known-limitations).
 - The base template must keep its `__COLOR__` placeholder in the `#p { fill: … }` rule; the browser replaces that token to color each frame.
 - The plugin runs in the **host** plane; it must be mounted into a profile's composition, not a session-scoped agent preset.
 - File reads go through the `fs` service with the configured `iconsDir` as `cwd`. Make sure that path is readable under your deployment's sandbox policy.
 
 ## License
 
-MIT
+MIT

package/README.zh.md

@@ -2,42 +2,68 @@
 
 > 📖 [English](README.md) · [中文文档](README.zh.md)
 
-浏览器标签页 favicon 实时反映 DSH 会话状态——待机 / 运行中 / 提问 / 完成——让你在标签页置于后台时也能一眼看出是否有会话需要处理。
+[![awesome · DSH plugin](https://awesome-dsh-plugin.com/badge.svg)](https://github.com/awesome-dsh-plugin/awesome-dsh-plugin)
 
-## 状态
+浏览器标签页 favicon 实时反映 DSH 会话状态——`待机` / `运行中` / `提问` / `完成`——让你在标签页置于后台时也能一眼看出是否有会话需要处理。
+
+## ✨ 功能特性
+
+- **标签页 favicon 实时反映会话状态** —— 浏览器标签页图标同步 `idle` / `running` / `asking` / `done`（聚合优先级：`asking` > `running` > `done` > `idle`），后台标签页也能一眼看清 agent 们在做什么——包括 `ask_user_question` 提问，以及审批 / 沙箱提权等待（这两种情况会把图标钉在 `asking` 态）。
+- **单个 SVG，浏览器内上色与动画** —— 只内置一个鲸鱼模板（[`icons/base.svg`](./icons/base.svg)）；每个状态、颜色、每一帧都在客户端渲染为 `data:image/svg+xml` URI，不再有按颜色拆分的图标文件。
+- **六种内置特效** —— `static`（静止）、`blink`（闪烁）、`breath`（呼吸）、`rainbow`（彩虹）、`heartbeat`（心跳）、`bounce`（跳动），全部由 JavaScript 驱动（favicon 不会播放 SVG CSS 动画）。
+- **完全可配置、即时生效** —— 每个状态的颜色、特效、周期，以及提问 / 完成驻留时长，改动约 1 秒内同步到已打开的标签页——无需刷新、无需重启。
+- **内置配置 UI，无需手写 YAML** —— DSH 设置页里的 *标签页图标指示器* 卡片可编辑整套配置，带实时色块预览，保存后自动写入 `settings.yaml`（路径见下）。
+- **后台标签页与重启抗性** —— 隐藏标签页中 `requestAnimationFrame` 被暂停时，动画态会按墙钟时间补帧；状态轮询还能扛住 host 重启，图标自动恢复。
+
+### 🛠 配置界面——怎么找到它
+
+| # | 步骤 |
+| --- | --- |
+| 1 | 打开 DSH Web GUI，进入 **设置**。 |
+| 2 | 在 **插件** 选项卡中，打开 **插件配置**。 |
+| 3 | 找到 **标签页图标指示器（Favicon indicator）** 卡片。 |
+| 4 | 展开某个状态行（`idle` / `running` / `asking` / `done`），编辑 **特效**、**颜色**（每个色块即原生取色器），以及**周期（毫秒）**——仅动画状态显示，静态状态无周期；用 **提问驻留** / **完成驻留** 调整两个时长。 |
+
+改动会通过 settings 传输层持久化到 profile 的 `settings.yaml`，约 1 秒内应用到已打开的标签页——无需刷新、无需重启。完整键说明见 [配置](#配置)。
+
+## 🎬 默认配置，可视化
+
+四个默认状态在浏览器标签页中的实际效果（`asking` 那条鲸鱼真的在闪烁）：
+
+<p align="center">
+  <img src="assets/states-default.svg" width="420" alt="默认状态：idle 深色鲸鱼、running 黄色、asking 红/黄闪烁、done 绿色">
+</p>
 
 | 状态 | 颜色（默认） | 特效（默认） |
 | --- | --- | --- |
-| `idle` 待机 | `#1a1a1a`（深色鲸鱼） | `static` |
-| `running` 运行中 | `#FACC15`（黄色） | `static` |
-| `asking` 提问 | `#E5484D` + `#FACC15` | `blink`（400ms） |
-| `done` 完成 | `#22A06B`（绿色） | `doneHoldMs` 内 `static`，随后回到 `idle` |
+| `idle` 待机 | `#1a1a1a`——深色鲸鱼 | `static` |
+| `running` 运行中 | `#FACC15`——黄色 | `static` |
+| `asking` 提问 | `#E5484D` ⇄ `#FACC15`——红/黄 | `blink`（400ms） |
+| `done` 完成 | `#22A06B`——绿色 | `static`，保持 `doneHoldMs` 后回到 `idle` |
 
-插件只内置**一个**基础鲸鱼 SVG（[`icons/base.svg`](./icons/base.svg)），在浏览器中动态上色/加动画——不再有按颜色拆分的图标文件。每个状态的颜色和特效都可通过 [配置](#配置) 自由设置。
+## ✨ 全部特效，动画演示
 
-### 动态颜色与动画
+下面每个预览都是真实的鲸鱼路径，按插件实际渲染方式做动画（预览是自包含的动画 SVG，在浏览器里直接播放）：
 
-所有状态共用同一条鲸鱼路径，只有填充色（以及可选的动画）不同。由于 favicon 是普通图片，SVG 内部的 CSS 动画不会在标签页执行——注入的浏览器脚本把每一帧构建成 `data:image/svg+xml,…` URI：在每个 `requestAnimationFrame` 周期替换 `__COLOR__` 占位符为配置颜色，动画类特效则在 `<g transform>` 中注入缩放/位移。可选特效：
-
-| 特效 | 效果 |
-| --- | --- |
-| `static` | 纯色单帧，无动画——使用 `colors[0]` |
-| `blink` | 在 `colors[0]` ⇄ `colors[1]` 之间按 `speed` 切换（缺省时自动推导更深的第二色） |
-| `breath` | 在 `colors[0]` 与 `colors[1]` 之间平滑呼吸过渡（缺省时推导） |
-| `rainbow` | 以 `colors[0]` 为起始色相，在 `speed` 内绕色轮循环 |
-| `heartbeat` | 在 `speed` 内做「lub-dub」式的尖锐缩放脉冲——颜色为 `colors[0]` |
-| `bounce` | 鲸鱼在 `speed` 内上下跳动——颜色为 `colors[0]` |
+| 特效 | 效果 | 预览 |
+| --- | --- | --- |
+| `static` | 纯色单帧，无动画——使用 `colors[0]` | <img src="assets/effects/static.svg" width="56" alt="static 特效预览"> |
+| `blink` | 在 `colors[0]` ⇄ `colors[1]` 之间按 `speed` 切换（缺省时自动推导更深的第二色） | <img src="assets/effects/blink.svg" width="56" alt="blink 特效预览"> |
+| `breath` | 在 `colors[0]` 与 `colors[1]` 之间平滑呼吸过渡（缺省时推导） | <img src="assets/effects/breath.svg" width="56" alt="breath 特效预览"> |
+| `rainbow` | 以 `colors[0]` 为起始色相，在 `speed` 内绕色轮循环 | <img src="assets/effects/rainbow.svg" width="56" alt="rainbow 特效预览"> |
+| `heartbeat` | 在 `speed` 内做「lub-dub」式的尖锐缩放脉冲——颜色为 `colors[0]` | <img src="assets/effects/heartbeat.svg" width="56" alt="heartbeat 特效预览"> |
+| `bounce` | 鲸鱼在 `speed` 内上下跳动——颜色为 `colors[0]` | <img src="assets/effects/bounce.svg" width="56" alt="bounce 特效预览"> |
 
-完整自包含 demo（无构建、无依赖）在 [`demo/dynamic-color.html`](./demo/dynamic-color.html)：选择状态 + 特效并实时改色，即可看到标签页 favicon 即时变化。
+想改颜色并实时观察标签页 favicon 变化？打开自包含 demo（[`demo/dynamic-color.html`](./demo/dynamic-color.html)）——选择状态 + 特效并实时改色，favicon 即时更新（无构建、无依赖）。
 
 ## 安装
 
 这是一个标准 DSH bundle 插件。安装到 `web` profile（GUI/TUI profile 会自动通过 cordis patch 层加载）：
 
-从 npm 安装（**推荐**——已发布为 `dsh-web-icon-indicator@0.1.0`）：
+从 npm 安装（**推荐**）：
 
 ```bash
-dsh plugin --profile web add dsh-web-icon-indicator
+dsh plugin --profile web add dsh-web-icon-indicator@latest
 ```
 
 从 Git 源码安装：
@@ -101,13 +127,16 @@ config:
 
 - **Web GUI：** 打开 **设置 → 插件 → 插件配置**，会出现 *标签页图标指示器*
   卡片，可编辑同样的键（提问/完成驻留，以及每个状态的特效 / 颜色 / 周期），
-  通过 settings 传输层暂存并保存。
+  通过 settings 传输层暂存并保存。每个状态是一行可折叠条目，带主色圆点和一行
+  摘要（如 `blink · #E5484D ⇄ #FACC15 · 400ms`）；展开该行才显示它的三个字段，
+  颜色输入框旁会实时预览解析出的色块。
 - **持久化：** 值写入 profile 的 `settings.yaml`（默认 `~/.dsh/settings.yaml`）
   的 `web-icon-indicator:` 段。合成条目仍是 `base` 层；解析顺序为 schema 默认值
   → 合成条目 → 设置文档用户层。
-- **无需重启服务器**即可让主机侧计时（`askingHoldMs` / `doneHoldMs`）生效；
-  视觉变化需要重载标签页——注入的浏览器脚本在注入时烘焙配置，卡片会在下次
-  页面加载时重新注入。
+- **无需重启服务器、无需刷新标签页**即可让设置卡片的修改生效：`askingHoldMs` /
+  `doneHoldMs` 在主机侧即时生效；各状态的视觉配置（特效 / 颜色 / 周期）会随状态
+  轮询同步进正在运行的标签页，约 1 秒内生效。只有改 `lib/index.js` 里的代码级
+  默认值才需要重载标签页（或重新构建 DSH Web）。
 - 浏览器半区是手写的 `lib/client.js`（ModuleLoader factory 格式——无构建步骤、
   无额外运行期依赖，仅用 shell 自带的 `react`）。DSH 客户端扫描器会在下次启动
   profile 时识别新的 `dsh.client` 声明。
@@ -119,15 +148,37 @@ config:
 - 状态按 `agents.list()` 聚合，优先级 `asking > running > done > idle`。每次请求都会执行一次 `reconcile()` 检测 running → idle 的转换，因为 `agent/status` 的 idle 事件在回合结束时并不保证送达。
 - `ask_user_question` 工具调用（通过 `tools/pre-execute` / `tools/result`）把会话置为 `asking`，带可配置的最小保持时长，即使你立刻回答，图标也会保持可见。
 - 权限 / **沙箱拦截**等待同样会显示为 `asking`：当 agent 命中沙箱拒绝并请求提权（`sandbox_permissions` + `justification`），或其他工具需要征得同意时，审批服务会先写入一条 `approval/asked` 会话事件并阻塞 agent，直到你做出决定。插件监听 `session/event`（并以实时会话日志的权威折叠作为兜底）在整个等待期间将会话置为 `asking` 状态，收到 `approval/decided` 后清除。
-- 浏览器脚本每秒轮询 `/dsh-web-icon-status.json`，首次获取 `base.svg`，然后每个 `requestAnimationFrame` 周期把 favicon 重建为 `data:image/svg+xml,…` URI——把 `__COLOR__` 占位符替换为状态配置的颜色，并应用该状态配置的特效。浏览器不会播放 SVG favicon 的 CSS 动画，所以一切动画都由 JS 驱动。由于浏览器在**隐藏（后台）标签页会暂停 `requestAnimationFrame`**，轮询还会为动画态补绘一帧按墙钟时间计算的画面——后台标签页保持粗粒度动画（约每 1 秒）而不会冻结，切回前台后恢复满速动画。轮询还能**扛住 host 重启**：瞬时请求失败时先还原原始图标，并在下一个 tick 重试（SPA 原地重连，无需手动刷新图标即可恢复）。
+- 浏览器脚本每秒轮询 `/dsh-web-icon-status.json`，首次获取 `base.svg`，然后每个 `requestAnimationFrame` 周期把 favicon 重建为 `data:image/svg+xml,…` URI——把 `__COLOR__` 占位符替换为状态配置的颜色，并应用该状态配置的特效。状态响应还会携带当前的每状态视觉配置，因此设置保存后约 1 秒内（下一个轮询 tick）即同步到已打开的标签页，无需刷新。浏览器不会播放 SVG favicon 的 CSS 动画，所以一切动画都由 JS 驱动。由于浏览器在**隐藏（后台）标签页会暂停 `requestAnimationFrame`**，轮询还会为动画态补绘一帧按墙钟时间计算的画面——后台标签页保持粗粒度动画（约每 1 秒）而不会冻结，切回前台后恢复满速动画。轮询还能**扛住 host 重启**：瞬时请求失败时先还原原始图标，并在下一个 tick 重试（SPA 原地重连，无需手动刷新图标即可恢复）。
+
+## 浏览器支持与已知限制
+
+favicon 本质是一张图片，浏览器不会在标签页 UI 里运行 SVG 自带的 CSS/JS 动画——每一帧都在本插件里由 JavaScript 生成。
+
+| 浏览器 | SVG favicon | 逐帧换色 / 换特效 | 说明 |
+| --- | --- | --- | --- |
+| Chrome / Edge | ✅ | ✅ 顺滑 | 实时重读 `<link rel=icon>`；`data:` URI 的 SVG 可用。 |
+| Firefox | ✅ | ✅ 顺滑 | 对 SVG favicon 支持良好（且会响应其 `prefers-color-scheme`，本插件未使用）。 |
+| Safari（macOS） | ✅ 渲染为静态图 | ⚠️ 尽力而为 | 忽略 SVG 内嵌 CSS；favicon 缓存激进。 |
+| Safari（iOS） | ✅ 渲染为静态图 | ⚠️ 基本不刷 | 通常需重新访问标签页才刷新。 |
+
+已知限制（截至 Safari 26.3）：
+
+- **favicon 有专属缓存。** Chrome 用 favicon 数据库、Firefox 用 `favicons.sqlite`、**Safari 用系统级图标缓存**——清普通缓存都清不掉，WebKit 甚至会把「无图标」这一状态也缓存起来。这就是改了图标后，已打开的标签页还可能显示旧图标的原因。本插件已通过「给 `base.svg` 与状态端点设置 `Cache-Control: no-store`、请求携带 freshness 参数（`?t=Date.now()`）、每次切换状态时重建 `<link rel=icon>` 节点」来缓解。
+- **Safari 渲染 SVG favicon，但忽略其内部 CSS**——不支持 `@media`、`prefers-color-scheme`、CSS 动画。所以所有上色必须烘焙进每一帧的标记（本插件正是这么做的），而不能依赖 CSS 变量。
+- **`data:` URI 的 SVG favicon 在 Safari 不可靠**（WebKit bug 236616，仍未关闭；Safari 17.6 复现）。本插件当前每帧都生成 `data:image/svg+xml` URI，因此在 Safari 上标签页图标可能完全不显示——这是最大的已知缺口。
+- **Safari 的动态 JS 更新为 hit-or-miss**，可能需要刷新一次；Safari 会「锁定」它首次看到的图标。目前没有保证可靠的、符合规范的手段能在 Safari 中实时更换 favicon。
+- **固定标签页图标（`<link rel="mask-icon">`）使用独立缓存**，与普通 favicon 分开；它是靠 `color` 属性着色的**单色剪影**——仅 macOS + 固定标签页、页面加载时读取一次、并非实时。
+
+完整机制与来源（WebKit bugs、Stack Overflow、浏览器工程博客）以及让 Safari 更顺滑变色/切换的推荐路径见 [`docs/safari-favicon-research.md`](./docs/safari-favicon-research.md)。
 
 ## 已知限制
 
-- favicon 的 SVG CSS 动画在浏览器标签页 UI 中不会运行——所有特效都由 JavaScript 每帧重建 data-URI 实现，这是零依赖设计的刻意取舍。
+- favicon 的 SVG CSS 动画在浏览器标签页 UI 中不会运行——所有特效都由 JavaScript 每帧重建 data-URI 实现，这是零依赖设计的刻意取舍。（本文档中的动画预览只是演示素材——真实 favicon 的动画始终由 JS 驱动。）
+- favicon 行为因浏览器而异，其中 Safari 限制最多——见 [浏览器支持与已知限制](#浏览器支持与已知限制)。
 - `base.svg` 模板必须保留 `#p { fill: … }` 规则中的 `__COLOR__` 占位符；浏览器会替换该标记为每帧上色。
 - 插件运行在 **host** 平面，必须挂载进 profile 的组合配置，不能作为会话级 agent preset。
 - 文件读取走 `fs` 服务，以配置的 `iconsDir` 为 `cwd`。请确保该路径在部署环境的沙箱策略下可读。
 
 ## 许可
 
-MIT
+MIT

package/assets/effects/blink.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="blink effect: toggles between red and yellow"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}@keyframes bk{0%,49.9%{fill:#E5484D}50%,100%{fill:#FACC15}}#p{animation:bk .8s steps(1) infinite}</style><rect class="chip" x="4" y="4" width="88" height="88" rx="20"/><g transform="translate(23,23)"><path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g></svg>

package/assets/effects/bounce.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="bounce effect: whale hops up and down"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}@keyframes bo{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}#w{animation:bo 1.2s ease-in-out infinite}#p{fill:#FACC15}</style><rect class="chip" x="4" y="4" width="88" height="88" rx="20"/><g transform="translate(23,23)"><g id="w"><path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g></g></svg>

package/assets/effects/breath.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="breath effect: pulsates between green shades"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}@keyframes br{0%,100%{fill:#22A06B}50%{fill:#157A4E}}#p{animation:br 1.2s ease-in-out infinite}</style><rect class="chip" x="4" y="4" width="88" height="88" rx="20"/><g transform="translate(23,23)"><path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g></svg>

package/assets/effects/heartbeat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="heartbeat effect: sharp lub-dub scale pulse"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}@keyframes hb{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}26%{transform:scale(1)}40%{transform:scale(1.09)}55%{transform:scale(1)}}#w{transform-box:fill-box;transform-origin:center;animation:hb 1.2s ease-in-out infinite}#p{fill:#E5484D}</style><rect class="chip" x="4" y="4" width="88" height="88" rx="20"/><g transform="translate(23,23)"><g id="w"><path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g></g></svg>

package/assets/effects/rainbow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="rainbow effect: hue cycles around the color wheel"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}@keyframes rb{from{filter:hue-rotate(0deg);-webkit-filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg);-webkit-filter:hue-rotate(360deg)}}#p{fill:#E5484D;animation:rb 1.2s linear infinite}</style><rect class="chip" x="4" y="4" width="88" height="88" rx="20"/><g transform="translate(23,23)"><path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g></svg>

package/assets/effects/static.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="static effect: single colored frame"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}</style><rect class="chip" x="4" y="4" width="88" height="88" rx="20"/><g transform="translate(23,23)"><path d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z" fill="#FACC15"/></g></svg>

package/assets/states-default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="112" viewBox="0 0 384 112" role="img" aria-label="Default states: idle dark, running yellow, asking red-yellow blinking, done green"><style>.chip{fill:#ffffff;stroke:#d0d7de;stroke-width:1.5}#p1{fill:#1a1a1a}#p2{fill:#FACC15}#p4{fill:#22A06B}@keyframes bk{0%,49.9%{fill:#E5484D}50%,100%{fill:#FACC15}}#p3{animation:bk .8s steps(1) infinite}.lbl{font:600 12px system-ui,-apple-system,Segoe UI,sans-serif;fill:#59636e;text-anchor:middle}</style><rect class="chip" x="8" y="8" width="80" height="80" rx="20"/><rect class="chip" x="104" y="8" width="80" height="80" rx="20"/><rect class="chip" x="200" y="8" width="80" height="80" rx="20"/><rect class="chip" x="296" y="8" width="80" height="80" rx="20"/><g transform="translate(23,23)"><path id="p1" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g><g transform="translate(119,23)"><path id="p2" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g><g transform="translate(215,23)"><path id="p3" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g><g transform="translate(311,23)"><path id="p4" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/></g><text class="lbl" x="48" y="102">idle</text><text class="lbl" x="144" y="102">running</text><text class="lbl" x="240" y="102">asking</text><text class="lbl" x="336" y="102">done</text></svg>

package/docs/safari-favicon-research.md

@@ -0,0 +1,114 @@
+# Safari favicon 机制研究：动态更换与 SVG 动态变色可行性
+
+> **目的**：判断能否在 Safari 里为浏览器标签页 favicon 做「动态更换」，以及能否实现「SVG 动态变色」；
+> 结论用于指导 [`dsh-web-icon-indicator`](../README.md) 的下一步实现。
+>
+> **资料截至** Safari 26.3（2026）。文末列出来源。文中涉及本插件的句子，均以 `lib/index.js` 当前实现为准。
+
+## 1. 结论速览
+
+| 问题 | 结论 |
+| --- | --- |
+| Safari 能否渲染 SVG favicon？ | ✅ 能，但**只当作静态图片**，完全忽略 SVG 内部的 CSS |
+| 能否「动态更换」favicon（JS 改 link）？ | ⚠️ 能，但**只算尽力而为**——实时性、确定性都不保证 |
+| 能否实现「SVG 动态变色」？ | 不能靠 CSS（currentColor / 变量 / media query）；只能**每个状态生成一份新 SVG 再切换** |
+| 本插件当前用的 `data:` URI 在 Safari？ | ❌ 不可靠（WebKit bug 236616 未关闭） |
+| Safari 原生的「动态颜色」机制 | `<link rel="mask-icon">`——仅 macOS 固定标签页、单色剪影、有独立缓存 |
+
+一句话结论：**Chrome / Firefox / Edge 能顺滑做到逐帧换色；Safari 只能「外部 SVG + cache-busting + 重建 `<link>` 节点 + no-store」尽力做到，且常常要刷新一次才生效。** 这是浏览器层面的硬限制，插件无法完全绕开。
+
+## 2. Safari 的 favicon 机制（关键点）
+
+### 2.1 favicon 有独立于 HTTP 缓存的「专属缓存」，Safari 是系统级图标缓存
+
+- **Chrome**：独立的 favicon 数据库（清缓存、强刷、重启都可能清不掉）。
+- **Firefox**：`favicons.sqlite`，绑在历史记录条目上。
+- **Safari**：**系统级图标缓存（system-level icon cache）**。
+
+这意味着「改了 favicon 但老标签页不更新」是常态，绝非巧合。更糟的是 WebKit 会**缓存「这个网站没有 favicon」这一事实本身**，以避免每次加载都去探测——见 [WebKit bug 7069](https://www2.webkit.org/show_bug.cgi?id=7069)。
+
+所以正确的刷新手段不是清缓存，而是**改变 favicon 的 URL**（cache-busting），比如加上 `?v=<签名>`。
+
+### 2.2 Safari 能渲染 SVG favicon，但忽略其内部所有 CSS
+
+现代 Safari 支持一个真实的 `.svg` favicon 文件（`type="image/svg+xml"`），但把它当**普通图片光栅化**：
+
+- 不支持里面的 `@media`、`prefers-color-scheme`、CSS 动画。
+- 已确证：[WebKit bug 309949《SVG favicons don't respect media query overrides, notably for dark mode》](https://www2.webkit.org/show_bug.cgi?id=309949)，**状态 NEW，作者注明「Safari 26.3 复现」**——Safari 只渲染基础（浅色）版本。
+- [pawelgrzybek.com](https://pawelgrzybek.com/svg-favicons-that-respect-theme-preference/)（2026-03）实测：Chrome 会处理 favicon 里的 media query（但要刷新才生效），Firefox 表现最好，**Safari 完全忽略**。
+
+> ⚠️ 结论：**永远不要指望用 SVG 里的 `currentColor` / CSS 变量 / media query / 内嵌动画来给 favicon 变色。** favicon 本质是图片，Safari 连它内部的 CSS 都不跑。这也印证了本插件注释里那句「favicons 不播 SVG CSS 动画，一切 motion 必须由 JS 生成」是对的。
+
+### 2.3 `data:` 形式的 SVG favicon 在 Safari 不可靠（很可能完全不显示）
+
+[WebKit bug 236616《Data URI favicon doesn't seem to work》](https://www2.webkit.org/show_bug.cgi?id=236616) 至今 **NEW**，评论区明确说 **macOS 14.6.1 / Safari 17.6 仍不工作**，且用的就是 `data:` URI 的 SVG；还有「可能是 Safari 15.3 回归」的怀疑。
+
+> ⚠️ **这直接命中本插件的软肋**：`lib/index.js` 的 `frameUri()` 每一帧都生成 `data:image/svg+xml,…`。在 Chrome/Firefox 没问题，但在 **Safari 里整个图标可能都不显示**。这是「要改」的首要问题。
+
+### 2.4 动态更换（JS 改 `<link rel=icon>`）的真实表现
+
+跨浏览器通用手法：
+1. **给 URL 加 cache-busting 参数**（`?v=<epoch>`）——改变 URL 即绕过专属 favicon 缓存，Safari 也会重新拉取。
+2. **用 JS 替换 / 重建 `<link>` 节点**（有些浏览器只在页面加载时读一次）——本插件已有 `setHrefFresh()` 做 `replaceChild`，方向正确。
+3. 给 favicon 资源加 `Cache-Control: no-store`。
+
+**但 Safari 是最不配合的**：[SO 79637210](https://stackoverflow.com/questions/79637210) 明确说「动态 JS 更新在 Safari 里是 hit-or-miss，尤其在 reload 或已缓存的情况下」，「Safari 会锁定最初那个版本，强刷都不一定换」，并给出结论：**「目前没有一个完全可靠、符合规范的方式来动态改 Safari 的 favicon。」** iOS Safari 更糟（常常要重新导航）。
+
+### 2.5 Safari 原生的「动态颜色」机制：`mask-icon`（固定标签页）
+
+`<link rel="mask-icon" href="…svg" color="#…">` 用于 macOS 的 **Pinned Tab（固定标签页）**，是 Safari 唯一允许你「不改 SVG、只改颜色」的机制——用 `color` 属性直接指定单色。但它限制很多：
+
+- 仅 **macOS**，不支持 iOS。
+- 仅 **固定 / 置顶标签页**；普通标签页不适用。
+- **纯单色剪影**：浏览器把 SVG 当黑色 mask 用，不支持全彩。
+- **有自己独立的缓存**（[dev.to](https://dev.to/jamiepark-design/how-browsers-actually-load-favicons-and-why-yours-wont-update-172c)）：它跟普通 favicon 分开缓存，改掉 URL 也要加 `?v=` 才会刷新。
+- `color` 在**页面加载时**读取；JS 运行时改属性**不一定重绘**。
+
+所以它适合「每个页面加载设一次单色」，**不适合按帧 / 按状态实时驱动**。可作补充，不可作主方案。
+
+### 2.6 图标选择与 ICO 偏好
+
+[WebKit bug 315573《Handle favicon, apple-touch-icon and web manifest icons correctly for pixel-perfect rendering》](https://www2.webkit.org/show_bug.cgi?id=315573)（**NEW，2026-05 更新**）说明：
+
+- **Safari 的 UI 进程**才真正决定为某个用途（标签页 favicon / web clip / Web 应用）下载哪一个图标条目。
+- 排序完全按**静态元数据**（`LinkIconType`、声明的 `sizes`、是否 precomposed），**不看** `devicePixelRatio` 或渲染目标。
+- 存在「Favicon: prefers ICO, picks largest entry」的怪癖：一个多尺寸的 `.ico` 可能被当成 16px 的小图标，让同尺寸的 32×32 PNG 反而胜出。
+
+## 3. 可行性矩阵（各浏览器）
+
+| 浏览器 | SVG favicon | 逐帧换色 / 换特效 | 动态更新可靠性 | 关键约束 |
+| --- | --- | --- | --- | --- |
+| Chrome / Edge | ✅ | ✅ 顺滑 | ✅ 高 | 每次改 href 都实时重绘；`data:` URI 可用 |
+| Firefox | ✅ | ✅ 顺滑 | ✅ 高 | 对 SVG favicon 的 `prefers-color-scheme` 处理最好（本插件未用） |
+| Safari（macOS） | ✅ 静态 | ⚠️ 尽力而为 | ⚠️ 中低 | 忽略内嵌 CSS；`data:` URI 不可靠；顽固缓存 |
+| Safari（iOS） | ✅ 静态 | ❌ 基本不可靠 | ❌ 低 | 通常需重新访问 / 重新添加到主屏 |
+
+## 4. 对本插件的落地建议
+
+1. **首选改动：把每帧的 `data:image/svg+xml` 换成 Safari 更认的载体**，按可靠性排序：
+   - **Blob URL**：`URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }))` —— 每状态一个「外部」URL，既避开 `data:` 限制，又不用每帧打网络请求，比 `data:` 更容易被 Safari 当 favicon 处理。（公开资料**未查到 Safari 对 `blob:` favicon 的 100% 确认**，需真机验证。）
+   - **真 `.svg` URL + `?color=…&v=…`**：让服务端按 color 返回 SVG（需要新增路由），href 指向真实 URL 并 cache-busting。缺点：动画每帧要发请求；或退而求其次，生成**有限个预置颜色变体**（不像 60fps 那么贵）。
+2. **保留现有抗性措施**：`setHrefFresh()`（替换 `<link>` 节点）、`Cache-Control: no-store`、状态请求与 base.svg 请求都带 freshness 查询参数（`?t=`）——这些都已在 `lib/index.js` 里。
+3. **可选补充 `mask-icon`** 覆盖 macOS 固定标签页：`<link rel="mask-icon" href="/…/whale.svg?v=…" color="#FACC15">`。但接受它「macOS 限定、单色剪影、固定标签、加载时读一次颜色、独立缓存」的局限。
+4. **设好预期**：Chrome/Firefox/Edge 实时顺滑；**Safari 上「能变色、但可能要刷新一次」**。文档要把这层限制讲清楚，避免用户误以为 Safari 也能像 Chrome 一样逐帧实时。
+
+## 5. 浏览器支持与局限汇总（写入 README 的部分）
+
+- **favicon 有专属缓存**：Chrome favicon 数据库、Firefox `favicons.sqlite`、**Safari 系统级图标缓存**，清普通缓存清不掉；WebKit 连「无图标」状态都缓存。插件已用「`no-store` + 每帧新鲜 query + 重建 `<link>`」缓解。
+- **Safari 渲染 SVG 但不跑其 CSS**：无 `@media` / `prefers-color-scheme` / CSS 动画，所有上色必须在每帧标记里烘焙。
+- **`data:` URI 的 SVG favicon 在 Safari 不可靠**（WebKit bug 236616）：插件目前每帧都用 `data:` URI，Safari 上可能不显示——最大已知缺口。
+- **Safari 动态 JS 更新为 hit-or-miss**，可能需要刷新；没有保证可靠的规范级手段。
+- **`mask-icon`（固定标签）独立缓存**、单色剪影、macOS 限定、加载时读一次颜色、非实时。
+
+## 6. 参考来源
+
+| 来源 | 要点 | 日期/状态 |
+| --- | --- | --- |
+| [WebKit bug 236616 — Data URI favicon doesn't seem to work](https://www2.webkit.org/show_bug.cgi?id=236616) | `data:` URI favicon（含 SVG）不可用；Safari 17.6 仍复现 | **NEW** |
+| [WebKit bug 309949 — SVG favicons don't respect media query overrides](https://www2.webkit.org/show_bug.cgi?id=309949) | Safari 渲染 SVG favicon 但忽略其内嵌 CSS / media query | **NEW**，Safari 26.3 复现 |
+| [WebKit bug 315573 — favicon / apple-touch-icon / manifest 选择](https://www2.webkit.org/show_bug.cgi?id=315573) | Safari UI 进程决定取哪个图标；按静态元数据排序；ICO 偏好怪癖 | **NEW**，2026-05 |
+| [WebKit bug 7069 — favicon 缓存与「无图标」状态缓存](https://www2.webkit.org/show_bug.cgi?id=7069) | WebKit 缓存旧图标，甚至缓存「无图标」事实以省去探测开销 | RESOLVED/DUPLICATE |
+| [dev.to — How Browsers Actually Load Favicons](https://dev.to/jamiepark-design/how-browsers-actually-load-favicons-and-why-yours-wont-update-172c) | 各浏览器专属 favicon 缓存；version-busting `?v=` 技巧；mask-icon 有独立缓存 | 2026-06-23 |
+| [pawelgrzybek.com — SVG favicons that respect theme preference](https://pawelgrzybek.com/svg-favicons-that-respect-theme-preference/) | Chrome/Firefox/Safari 三款对 SVG favicon + media query 的对比 | 2026-03-14 |
+| [SO 79637210 — Safari 动态切换 dark/light favicon](https://stackoverflow.com/questions/79637210) | Safari 不支持 link 上的 media query；动态 JS 更新 hit-or-miss；「锁定」首个图标 | 近期 |
+| [nesin.io — Fix Safari showing old favicon](https://nesin.io/blog/fix-safari-showing-old-favicon-issue) | Safari 激进缓存 favicon；cache-busting `?v=x.x` 或改文件名 | 2023-05 |

package/icons/base.svg

@@ -2,5 +2,5 @@
 	<style>
 		#p { fill: __COLOR__; }
 	</style>
-	<path id="p" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/>
+	<path id="p" fill="__COLOR__" d="M48.8354 10.0479C48.3232 9.79199 48.1025 10.2798 47.8032 10.5278C47.7007 10.6079 47.6143 10.7119 47.5273 10.8076C46.7793 11.624 45.9048 12.1597 44.7622 12.0957C43.0923 12 41.666 12.5356 40.4058 13.8398C40.1377 12.2319 39.2476 11.272 37.8926 10.6558C37.1836 10.3359 36.4668 10.0156 35.9702 9.31982C35.6235 8.82373 35.5293 8.27197 35.356 7.72754C35.2456 7.3999 35.1353 7.06396 34.7651 7.00781C34.3633 6.94385 34.2056 7.2876 34.0479 7.57568C33.418 8.75195 33.1733 10.0479 33.1973 11.3599C33.2524 14.312 34.4736 16.6641 36.8999 18.3359C37.1758 18.5278 37.2466 18.7197 37.1597 19C36.9946 19.5757 36.7974 20.1357 36.624 20.7119C36.5137 21.0801 36.3486 21.1597 35.9624 21C34.6309 20.4321 33.481 19.5918 32.4644 18.5757C30.7393 16.8721 29.1792 14.9917 27.2334 13.52C26.7764 13.1758 26.3193 12.856 25.8467 12.5518C23.8618 10.584 26.1069 8.96777 26.627 8.77588C27.1704 8.57568 26.8159 7.8877 25.0591 7.896C23.3022 7.90381 21.6953 8.50391 19.647 9.30371C19.3477 9.42383 19.0322 9.51172 18.7095 9.58398C16.8501 9.22363 14.9199 9.14355 12.9033 9.37598C9.10596 9.80762 6.07275 11.6396 3.84326 14.7681C1.16455 18.5278 0.53418 22.7998 1.30664 27.2559C2.11768 31.9521 4.46582 35.8398 8.07373 38.8799C11.8159 42.0322 16.1255 43.5762 21.041 43.2803C24.0269 43.104 27.3516 42.6963 31.1016 39.4561C32.0469 39.936 33.0396 40.1279 34.686 40.272C35.9546 40.3921 37.1758 40.208 38.1211 40.0078C39.6021 39.688 39.4995 38.2881 38.9639 38.0322C34.623 35.9678 35.5762 36.8081 34.71 36.1279C36.9155 33.4639 40.2402 30.6958 41.54 21.728C41.6426 21.0161 41.5557 20.5679 41.54 19.9917C41.5322 19.6396 41.6108 19.5039 42.0049 19.4639C43.0923 19.3359 44.1479 19.0317 45.1167 18.4878C47.9292 16.9199 49.064 14.3438 49.3315 11.2559C49.3711 10.7837 49.3237 10.2959 48.8354 10.0479ZM24.3262 37.8398C20.1196 34.4639 18.0791 33.3521 17.2358 33.3999C16.4482 33.4482 16.5898 34.3682 16.7632 34.9678C16.9443 35.5601 17.1812 35.9683 17.5117 36.4878C17.7402 36.832 17.8979 37.3442 17.2832 37.728C15.9282 38.584 13.5728 37.4399 13.4624 37.3838C10.7207 35.7358 8.42822 33.5601 6.81348 30.584C5.25342 27.7197 4.34766 24.6479 4.19775 21.3677C4.1582 20.5757 4.38672 20.2959 5.15869 20.1519C6.17529 19.96 7.22314 19.9199 8.23926 20.0718C12.5327 20.7119 16.1885 22.6719 19.2529 25.7759C21.002 27.5439 22.3252 29.6558 23.6885 31.7202C25.1377 33.9121 26.6978 36 28.6831 37.7119C29.3843 38.312 29.9434 38.7681 30.479 39.104C28.8643 39.2881 26.1699 39.3281 24.3262 37.8398ZM26.3433 24.6001C26.3433 24.248 26.6191 23.9678 26.9658 23.9678C27.0444 23.9678 27.1152 23.9839 27.1782 24.0078C27.2651 24.04 27.3438 24.0879 27.4067 24.1602C27.5171 24.272 27.5801 24.4321 27.5801 24.6001C27.5801 24.9521 27.3042 25.2319 26.9575 25.2319C26.6108 25.2319 26.3433 24.9521 26.3433 24.6001ZM32.6064 27.8799C32.2046 28.0479 31.8027 28.1919 31.4165 28.208C30.8179 28.2397 30.1641 27.9922 29.8096 27.688C29.2583 27.2158 28.8643 26.9521 28.6987 26.1279C28.6279 25.7759 28.6675 25.2319 28.7305 24.9199C28.8721 24.248 28.7144 23.8159 28.2495 23.4238C27.8716 23.104 27.3911 23.0161 26.8633 23.0161C26.666 23.0161 26.4849 22.9277 26.3511 22.856C26.1304 22.7441 25.9492 22.4639 26.1226 22.1201C26.1777 22.0078 26.4458 21.7358 26.5088 21.688C27.2256 21.272 28.0527 21.4077 28.8169 21.7197C29.5259 22.0161 30.0615 22.5601 30.834 23.3281C31.6216 24.2559 31.7632 24.5117 32.2124 25.208C32.5669 25.752 32.8901 26.312 33.1104 26.9521C33.2446 27.3521 33.0713 27.6802 32.6064 27.8799Z"/>
 </svg>

package/lib/client.js

@@ -33,6 +33,15 @@ window.__ModuleLoader__.load({
     var STATE_NAMES = ["idle", "running", "asking", "done"];
     var EFFECT_NAMES = ["static", "blink", "breath", "rainbow", "heartbeat", "bounce"];
     var TOP_NUMBERS = ["askingHoldMs", "doneHoldMs"];
+    // Localized label key per effect identifier (value stays the identifier).
+    var EFFECT_LABEL_KEYS = {
+      static: "effectStatic",
+      blink: "effectBlink",
+      breath: "effectBreath",
+      rainbow: "effectRainbow",
+      heartbeat: "effectHeartbeat",
+      bounce: "effectBounce",
+    };
 
     /** Cordis fiber services this browser plugin injects. */
     var inject = ["slots", "settingsScope", "locale"];
@@ -49,13 +58,23 @@ window.__ModuleLoader__.load({
       askingHoldMsHint: "Minimum visibility of the asking icon before it settles.",
       doneHoldMs: "Done hold (ms)",
       doneHoldMsHint: "How long the done icon stays before returning to idle.",
-      stateLabel: "State",
+      stateIdle: "Idle",
+      stateRunning: "Running",
+      stateAsking: "Asking",
+      stateDone: "Done",
       effect: "Effect",
       effectHint: "Animation for this state.",
       colors: "Colors",
       colorsHint: "Comma-separated hex colors; the first is the primary color.",
       speed: "Cycle (ms)",
-      speedHint: "Per-state cycle length; blank keeps the current value.",
+      speedHint: "Per-state cycle length; blank keeps the current value. Static states have no cycle.",
+      effectStatic: "Static",
+      effectBlink: "Blink",
+      effectBreath: "Breath",
+      effectRainbow: "Rainbow",
+      effectHeartbeat: "Heartbeat",
+      effectBounce: "Bounce",
+      editColor: "Edit color",
       unsaved: "Unsaved",
       readOnly: "This deployment stores settings read-only.",
       save: "Save",
@@ -75,13 +94,23 @@ window.__ModuleLoader__.load({
       askingHoldMsHint: "提问图标的最短可见时长。",
       doneHoldMs: "完成驻留（毫秒）",
       doneHoldMsHint: "完成图标停留多久后回到待机。",
-      stateLabel: "状态",
+      stateIdle: "待机",
+      stateRunning: "运行中",
+      stateAsking: "提问",
+      stateDone: "完成",
       effect: "特效",
       effectHint: "该状态的动画效果。",
       colors: "颜色",
       colorsHint: "逗号分隔的十六进制颜色；第一个为主色。",
       speed: "周期（毫秒）",
-      speedHint: "该状态的动画周期；留空保持当前值。",
+      speedHint: "该状态的动画周期；留空保持当前值。静态状态无周期。",
+      effectStatic: "静态",
+      effectBlink: "闪烁",
+      effectBreath: "呼吸",
+      effectRainbow: "彩虹",
+      effectHeartbeat: "心跳",
+      effectBounce: "弹跳",
+      editColor: "编辑颜色",
       unsaved: "未保存",
       readOnly: "本部署的设置为只读。",
       save: "保存",
@@ -111,8 +140,15 @@ window.__ModuleLoader__.load({
       hint: { color: "var(--dsw-alias-label-tertiary)", fontSize: 12, lineHeight: "1.5", margin: 0 },
       invalidText: { color: "var(--dsw-alias-label-error)", fontSize: 12, lineHeight: "1.5", margin: 0 },
       select: { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", height: 34, borderRadius: 8, padding: "0 8px", fontSize: 13, fontFamily: "inherit", color: "var(--dsw-alias-label-primary)" },
-      group: { borderTop: "1px solid var(--dsw-alias-border-l2)", marginTop: 4, paddingTop: 4 },
-      groupTitle: { color: "var(--dsw-alias-label-secondary)", fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em", margin: "10px 0 0" },
+      statesBlock: { borderTop: "1px solid var(--dsw-alias-border-l2)", marginTop: 4, paddingTop: 4 },
+      dot: { display: "inline-block", width: 10, height: 10, borderRadius: 999, border: "1px solid var(--dsw-alias-border-l2)" },
+      summary: { flex: 1, minWidth: 0, marginLeft: 8, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", color: "var(--dsw-alias-label-tertiary)", fontSize: 12, lineHeight: "24px" },
+      statePanel: { padding: "2px 0 12px 22px" },
+      inputRow: { display: "flex", alignItems: "center", gap: 8 },
+      swatches: { display: "inline-flex", alignItems: "center", gap: 4, flex: "none" },
+      swatch: { display: "inline-block", width: 14, height: 14, borderRadius: 4, border: "1px solid var(--dsw-alias-border-l2)" },
+      swatchLabel: { display: "inline-flex", position: "relative", width: 14, height: 14, cursor: "pointer" },
+      colorInput: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", border: 0, padding: 0, margin: 0 },
       badges: { display: "inline-flex", alignItems: "center", gap: 8 },
       badge: { whiteSpace: "nowrap", background: "var(--dsw-alias-bg-module-platform)", color: "var(--dsw-alias-label-secondary)", borderRadius: 999, padding: "1px 8px", fontSize: 11, fontWeight: 500, lineHeight: "17px" },
       footer: { borderTop: "1px solid var(--dsw-alias-border-l2)", display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 8, padding: "12px 0 4px" },
@@ -123,12 +159,12 @@ window.__ModuleLoader__.load({
     // the field row and the inner <input> flex. Primitives components carry no
     // CSS-module hooks for us (the bundle has no build step), so one guarded
     // style tag mirrors what the official cards' stylesheets do.
-    var FORM_CSS_TAG = "dsh-web-icon-indicator/form.css";
+    var FORM_CSS_TAG = "dsh-web-icon-indicator/form.v2.css";
     if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(FORM_CSS_TAG) + "]") === null) {
       var cssTag = document.createElement("style");
       cssTag.dataset.plugin = "dsh-web-icon-indicator";
       cssTag.dataset.pluginCss = FORM_CSS_TAG;
-      cssTag.textContent = ".dsh-wii-input{display:flex;align-items:center;width:100%}.dsh-wii-input>input{flex:1;min-width:0}";
+      cssTag.textContent = ".dsh-wii-input{display:flex;align-items:center;width:100%}.dsh-wii-input>input{flex:1;min-width:0}.dsh-wii-state+.dsh-wii-state{border-top:1px solid var(--dsw-alias-border-l2)}";
       document.head.appendChild(cssTag);
     }
 
@@ -142,53 +178,40 @@ window.__ModuleLoader__.load({
     }
 
     function LabeledField(props) {
-      // props: { label, hint, invalidLabel, children }
+      // props: { label, hint, invalidLabel, htmlFor, children }
       return createElement(
         "div",
         { style: fieldStyle(props.separated) },
-        createElement("label", { style: styles.label }, props.label),
+        createElement("label", { style: styles.label, htmlFor: props.htmlFor }, props.label),
         props.children,
         createElement("p", { style: props.invalid ? styles.invalidText : styles.hint }, props.invalid ? props.invalidLabel : props.hint)
       );
     }
 
-    function NumberInput(props) {
-      // props: { id, value, onChange, invalid, disabled, invalidLabel, hint, label }
-      return createElement(
-        LabeledField,
-        { label: props.label, hint: props.hint, invalid: props.invalid, invalidLabel: props.invalidLabel, separated: props.separated },
-        createElement(primitives.Input, {
-          id: props.id,
-          type: "text",
-          inputMode: "numeric",
-          className: "dsh-wii-input",
-          style: inputStyle(props.invalid),
-          disabled: props.disabled,
-          value: props.value,
-          onChange: function (event) { props.onChange(event.target.value); },
-        })
-      );
-    }
-
-    function TextInput(props) {
+    function ValueInput(props) {
+      // props: { id, label, hint, invalidLabel, invalid, separated, disabled, value,
+      //          placeholder, numeric, trailing, onChange }
+      var input = createElement(primitives.Input, {
+        id: props.id,
+        type: "text",
+        inputMode: props.numeric ? "numeric" : void 0,
+        className: "dsh-wii-input",
+        style: inputStyle(props.invalid),
+        disabled: props.disabled,
+        value: props.value,
+        placeholder: props.placeholder || "",
+        onChange: function (event) { props.onChange(event.target.value); },
+      });
       return createElement(
         LabeledField,
-        { label: props.label, hint: props.hint, invalid: props.invalid, invalidLabel: props.invalidLabel, separated: props.separated },
-        createElement(primitives.Input, {
-          id: props.id,
-          type: "text",
-          className: "dsh-wii-input",
-          style: inputStyle(props.invalid),
-          disabled: props.disabled,
-          value: props.value,
-          placeholder: props.placeholder || "",
-          onChange: function (event) { props.onChange(event.target.value); },
-        })
+        { label: props.label, hint: props.hint, invalid: props.invalid, invalidLabel: props.invalidLabel, separated: props.separated, htmlFor: props.id },
+        props.trailing ? createElement("div", { style: styles.inputRow }, input, props.trailing) : input
       );
     }
 
     function SelectInput(props) {
       // props: { id, value, options, onChange, disabled }
+      // options: array of { value, label } — value stays the identifier, label is localized.
       return createElement(
         "select",
         {
@@ -199,7 +222,64 @@ window.__ModuleLoader__.load({
           onChange: function (event) { props.onChange(event.target.value); },
         },
         props.options.map(function (option) {
-          return createElement("option", { key: option, value: option }, option);
+          return createElement("option", { key: option.value, value: option.value }, option.label);
+        })
+      );
+    }
+
+    /** Filled dot previewing one state's primary color (colors[0]). */
+    function ColorDot(props) {
+      return createElement("span", { style: Object.assign({}, styles.dot, { background: props.color }) });
+    }
+
+    /** Expand a 3-digit hex (#abc) to 6-digit (#aabbcc) for <input type="color">. */
+    function to6(hex) {
+      var h = String(hex).replace("#", "");
+      if (h.length === 3) h = h.charAt(0) + h.charAt(0) + h.charAt(1) + h.charAt(1) + h.charAt(2) + h.charAt(2);
+      return "#" + h;
+    }
+
+    /**
+     * One swatch per parsed color. With an `onChange` it becomes a native
+     * color picker: each swatch is a label with a visually hidden
+     * <input type="color"> overlay; picking a color replaces that entry in the
+     * text. Without an onChange it renders a static preview (aria-hidden).
+     */
+    function ColorSwatches(props) {
+      var colors = parseColors(props.text);
+      if (colors === null) return null;
+      if (typeof props.onChange !== "function") {
+        return createElement(
+          "span",
+          { style: styles.swatches, "aria-hidden": "true" },
+          colors.map(function (color) {
+            return createElement("span", { key: color, style: Object.assign({}, styles.swatch, { background: color }) });
+          })
+        );
+      }
+      return createElement(
+        "span",
+        { style: styles.swatches },
+        colors.map(function (color, index) {
+          return createElement(
+            "label",
+            {
+              key: index,
+              style: styles.swatchLabel,
+              title: props.label || "",
+              "aria-label": props.label || "",
+            },
+            createElement("input", {
+              type: "color",
+              value: to6(color),
+              onChange: function (event) {
+                var next = colors.slice();
+                next[index] = event.target.value;
+                props.onChange(next.join(", "));
+              },
+            }),
+            createElement("span", { style: Object.assign({}, styles.swatch, { background: color }) })
+          );
         })
       );
     }
@@ -270,6 +350,10 @@ window.__ModuleLoader__.load({
       var openState = useState(false);
       var open = openState[0];
       var setOpen = openState[1];
+      // Accordion: which per-state row is expanded (null = all collapsed).
+      var openNameState = useState(null);
+      var openName = openNameState[0];
+      var setOpenName = openNameState[1];
 
       if (!ready || value === null) return null;
 
@@ -300,6 +384,36 @@ window.__ModuleLoader__.load({
         return formatNumber(state.speed);
       };
 
+      var stateTitleKey = function (name) {
+        return "state" + name.charAt(0).toUpperCase() + name.slice(1);
+      };
+      /** One-line collapsed summary: "Blink · #E5484D ⇄ #FACC15 · 400ms" (draft-aware). */
+      var stateSummary = function (name) {
+        var effect = stateFieldValue(name, "effect");
+        var parts = [t(EFFECT_LABEL_KEYS[effect] || effect)];
+        var colorsText = stateFieldValue(name, "colors").trim();
+        if (colorsText !== "") {
+          var parsed = parseColors(colorsText);
+          parts.push(parsed === null ? colorsText : parsed.join(" ⇄ "));
+        }
+        var speedText = stateFieldValue(name, "speed").trim();
+        if (speedText !== "" && effect !== "static") parts.push(speedText + "ms");
+        return parts.join(" · ");
+      };
+      /** Primary color for the row's dot; transparent while the draft is unparseable. */
+      var statePrimaryColor = function (name) {
+        var parsed = parseColors(stateFieldValue(name, "colors"));
+        return parsed === null ? "transparent" : parsed[0];
+      };
+      /** Draft-aware: is this state currently static (thus has no cycle)? */
+      var isEffectStatic = function (name) {
+        return stateFieldValue(name, "effect") === "static";
+      };
+      /** Localized option list for the effect select (value stays the identifier). */
+      var effectOptions = EFFECT_NAMES.map(function (name) {
+        return { value: name, label: t(EFFECT_LABEL_KEYS[name]) };
+      });
+
       var dirty = Object.keys(drafts).length > 0;
 
       var save = function () {
@@ -316,10 +430,16 @@ window.__ModuleLoader__.load({
           if (parsed.kind === "clear") { if (userHas(key)) ops.push({ op: "unset", field: key }); }
           else if (parsed.value !== value[key]) ops.push({ op: "set", field: key, value: parsed.value });
         }
-        // Per-state visuals: rebuild the whole `states` object from the resolved
-        // values with the drafts applied (deep-merged over the user layer).
+        // Per-state visuals: rebuild `states` as the user layer's current
+        // entries with the drafts applied. `scope.set` REPLACES the whole
+        // field (no deep merge), so untouched entries — overrides saved
+        // earlier for other states, plus any key not in STATE_NAMES — are
+        // carried through instead of being dropped.
         var statesDirty = false;
         var nextStates = {};
+        if (userLayer !== void 0 && userLayer !== null && typeof userLayer.states === "object" && userLayer.states !== null) {
+          nextStates = Object.assign({}, userLayer.states);
+        }
         for (i = 0; i < STATE_NAMES.length; i += 1) {
           var name = STATE_NAMES[i];
           var effKey = "states." + name + ".effect";
@@ -419,67 +539,97 @@ window.__ModuleLoader__.load({
           "div",
           { style: styles.body },
           !writable ? createElement("p", { style: styles.hint }, t("readOnly")) : null,
-          createElement(NumberInput, {
+          createElement(ValueInput, {
             id: "plugin-config-icon-asking-hold",
             label: t("askingHoldMs"),
             hint: t("askingHoldMsHint"),
             invalidLabel: t("invalidNumber"),
             invalid: failed === "invalidNumber",
             disabled: disabled,
-            separated: true,
+            numeric: true,
+            separated: false,
             value: fieldValue("askingHoldMs"),
             onChange: function (text) { edit("askingHoldMs", text); },
           }),
-          createElement(NumberInput, {
+          createElement(ValueInput, {
             id: "plugin-config-icon-done-hold",
             label: t("doneHoldMs"),
             hint: t("doneHoldMsHint"),
             invalidLabel: t("invalidNumber"),
             invalid: failed === "invalidNumber",
             disabled: disabled,
+            numeric: true,
             separated: true,
             value: fieldValue("doneHoldMs"),
             onChange: function (text) { edit("doneHoldMs", text); },
           }),
-          STATE_NAMES.map(function (name, index) {
-            return createElement(
-              "div",
-              { key: name, style: styles.group },
-              createElement("p", { style: styles.groupTitle }, t("stateLabel") + ": " + name),
-              createElement(
-                LabeledField,
-                { label: t("effect"), hint: t("effectHint"), invalid: false, invalidLabel: "", separated: true },
-                createElement(SelectInput, {
-                  id: "plugin-config-icon-" + name + "-effect",
-                  options: EFFECT_NAMES,
-                  disabled: disabled,
-                  value: stateFieldValue(name, "effect"),
-                  onChange: function (text) { edit("states." + name + ".effect", text); },
-                })
-              ),
-              createElement(TextInput, {
-                id: "plugin-config-icon-" + name + "-colors",
-                label: t("colors"),
-                hint: t("colorsHint"),
-                invalidLabel: t("invalidColors"),
-                invalid: failed === "invalidColors",
-                disabled: disabled,
-                value: stateFieldValue(name, "colors"),
-                onChange: function (text) { edit("states." + name + ".colors", text); },
-              }),
-              createElement(NumberInput, {
-                id: "plugin-config-icon-" + name + "-speed",
-                label: t("speed"),
-                hint: t("speedHint"),
-                invalidLabel: t("invalidNumber"),
-                invalid: failed === "invalidNumber",
-                disabled: disabled,
-                separated: true,
-                value: stateFieldValue(name, "speed"),
-                onChange: function (text) { edit("states." + name + ".speed", text); },
-              })
-            );
-          }),
+          createElement(
+            "div",
+            { style: styles.statesBlock },
+            STATE_NAMES.map(function (name) {
+              var isOpen = openName === name;
+              return createElement(
+                primitives.DisclosureRow,
+                {
+                  key: name,
+                  className: "dsh-wii-state",
+                  icon: createElement(ColorDot, { color: statePrimaryColor(name) }),
+                  title: t(stateTitleKey(name)),
+                  open: isOpen,
+                  expandable: true,
+                  expandOnRowClick: true,
+                  onToggle: function () { setOpenName(isOpen ? null : name); },
+                  collapsedContent: createElement("span", { style: styles.summary }, stateSummary(name)),
+                },
+                createElement(
+                  "div",
+                  { style: styles.statePanel },
+                  createElement(
+                    LabeledField,
+                    { label: t("effect"), hint: t("effectHint"), invalid: false, invalidLabel: "", separated: false, htmlFor: "plugin-config-icon-" + name + "-effect" },
+                    createElement(SelectInput, {
+                      id: "plugin-config-icon-" + name + "-effect",
+                      options: effectOptions,
+                      disabled: disabled,
+                      value: stateFieldValue(name, "effect"),
+                      onChange: function (text) { edit("states." + name + ".effect", text); },
+                    })
+                  ),
+                  createElement(ValueInput, {
+                    id: "plugin-config-icon-" + name + "-colors",
+                    label: t("colors"),
+                    hint: t("colorsHint"),
+                    invalidLabel: t("invalidColors"),
+                    invalid: failed === "invalidColors",
+                    disabled: disabled,
+                    separated: true,
+                    value: stateFieldValue(name, "colors"),
+                    trailing: createElement(ColorSwatches, {
+                      text: stateFieldValue(name, "colors"),
+                      label: t("editColor"),
+                      onChange: function (text) { edit("states." + name + ".colors", text); },
+                    }),
+                    onChange: function (text) { edit("states." + name + ".colors", text); },
+                  }),
+                  // `speed` is meaningless for a static effect (the browser paints
+                  // one frame and never loops), so hide it — switching to an
+                  // animated effect brings the field back.
+                  isEffectStatic(name) ? null : createElement(ValueInput, {
+                    id: "plugin-config-icon-" + name + "-speed",
+                    label: t("speed"),
+                    hint: t("speedHint"),
+                    invalidLabel: t("invalidNumber"),
+                    invalid: failed === "invalidNumber",
+                    disabled: disabled,
+                    numeric: true,
+                    separated: true,
+                    value: stateFieldValue(name, "speed"),
+                    onChange: function (text) { edit("states." + name + ".speed", text); },
+                  })
+                )
+              );
+            })
+          ),
           createElement(
             "div",
             { style: styles.footer },

package/lib/index.js

@@ -131,6 +131,7 @@ const INJECTED_SCRIPT = `
     var STATUS_PATH = "__STATUS_PATH__";
     var BASE_PATH = "__BASE_PATH__";
     var CFG = __CFG__;          // { states: { idle:{effect,colors,speed}, running:…, asking:…, done:… } }
+    var CFG_JSON = null;        // serialized states last seen; null = not synced yet
     var BASE = null;            // base.svg text; __COLOR__ replaced per frame
     var RE = /__COLOR__/g;
     var DEF_SPEED = 1200;       // per-state cycle fallback when speed is omitted
@@ -153,6 +154,23 @@ const INJECTED_SCRIPT = `
       if (!link) return;
       try { link.setAttribute("href", uri); link.setAttribute("type", "image/svg+xml"); } catch (e) {}
     }
+    // Some browsers (notably Safari) do NOT repaint a dynamically-changed
+    // favicon — they only read the <link rel=icon> at page load. Replacing the
+    // element on a STATE change forces every browser to re-evaluate the favicon
+    // without touching the per-frame animation path (which mutates in place).
+    function setHrefFresh(uri) {
+      var link = linkEl();
+      if (!link) return;
+      try {
+        var parent = link.parentNode;
+        if (!parent) { link.setAttribute("href", uri); link.setAttribute("type", "image/svg+xml"); return; }
+        var fresh = document.createElement("link");
+        fresh.setAttribute("rel", "icon");
+        fresh.setAttribute("type", "image/svg+xml");
+        fresh.setAttribute("href", uri);
+        parent.replaceChild(fresh, link);
+      } catch (e) {}
+    }
 
     // ---- color helpers ------------------------------------------------------
     function hexToRgb(h) {
@@ -277,24 +295,41 @@ const INJECTED_SCRIPT = `
       ANIM_START = Date.now();
       // Paint the first frame synchronously so a state change shows even when
       // rAF never fires (e.g. the tab is hidden); the rAF loop then takes over
-      // and drives the effect when the tab is visible.
+      // and drives the effect when the tab is visible. Use a fresh <link> node
+      // so browsers that don't repaint a mutated favicon still show the change.
       var initial = frameAt(state, 0);
-      if (initial && link.isConnected) setHref(initial);
+      if (initial && link.isConnected) setHrefFresh(initial);
       // rAF drives every effect. For "static" we paint one frame and stop;
-      // animated effects keep looping.
+      // animated effects keep looping. Re-query the current link each frame
+      // (setHrefFresh may have swapped it) and mutate it in place.
       var step = function (now) {
         if (t0 === null) t0 = now;
         var uri = frameAt(state, now - t0);
-        if (uri && link.isConnected) setHref(uri);
+        var cur = linkEl();
+        if (uri && cur && cur.isConnected) setHref(uri);
         if (isStatic(state)) return; // single frame, no loop
         RAF = requestAnimationFrame(step);
       };
       RAF = requestAnimationFrame(step);
     }
+    // Live config sync: the status response carries the current per-state
+    // visual config (the "states" field). When it differs from what this tab
+    // renders, swap it in and reset the animation phase so the next apply()
+    // repaints from scratch — a settings-card save takes effect within one
+    // poll tick, no tab reload needed. A response without "states" (older
+    // host) leaves the baked __CFG__ in place.
+    function syncCfg(j) {
+      if (!j || typeof j.states !== "object" || j.states === null) return;
+      var next = JSON.stringify(j.states);
+      if (next === CFG_JSON) return;
+      CFG_JSON = next;
+      CFG = { states: j.states };
+      PREV_STATE = null; // force a full repaint on the next apply
+    }
     function poll() {
       fetch(location.origin + STATUS_PATH, { cache: "no-store" })
         .then(function (r) { if (!r.ok) throw new Error("bad"); return r.json(); })
-        .then(function (j) { apply(j.state || "idle"); })
+        .then(function (j) { syncCfg(j); apply(j.state || "idle"); })
         // Transient failures (host restarting, network blip) must NOT kill the
         // poll: restore the original icon and retry on the next tick. The SPA
         // reconnects in place, so the tab survives a host restart — the icon
@@ -572,6 +607,10 @@ export default {
     };
 
     // -- Routes --------------------------------------------------------------
+    // The status endpoint also echoes the current per-state visual config
+    // (`states`): the injected script syncs it on every poll, so a settings
+    // save changes the favicon within ~1 s without a tab reload. `no-store`
+    // keeps every poll reading the freshest config.
     ctx.effect(() => webServer.register({
       kind: "exact",
       path: cfg.statusPath,
@@ -579,7 +618,7 @@ export default {
         res.statusCode = 200;
         res.setHeader("Content-Type", "application/json; charset=utf-8");
         res.setHeader("Cache-Control", "no-store");
-        res.end(JSON.stringify(aggregate()));
+        res.end(JSON.stringify({ ...aggregate(), states: cfg.states }));
       },
     }));
 

package/lib/types/index.d.ts

@@ -77,6 +77,12 @@ export interface DshWebIconIndicatorAggregate {
   state: DshWebIconStateName;
   /** Epoch millis when that aggregate state was first entered. */
   since: number;
+  /**
+   * Current per-state visual config, echoed by the status endpoint so the
+   * injected browser script can apply a settings save within ~1 s (no tab
+   * reload). Added in 0.2.x; older browser bundles ignore it.
+   */
+  states: Partial<Record<DshWebIconStateName, DshWebIconStateConfig>>;
 }
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-web-icon-indicator",
   "description": "Browser tab favicon reflects the DSH session state: idle / running / asking / done, recolored and animated from one base SVG in the browser (fully configurable colors + effects). · 浏览器标签页 favicon 实时反映 DSH 会话状态：待机 / 运行中 / 提问 / 完成，由单个 base.svg 在浏览器中动态上色与动画（颜色与特效完全可配置）。",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -24,11 +24,12 @@
         "@deepseek-ai/dsh-client-runtime",
         "@deepseek-ai/dsh-client-locale",
         "@deepseek-ai/dsh-client-ui-slots",
-        "@deepseek-ai/dsh-client-ui-settings"
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-settings-plugins"
       ]
     }
   },
-  "dependencies": {
+  "peerDependencies": {
     "@deepseek-ai/schemastery": "^3.18.0",
     "@deepseek-ai/dsh-settings": "^0.1.0-rc.7"
   },
@@ -48,6 +49,8 @@
   "files": [
     "lib",
     "icons",
+    "assets",
+    "docs",
     "cordis.patch.yml",
     "README.md",
     "README.zh.md",