From 1844dcce481e7129b8db4a1b9d143e1d09bda6bd Mon Sep 17 00:00:00 2001
From: HUIDADA <1439078547@qq.com>
Date: Wed, 23 Sep 2026 17:43:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(slider):=20=E6=80=9D=E8=80=83=E5=BC=BA?=
 =?UTF-8?q?=E5=BA=A6=E6=BB=91=E6=9D=A1=E9=87=8D=E5=81=9A=E4=B8=BA=20dsh-re?=
 =?UTF-8?q?asoning-effort=20=E5=90=8C=E6=AC=BE=E8=BF=9E=E7=BB=AD=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 轨道 1:1 复刻 HanaAyane/dsh-reasoning-effort(MIT):胶囊轨道渐变 + canvas 像素辐射 + 白色旋钮,--re-progress 百分比驱动
- 手感同上游:raw 浮点连续跟手,松手吸附最近档位;提交中 is-busy,失败回弹
- 移除分段概念,setSegments 仅兼容保留;SKILL.md 样式规格同步
---
 skills/zcode-tokenspeed/SKILL.md              |  71 +-
 .../scripts/zcode-thought-slider.js           | 696 ++++++++++--------
 2 files changed, 437 insertions(+), 330 deletions(-)

diff --git a/skills/zcode-tokenspeed/SKILL.md b/skills/zcode-tokenspeed/SKILL.md
index c3a8a22..ee766f0 100644
--- a/skills/zcode-tokenspeed/SKILL.md
+++ b/skills/zcode-tokenspeed/SKILL.md
@@ -233,7 +233,7 @@ python "<skill目录>/scripts/zcode_patcher.py" --model-puller
 | 思考等级透传（≤3.11） | 给自定义模型配思考等级 | `python zcode_patcher.py [--check/--revert/--extract]` | 内核 zcode.cjs（原地改写，.bak 备份） |
 | 打开统计图 | 用量页趋势图/饼图去截断 | `python zcode_patcher.py --usage-chart [--check/--revert]` | app.asar 内渲染文件（同长度原地改字节 + integrity 同步） |
 | 打开状态栏 | 输入框下方居中统计条（**v2 纯 DOM 观测，3.12.2+ 安全**；右键可切工具栏/会话顶部 sticky）：本轮指标 + 会话累计（第 N 轮/输入/命中+平均命中率/累出） | `python zcode_patcher.py --tps-footer [--check/--revert]` | app.asar（重打包级：注入脚本 + 挂载 index.html） |
-| 思考强度滑条 | 工具栏「思考 · 档名」入口，点击弹出吸附拖拽条（动效）；原生下拉隐藏，拖完即时生效 | `python zcode_patcher.py --thought-slider [--check/--revert]` | app.asar（重打包级：注入脚本 + 挂载 index.html） |
+| 思考强度滑条 | 工具栏「思考 · 档名」入口，点击弹出拖动条面板（dsh-reasoning-effort 同款：胶囊轨道 + canvas 像素辐射 + 白色旋钮，连续跟手、松手吸附）；原生下拉隐藏，拖完即时生效 | `python zcode_patcher.py --thought-slider [--check/--revert]` | app.asar（重打包级：注入脚本 + 挂载 index.html） |
 | 加宽模型弹窗 | 模型选择浮窗加宽，长模型名不再截断 | `python zcode_patcher.py --model-width [--check/--revert]` | app.asar 内主 bundle（同长度原地改字节） |
 | **增强提示词** | 输入框旁一键用当前选中模型润色草稿（可恢复原文） | `python zcode_patcher.py --enhance-prompt [--check/--revert]` | app.asar（重打包级：renderer 脚本 + index.html + preload 桥 + main IPC） |
 | 模型拉取按钮 | 设置页一键拉取/勾选模型 | `python zcode_patcher.py --model-puller [--check/--revert]` | app.asar（重打包级：renderer 脚本 + index.html + preload 桥 + main IPC） |
@@ -684,9 +684,9 @@ python scripts/model_pull.py --test https://api.example.com/v1 [KEY]
 | 想换注入脚本逻辑 | 改 `scripts/zcode-model-puller.js` 或改 preload/main 注入构造器后重跑 `--model-puller` 即可——**四组件（renderer/preload/main/index）均按内容比对**，只更新与现行实现不一致的组件，无需 revert；`--check` 会显示「含旧版组件，重跑可自动更新」 |
 | 保存后档位丢失 | 正常不会（整读整写不重建条目）；若用 ZCode 自带设置页保存过该 provider，属其重建路径剥掉 variants，重配 reasoning 即可 |
 
-## 六、思考强度滑条：点击弹出的吸附拖拽条（Codex 风格）
+## 六、思考强度滑条：点击弹出的拖动条（dsh-reasoning-effort 同款）
 
-工具栏常驻「思考 · 档名 ▾」入口（带迷你电量条，造型同原生），点击弹出吸附拖拽条面板（260ms 弹出动效：模糊渐显 + 过冲缩放；填充条弹性扫入，分段逐级点亮，换档发射涟漪、档名脉冲，段级联弹入），拖拽/点击/←→键即换档，点外部或 Esc 收起；**原生「思考级别」下拉经 CSS 隐藏（单档位固定徽章除外），走原生切换链路，会话内即时生效、无需重启**：
+工具栏常驻「思考 · 档名 ▾」入口（带迷你电量条，造型同原生），点击弹出拖动条面板（260ms 弹出动效：模糊渐显 + 过冲缩放；档名脉冲），拖拽/点击/←→键即换档，点外部或 Esc 收起；**原生「思考级别」下拉经 CSS 隐藏（单档位固定徽章除外），走原生切换链路，会话内即时生效、无需重启**：
 
 ```bash
 python zcode_patcher.py --thought-slider             # 注入 scripts/zcode-thought-slider.js
@@ -695,53 +695,50 @@ python zcode_patcher.py --thought-slider --revert    # 整体还原
 python zcode_patcher.py --thought-slider --slider-src /path/to/zcode-thought-slider.js
 ```
 
-### 样式规格（分段轨道）
-
-进度条 = 轨道 `.zslider-rail`（段容器）+ 每档一段 `.zslider-seg`（弱化底）+ 段内填充层 `.zslider-fill`
-（width 0↔100% 即点亮）+ 拖尾光斑 `.zslider-flare` + 扫光 `.zslider-shimmer`；轨道占满整行（**无左侧图标**）。
-改样式只动 `ensureStyle()` 的样式表与内联几何，**不碰任何交互/提交逻辑**。
-
-- **段数**：默认 = 可用档位数；`__zsliderCtl.setSegments(n)` 可强制（2–8 段）。档位→段位按
-  `round(idx/(n-1)*(S-1))` 等比映射，点亮前 `lit+1` 段，`--zs-stagger`（i×45ms）让各段错开。
-- **主题**：颜色走 `--zs-*` 变量，判定顺序「应用主题类（`.dark`/`html.dark`/`body.dark`/`data-theme='dark'`）→
-  系统偏好 → 兜底」，与 TPS 同构。原实现只认 `prefers-color-scheme`，「应用深色 + 系统浅色」时轨道会
-  用浅色渐变压在深色面板上几乎看不见。
-- **几何**：厚度 `--zs-h`（16px，加粗胶囊）、段间隙 `--zs-gap`（5px）、段底色 `--zs-seg`、圆角统一 pill
-  （`--zs-r-pill`）；触控（`pointer:coarse`）热区撑到 40px。
-- **立体光泽**：填充层 `.zslider-fill` 用「外投影 + 内高光/内压深」双层 `box-shadow`，再叠一个
-  `::after` 纵向渐变（顶亮 → 中部透 → 底暗），避免加粗后成为整块平涂；段底 `.zslider-seg` 同样带
-  `inset` 阴影，未激活时也有凹槽感。
-- **四态**（写在 `track` 的 `data-zs` 上，样式表按态下发）：`loading` 段级联弹入（`zsSegIn`，
-  延迟 40+i×35ms）+ 轨道扫光 → `dragging` 跟手增辉、逐段点亮不延迟 → `settling` 涟漪
-  → `idle` 静止（max 档时最后一段的填充层外发光呼吸 `zsBreathe` 2.6s）。
-- **`data-thinking`（与 `data-zs` 正交）**：思考中 = `1`，激活段依次流动（`zsFlow`，周期
-  `--zs-flow` = `CONFIG.flowMs`）；空闲 = `0`，定格、rAF 停掉不空转。
-- **时长统一**：填充与光斑共用 `--zs-dur`/`--zs-ease`；拖拽时把 `--zs-dur` 置 `0ms` 跟手，松手移除恢复。
-  `prefers-reduced-motion` 下时长归零、动画全关。
-- **响应式**：面板宽 `min(236px, 100vw - 24px)`；resize / 滚动时按 rAF 节流重新贴合入口。
-- **两个坑**：① `.zslider-seg` 的入场动画是**内联** `animation`，优先级高于样式表——所以 max 档呼吸
-  必须挂在**段内填充层**上，挂段盒子会被整个顶掉；② 重建段（切模型 / `setSegments`）时要
-  `insertBefore(..., .zslider-shimmer/.zslider-flare)`，否则新段会盖住扫光与光斑。
+### 样式规格（1:1 复刻 HanaAyane/dsh-reasoning-effort，MIT）
+
+拖动条 = 32px 行 `.re-effort` + 30px 胶囊 `.re-effort-slider`（`--re-progress` 百分比驱动一切）：
+轨道 `.re-effort-track`（深色：暗夜蓝→紫渐变 `linear-gradient(100deg,#03040a…#5d35a0)` + 内高光；
+浅色：浅蓝底 `#e5f0ff` + `::before` 进度填充，width = `--re-progress`）+ 特效层 `.re-effort-fx`
+（canvas `.re-effort-canvas` 像素辐射 `drawRadiation`：4px 像素格能量柱 + 14 条拖尾粒子 + 旋钮径向辉光，
+深色 screen / 浅色 multiply×0.78）+ 拖尾光斑 `.re-effort-flare`（78px 椭圆 + 十字辉光伪元素）+
+白色圆形旋钮 `.re-effort-knob`（28px，`clamp(14px,…)` 贴边）。
+类名与数值与上游 styles.ts 逐字一致，便于对照；改样式只动 `ensureStyle()`，**不碰任何交互/提交逻辑**。
+
+- **主题映射**：上游 `body[data-ds-dark-theme]` ↔ 本插件 `panel.zs-dark`（打开面板时按
+  「应用主题类 → 系统偏好 → 兜底」判一次，与 TPS 同构）；浅色分支即上游
+  `body:not([data-ds-dark-theme])` 块逐条移植。canvas 的 isDark 逐帧读 panel 类。
+- **状态类（与上游同款）**：`is-dragging`（旋钮 scale 1.07 + 过渡归零跟手、canvas
+  saturate/brightness 增辉、粒子加速 2.8×）、`is-busy`（提交中 opacity .72）、
+  `is-error`（未知档位描边）、slider `data-top`（顶端时轨道呼吸动画 `re-effort-*-breathe`
+  + 旋钮强泛光，深浅各一套 keyframes）。
+- **拖拽手感（上游同款）**：raw ∈ [0, n-1] **浮点连续**跟手（旋钮/光斑/canvas/档名预览实时跟随），
+  松手 `Math.round` 吸附最近档位提交；提交期间 is-busy，失败回弹原档位并 console.warn。
+  ←→/Home/End 直接提交一档（上游 onKeyDown 同款）。
+- **无障碍**：`prefers-reduced-motion` 下呼吸动画/跟手过渡全关，canvas 只画一帧（preview 变化补帧）。
+- **面板（本插件自有 chrome，非上游）**：宽 `min(236px, 100vw - 24px)`，玻璃渐变 +
+  backdrop-filter；标题行「思考强度 + 档名胶囊」；`outline:none` 压掉 `focus()` 的系统色焦点环。
+  resize / 滚动按 rAF 节流重新贴合入口。
 - **调试接口**：`__zsliderCtl.config`（直接改参数）、`.setThinking(true|false|null)`（手动锁定/恢复自动）、
