dsh-web-icon-indicator 0.2.0 → 0.2.1

package/README.md

@@ -102,15 +102,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,7 +128,7 @@ 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).
 
 ## Caveats
 

package/README.zh.md

@@ -101,13 +101,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,7 +122,7 @@ 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 原地重连，无需手动刷新图标即可恢复）。
 
 ## 已知限制
 

package/lib/client.js

@@ -49,7 +49,10 @@ 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",
@@ -75,7 +78,10 @@ window.__ModuleLoader__.load({
       askingHoldMsHint: "提问图标的最短可见时长。",
       doneHoldMs: "完成驻留（毫秒）",
       doneHoldMsHint: "完成图标停留多久后回到待机。",
-      stateLabel: "状态",
+      stateIdle: "待机",
+      stateRunning: "运行中",
+      stateAsking: "提问",
+      stateDone: "完成",
       effect: "特效",
       effectHint: "该状态的动画效果。",
       colors: "颜色",
@@ -111,8 +117,13 @@ 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)" },
       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 +134,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);
     }
 
@@ -152,38 +163,24 @@ window.__ModuleLoader__.load({
       );
     }
 
-    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); },
-        })
+        props.trailing ? createElement("div", { style: styles.inputRow }, input, props.trailing) : input
       );
     }
 
@@ -204,6 +201,24 @@ window.__ModuleLoader__.load({
       );
     }
 
+    /** Filled dot previewing one state's primary color (colors[0]). */
+    function ColorDot(props) {
+      return createElement("span", { style: Object.assign({}, styles.dot, { background: props.color }) });
+    }
+
+    /** One swatch per parsed color; renders nothing while the text is unparseable. */
+    function ColorSwatches(props) {
+      var colors = parseColors(props.text);
+      if (colors === null) return null;
+      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 }) });
+        })
+      );
+    }
+
     // ---------------------------------------------------------------------------
     // Form model
     // ---------------------------------------------------------------------------
@@ -270,6 +285,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 +319,27 @@ 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 parts = [stateFieldValue(name, "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 !== "") 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];
+      };
+
       var dirty = Object.keys(drafts).length > 0;
 
       var save = function () {
@@ -316,10 +356,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 +465,90 @@ 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,
+            numeric: true,
             separated: true,
             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 },
+                    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(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") }),
+                    onChange: function (text) { edit("states." + name + ".colors", text); },
+                  }),
+                  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
@@ -291,10 +292,24 @@ const INJECTED_SCRIPT = `
       };
       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 +587,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 +598,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.1",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -24,7 +24,8 @@
         "@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"
       ]
     }
   },