-  `.setSegments(n)`、`.refresh()`、`.state()`、`.diag()`。
+  `.setSegments(n)`（已废弃，兼容保留）、`.refresh()`、`.state()`、`.diag()`。
 
 ### 原理（纯 DOM 观测 + 原生回调，零协议逆向）
 
 1. **读状态**：V4ComposerToolbar 渲染的隐藏 span（`className:"hidden"`）带 `data-thought`（当前档位）、`data-thought-levels`（该模型全部可用档位，逗号分隔）、`data-provider`/`data-model`，React 随会话实时更新——入口与面板 MutationObserver 监听其属性变化自动跟随原生操作（含 `t` 键循环切档），双向同步。
-2. **段数与档位动态**：取 `data-thought-levels`（off/minimal/low/medium/high/xhigh/max/ultra 等），模型配几档就几段，不硬编码；切模型导致档位数变化时段数跟着重建。
-3. **UI**：注入 `<style>` 隐藏原生触发器（`[data-composer-thought-control]:not([data-thought-level-fixed="true"])`，被隐藏的触发器仅作入口插入定位基准，`display:none` 元素的事件派发仍有效，菜单降级不受影响）；每段各自 `overflow:hidden` 裁剪（弹性过冲会让 width 短暂超过 100%，必须裁住否则溢出段外），扫光与光斑作为覆盖层留在 rail 末尾、重建段时不覆盖它们。
+2. **档位动态**：取 `data-thought-levels`（off/minimal/low/medium/high/xhigh/max/ultra 等），几档就映射到 0..n-1 连续轨道，不硬编码；切模型导致档位数变化时自动跟随。
+3. **UI**：注入 `<style>` 隐藏原生触发器（`[data-composer-thought-control]:not([data-thought-level-fixed="true"])`，被隐藏的触发器仅作入口插入定位基准，`display:none` 元素的事件派发仍有效，菜单降级不受影响）；特效层 `.re-effort-fx` 自带 `overflow:hidden`，canvas/光斑被圆角裁住；面板主题类 `zs-dark` 在打开时判定一次，主题中途切换需重开面板。
 4. **写档位**（按优先级）：
    - React fiber：从触发器 DOM 沿 `__reactFiber$` return 链找 `memoizedProps` 含 `onValueChange` 且 `option.type==='select'` 带数组选项的组件，直调之——等价于用户点选菜单项，原生继续走 `session/setThoughtLevel` 会话 RPC；
    - 降级：模拟点击触发器打开 Radix 菜单，按 options 顺序点第 index 个 `[role="option"]`（档位显示名是 i18n 文案，按序号而非文本定位）。
 5. **注入**：与 TPS 同链路（index.html `</body>` 前挂 `<script>` + 新增脚本条目，整体重打包），sidecar `app.asar.slider-patch.json`、备份 `app.asar.slider.bak`，外科手术式还原只摘自己的 tag。
 6. **隐藏条件**：模型无思考档位（`data-thought-levels` 空）、探针未命中、原生触发器不存在——均自动隐藏，不占空间。
-7. **生成中判定**（驱动激活段流动，选择器来自 3.14.3 renderer bundle 实证，非猜测）：① 停止按钮在场——客户端把「停止生成」与「发送」做成同一按钮位的**互斥渲染**，`aria-label` 取 i18n `chat.stop`（中文「停止生成」/ 英文「Stop generating」）；② `[data-v4-running-live-tail]`（正在跑的轮次容器）；③ `[data-reasoning-streaming-line]`（更窄，仅推理流期间）。命中结果 250ms 复用，避免流式期间反复强制布局；可用 `__zsliderCtl.setThinking(true|false|null)` 手动锁定/恢复自动。
+7. **生成中判定**（仅记录到 `state().thinking` 与 track 的 `data-thinking` 供诊断，新版样式无「思考中流动」态；选择器来自 3.14.3 renderer bundle 实证，非猜测）：① 停止按钮在场——客户端把「停止生成」与「发送」做成同一按钮位的**互斥渲染**，`aria-label` 取 i18n `chat.stop`（中文「停止生成」/ 英文「Stop generating」）；② `[data-v4-running-live-tail]`（正在跑的轮次容器）；③ `[data-reasoning-streaming-line]`（更窄，仅推理流期间）。命中结果 250ms 复用，避免流式期间反复强制布局；可用 `__zsliderCtl.setThinking(true|false|null)` 手动锁定/恢复自动。
 
 ### 验证 / 排障
 
-- 渲染 console 查 `[zslider] 已就绪: low/medium/high/max 当前 max`（加载 5s 后自检）；`window.__zsliderCtl.state()` 看档位 / 段数 / 思考态快照。
-- 拖拽后原生下拉状态同步变化（入口档名/电量条、`t` 键联动）= fiber 路径生效；console 出现 `[zslider] 档位提交失败` = fiber 与菜单降级均未命中（版本结构大改，需按「原理」重新对锚点）。
-- 激活段不流动 = 生成中判定没命中：先看 `__zsliderCtl.state().thinking`；`__zsliderCtl.setThinking(true)` 能出效果说明动效本身没问题，再查 `document.querySelector("button[aria-label*='停止']")` 确认自动判定（新版本改了 i18n 或按钮结构就要补 `THINK_SELECTORS`）。
+- 渲染 console 查 `[zslider] 已就绪: low/medium/high/max 当前 max`（加载 5s 后自检）；`window.__zsliderCtl.state()` 看档位 / 预览值 / 思考态快照。
+- 拖拽后原生下拉状态同步变化（入口档名/电量条、`t` 键联动）= fiber 路径生效；console 出现 `[zslider] 档位提交失败` = fiber 与菜单降级均未命中（版本结构大改，需按「原理」重新对锚点），此时滑条会自动回弹原档位。
+- `__zsliderCtl.state().thinking` 用于确认生成中判定（新版本改了 i18n 或按钮结构就要补 `THINK_SELECTORS`）；该字段不影响拖动条样式。
 - 入口不出现：先看探针——`document.querySelector('[data-thought][data-thought-levels]')` 是否有值；当前模型未配思考档位时不显示属预期。
 
 ## 七、增强提示词：「润色」按钮与跨机「Model is unavailable」
diff --git a/skills/zcode-tokenspeed/scripts/zcode-thought-slider.js b/skills/zcode-tokenspeed/scripts/zcode-thought-slider.js
index 38c942a..4f5f815 100644
--- a/skills/zcode-tokenspeed/scripts/zcode-thought-slider.js
+++ b/skills/zcode-tokenspeed/scripts/zcode-thought-slider.js
@@ -1,30 +1,36 @@
 /**
- * ZCode 思考强度滑条 —— 分段轨道 + 吸附拖拽(替代原生「思考级别」下拉)
+ * ZCode 思考强度滑条 —— dsh-reasoning-effort 同款拖动条
  * ====================================================================
  * 工具栏交互:
- *   [ 思考 · high ▁▃▆ ]  ←常驻入口:当前档名 + 迷你电量条
+ *   [ 思考 · high ▁ ]  ←常驻入口:当前档名 + 迷你电量条
  *        └─点击→ 弹出面板(260ms 弹出动效):
  *          ┌────────────────────────────┐
  *          │ 思考强度               high │
- *          │ [▬▬▬][▬▬▬][▬▬▬][    ]      │ ← 分段轨道:每档一段,点/拖/←→ 切换
+ *          │ [●▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒]      │ ← 整条胶囊轨道 + 白色圆形旋钮
  *          └────────────────────────────┘
  *   点外部 / Esc 收起;原生下拉经 CSS 隐藏(单档位固定徽章除外),状态仍双向同步。
  *
- * 轨道形态:
- *   轨道 = N 段等宽胶囊(16px 加粗,填充层带顶部高光+底部投影的立体光泽),
- *   每段内含填充层 .zslider-fill,width 0↔100% 即「分段点亮」,--zs-stagger 让各段错开。
- *   段数默认 = 可用档位数(可用 __zsliderCtl.setSegments 强制)。
- *   四态(写在 track 的 data-zs):loading 扫入+扫光 / dragging 跟手增辉 /
- *   settling 涟漪 / idle 静止(末段外发光呼吸)。
- *   与 data-zs 正交的 data-thinking(1/0):思考中激活段流动(zsFlow),空闲定格。
+ * 轨道样式 1:1 复刻 HanaAyane/dsh-reasoning-effort(styles.ts,MIT):
+ *   .re-effort(32px 行) > .re-effort-slider(30px 胶囊,--re-progress 百分比驱动):
+ *     .re-effort-track   深色:暗夜蓝→紫渐变 + 内高光/外投影;
+ *                        浅色:浅蓝底 + ::before 进度填充(width = --re-progress)
+ *     .re-effort-fx > canvas.re-effort-canvas  像素辐射特效(drawRadiation,
+ *                        4px 像素格能量柱 + 拖尾粒子 + 旋钮处辉光,拖拽加速增辉)
+ *                   > span.re-effort-flare   旋钮处拖尾光斑(伪元素十字辉光)
+ *     span.re-effort-knob  白色圆形旋钮(28px,clamp 贴边)
+ *   状态类(与上游同款):is-dragging 跟手增辉 / is-busy 提交中半透明 /
+ *   is-error 未知档位描边 / slider[data-top] 顶端呼吸动画。
+ *   主题:panel.zs-dark ↔ 上游 body[data-ds-dark-theme];canvas isDark 逐帧读取。
+ *
+ * 拖拽手感(同上游):连续跟手(raw 浮点,旋钮/光斑/canvas 实时跟随),
+ *   松手 Math.round 吸附最近档位并提交;提交期间 is-busy,失败回弹到原档位。
  *
  * 数据源(全部只读 DOM,零协议逆向):
  *   - 状态探针:V4ComposerToolbar 渲染的隐藏 span(className:"hidden"),
  *     data-thought=当前档位,data-thought-levels=可用档位(逗号分隔);
  *     React 随会话实时更新,原生操作(含 t 键循环切档)自动回流到入口与面板。
  *   - 入口锚点:原生档位触发器 [data-composer-thought-control](隐藏后仅作定位基准)。
- *   - 生成中判定:停止按钮(aria-label = i18n chat.stop「停止生成 / Stop generating」,
- *     与「发送」按钮互斥渲染,最贴近语义)→ 运行中 live tail → 推理流,见 THINK_SELECTORS。
+ *   - 生成中判定:停止按钮 → 运行中 live tail → 推理流,见 THINK_SELECTORS。
  *
  * 写路径(按优先级):
  *   1) React fiber:沿 __reactFiber$ return 链找到 onValueChange(option.type==='select')
@@ -32,8 +38,8 @@
  *   2) 降级:模拟点击触发器打开 Radix 菜单,按 options 顺序点第 index 个
  *      [role="option"](档位显示名是 i18n 文案,按序号而非文本定位)。
  *
- * 调试接口:window.__zsliderCtl(config / setThinking / setSegments / refresh / diag / state),
- *   渲染层诊断:window.__zsliderDiag(5s 后由函数变成字符串,两种都要认)。
+ * 调试接口:window.__zsliderCtl(config / setThinking / setSegments(已废弃,兼容保留) /
+ *   refresh / diag / state),渲染层诊断:window.__zsliderDiag(5s 后由函数变成字符串)。
  *
  * 安全:只读状态、只写自己的元素与独立 <style>;异常静默;探针/锚点消失自清理,
  *   不调用应用内部模块、不发协议帧、不碰 ServicePort。
@@ -43,125 +49,153 @@
   if (window.__zslider) return;
   window.__zslider = true;
   const MARK = "data-zslider";
-  const FILL = "#4ade80";           // 兜底色(实际按档位着色,见 effortColor)
   const ACCENT = "var(--color-warning, var(--zs-accent, #e0983a))";
 
   // ---------- 可调参数（对外暴露为 window.__zsliderCtl.config，运行时可改） ----------
   const CONFIG = {
-    segments: 0,             // 0 = 段数自动等于可用档位数；>0 = 强制段数（档位按比例映射到段）
     thinking: null,          // null = 自动检测；true / false = 手动锁定（setThinking(null) 恢复自动）
     autoDetectThinking: true,
-    flowMs: 1400,            // 思考中激活段的流动周期（ms）
+    segments: 0,             // 已废弃:新版为连续轨道,段数概念移除;字段仅为 __zsliderCtl 兼容保留
   };
-  // 段数：自动时等于档位数；强制时用 CONFIG.segments（最少 2 段，最多 8 段）
-  const segCount = (n) => (CONFIG.segments > 0
-    ? Math.max(2, Math.min(8, CONFIG.segments | 0)) : Math.max(1, n));
 
-  // ---------- 样式:隐藏原生下拉(单档位固定徽章除外)+ 面板动效 ----------
-  // 主题判定与 TPS 同构(应用主题类 → 系统偏好 → 兜底):原实现只认 prefers-color-scheme,
-  // 「应用深色 + 系统浅色」时轨道会用浅色渐变压在深色面板上,几乎看不见。
+  // ---------- 样式:隐藏原生下拉(单档位固定徽章除外)+ 面板动效 + 上游同款拖动条 ----------
+  // 主题判定与 TPS 同构(应用主题类 → 系统偏好 → 兜底)。
   const STYLE_ID = "zslider-style";
+  function isDarkTheme() {
+    try {
+      const d = document.documentElement;
+      const b = document.body;
+      if ((b && b.classList.contains("dark")) || d.classList.contains("dark")) return true;
+      if (b && b.getAttribute("data-theme") === "dark") return true;
+      if (d.getAttribute("data-theme") === "dark") return true;
+      if ((b && b.classList.contains("light")) || d.classList.contains("light")
+          || d.getAttribute("data-theme") === "light") return false;
+      return !!(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    } catch (err) { return false; }
+  }
   function ensureStyle() {
     if (document.getElementById(STYLE_ID)) return;
     const st = document.createElement("style");
     st.id = STYLE_ID;
-    // 主题变量块：暗色值只列颜色类，尺寸/时长类仍在 :root 上（继承下来即可）。
-    // 应用主题类（.dark / html.dark / body.dark / data-theme）优先，系统偏好兜底。
+    // 主题变量块:面板 chrome 用;暗色值只列颜色类,尺寸类仍在 :root 上(继承下来即可)。
     const VARS_LIGHT = "{"
       + "--zs-bg:#ffffff;--zs-fg:#1b1f24;--zs-dim:#5b6470;--zs-accent:#b45309;"
-      + "--zs-rail-a:#eaf0fb;--zs-rail-b:#dce6fa;"
-      + "--zs-rail-inset:inset 0 0 0 1px rgba(77,111,255,.14),inset 0 1px 0 rgba(255,255,255,.9);"
-      + "--zs-rail-shadow:0 1px 2px rgba(31,58,147,.10);"
-      + "--zs-dot:rgba(92,104,128,.32);--zs-shimmer:rgba(120,150,255,.35);"
-      + "--zs-flare:radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.9) 0 5%,rgba(141,166,255,.6) 16%,rgba(91,120,255,.34) 36%,rgba(91,63,255,.12) 55%,transparent 74%);"
-      + "--zs-flare-blend:normal;"
       + "--zs-glass:rgba(255,255,255,.75);--zs-border:rgba(15,23,42,.10);--zs-chip:rgba(15,23,42,.06);"
       + "--zs-shadow:0 12px 30px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.10);"
-      + "--zs-r-panel:14px;--zs-r-pill:999px;--zs-h:16px;"
-      + "--zs-gap:5px;--zs-seg:rgba(92,104,128,.22);"
-      + "--zs-dur:260ms;--zs-ease:cubic-bezier(.2,.8,.2,1)}";
+      + "--zs-r-panel:14px}";
     const VARS_DARK = "{"
       + "--zs-bg:#191c22;--zs-fg:#e9ecf1;--zs-dim:#9aa3b2;--zs-accent:#e0983a;"
-      + "--zs-rail-a:#06070e;--zs-rail-b:#2b1d58;"
-      + "--zs-rail-inset:inset 0 1px 0 rgba(189,199,255,.14),inset 0 -1px 0 rgba(0,0,0,.55);"
-      + "--zs-rail-shadow:0 2px 8px rgba(0,0,0,.38);"
-      + "--zs-dot:rgba(165,175,196,.45);--zs-shimmer:rgba(255,255,255,.55);"
-      + "--zs-flare:radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.95) 0 4%,rgba(188,189,255,.8) 11%,rgba(106,87,255,.5) 28%,rgba(105,31,255,.2) 49%,transparent 74%);"
-      + "--zs-flare-blend:screen;"
       + "--zs-glass:rgba(24,27,34,.66);--zs-border:rgba(255,255,255,.16);--zs-chip:rgba(255,255,255,.08);"
-      + "--zs-seg:rgba(178,188,208,.34);"
       + "--zs-shadow:0 14px 42px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.22)}";
     st.textContent = [
       '[data-composer-thought-control]:not([data-thought-level-fixed="true"]){display:none!important}',
       ":root" + VARS_LIGHT,
       ".dark,html.dark,body.dark,[data-theme='dark']" + VARS_DARK,
       "@media (prefers-color-scheme: dark){:root:not(.light):not([data-theme='light'])" + VARS_DARK + "}",
-      "/* 面板：圆角/描边/阴影统一走变量，叠一层自上而下的玻璃渐变 */",
+      "/* 面板:圆角/描边/阴影统一走变量,叠一层自上而下的玻璃渐变;outline:none 压掉 focus() 的系统色焦点环 */",
       ".zslider-panel{border:1px solid var(--zs-border)!important;border-radius:var(--zs-r-panel)!important;"
-        + "box-shadow:var(--zs-shadow)!important;"
+        + "box-shadow:var(--zs-shadow)!important;outline:none!important;"
         + "background-image:linear-gradient(180deg,var(--zs-glass),transparent 62%);"
         + "backdrop-filter:blur(10px) saturate(1.1)}",
-      "/* 分段轨道：rail 是段容器（段间隙透出轨道渐变），每段内含一个 .zslider-fill 做填充层。",
-      "   类名/变量/属性全部沿用旧版，外部样式与文档不受影响 */",
-      ".zslider-track{display:flex!important;align-items:center;gap:8px}",
-      // 轨道本身不要 box-shadow：分段后视觉厚度由段提供，加阴影反而糊住段间隙
-      ".zslider-rail{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;"
-        + "gap:var(--zs-gap);overflow:hidden;"
-        + "background:linear-gradient(100deg,var(--zs-rail-a) 0%,var(--zs-rail-b) 100%)!important;"
-        + "border-radius:var(--zs-r-pill);box-shadow:none;transition:filter .2s ease}",
-      ".zslider-track:hover .zslider-rail{filter:brightness(1.06) saturate(1.05)}",
-      "/* 段：弱化底（未激活时看到的就是它）；内部 fill 宽度 0↔100% 即分段填充过渡 */",
-      ".zslider-seg{position:relative;flex:1 1 0;min-width:0;height:100%;"
-        + "border-radius:var(--zs-r-pill);background:var(--zs-seg);overflow:hidden;"
-        + "box-shadow:inset 0 1px 2px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.10)}",
-      "/* 填充层沿用旧类名：width 过渡 + stagger 延迟做出逐段点亮的层次；"
-        + "内高光 + 外投影让加粗后的胶囊立起来 */",
-      ".zslider-fill{border-radius:var(--zs-r-pill)!important;"
-        + "box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1.5px 2px rgba(0,0,0,.28),"
-        + "0 2px 5px rgba(0,0,0,.22);"
-        + "transition:width var(--zs-dur) var(--zs-ease) var(--zs-stagger,0ms)}",
-      "/* 光泽层：顶部亮 → 中部透 → 底部压深；对比度刻意拉大，避免加粗后成为整块平涂 */",
-      ".zslider-fill::after{content:'';position:absolute;inset:0;border-radius:inherit;"
-        + "pointer-events:none;"
-        + "background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.30) 32%,"
-        + "rgba(255,255,255,.04) 52%,rgba(0,0,0,.10) 74%,rgba(0,0,0,.30) 100%)}",
-      ".zslider-track.is-dragging .zslider-fill{filter:saturate(1.35) brightness(1.22) "
-        + "drop-shadow(0 0 5px rgba(125,211,252,.45));"
-        + "transition-delay:0ms!important;animation:none!important}",
-      "/* 思考中：激活段依次流动（延迟复用 --zs-stagger，与点亮同一套错开节奏） */",
-      "@keyframes zsFlow{0%,100%{opacity:.6}50%{opacity:1}}",
-      ".zslider-track[data-thinking='1'] .zslider-seg[data-on='1'] .zslider-fill"
-        + "{animation:zsFlow var(--zs-flow,1400ms) ease-in-out infinite var(--zs-stagger,0ms)}",
-      "/* 段弹入：从左向右逐段展开（旧刻度点的级联弹入改挂到段上） */",
-      "@keyframes zsSegIn{from{transform:scaleX(.15);opacity:0}to{transform:scaleX(1);opacity:1}}",
-      ".zslider-seg{transform-origin:left center}",
-      ".zslider-flare{position:absolute;top:50%;left:var(--zp,0%);width:56px;height:26px;border-radius:50%;"
-        + "transform:translate(-100%,-50%);background:var(--zs-flare);"
-        + "mix-blend-mode:var(--zs-flare-blend);filter:blur(2px) saturate(1.2);"
-        + "transition:left var(--zs-dur) var(--zs-ease),filter .14s ease;pointer-events:none}",
-      ".zslider-track.is-dragging .zslider-flare{filter:blur(1.5px) saturate(1.55) brightness(1.35)}",
-      "/* 加载中：轨道上掠过一道扫光，与填充条扫入同步 */",
-      "@keyframes zsShimmer{from{transform:translateX(-120%)}to{transform:translateX(420%)}}",
-      ".zslider-shimmer{position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:var(--zs-r-pill);"
-        + "background:linear-gradient(90deg,transparent,var(--zs-shimmer),transparent);"
-        + "opacity:0;pointer-events:none}",
-      ".zslider-track[data-zs='loading'] .zslider-shimmer{opacity:.9;animation:zsShimmer 1.05s linear infinite}",
-      "/* 静止/暂停：max 档外发光呼吸。挂在最后一段的填充层上——段盒子的 animation 被入场",
-      "   zsSegIn 的 inline 样式占着（inline 优先级高于样式表），挂段上会被整个顶掉 */",
-      "@keyframes zsBreathe{0%,100%{box-shadow:0 0 0 0 rgba(125,211,252,0)}"
-        + "50%{box-shadow:0 0 10px 1px rgba(125,211,252,.55)}}",
-      ".zslider-track[data-top][data-zs='idle']:not([data-thinking='1']) .zslider-seg:last-child .zslider-fill"
-        + "{animation:zsBreathe 2.6s ease-in-out infinite}",
+      // ===== 拖动条:1:1 复刻 dsh-reasoning-effort/src/client/styles.ts =====
+      // (上游主题条件 body[data-ds-dark-theme] / body:not(...) 在此映射为
+      //  panel.zs-dark / panel:not(.zs-dark);上游走隐藏 range input 的 cursor:grab
+      //  在此落在 .re-effort 行上,其余数值逐字保留)
+      ".re-effort{display:flex;align-items:center;width:100%;min-width:0;height:32px;"
+        + "color:#9aa3b2;user-select:none;box-sizing:border-box;cursor:grab;touch-action:none}",
+      ".re-effort.is-dragging{cursor:grabbing}",
+      ".re-effort-slider{--re-progress:50%;position:relative;width:100%;height:30px;flex:1 1 auto;"
+        + "border-radius:999px;isolation:isolate;transition:filter 180ms ease}",
+      ".re-effort-track{position:absolute;inset:0;overflow:hidden;border-radius:inherit;"
+        + "background:linear-gradient(100deg,#03040a 0%,#071126 22%,#101d4c 45%,#302262 70%,#5d35a0 100%);"
+        + "box-shadow:inset 0 1px 0 rgba(189,199,255,.15),inset 0 -1px 0 rgba(0,0,0,.55),"
+        + "0 3px 10px rgba(12,17,55,.34)}",
+      ".re-effort-track::after{content:'';position:absolute;inset:0;"
+        + "background:radial-gradient(circle at 18% 45%,rgba(82,130,255,.12),transparent 24%),"
+        + "linear-gradient(90deg,rgba(0,0,0,.28),transparent 42%,rgba(168,113,255,.12));pointer-events:none}",
+      ".re-effort-fx{position:absolute;z-index:1;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}",
+      ".re-effort-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;opacity:1;"
+        + "image-rendering:pixelated;mix-blend-mode:screen;transition:filter 140ms ease}",
+      ".re-effort-flare{position:absolute;z-index:3;top:50%;left:var(--re-progress);width:78px;height:46px;"
+        + "border-radius:50%;"
+        + "background:radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.96) 0 4%,rgba(188,189,255,.8) 11%,"
+        + "rgba(106,87,255,.5) 28%,rgba(105,31,255,.2) 49%,transparent 74%);"
+        + "filter:blur(2px) saturate(1.25);mix-blend-mode:screen;transform:translate(-100%,-50%);"
+        + "transition:left 70ms linear,filter 140ms ease;pointer-events:none}",
+      ".re-effort-flare::before,.re-effort-flare::after{content:'';position:absolute;"
+        + "inset:50% auto auto 100%;border-radius:999px;transform:translate(-50%,-50%)}",
+      ".re-effort-flare::before{width:52px;height:1px;"
+        + "background:linear-gradient(90deg,transparent,rgba(100,160,255,.42),#f1ecff,rgba(193,82,255,.65),transparent);"
+        + "box-shadow:0 0 7px #9b7cff,0 0 13px rgba(72,132,255,.64)}",
+      ".re-effort-flare::after{width:1px;height:20px;"
+        + "background:linear-gradient(180deg,transparent,rgba(196,190,255,.84),transparent);"
+        + "box-shadow:0 0 7px #9c7cff}",
+      ".re-effort-knob{position:absolute;z-index:4;top:50%;"
+        + "left:clamp(14px,var(--re-progress),calc(100% - 14px));"
+        + "width:28px;height:28px;border:1px solid rgba(255,255,255,.94);border-radius:50%;background:#fff;"
+        + "box-shadow:0 0 0 2px rgba(92,105,255,.12),0 0 14px rgba(121,82,255,.48),0 2px 7px rgba(0,0,0,.3);"
+        + "transform:translate(-50%,-50%);"
+        + "transition:left 190ms cubic-bezier(.22,1,.36,1),transform 160ms ease,box-shadow 180ms ease;"
+        + "pointer-events:none}",
+      ".re-effort.is-dragging .re-effort-canvas{filter:saturate(1.45) brightness(1.28) contrast(1.06)}",
+      ".re-effort.is-dragging .re-effort-flare{filter:blur(1.5px) saturate(1.6) brightness(1.42);transition:none}",
+      ".re-effort.is-dragging .re-effort-knob{transform:translate(-50%,-50%) scale(1.07);transition:none;"
+        + "box-shadow:0 0 0 3px rgba(113,115,255,.25),0 0 20px rgba(74,145,255,.86),"
+        + "0 0 31px rgba(171,53,255,.66),0 3px 8px rgba(0,0,0,.32)}",
+      ".re-effort-slider[data-top] .re-effort-track{animation:re-effort-dark-breathe 1.9s ease-in-out infinite}",
+      ".re-effort-slider[data-top] .re-effort-knob{box-shadow:"
+        + "0 0 0 3px rgba(119,99,255,.18),0 0 22px rgba(135,78,255,.76),"
+        + "0 0 34px rgba(53,121,255,.34),0 3px 8px rgba(0,0,0,.3)}",
+      ".re-effort.is-error .re-effort-slider{outline:1px solid #e5484d;outline-offset:2px}",
+      ".re-effort.is-busy{opacity:.72}",
+      // 浅色主题分支(逐字对应上游 body:not([data-ds-dark-theme]) 块)
+      ".zslider-panel:not(.zs-dark) .re-effort-track{background:#e5f0ff;"
+        + "box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(80,133,194,.14),"
+        + "0 3px 10px rgba(48,101,165,.13)}",
+      ".zslider-panel:not(.zs-dark) .re-effort-track::before{content:'';position:absolute;z-index:0;"
+        + "inset:0 auto 0 0;width:var(--re-progress);border-radius:inherit;"
+        + "background:linear-gradient(90deg,#fff 0%,#e2f0ff 20%,#a8d0fb 57%,#438fdf 100%);"
+        + "transition:width 190ms cubic-bezier(.22,1,.36,1)}",
+      ".zslider-panel:not(.zs-dark) .re-effort-slider[data-top] .re-effort-track::before{"
+        + "background:linear-gradient(90deg,#fff 0%,#d7eaff 18%,#75afea 54%,#0751ad 100%)}",
+      ".zslider-panel:not(.zs-dark) .re-effort.is-dragging .re-effort-track::before{transition:none}",
+      ".zslider-panel:not(.zs-dark) .re-effort-track::after{z-index:1;"
+        + "background:linear-gradient(90deg,rgba(255,255,255,.48),transparent 34%,rgba(23,101,201,.07))}",
+      ".zslider-panel:not(.zs-dark) .re-effort-canvas{opacity:.78;mix-blend-mode:multiply}",
+      ".zslider-panel:not(.zs-dark) .re-effort-flare{"
+        + "background:radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.98) 0 5%,rgba(204,231,255,.88) 13%,"
+        + "rgba(91,162,241,.48) 31%,rgba(37,111,207,.16) 53%,transparent 75%);"
+        + "filter:blur(2px) saturate(1.12)}",
+      ".zslider-panel:not(.zs-dark) .re-effort-flare::before{"
+        + "background:linear-gradient(90deg,transparent,rgba(116,177,244,.34),#fff,rgba(66,139,225,.58),transparent);"
+        + "box-shadow:0 0 7px rgba(58,133,222,.5),0 0 13px rgba(104,176,255,.38)}",
+      ".zslider-panel:not(.zs-dark) .re-effort-flare::after{"
+        + "background:linear-gradient(180deg,transparent,rgba(255,255,255,.94),transparent);"
+        + "box-shadow:0 0 7px rgba(64,137,224,.44)}",
+      ".zslider-panel:not(.zs-dark) .re-effort-knob{border-color:rgba(126,160,197,.32);"
+        + "box-shadow:0 0 0 2px rgba(58,124,207,.09),0 0 13px rgba(48,118,207,.3),0 3px 8px rgba(39,77,119,.18)}",
+      ".zslider-panel:not(.zs-dark) .re-effort-slider[data-top] .re-effort-track{"
+        + "animation-name:re-effort-light-breathe}",
+      ".zslider-panel:not(.zs-dark) .re-effort-slider[data-top] .re-effort-knob,"
+        + ".zslider-panel:not(.zs-dark) .re-effort.is-dragging .re-effort-knob{box-shadow:"
+        + "0 0 0 3px rgba(36,105,192,.15),0 0 20px rgba(25,100,201,.45),0 3px 8px rgba(39,77,119,.18)}",
+      "@keyframes re-effort-dark-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(196,204,255,.16),"
+        + "0 3px 10px rgba(18,25,72,.4)}50%{box-shadow:inset 0 1px 0 rgba(220,214,255,.24),"
+        + "0 0 21px rgba(111,66,255,.5)}}",
+      "@keyframes re-effort-light-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),"
+        + "inset 0 0 0 1px rgba(67,124,193,.16),0 3px 10px rgba(48,101,165,.13)}"
+        + "50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(31,102,190,.22),"
+        + "0 0 19px rgba(31,105,201,.24)}}",
+      // ===== 面板 chrome(本插件自有,保留) =====
       "@keyframes zsliderIn{from{opacity:0;transform:translateY(10px) scale(.85);filter:blur(6px)}60%{filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}",
       "@keyframes zsliderOut{from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(5px) scale(.96);filter:blur(4px)}}",
       "@keyframes zsliderPulse{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}",
-      "@keyframes zsliderRipple{from{opacity:.75;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}",
-      "/* 响应式：窄屏收紧圆角；触控放大热区到 40px */",
       "@media (max-width:420px){:root{--zs-r-panel:12px}}",
-      "@media (pointer:coarse){.zslider-track{height:40px!important}}",
-      "/* 减弱动效：时长归零、动画全关 */",
-      "@media (prefers-reduced-motion: reduce){:root{--zs-dur:0ms}"
-        + ".zslider-panel,.zslider-track,.zslider-track *{animation:none!important}}",
+      "/* 减弱动效:上游同款(呼吸动画/跟手过渡全关)+ 面板动画全关 */",
+      "@media (prefers-reduced-motion: reduce){"
+        + ".re-effort-slider[data-top] .re-effort-track{animation:none}"
+        + ".re-effort-knob,.re-effort-flare,.zslider-panel:not(.zs-dark) .re-effort-track::before{transition:none}"
+        + ".zslider-panel,.zslider-panel *{animation:none!important}}",
     ].join("\n");
     document.head.appendChild(st);
   }
@@ -286,7 +320,7 @@
     if (!entryMini) return;
     const pct = n > 1 ? (idx / (n - 1)) * 100 : 0;
     entryMini.firstChild.style.height = Math.max(8, pct) + "%";
-    entryMini.firstChild.style.background = state.effortColor || "#4d9dff";
+    entryMini.firstChild.style.background = effortColor(idx, n).color;
   }
 
   function ensureEntry(trig, span) {
@@ -353,27 +387,168 @@
     return true;
   }
 
-  // ---------- 弹出面板(滑条) ----------
+  // ---------- 弹出面板(拖动条) ----------
   let panel = null;
-  let track = null;
-  let rail = null;
-  let flareEl = null;
-  let segs = [];              // 分段：每段 { box(.zslider-seg), fill(.zslider-fill) }
+  let track = null;          // .re-effort 行(承载 is-dragging/is-busy/is-error)
+  let sliderEl = null;       // .re-effort-slider(--re-progress / data-top 落在这里)
+  let canvasEl = null;       // .re-effort-canvas(像素辐射特效)
   let labelEl = null;
-  let state = { levels: [], cur: "", key: "", drag: false, thinking: false, lit: -1, effortColor: "#4d9dff" };
+  let state = { levels: [], cur: "", key: "", drag: false, thinking: false, preview: 0, busy: false };
   let closeTimer = null;
-  let phaseTimer = null;
-  // 进度条相位(写进 track 的 data-zs,样式表按态下发):
-  //   loading  填充扫入中 —— 轨道掠过扫光
-  //   dragging 拖拽中     —— 跟手、逐段点亮不延迟
-  //   settling 已落位     —— 涟漪
-  //   idle     静止/暂停   —— max 档最后一段外发光呼吸
-  // 与 data-zs 正交的还有 data-thinking(1/0)：思考中激活段流动，空闲定格。
-  function setPhase(v) {
-    if (track && track.isConnected) track.dataset.zs = v;
+  // canvas 特效状态(与上游 RadiationState 同构):progress=旋钮比例(0~1 连续),dragging=拖拽加速
+  let radiation = { progress: 0.5, dragging: false };
+  let fxRaf = 0;
+  let fxResizeObserver = null;
+  let fxRedraw = null;       // reduced-motion 时 preview 变化手动补一帧
+
+  // 上游 drawRadiation 逐字移植(src/client/index.tsx):
+  // 以旋钮为原点向左铺 4px 像素格能量柱(三组正弦叠加+噪点颗粒),
+  // 外加 14 条拖尾粒子流与旋钮处径向辉光;深/浅色两套配色。
+  function drawRadiation(context, width, height, time, st) {
+    const origin = st.progress * width;
+    const isDark = panel ? panel.classList.contains("zs-dark") : isDarkTheme();
+    const cell = 4;
+    const speed = st.dragging ? 2.8 : 1;
+
+    context.clearRect(0, 0, width, height);
+    if (origin <= 0) return;
+
+    context.save();
+    context.beginPath();
+    context.rect(0, 0, origin, height);
+    context.clip();
+
+    for (let x = 0; x < origin; x += cell) {
+      const delta = x + cell * 0.5 - origin;
+      const distance = Math.abs(delta);
+      const phaseA = distance / 10 - time * 0.0074 * speed;
+      const phaseB = distance / 23 - time * 0.0041 * speed + 1.7;
+      const phaseC = distance / 40 - time * 0.0022 * speed + 3.4;
+      const sinA = Math.max(0, Math.sin(phaseA));
+      const sinB = Math.max(0, Math.sin(phaseB));
+      const sinC = Math.max(0, Math.sin(phaseC));
+      const waveA = Math.pow(sinA, 2.6);
+      const waveB = Math.pow(sinB, 3.2);
+      const waveC = Math.pow(sinC, 4);
+      const crest = Math.pow(sinA, 15) + Math.pow(sinB, 18) * 0.78;
+      const wave = Math.min(1, waveA * 0.76 + waveB * 0.58 + waveC * 0.32);
+      const trail = 0.38 + 0.62 * Math.exp(-distance / Math.max(55, width * 0.72));
+      const pillar = Math.pow(Math.max(0, Math.sin(x / 20 + time * 0.0016)), 3) * 0.27;
+      const columnEnergy = trail * (wave * 1.04 + pillar + crest * 0.32);
+
+      if (columnEnergy > 0.012) {
+        const nearness = Math.max(0, 1 - distance / Math.max(1, width * 0.78));
+        const red = isDark
+          ? Math.round(42 + 124 * nearness + 75 * wave)
+          : Math.round(28 + 58 * nearness + 15 * wave);
+        const green = isDark
+          ? Math.round(56 + 58 * nearness + 44 * crest)
+          : Math.round(88 + 72 * nearness + 30 * crest);
+        const blue = isDark
+          ? Math.round(175 + 72 * nearness + 8 * wave)
+          : Math.round(182 + 62 * nearness);
+        const alpha = isDark
+          ? Math.min(0.88, columnEnergy * 0.72)
+          : Math.min(0.62, columnEnergy * 0.54);
+        context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
+        context.fillRect(x, 0, cell - 1, height);
+      }
+
+      for (let y = 0; y < height; y += cell) {
+        const deltaY = y + cell * 0.5 - height * 0.5;
+        const radial = Math.hypot(delta / 38, deltaY / 11);
+        const halo = Math.exp(-radial * 0.96) * 1.08;
+        const verticalShape = 0.58 + 0.42 * Math.cos((deltaY / height) * Math.PI);
+        const grain = 0.72 + 0.28 * Math.sin(x * 0.73 + y * 1.31 + time * 0.006);
+        const alpha = Math.min(0.96, (columnEnergy * 0.88 + halo + crest * 0.19) * verticalShape * grain);
+        if (alpha < 0.035) continue;
+
+        const hot = Math.max(0, 1 - radial / 2.4);
+        const red = isDark
+          ? Math.round(54 + 148 * hot + 42 * wave + 35 * crest)
+          : Math.round(25 + 72 * hot + 12 * wave);
+        const green = isDark
+          ? Math.round(68 + 78 * hot + 46 * crest)
+          : Math.round(98 + 72 * hot + 24 * crest);
+        const blue = isDark
+          ? Math.round(186 + 64 * hot)
+          : Math.round(194 + 56 * hot);
+        context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + (isDark ? alpha : alpha * 0.72) + ")";
+        context.fillRect(x, y, cell - 1, cell - 1);
+      }
+    }
+
+    for (let i = 0; i < 14; i += 1) {
+      const travel = (time * (st.dragging ? 0.16 : 0.065) * (0.78 + (i % 5) * 0.09) + i * 23) % Math.max(30, origin + 64);
+      const particleX = origin - travel;
+      if (particleX < -24 || particleX > width + 16) continue;
+      const particleY = 3 + ((i * 13 + Math.sin(time * 0.003 + i) * 5) % Math.max(7, height - 6));
+      const length = 4 + (i % 4) * 4 + (st.dragging ? 6 : 0);
+      const alpha = 0.28 + (i % 5) * 0.1;
+      const streak = context.createLinearGradient(particleX, 0, particleX + length, 0);
+      streak.addColorStop(0, isDark ? "rgba(72,118,255,0)" : "rgba(24,94,184,0)");
+      streak.addColorStop(0.68, isDark ? "rgba(112,135,255," + alpha + ")" : "rgba(36,108,202," + alpha * 0.72 + ")");
+      streak.addColorStop(1, isDark ? "rgba(236,222,255," + Math.min(1, alpha + 0.26) + ")" : "rgba(103,175,248," + Math.min(0.82, alpha + 0.18) + ")");
+      context.fillStyle = streak;
+      context.fillRect(particleX, particleY, length, i % 3 === 0 ? 2 : 1);
+    }
+
+    const glow = context.createRadialGradient(origin, height / 2, 0, origin, height / 2, 24);
+    glow.addColorStop(0, isDark ? "rgba(255,255,255,.82)" : "rgba(255,255,255,.86)");
+    glow.addColorStop(0.14, isDark ? "rgba(183,190,255,.54)" : "rgba(162,210,255,.48)");
+    glow.addColorStop(0.44, isDark ? "rgba(103,74,255,.28)" : "rgba(37,112,207,.22)");
+    glow.addColorStop(1, isDark ? "rgba(86,31,210,0)" : "rgba(25,91,181,0)");
+    context.fillStyle = glow;
+    context.fillRect(origin - 26, 0, 52, height);
+    context.restore();
   }
 
-  // ---------- 思考中/空闲：检测与切换 ----------
+  // canvas 生命周期:面板打开期间 rAF 连续重绘;reduced-motion 只画一帧(preview 变化补帧)
+  function initCanvasFx() {
+    try {
+      if (!canvasEl) return;
+      const context = canvasEl.getContext("2d");
+      if (!context) return;
+      let width = 1;
+      let height = 1;
+      const reduced = (typeof window.matchMedia === "function")
+        ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
+
+      const resize = () => {
+        const bounds = canvasEl.getBoundingClientRect();
+        const ratio = Math.min(window.devicePixelRatio || 1, 2);
+        width = Math.max(1, bounds.width);
+        height = Math.max(1, bounds.height);
+        canvasEl.width = Math.max(1, Math.round(width * ratio));
+        canvasEl.height = Math.max(1, Math.round(height * ratio));
+        context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      };
+      const draw = (time) => {
+        drawRadiation(context, width, height, time || (window.performance && performance.now ? performance.now() : 0), radiation);
+      };
+      const loop = (time) => {
+        draw(time);
+        fxRaf = window.requestAnimationFrame(loop);
+      };
+
+      resize();
+      draw();
+      if (!(reduced && reduced.matches)) fxRaf = window.requestAnimationFrame(loop);
+      fxRedraw = () => { if (!fxRaf) draw(); };
+      if (typeof ResizeObserver === "function") {
+        fxResizeObserver = new ResizeObserver(() => { resize(); draw(); });
+        fxResizeObserver.observe(canvasEl);
+      }
+    } catch (err) { /* canvas 不可用时滑条其余部分照常工作 */ }
+  }
+
+  function stopCanvasFx() {
+    if (fxRaf) { try { window.cancelAnimationFrame(fxRaf); } catch (err) { /* ignore */ } fxRaf = 0; }
+    if (fxResizeObserver) { try { fxResizeObserver.disconnect(); } catch (err) { /* ignore */ } fxResizeObserver = null; }
+    fxRedraw = null;
+  }
+
+  // ---------- 思考中/空闲：检测（保留给入口/诊断;上游样式无"思考中流动"态） ----------
   // 自动检测，按可靠性排序（①② 来自 3.14.3 renderer bundle 实证，非猜测）：
   //   ① 停止按钮在场 —— 客户端把「停止生成」与「发送」做成同一按钮位的**互斥渲染**，
   //      aria-label 取 i18n `chat.stop`（中文「停止生成」/ 英文「Stop generating」）。
@@ -415,96 +590,41 @@
   }
   function setThinking(v) {
     const b = !!v;
-    // 面板关闭时 track 可能已脱离文档：此时只比对 state，避免每秒白写 DOM
-    const cur = (track && track.isConnected) ? track.dataset.thinking : null;
-    if (state.thinking === b && cur === (b ? "1" : "0")) return;
+    if (state.thinking === b) return;
     state.thinking = b;
-    // 新面板的 track 还没有 data-thinking（cur === undefined），这里必须补写：
-    // 否则"状态没变就早退"会让新面板的流动动画永远不生效
     if (track && track.isConnected) track.dataset.thinking = b ? "1" : "0";
   }
 
-  // 辐射特效:换档确认时从「当前点亮的最后一段」中心发射一圈涟漪
-  // 挂 track(不裁剪)而非 rail(rail 有 overflow:hidden 会把涟漪压成 8px 带子)
-  function rippleAt() {
-    if (!rail || !rail.parentElement) return;
-    const S = segs.length;
-    if (!S) return;
-    const lit = state.lit >= 0 ? state.lit : 0;
-    const cx = rail.offsetLeft + ((lit + 0.5) / S) * rail.offsetWidth;
-    const r = document.createElement("div");
-    Object.assign(r.style, {
-      position: "absolute", left: cx + "px", top: "50%",
-      width: "30px", height: "30px", borderRadius: "50%",
-      border: "1.5px solid " + (state.effortColor || FILL), pointerEvents: "none",
-      animation: "zsliderRipple .5s ease-out forwards",
-    });
-    rail.parentElement.appendChild(r);
-    setTimeout(() => r.remove(), 520);
-  }
-
-  // 档位着色(dsh 规格):低/中蓝 → 高紫罗兰 → max 亮蓝并泛光脉冲
+  // 档位着色(仅迷你电量条用;拖动条本体色彩由上游同款 CSS/canvas 负责):
+  // 低/中蓝 → 高紫罗兰 → max 亮蓝
   function effortColor(idx, n) {
     const ratio = (idx >= 0 && n > 1) ? idx / (n - 1) : 0;
-    if (ratio >= 0.999) return { color: "#7dd3fc", glow: "0 0 10px 2px rgba(125,211,252,.65)", pulse: true };
-    if (ratio >= 0.6) return { color: "#a78bfa", glow: "0 0 8px rgba(167,139,250,.5)", pulse: false };
-    return { color: "#4d9dff", glow: "0 0 6px rgba(77,157,255,.45)", pulse: false };
-  }
-
-  // 按档位数构建分段：段数 = segCount(n)，每段 = 弱化底(.zslider-seg) + 填充层(.zslider-fill)
-  function buildSegs(n) {
-    const S = segCount(n);
-    const out = [];
-    for (let i = 0; i < S; i++) {
-      const box = document.createElement("div");
-      box.className = "zslider-seg";
-      box.dataset.on = "0";
-      box.style.animation = `zsSegIn .34s cubic-bezier(.34,1.56,.64,1) ${40 + i * 35}ms backwards`;
-      const f = document.createElement("div");
-      f.className = "zslider-fill";
-      Object.assign(f.style, {
-        position: "absolute", left: "0", top: "0", height: "100%",
-        borderRadius: "var(--zs-r-pill)", background: FILL, width: "0",
-      });
-      box.appendChild(f);
-      // 插在扫光/光斑之前：重建段（切模型 / setSegments）时覆盖层必须仍在最上层。
-      // 首次构建时 rail 里还没有覆盖层，insertBefore(node, null) 等价于 append。
-      rail.insertBefore(box, rail.querySelector(".zslider-shimmer, .zslider-flare"));
-      out.push({ box, fill: f });
-    }
-    return out;
+    if (ratio >= 0.999) return { color: "#7dd3fc" };
+    if (ratio >= 0.6) return { color: "#a78bfa" };
+    return { color: "#4d9dff" };
   }
 
-  // 分段填充：档位 idx(共 n 档) → 点亮前 lit+1 段(共 S 段)
-  function setFill(idx, n) {
-    const S = segCount(n);
-    const lit = (n > 1 && S > 1) ? Math.round((idx / (n - 1)) * (S - 1)) : 0;
-    state.lit = idx >= 0 ? lit : -1;
-    const onCount = idx >= 0 ? lit + 1 : 0;
-    const ec = effortColor(idx, n);
-    state.effortColor = ec.color;
-    segs.forEach((s, i) => {
-      const on = i < onCount;
-      s.box.dataset.on = on ? "1" : "0";
-      // 0 → 100% 的 width 过渡即"分段填充平滑过渡"；--zs-stagger 让它逐段点亮
-      s.fill.style.width = on ? "100%" : "0%";
-      s.fill.style.background = ec.color;
-      s.fill.style.setProperty("--zs-stagger", (i * 45) + "ms");
-    });
-    // --zp 旧语义保留：光斑锚点，停在已点亮段的右端
-    if (track) track.style.setProperty("--zp", (S > 0 ? ((lit + 1) / S) * 100 : 100) + "%");
-    if (track) {
-      if (idx >= 0 && n > 1 && idx === n - 1) track.setAttribute("data-top", "1");
-      else track.removeAttribute("data-top");
-    }
-    // max 档泛光：由 CSS 落在最后一段填充层(zsBreathe)
+  // ---------- 预览(连续跟手):raw ∈ [0, n-1] 浮点,驱动 --re-progress / 光斑 / canvas ----------
+  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+  function preview(raw) {
+    const n = state.levels.length;
+    const r = clamp(raw, 0, Math.max(0, n - 1));
+    state.preview = r;
+    const pct = n > 1 ? (r / (n - 1)) * 100 : 0;
+    if (sliderEl) sliderEl.style.setProperty("--re-progress", pct + "%");
+    radiation.progress = n > 1 ? r / (n - 1) : 0;
+    if (labelEl) labelEl.textContent = state.levels[Math.round(r)] ?? "";
+    if (fxRedraw) fxRedraw();   // reduced-motion 时手动补一帧
   }
 
   function closePanel(animate) {
     if (!panel) return;
     const p = panel;
     panel = null;
-    clearTimeout(phaseTimer);
+    stopCanvasFx();
+    track = null;
+    sliderEl = null;
+    canvasEl = null;
     window.removeEventListener("resize", onViewportChange);
     window.removeEventListener("scroll", onViewportChange, true);
     document.removeEventListener("pointerdown", onDocDown, true);
@@ -533,11 +653,11 @@
     closePanel(false);
     const p = document.createElement("div");
     p.setAttribute(MARK + "-panel", "1");
-    p.className = "zslider-panel";
+    p.className = "zslider-panel" + (isDarkTheme() ? " zs-dark" : "");
     p.tabIndex = -1;
     Object.assign(p.style, {
       position: "fixed", zIndex: "2147483000",
-      // 响应式:窄窗口收缩到视口内(原来 236px 硬编码,窗口 <252px 必然溢出)
+      // 响应式:窄窗口收缩到视口内
       width: "min(236px, calc(100vw - 24px))",
       boxSizing: "border-box", padding: "12px 14px 14px",
       background: "var(--color-background, var(--zs-bg, #1e1e1e))",
@@ -565,113 +685,111 @@
     head.appendChild(labelEl);
     p.appendChild(head);
 
-    // 滑条行 = 分段轨道（无前缀图标，轨道占满整行）
+    // 拖动条行 = 上游同款 .re-effort 结构(track + fx(canvas+flare) + knob)
     track = document.createElement("div");
-    track.className = "zslider-track";
-    Object.assign(track.style, {
-      position: "relative", height: "38px",
-      cursor: "pointer", touchAction: "none",
-    });
-
-    // 分段轨道:rail 是段容器(段间隙透出轨道渐变),段数由 segCount() 决定
-    rail = document.createElement("div");
-    rail.className = "zslider-rail";
-    Object.assign(rail.style, {
-      position: "relative", flex: "1 1 auto", minWidth: "0",
-      height: "var(--zs-h)", borderRadius: "var(--zs-r-pill)",
-    });
-    segs = buildSegs(state.levels.length);
-    // 扫光(加载中)与拖尾光斑(--zp 定位到已点亮段右端):都在 rail 内,被圆角裁住
-    const shimEl = document.createElement("div");
-    shimEl.className = "zslider-shimmer";
-    rail.appendChild(shimEl);
-    flareEl = document.createElement("div");
-    flareEl.className = "zslider-flare";
-    rail.appendChild(flareEl);
-    track.appendChild(rail);
+    track.className = "re-effort";
+    sliderEl = document.createElement("div");
+    sliderEl.className = "re-effort-slider";
+    const trackBg = document.createElement("div");
+    trackBg.className = "re-effort-track";
+    const fx = document.createElement("div");
+    fx.className = "re-effort-fx";
+    canvasEl = document.createElement("canvas");
+    canvasEl.className = "re-effort-canvas";
+    const flare = document.createElement("span");
+    flare.className = "re-effort-flare";
+    const knob = document.createElement("span");
+    knob.className = "re-effort-knob";
+    fx.appendChild(canvasEl);
+    fx.appendChild(flare);
+    sliderEl.appendChild(trackBg);
+    sliderEl.appendChild(fx);
+    sliderEl.appendChild(knob);
+    track.appendChild(sliderEl);
     p.appendChild(track);
-    const tr = track;   // 本面板的轨道快照(事件回调里不依赖会被重写的 track)
 
     // 先入 DOM 量尺寸;定位在 panel 赋值之后做(见函数末尾 placePanel)
     document.body.appendChild(p);
+    initCanvasFx();
 
-    // 拖拽/点击:指针横向位置 → 最近档位,松手提交
-    const idxFromEvent = (e) => {
-      // 用 rail 的矩形:rail 是轨道本体,横向坐标换算最直接
-      const r = (rail || track).getBoundingClientRect();
-      const ratio = Math.max(0, Math.min(1, (e.clientX - r.left) / Math.max(1, r.width)));
+    // 拖拽/点击:指针横向位置 → 连续 raw(浮点),松手吸附最近档位提交
+    const rawFromEvent = (e) => {
+      const r = (sliderEl || track).getBoundingClientRect();
+      if (r.width <= 0 || state.levels.length < 2) return state.preview;
       const n = state.levels.length;
-      return Math.max(0, Math.min(n - 1, Math.round(ratio * (n - 1))));
+      return clamp((e.clientX - r.left) / r.width * (n - 1), 0, n - 1);
     };
-    const preview = (idx) => {
-      setFill(idx, state.levels.length);
-      labelEl.textContent = state.levels[idx] ?? "";
+    const committedIdx = () => {
+      const i = state.levels.indexOf(state.cur);
+      return i >= 0 ? i : 0;
+    };
+    const commitTo = (idx) => {
+      const value = state.levels[idx];
+      if (!value || value === state.cur || state.busy) return;
+      state.busy = true;
+      if (track) track.classList.add("is-busy");
+      Promise.resolve(commitLevel(value, idx))
+        .catch(() => false)
+        .then((ok) => {
+          state.busy = false;
+          if (track && track.isConnected) track.classList.remove("is-busy");
+          if (!ok) {
+            // 提交失败( fiber 与菜单路径均未命中 ):回弹到原档位
+            preview(committedIdx());
+            if (labelEl) labelEl.textContent = state.cur;
+            console.warn("[zslider] 档位提交失败(fiber 与菜单路径均未命中)");
+          }
+          // 成功路径:探针 data-thought 更新 → MutationObserver 触发 sync → refreshPanel 回填
+        });
     };
-    let lastMoveX = null;
     track.addEventListener("pointerdown", (e) => {
       e.preventDefault();
+      if (state.busy) return;
       state.drag = true;
-      lastMoveX = e.clientX;
-      track.classList.add("is-dragging");   // 拖拽增辉:光斑/填充提亮
-      // 拖拽跟手:时长归零(填充与光斑读同一个变量,不会再各跑各的)
-      tr.style.setProperty("--zs-dur", "0ms");
-      setPhase("dragging");
-      clearTimeout(phaseTimer);
+      track.classList.add("is-dragging");   // 跟手:旋钮/光斑过渡归零 + canvas 增辉加速
+      radiation.dragging = true;
       try { track.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
-      preview(idxFromEvent(e));
+      preview(rawFromEvent(e));
     });
     track.addEventListener("pointermove", (e) => {
       if (!state.drag) return;
-      preview(idxFromEvent(e));
-      lastMoveX = e.clientX;
+      preview(rawFromEvent(e));
     });
     const finish = (e) => {
       if (!state.drag) return;
       state.drag = false;
-      lastMoveX = null;
+      radiation.dragging = false;
       track.classList.remove("is-dragging");
-      tr.style.removeProperty("--zs-dur");   // 松手恢复弹性:逐段点亮重新带上 stagger
-      setPhase("settling");                  // 完成:涟漪(由 sync 触发)
-      clearTimeout(phaseTimer);
-      phaseTimer = setTimeout(() => setPhase("idle"), 520);
       try { track.releasePointerCapture(e.pointerId); } catch (err) { /* ignore */ }
-      const idx = idxFromEvent(e);
-      const value = state.levels[idx];
-      if (value && value !== state.cur) {
-        commitLevel(value, idx).then((ok) => {
-          if (!ok) console.warn("[zslider] 档位提交失败(fiber 与菜单路径均未命中)");
-        });
-      }
-      sync();   // 以真实状态回填(提交失败时弹回)
+      const idx = Math.round(rawFromEvent(e));
+      preview(idx);   // 吸附:旋钮/光斑带着 190ms 缓动滑到最近档位
+      commitTo(idx);
+      // 不立刻 sync():提交期间保留乐观位置,探针回流后由 refreshPanel 确认/回弹
     };
     track.addEventListener("pointerup", finish);
-    track.addEventListener("pointercancel", (e) => {
+    track.addEventListener("pointercancel", () => {
+      // 取消:回滚到已提交档位(上游 rollback 同款)
       state.drag = false;
-      lastMoveX = null;
+      radiation.dragging = false;
       track.classList.remove("is-dragging");
-      tr.style.removeProperty("--zs-dur");
-      setPhase("settling");
-      clearTimeout(phaseTimer);
-      phaseTimer = setTimeout(() => setPhase("idle"), 520);
-      sync();
+      preview(committedIdx());
+      if (labelEl) labelEl.textContent = state.cur;
     });
 
-    // ←/→ 微调(面板聚焦时)
+    // ←/→ 微调(面板聚焦时):按一下直接提交一档(上游 onKeyDown 同款)
     p.addEventListener("keydown", (e) => {
       const n = state.levels.length;
       if (!n) return;
-      let idx = state.levels.indexOf(state.cur);
-      if (e.key === "ArrowRight") idx = Math.min(n - 1, idx + 1);
-      else if (e.key === "ArrowLeft") idx = Math.max(0, idx - 1);
+      const current = clamp(Math.round(state.preview), 0, n - 1);
+      let target;
+      if (e.key === "ArrowLeft" || e.key === "ArrowDown" || e.key === "PageDown") target = Math.max(0, current - 1);
+      else if (e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "PageUp") target = Math.min(n - 1, current + 1);
+      else if (e.key === "Home") target = 0;
+      else if (e.key === "End") target = n - 1;
       else return;
       e.preventDefault();
-      const value = state.levels[idx];
-      setFill(idx, n);
-      labelEl.textContent = value;
-      setPhase("settling");
-      clearTimeout(phaseTimer);
-      phaseTimer = setTimeout(() => setPhase("idle"), 520);
-      if (value && value !== state.cur) commitLevel(value, idx);
+      preview(target);
+      commitTo(target);
     });
 
     panel = p;
@@ -679,12 +797,9 @@
     window.addEventListener("resize", onViewportChange);
     window.addEventListener("scroll", onViewportChange, true);
     refreshPanel();
-    setThinking(detectThinking());   // 思考中 → 激活段流动;空闲 → 定格
-    // 定位就绪后启动弹出动效;填充条同时从 0 扫到当前档位(扫光标出"加载中")
+    setThinking(detectThinking());   // 思考态仅记录/暴露,不改变拖动条样式
+    // 定位就绪后启动弹出动效
     p.style.animation = "zsliderIn 260ms cubic-bezier(0.2,0.9,0.25,1.15)";
-    setPhase("loading");
-    clearTimeout(phaseTimer);
-    phaseTimer = setTimeout(() => setPhase("idle"), 420);
     document.addEventListener("pointerdown", onDocDown, true);
     document.addEventListener("keydown", onDocKey, true);
     try { p.focus(); } catch (err) { /* ignore */ }
@@ -725,16 +840,15 @@
     const n = state.levels.length;
     if (!n) { closePanel(false); return; }
     const idx = state.levels.indexOf(state.cur);
-    // 档位数变了(切模型)→ 段数跟着重建
-    if (segs.length !== segCount(n)) {
-      segs.forEach((s) => s.box.remove());
-      segs = buildSegs(n);
-    }
-    if (track) track.style.setProperty("--zs-flow", CONFIG.flowMs + "ms");
     if (!state.drag) {
-      setFill(idx, n);   // idx < 0(未知档位)时 onCount = 0，全部段回到弱化
-      labelEl.textContent = state.cur;
+      preview(idx >= 0 ? idx : 0);   // idx < 0(未知档位):进度归零 + is-error 描边
+      if (labelEl) labelEl.textContent = state.cur;
     }
+    if (sliderEl) {
+      if (idx >= 0 && idx === n - 1) sliderEl.setAttribute("data-top", "true");
+      else sliderEl.removeAttribute("data-top");
+    }
+    if (track && track.isConnected) track.classList.toggle("is-error", idx < 0);
   }
 
   // ---------- 同步(入口常驻刷新;面板打开时实时跟随) ----------
@@ -812,8 +926,7 @@
         entryName.textContent = p.cur;
         entryName.style.color = idx >= 0 ? "" : "rgba(233,99,99,0.9)";   // 未知档位标红提示
         setMini(idx >= 0 ? idx : 0, p.levels.length);
-        // 换档确认:当前点亮段处发射涟漪 + 档名脉冲
-        if (panel) rippleAt();
+        // 换档确认:档名脉冲(面板 chrome)
         if (panel && labelEl) {
           labelEl.style.animation = "none";
           void labelEl.offsetHeight;   // 强制回流重触发动画
@@ -842,13 +955,13 @@
 
   // ---------- 对外控制台接口（排障 / 调参；DevTools 里直接敲） ----------
   //   __zsliderCtl.config                        参数对象，直接改字段即可
-  //                                              （segments / thinking / autoDetectThinking / flowMs）
+  //                                              （thinking / autoDetectThinking / segments(已废弃)）
   //   __zsliderCtl.setThinking(true|false|null)  手动锁定思考态；传 null 恢复自动检测
-  //   __zsliderCtl.setSegments(n)                强制段数（0 = 自动等于档位数）
+  //   __zsliderCtl.setSegments(n)                已废弃:连续轨道无段数概念,仅为兼容保留
   //   __zsliderCtl.refresh()                     立即重跑一轮同步
   //   __zsliderCtl.diag() / __zsliderCtl.state() 诊断字符串 / 状态快照
   window.__zsliderCtl = {
-    version: "segmented-1",
+    version: "dsh-look-1",
     config: CONFIG,
     setThinking: (v) => {
       CONFIG.thinking = (v === null || v === undefined) ? null : !!v;
@@ -856,19 +969,16 @@
       return CONFIG.thinking;
     },
     setSegments: (n) => {
+      // 已废弃:新版拖动条为上游同款连续轨道,段数不再参与渲染,接口保留防报错
       CONFIG.segments = Math.max(0, Number(n) | 0);
-      if (panel && rail) {                 // 面板开着就立刻重建
-        segs.forEach((s) => s.box.remove());
-        segs = buildSegs(state.levels.length);
-        refreshPanel();
-      }
       return CONFIG.segments;
     },
     refresh: () => { sync(); return true; },
     diag: () => collectDiag(),
     state: () => ({
       levels: state.levels.slice(), cur: state.cur, thinking: state.thinking,
-      drag: state.drag, lit: state.lit, segments: segs.length, panel: !!panel,
+      drag: state.drag, preview: state.preview, busy: state.busy,
+      segments: CONFIG.segments | 0, panel: !!panel,
       config: Object.assign({}, CONFIG),
     }),
   };