@domitor-syh/dsh-ui-skin-switcher 0.1.0 → 0.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 DeepSeek
+Copyright (c) 2026 domitor-syh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.en.md

@@ -0,0 +1,94 @@
+<h1 align="center">@domitor-syh/dsh-ui-skin-switcher</h1>
+
+<p align="center">
+  <img src="docs/README-Banner.jpeg" alt="dsh-ui-skin-switcher" width="100%">
+</p>
+
+<p align="center"><a href="./README.md">中文</a> | English</p>
+
+A **Claude Desktop-style switcher** plugin for the [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (DSH) Web GUI: a floating "seat" next to the input box for picking a model and dialing reasoning effort — dropdown for models, slider for effort.
+
+> **Compatibility**: supports **DSH 0.1.5 and newer** only.
+
+## What it is
+
+`dsh-ui-skin-switcher` registers the `conversation.input.model` slot and renders a model + reasoning-effort switcher seat next to the composer input.
+
+It rides the exact same channel the first-party selector uses: it reads the provider-grouped model directory and the current selection through `ctx.modelDirectories` — the same source the `/model` panel renders — and submits through that same selection call, so a switch made here is what `/model` shows next and takes effect on the current session.
+
+The style pays homage to Claude Desktop's switcher — slider feel, rounded track, hover highlight.
+
+## Features
+
+| Feature | Detail |
+| --- | --- |
+| Model switching | Clicking the model entry expands the model list ordered by vendor; the selection applies immediately and the matching reasoning effort updates together |
+| Effort slider | Supports both click and drag, with multiple effort nodes; supported levels differ per model, and adjustments apply immediately |
+| Max-effort dot matrix | Reaching max effort reveals a right-to-left dot-matrix sweep on the track, with the handle glowing |
+| Per-model memory | Remembers the last effort per model, kept across switches |
+| Theme adaptive | All colors bound to DSH theme tokens; readable in light/dark themes and transparent skins |
+
+## Video preview
+
+<p align="center">
+  <video src="https://github.com/user-attachments/assets/5fadc536-b58c-42db-a270-9ca5d4b02cbb" controls muted loop playsinline width="100%"></video>
+</p>
+
+**▶︎ [Watch the full demo video](https://github.com/user-attachments/assets/5fadc536-b58c-42db-a270-9ca5d4b02cbb)** — model switching, the effort slider, and the top-level dot-matrix animation.
+
+## Compatibility
+
+Supports **DSH 0.1.5 and newer** only.
+
+| DSH version | Works | Notes |
+| --- | :---: | --- |
+| 0.1.5-alpha.1 … 0.1.5-rc.3 | ✅ | The whole 0.1.5 line; spot-checked at alpha.1, rc.2 (full end-to-end run) and rc.3 |
+| 0.1.6-alpha.1 / alpha.2 | ✅ | Same generation as 0.1.5 |
+| 0.1.7-alpha.1 / alpha.2 | ✅ | Newest published line; spot-checked at alpha.2 |
+| 0.1.3-alpha.2 and earlier | ❌ | Older generation: only `connection.api`, no `remote.session` |
+
+The dividing line is **0.1.5**: that release replaced the old `connection.api` face with `ctx.remote.session` / `ctx.modelDirectories` and dropped the `dsh-client-ui-slots` dependency. This plugin is built on the new interfaces, so it cannot load on earlier DSH versions.
+
+> How this table was produced: each version's `dsh-client-ui-model-selection` package was unpacked and checked for the `modelDirectories` / `modelCatalog` / `selectModel` interfaces, plus a full end-to-end run on 0.1.5-rc.2.
+
+## Install
+
+With the DSH CLI installed:
+
+```sh
+dsh plugin --profile web add @domitor-syh/dsh-ui-skin-switcher
+```
+
+Restart `dsh web` — the button appears next to the input box.
+
+Running dsh from source? Inside the repo root, use your launch command plus `dsh plugin --profile web add @domitor-syh/dsh-ui-skin-switcher`, for example:
+
+```sh
+# Normal start
+pnpm dsh web
+# Add the plugin
+pnpm dsh plugin --profile web add @domitor-syh/dsh-ui-skin-switcher
+```
+
+### Verify & uninstall
+
+Restart `dsh web` — the button appears next to the input box and takes effect immediately. Verify with `dsh --profile web --dump-config`.
+
+Uninstall (if running from source, uninstall the same way you installed): `dsh plugin --profile web remove @domitor-syh/dsh-ui-skin-switcher`, then restart `dsh web`.
+
+## Usage
+
+1. **Pick a model** — click the button and pick from the list; the list is grouped by vendor and the current model shows a checkmark.
+2. **Dial effort** — for models declaring `reasoningEfforts`, an effort button appears to the right of the model; click it, then drag the slider or tap the track to switch levels.
+
+### Why is there no reasoning-effort switcher after adding a model?
+
+The current model does not declare a reasoning effort (`reasoningEfforts`) or vision capability. To keep model declarations accurate, we do not apply a uniform effort preset to every model — check the model vendor's official documentation and patch the underlying config file yourself, or hand the vendor's deep-thinking documentation (or its link) to the LLM and let it modify the config directly.
+
+> Taking effect: you edit `settings.yaml` under the DSH home (`~/.dsh`) — **not this plugin's files**; DSH watches that file and hot-reloads, so the change takes effect **immediately with no restart** and persists across restarts.
+
+Why do it yourself? To keep declarations accurate — **accuracy over coverage**. Reasoning effort is a per-vendor, per-level wire value; a wrong value silently breaks requests, so we never fill in a guessed preset.
+
+## License
+
+[MIT](./LICENSE)

package/README.md

@@ -1,11 +1,122 @@
-# @deepseek-ai/dsh-client-ui-skin-switcher
-
-Model and reasoning-effort switcher for the composer. Registers a named
-`conversation.input.model` seat that reads the session's provider-grouped
-directory through `session.models` and submits through `session.selectModel`
-(the same session-scoped RPC the first-party model selector uses), so a switch
-made here is what `/model` shows next and takes effect on the current session.
-
-Above the ordinary model list it renders a two-level (Off/Max) reasoning-effort
-slider for models that declare `reasoningEfforts`, remembering each model's last
-effort so switching model and back keeps the effort.
+<h1 align="center">dsh-ui-skin-switcher · DeepSeek Harness（DSH）模型与思考强度切换器</h1>
+
+<p align="center">
+  <img src="docs/README-Banner.jpeg" alt="dsh-ui-skin-switcher" width="100%">
+</p>
+
+<p align="center">中文 | <a href="README.en.md">English</a></p>
+
+一个为 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)（DSH）Web 端打造的、**Claude Desktop 同款风格的切换器**插件：把模型选择与思考强度（推理力度）切换做成输入框旁的一枚悬浮「座位」，下拉选模型、滑动调强度，一键到位。
+
+> **兼容性**：仅支持 **DSH 0.1.5 及以上版本**。
+
+<div align="center">
+
+[是什么](#是什么) · [功能特性](#功能特性) · [视频预览](#视频预览) · [兼容性](#兼容性) · [快速上手](#快速上手) · [使用方法](#使用方法) · [为什么没有思考强度？](#为什么接入模型之后没有思考强度) · [常见问题](#常见问题) · [许可证](#许可证)
+
+</div>
+
+## 是什么
+
+`dsh-ui-skin-switcher` 是 DeepSeek Harness 的 Web 端插件，注册 `conversation.input.model` 插件槽，在输入框旁渲染一枚模型 + 思考强度的切换器「座位」。
+
+它与官方第一方模型选择器走**同一条通道**：通过 `ctx.modelDirectories` 读取按 provider 分组的模型目录与当前选择（与 `/model` 面板同源），再经同一条选择接口提交——在这里切换后的结果，就是 `/model` 面板里看到的结果，并立即作用于当前会话。
+
+样式致敬 Claude Desktop 的切换器：滑动手感、圆角轨道、悬停高亮，都是熟悉的味道。
+
+## 功能特性
+
+| 能力 | 说明 |
+| --- | --- |
+| 模型切换 | 点击模型入口将展开按厂商依次排列的模型列表，选定模型后立即生效，对应的思考强度也会同步变更。 |
+| 思考强度滑块 | 思考强度滑块支持点击与拖动双操作方式，设有多个强度节点；不同模型适配的强度档位存在差异，调节后立即生效。 |
+| 最高强度点阵动画 | 达到最高思考强度时，轨道内浮现从右向左扫过的点阵动画，且滑块伴随着发光 |
+| 逐模型记忆 | 记住每个模型最后一次选择的思考强度，切走再切回，强度不丢 |
+| 主题自适应 | 全部颜色绑定 DSH 主题变量，深浅主题、透明背景皮肤下都清晰可读 |
+
+## 视频预览
+
+<p align="center">
+  <video src="https://github.com/user-attachments/assets/5fadc536-b58c-42db-a270-9ca5d4b02cbb" controls muted loop playsinline width="100%"></video>
+</p>
+
+**▶︎ [点击观看完整演示视频](https://github.com/user-attachments/assets/5fadc536-b58c-42db-a270-9ca5d4b02cbb)** —— 模型切换、思考强度滑块、最高档点阵动画的完整演示。
+
+## 兼容性
+
+仅支持 **DSH 0.1.5 及以上版本**。
+| DSH 版本 | 可用 | 说明 |
+| --- | :---: | --- |
+| 0.1.5-alpha.1 ～ 0.1.5-rc.3 | ✅ | 0.1.5 系列全系可用；已抽点校验 alpha.1、rc.2（端到端实测）、rc.3 |
+| 0.1.6-alpha.1 / alpha.2 | ✅ | 与 0.1.5 同代接口 |
+| 0.1.7-alpha.1 / alpha.2 | ✅ | 当前最新发布线；已抽点校验 alpha.2 |
+| 0.1.3-alpha.2 及更早 | ❌ | 旧一代接口，只有 `connection.api`，没有 `remote.session` |
+
+分界线是 **0.1.5**：从这一版起，DSH 用 `ctx.remote.session` / `ctx.modelDirectories` 取代了旧的 `connection.api` 接口，并移除了 `dsh-client-ui-slots` 依赖。本插件基于新接口实现，因此在更早的 DSH 上无法加载。
+
+> 上表依据：对相应版本的 `dsh-client-ui-model-selection` 包逐一解包，校验 `modelDirectories` / `modelCatalog` / `selectModel` 接口是否存在；并在 0.1.5-rc.2 上完成端到端实测。
+本插件通过 DSH 0.1.5 引入的 `ctx.remote.session` / `ctx.modelDirectories` 接口读取模型目录与当前选择（与官方 `/model` 面板同源），在更早的 DSH 上无法加载。
+
+## 快速上手
+
+### 系统要求
+
+- DSH **0.1.5 及以上版本**。
+- 已安装 DeepSeek Harness，`dsh web` 可正常启动。
+- npm 安装无额外要求；从源码运行需要 Node.js >= 22 与 pnpm。
+
+### 安装（npm，推荐）
+
+```sh
+dsh plugin --profile web add @domitor-syh/dsh-ui-skin-switcher
+```
+
+然后重启 `dsh web`，输入框旁即出现切换器按钮。
+
+从源码运行 DSH？在仓库根目录，用「启动命令 + `dsh plugin --profile web add @domitor-syh/dsh-ui-skin-switcher`」即可，例如：
+
+```sh
+# 平时启动
+pnpm dsh web
+# 添加插件
+pnpm dsh plugin --profile web add @domitor-syh/dsh-ui-skin-switcher
+```
+
+### 验证与卸载
+
+装好重启 `dsh web`，输入框旁出现切换器按钮即刻生效；也可以用 `dsh --profile web --dump-config` 确认插件配置层已挂载。
+
+卸载(如从源码启动，请用同安装的方式去卸载)：`dsh plugin --profile web remove @domitor-syh/dsh-ui-skin-switcher`，然后重启 `dsh web`。
+
+## 使用方法
+
+1. **切模型**：点击输入框旁的按钮，在列表里选一个模型；列表按厂商分组，当前模型带勾选标记。
+2. **调强度**：对声明了 `reasoningEfforts` 的模型，模型右侧会出现思考强度按钮，点击之后——拖动滑块或在轨道上点按即可切换档位。
+
+### 为什么接入模型之后没有思考强度？
+
+这是因为当前模型没有声明思考强度（`reasoningEfforts`）或识图能力。为了确保声明的准确，我们没有为所有模型设定统一的思考强度档位——请自行前往该模型所属厂商的官方文档查阅，并修改底层配置文件补上声明；或者直接把厂商的深度思考文档（或文档链接）发给大模型，让它替你直接修改。
+
+> 生效方式：你修改的是 DSH 主目录（`~/.dsh`）下的 `settings.yaml`，**不是本插件的文件**；DSH 会监听该文件并**热加载，立即生效，无需重启**，下次启动依然有效。
+
+为什么要由你自己适配？是为了确保声明的准确——**声明准确 > 声明齐全**。思考强度是每档一个厂商私有线级值，填错会让请求静默失效，所以我们不代填统一档位。
+
+## 常见问题
+
+<details>
+<summary><strong>为什么我的模型没有出现思考强度滑块？</strong></summary>
+
+滑块只为声明了 `reasoningEfforts` 的模型显示。模型目录里没有该声明说明这台模型不支持（或未配置）推理力度切换，此时只显示模型列表。
+
+</details>
+
+<details>
+<summary><strong>切换主题后切换器颜色不对？</strong></summary>
+
+插件颜色全部绑定 DSH 主题变量（`--dsw-alias-*`），随深浅主题自动翻转。若你用了把背景设成透明的皮肤，浮层会自动启用毛玻璃（backdrop-filter）保住可读性。
+
+</details>
+
+## 许可证
+
+[MIT](./LICENSE)

package/lib/client.js

@@ -4,6 +4,7 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		//#region \0rolldown/runtime.js
 		var __create = Object.create;
 		var __defProp = Object.defineProperty;
@@ -21,7 +22,7 @@ window.__ModuleLoader__.load({
 			}
 			return to;
 		};
-		var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+		var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 			value: mod,
 			enumerable: true
 		}) : target, mod));
@@ -39,13 +40,115 @@ window.__ModuleLoader__.load({
 		* (Off/Max) reasoning-effort slider for models that declare `reasoningEfforts`,
 		* remembering each model's last effort.
 		*/
-		/** Required services: the connection RPC face (sessions) and the slot registry. */
-		/** Required services: the connection RPC face (sessions models/selectModel), the runtime sessions service (subagentAddress), and the slot registry. */
+		/**
+		* Required services: the connection RPC face (sessions models/selectModel), the
+		* runtime sessions service (subagentAddress), the locale service (which
+		* synthesizes the seat's `t`), and the slot registry.
+		*/
 		const inject = [
-			"connection",
+			"locale",
+			"modelDirectories",
+			"remote",
+			"remote.session",
 			"sessions",
 			"slots"
 		];
+		/** Dictionary namespace owned by this plugin. */
+		const NS = "ui-skin-switcher";
+		/** Plugin-owned copy: `zh` is the key-set source of truth, `en` mirrors it. */
+		const DICTS = {
+			zh: {
+				"trigger.fallbackModel": "模型",
+				"trigger.selectModel": "选择模型",
+				"effort.title": "思考强度",
+				"effort.default": "默认",
+				"menu.models": "模型",
+				"status.loading": "加载中…",
+				"status.noModels": "暂无可用模型",
+				"help.aria": "思考强度说明",
+				"help.text": "调节模型推理深度，低强度回复快、内容简洁；高强度思考更全面，适合复杂问题，响应会稍慢。"
+			},
+			en: {
+				"trigger.fallbackModel": "Model",
+				"trigger.selectModel": "Select model",
+				"effort.title": "Reasoning effort",
+				"effort.default": "Default",
+				"menu.models": "Models",
+				"status.loading": "Loading…",
+				"status.noModels": "No models available",
+				"help.aria": "About reasoning effort",
+				"help.text": "Adjusts how deeply the model reasons: lower effort answers faster and more concisely, while higher effort thinks more thoroughly for complex problems and responds a little slower."
+			}
+		};
+		/** Dot-matrix rows to render. */
+		const MATRIX_ROWS = 6;
+		/** Designed track height in CSS px; the matrix is solved to land near it. */
+		const MATRIX_TRACK_DESIGN = 26;
+		/** Smallest block edge, in device px, that still reads as a square rather than a dot. */
+		const MATRIX_MIN_BLOCK_DEV = 3;
+		/** Design gap between blocks, in CSS px at 100% scaling. */
+		const MATRIX_GAP_DESIGN = 1;
+		/** Design margin above the first and below the last block row, in CSS px. */
+		const MATRIX_MARGIN_DESIGN = .5;
+		/** Flash cycle length in seconds, matching the `.sk5-sq` animation shorthand. */
+		const FLASH_CYCLE_S = 1.45;
+		/** Per-cell cycle spread (±8%): drifts the phases apart so no pattern repeats. */
+		const FLASH_JITTER = .08;
+		/**
+		* Resolve the dot-matrix grid in whole device pixels. Rounding the sizes here —
+		* instead of handing the browser a fractional remainder — is what keeps the
+		* matrix uniform: a fractional pitch rasterizes as alternating 7/8px gaps, and
+		* a centered fractional remainder leaves one edge with a different gap.
+		*
+		* The matrix carries no vertical margin: `rows * block + (rows - 1) * gap` is
+		* both the content and the track height, so the first row starts at the track's
+		* top edge and the last row ends at its bottom edge. The track is re-heighted to
+		* that value because a fixed 26px track is 39 device px at 150%, which no
+		* six-row arrangement fills with square blocks and a one-pixel gap.
+		* @param wDev - track width in whole device pixels.
+		* @param dpr - device pixels per CSS px.
+		* @returns the resolved layout.
+		*/
+		function solveMatrix(wDev, dpr) {
+			const gap = Math.max(1, Math.round(MATRIX_GAP_DESIGN * dpr));
+			const margin = Math.max(1, Math.round(MATRIX_MARGIN_DESIGN * dpr));
+			const rows = MATRIX_ROWS;
+			const block = Math.max(MATRIX_MIN_BLOCK_DEV, Math.round((MATRIX_TRACK_DESIGN * dpr - 2 * margin - 5 * gap) / rows));
+			const cols = Math.max(1, Math.floor((wDev + gap) / (block + gap)));
+			const restX = wDev - (cols * block + (cols - 1) * gap);
+			const padX = Math.floor(restX / 2);
+			return {
+				c: cols,
+				r: rows,
+				sq: block / dpr,
+				gap: gap / dpr,
+				radius: 1 / dpr,
+				trackHeight: (2 * margin + rows * block + 5 * gap) / dpr,
+				trackWDev: wDev,
+				padTop: margin / dpr,
+				padBottom: margin / dpr,
+				padLeft: padX / dpr,
+				padRight: (restX - padX) / dpr
+			};
+		}
+		/**
+		* Scatter one cell's phase. A linear rule such as `(7r + 13c) % 29` maps
+		* neighbours onto a regular lattice, which the eye reads as diagonal bands;
+		* avalanching both coordinates first scatters them instead. The result stays
+		* continuous rather than quantised into buckets: with 29 buckets up to 14 cells
+		* share a phase and flip in the very same instant, every round — a synchrony
+		* the eye picks up even though the arrangement itself is random.
+		* @param r - grid row.
+		* @param c - grid column.
+		* @param seed - keeps independent scatters (phase, brightness) uncorrelated.
+		* @returns a value in `[0, 1)`.
+		*/
+		function cellUnit(r, c, seed) {
+			let h = Math.imul(r + 1, 2654435761) ^ Math.imul(c + 1, 2246822507) ^ Math.imul(seed, 668265263);
+			h = Math.imul(h ^ h >>> 15, 625341585);
+			h ^= h >>> 13;
+			return (h >>> 0) / 4294967296;
+		}
 		/** Insert one stylesheet and return its disposer. */
 		function injectCss(css) {
 			const tag = document.createElement("style");
@@ -68,7 +171,7 @@ window.__ModuleLoader__.load({
 			return g.models.find((m) => m.id === model);
 		}
 		/** Effort slider / matrix / model list styles, injected once for this plugin. */
-		const CSS = ".sk5-root{position:relative;display:inline-flex;}.sk5-triggers{display:inline-flex;align-items:center;gap:2px;}.sk5-trigger{display:inline-flex;align-items:center;padding:4px 8px;border-radius:7px;border:none;background:transparent;color:var(--dsw-alias-label-primary);font-size:12.5px;cursor:pointer;max-width:210px;}.sk5-trigger:hover{background:color-mix(in srgb,var(--dsw-alias-label-primary) 10%,transparent);}.sk5-trigger:disabled{opacity:.55;cursor:not-allowed;}.sk5-triggerName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sk5-triggerEffort{color:var(--dsw-alias-brand-primary);}.sk5-drop{position:absolute;bottom:calc(100% + 6px);right:0;border-radius:12px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);box-shadow:0 10px 32px rgb(0 0 0 / .35);z-index:1200;color:var(--dsw-alias-label-primary);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}.sk5-model{width:256px;}.sk5-modelsTitle{font-size:14px;font-weight:700;color:var(--dsw-alias-label-secondary);padding:12px 14px 6px;text-align:left;}.sk5-list{overflow-y:auto;padding:2px 6px 10px;max-height:min(420px,60vh);}.sk5-group{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dsw-alias-label-tertiary);padding:8px 10px 3px;text-align:left;}.sk5-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:6px 10px;border-radius:8px;border:none;background:transparent;color:var(--dsw-alias-label-primary);font-size:12.5px;cursor:pointer;}.sk5-row:hover{background:color-mix(in srgb,var(--dsw-alias-label-primary) 10%,transparent);}.sk5-row:disabled{opacity:.6;cursor:wait;}.sk5-rowDesc{font-size:11px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sk5-check{font-size:12px;color:var(--dsw-alias-brand-primary);}.sk5-status{padding:14px;font-size:12.5px;opacity:.65;text-align:center;}.sk5-err{padding:8px 4px 0;font-size:11.5px;color:var(--dsw-alias-state-error-primary);text-align:left;}.sk5-effort{width:225px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 12px 12px;}.sk5-titleRow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}.sk5-effortLabel{font-size:13px;font-weight:600;color:var(--dsw-alias-label-secondary);}.sk5-help{position:relative;margin-left:auto;display:inline-flex;}.sk5-helpBtn{width:16px;height:16px;border-radius:50%;clip-path:circle(58%);border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-secondary);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:help;flex:none;}.sk5-helpBtn:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-primary);}.sk5-helpTip{position:absolute;top:calc(100% + 6px);right:0;width:206px;box-sizing:border-box;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:8px 10px;box-shadow:0 8px 24px rgb(0 0 0 / .35);z-index:20;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease;}.sk5-helpBtn:hover ~ .sk5-helpTip{opacity:1;visibility:visible;}.sk5-helpTip:hover{opacity:1;visibility:visible;}.sk5-helpTip::before{content:\"\";position:absolute;top:-8px;left:0;right:0;height:8px;}.sk5-helpTitle{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary);margin-bottom:3px;text-align:left;}.sk5-helpText{font-size:11.5px;line-height:1.55;color:var(--dsw-alias-label-secondary);text-align:left;}.sk5-effortValue{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);}.sk5-effortValueMax{color:var(--dsw-static-deepseek-400);}@keyframes sk5-nameBlur{from{filter:blur(5px);opacity:.3}to{filter:blur(0);opacity:1}}.sk5-labelsRow{display:flex;justify-content:space-between;margin-bottom:6px;}.sk5-endLabel{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-secondary);}.sk5-track{position:relative;height:26px;border-radius:6px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 15%,transparent);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;}.sk5-fill{position:absolute;top:0;bottom:0;left:0;transition:width .16s ease,opacity .16s ease;pointer-events:none;}.sk5-dotHit{position:absolute;top:0;bottom:0;width:16px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}.sk5-dot{width:4px;height:4px;border-radius:50%;background:var(--dsw-alias-label-primary);opacity:.9;pointer-events:none;transition:transform .12s ease,opacity .12s ease;}.sk5-dotHit:hover .sk5-dot{opacity:1;transform:scale(1.2);}.sk5-handle{position:absolute;top:0;bottom:0;width:20px;border-radius:6px;background:var(--dsw-alias-label-primary);transform:translateX(-50%);box-shadow:0 0 0 transparent;transition:left .16s ease,box-shadow .5s ease,background-color .5s ease;z-index:3;cursor:grab;}.sk5-handleMax{background:color-mix(in srgb, var(--dsw-static-deepseek-450) 25%, var(--dsw-alias-label-primary));box-shadow:0 0 10px color-mix(in srgb, var(--dsw-static-deepseek-400) 90%, transparent);}.sk5-matrix{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;border-radius:6px;pointer-events:none;z-index:1;box-sizing:border-box;display:grid;gap:2px;justify-content:center;align-content:center;}.sk5-cell{width:100%;height:100%;opacity:0;animation:sk5-appear .15s ease forwards;}@keyframes sk5-appear{from{opacity:0}to{opacity:1}}.sk5-sq{width:100%;height:100%;border-radius:1px;animation:sk5-flash 1s infinite ease-in-out;}@keyframes sk5-flash{0%,24%{background-color:var(--dsw-static-deepseek-500)}28%,72%{background-color:var(--flash-light,var(--dsw-static-deepseek-400))}76%,100%{background-color:var(--dsw-static-deepseek-500)}}";
+		const CSS = ".sk5-root{position:relative;display:inline-flex;}.sk5-triggers{display:inline-flex;align-items:center;gap:2px;}.sk5-trigger{display:inline-flex;align-items:center;padding:4px 8px;border-radius:10px;border:none;background:transparent;color:var(--dsw-alias-label-primary);font-size:12.5px;cursor:pointer;max-width:210px;}.sk5-trigger:hover{background:color-mix(in srgb,var(--dsw-alias-label-primary) 10%,transparent);}.sk5-trigger:disabled{opacity:.55;cursor:not-allowed;}.sk5-triggerName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sk5-triggerEffort{color:var(--dsw-alias-brand-primary);}.sk5-drop{position:absolute;bottom:calc(100% + 6px);right:0;border-radius:14px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);box-shadow:0 10px 32px rgb(0 0 0 / .35);z-index:1200;color:var(--dsw-alias-label-primary);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}.sk5-model{width:256px;}.sk5-modelsTitle{font-size:14px;font-weight:700;color:var(--dsw-alias-label-secondary);padding:12px 14px 6px;text-align:left;}.sk5-list{overflow-y:auto;padding:2px 6px 10px;max-height:min(420px,60vh);}.sk5-group{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dsw-alias-label-tertiary);padding:8px 10px 3px;text-align:left;}.sk5-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:6px 10px;border-radius:12px;border:none;background:transparent;color:var(--dsw-alias-label-primary);font-size:12.5px;cursor:pointer;}.sk5-row:hover{background:color-mix(in srgb,var(--dsw-alias-label-primary) 10%,transparent);}.sk5-row:disabled{opacity:.6;cursor:wait;}.sk5-rowDesc{font-size:11px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sk5-check{font-size:12px;color:var(--dsw-alias-brand-primary);}.sk5-status{padding:14px;font-size:12.5px;opacity:.65;text-align:center;}.sk5-err{padding:8px 4px 0;font-size:11.5px;color:var(--dsw-alias-state-error-primary);text-align:left;}.sk5-effort{width:225px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 12px 12px;}.sk5-titleRow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}.sk5-effortLabel{font-size:13px;font-weight:600;color:var(--dsw-alias-label-secondary);}.sk5-help{position:relative;margin-left:auto;display:inline-flex;}/* The ring is an SVG stroke, not a CSS border or gradient: a vector stroke is anti-aliased by the rasterizer at every size, while a sub-pixel gradient ring at this diameter quantises into visible steps. The ring inherits currentColor, so the existing hover colour change lights it up. */.sk5-helpBtn{position:relative!important;width:16px!important;height:16px!important;min-width:0!important;min-height:0!important;box-sizing:border-box!important;padding:0!important;border:none!important;box-shadow:none!important;outline:none!important;border-radius:50%!important;clip-path:circle(50%);background:transparent!important;color:var(--dsw-alias-label-secondary);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:help;flex:none!important;appearance:none;}.sk5-helpRing{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}.sk5-helpQ{position:relative;}.sk5-helpBtn:hover{color:var(--dsw-alias-label-primary);}.sk5-helpTip{position:absolute;top:calc(100% + 6px);right:0;width:206px;box-sizing:border-box;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:8px 10px;box-shadow:0 8px 24px rgb(0 0 0 / .35);z-index:20;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease;}.sk5-helpBtn:hover ~ .sk5-helpTip{opacity:1;visibility:visible;}.sk5-helpTip:hover{opacity:1;visibility:visible;}.sk5-helpTip::before{content:\"\";position:absolute;top:-8px;left:0;right:0;height:8px;}.sk5-helpTitle{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary);margin-bottom:3px;text-align:left;}.sk5-helpText{font-size:11.5px;line-height:1.55;color:var(--dsw-alias-label-secondary);text-align:left;}.sk5-effortValue{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);}.sk5-effortValueMax{color:var(--dsw-static-deepseek-400);}@keyframes sk5-nameBlur{from{filter:blur(5px);opacity:.3}to{filter:blur(0);opacity:1}}.sk5-labelsRow{display:flex;justify-content:space-between;margin-bottom:6px;}.sk5-endLabel{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-secondary);}.sk5-track{position:relative;height:26px;border-radius:9px!important;background:color-mix(in srgb,var(--dsw-alias-label-primary) 15%,transparent);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;}.sk5-fill{position:absolute;top:0;bottom:0;left:0;border-radius:9px 0 0 9px!important;transition:width .16s ease,opacity .16s ease;pointer-events:none;}.sk5-fillEnd{border-radius:9px!important;}.sk5-dotHit{position:absolute;top:0;bottom:0;width:16px;transform:translateX(-50%);display:flex;align-items:flex-start;justify-content:center;cursor:pointer;z-index:2;}/* The dot is drawn as an SVG circle rather than a CSS background: at 4px on a 150% display that is a 6-device-pixel disc, and a vector circle is coverage-antialiased far more evenly than a border-radius fill at this size. The span keeps the 50% box radius so the hover glow stays circular. *//* The level marks and the handle are pinned to the theme static white instead of the alias label token: they must stay white in both appearances, so they never follow the light-mode near-black value. Only the top level keeps its brand blue. */.sk5-dot{width:4px!important;height:4px!important;min-width:0!important;min-height:0!important;flex:none!important;border-radius:50%!important;background:transparent!important;color:var(--dsw-static-neutral-bluish-00);opacity:.9;pointer-events:none;transition:opacity .12s ease;}.sk5-dotShape{display:block;width:100%;height:100%;overflow:visible;}/* Hover lights a soft halo with drop-shadow, not box-shadow: drop-shadow follows the painted alpha (our SVG circle), while box-shadow follows the element box — and the host overrides this span's border-radius, so a box-shadow halo came out as a blurred square with diamond corners. The resting state carries no filter at all: any filter, even a zero-blur one, moves the element onto its own rasterization layer and changes how this 6-device-pixel circle is antialiased. */.sk5-dotHit:hover .sk5-dot{opacity:1;}.sk5-dotShape{transition:filter .14s ease;filter:none;}.sk5-dotHit:hover .sk5-dotShape{filter:drop-shadow(0 0 2.5px currentColor);}.sk5-dotMax{color:var(--dsw-static-deepseek-400);}.sk5-handle{position:absolute;top:0;bottom:0;width:20px;border-radius:9px!important;background:var(--dsw-static-neutral-bluish-00);transform:translateX(-50%);box-shadow:0 0 0 transparent;transition:left .16s ease,box-shadow .5s ease,background-color .5s ease;z-index:3;cursor:grab;}.sk5-handleMax{background:color-mix(in srgb, var(--dsw-static-deepseek-450) 25%, var(--dsw-static-neutral-bluish-00));box-shadow:0 0 10px color-mix(in srgb, var(--dsw-static-deepseek-400) 90%, transparent);}/* Day mode only: a soft grey-black halo around the white knob, so that where it meets an equally white dropdown panel its own pixel edge is masked instead of showing. Night mode keeps the bare handle, and the top level keeps its blue glow. The host removes data-ds-dark-theme from <body> in the light appearance, so :not() is the day-mode test. */body:not([data-ds-dark-theme]) .sk5-handle:not(.sk5-handleMax){box-shadow:0 0 3px rgb(0 0 0 / .28);}.sk5-matrix{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;border-radius:9px!important;pointer-events:none;z-index:1;box-sizing:border-box;display:grid;gap:1px;justify-content:start;align-content:start;}.sk5-cell{width:100%;height:100%;opacity:0;animation:sk5-appear .15s ease forwards;}@keyframes sk5-appear{from{opacity:0}to{opacity:1}}.sk5-sq{width:100%;height:100%;border-radius:1px;animation:sk5-flash 1.45s infinite ease-in-out;}/* One flash cycle: hold blue 250ms, jump to light, hold light 480ms, fade back over 720ms. */@keyframes sk5-flash{0%,17.24%{background-color:var(--dsw-static-deepseek-500)}17.25%,50.34%{background-color:var(--flash-light,var(--dsw-static-deepseek-400))}100%{background-color:var(--dsw-static-deepseek-500)}}";
 		/** Per-model (provider\u0000model) effort memory, shared across the whole page. */
 		const effortMemory = /* @__PURE__ */ new Map();
 		/** Two-level mask curve: right side opaque, left transparent, transition over 5%→75%. */
@@ -85,45 +188,45 @@ window.__ModuleLoader__.load({
 		* @param ctx - client root context carrying connection and slots.
 		*/
 		function apply(ctx) {
-			const api = ctx.connection.api.sessions;
+			/**
+			* The first-party model directory service. It carries the same host catalog
+			* and the same session selection projection the official `/model` selector
+			* renders, so this seat always shows what `/model` shows. DSH 0.1.5 replaced
+			* the older `connection.api.sessions` RPC face with this service.
+			*/
+			const directories = ctx.modelDirectories;
 			const runtimeSessions = ctx.sessions;
 			ctx.effect(() => injectCss(CSS));
+			ctx.effect(() => ctx.locale.register(NS, DICTS), "ui-skin-switcher: dictionaries");
 			ctx.slots.inject("conversation.input.model", () => ctx.slots.register({
 				name: "conversation.input.model",
-				priority: -1
+				priority: -1,
+				locale: NS
 			}, (props) => {
-				const { locked, sessionId } = props;
+				const { locked, sessionId, t } = props;
+				/**
+				* Read one dictionary key through the framework-injected `t` seat; the
+				* Chinese table backs a host that shipped no locale service.
+				*/
+				const tr = (key) => typeof t === "function" ? t(key) : DICTS.zh[key] ?? key;
 				const [menu, setMenu] = react.useState(null);
-				const [data, setData] = react.useState(null);
 				const [busy, setBusy] = react.useState(false);
 				const [error, setError] = react.useState(null);
 				const [hoverIdx, setHoverIdx] = react.useState(null);
-				const [grid, setGrid] = react.useState({
-					c: 0,
-					r: 0
-				});
+				const [grid, setGrid] = react.useState(null);
 				const rootRef = react.useRef(null);
 				const trackRef = react.useRef(null);
 				const dragIdxRef = react.useRef(null);
 				const busyRef = react.useRef(false);
 				const pendingRef = react.useRef(null);
 				const [settledIdx, setSettledIdx] = react.useState(null);
-				const GAP = 2;
+				/** This session's shared directory — the official selector's own data source. */
+				const directory = react.useMemo(() => directories.directoryFor(sessionId), [sessionId]);
+				const state = react.useSyncExternalStore(react.useCallback((listener) => directory.store.subscribe(listener), [directory]), react.useCallback(() => directory.store.getSnapshot(), [directory]));
+				/** Composer trigger row owns this width; the slider handle spans half of it. */
 				const HANDLE_W = 20;
 				const load = () => {
-					api.models({ sessionId }).then((resp) => {
-						const r = resp.result;
-						if (!r.ok) {
-							setError(msg(r.error));
-							return;
-						}
-						setData({
-							groups: r.value.groups,
-							failures: r.value.failures,
-							current: r.value.current
-						});
-						setError(null);
-					}, (e) => setError(msg(e)));
+					directory.load().catch(() => {});
 				};
 				react.useEffect(() => {
 					load();
@@ -143,14 +246,10 @@ window.__ModuleLoader__.load({
 					if (menu !== "effort") return;
 					const measure = () => {
 						if (trackRef.current !== null) {
-							const w = trackRef.current.clientWidth;
-							const h = trackRef.current.clientHeight;
-							const cn = Math.max(1, Math.floor((w + GAP) / 6));
-							const rn = Math.max(1, Math.floor((h + GAP) / 6));
-							setGrid((g) => g.c === cn && g.r === rn ? g : {
-								c: cn,
-								r: rn
-							});
+							const w = trackRef.current.getBoundingClientRect().width;
+							const dpr = window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+							const next = solveMatrix(Math.floor(w * dpr), dpr);
+							setGrid((g) => g !== null && g.c === next.c && g.r === next.r && g.sq === next.sq && g.gap === next.gap && g.trackWDev === next.trackWDev && g.padTop === next.padTop && g.padBottom === next.padBottom && g.padLeft === next.padLeft && g.padRight === next.padRight ? g : next);
 						}
 					};
 					measure();
@@ -159,33 +258,22 @@ window.__ModuleLoader__.load({
 				}, [menu]);
 				react.useEffect(() => {
 					setHoverIdx(null);
-				}, [data === null ? null : data.current === null ? null : data.current.reasoningEffort]);
+				}, [state.current === null ? null : state.current.reasoningEffort]);
 				const apply = (sel, keepOpen) => {
 					pendingRef.current = sel;
 					if (busyRef.current) return;
 					busyRef.current = true;
 					setBusy(true);
 					setError(null);
-					api.selectModel({
-						sessionId,
+					directory.select({
 						provider: sel.provider,
 						model: sel.model,
 						...sel.reasoningEffort === void 0 ? {} : { reasoningEffort: sel.reasoningEffort }
-					}).then((resp) => {
+					}).then(() => {
 						busyRef.current = false;
 						setBusy(false);
-						const r = resp.result;
-						if (!r.ok) {
-							setError(msg(r.error));
-							return;
-						}
-						const selected = r.value.selected;
 						if (!keepOpen) setMenu(null);
-						setData((d) => d === null ? null : {
-							...d,
-							current: selected
-						});
-						effortMemory.set(sel.provider + "\0" + sel.model, selected.reasoningEffort);
+						effortMemory.set(sel.provider + "\0" + sel.model, sel.reasoningEffort);
 						const next = pendingRef.current;
 						if (next !== null && next !== sel) {
 							pendingRef.current = null;
@@ -199,17 +287,20 @@ window.__ModuleLoader__.load({
 						pendingRef.current = null;
 					});
 				};
-				const groups = data === null ? [] : data.groups;
-				const current = data === null ? null : data.current;
+				const groups = state.groups;
+				const current = state.current;
+				/** Selection failures are local; catalog failures live on the shared store. */
+				const shownError = error !== null ? error : state.error;
+				const loaded = state.status !== "idle";
 				const curGroup = current === null ? void 0 : groups.find((g) => g.id === current.provider);
 				const curModel = current === null ? void 0 : findModel(groups, current.provider, current.model);
-				const modelLabel = curModel !== void 0 ? curModel.name : current !== null && current.model !== "" ? current.model : "模型";
+				const modelLabel = curModel !== void 0 ? curModel.name : current !== null && current.model !== "" ? current.model : tr("trigger.fallbackModel");
 				const reasoning = curModel !== void 0 ? curModel.reasoning : void 0;
 				const effectiveEffort = current !== null && current.reasoningEffort !== void 0 ? current.reasoningEffort : reasoning !== void 0 && reasoning.defaultEffort !== void 0 ? reasoning.defaultEffort : void 0;
 				const choices = reasoning === void 0 ? [] : [...reasoning.defaultEffort === void 0 ? [{
 					key: "default",
 					effort: void 0,
-					label: "默认"
+					label: tr("effort.default")
 				}] : [], ...reasoning.efforts.map((e) => ({
 					key: "e:" + e.id,
 					effort: e.id,
@@ -223,12 +314,12 @@ window.__ModuleLoader__.load({
 				const displayIdx = settledIdx === null ? activeIdx : settledIdx;
 				const safeDisplayIdx = choices.length > 0 ? Math.max(0, Math.min(choices.length - 1, displayIdx)) : 0;
 				const displayChoice = choices.length > 0 ? choices[safeDisplayIdx] : null;
-				const displayLabel = displayChoice !== null ? displayChoice.label : "默认";
+				const displayLabel = displayChoice !== null ? displayChoice.label : tr("effort.default");
 				const inMax = choices.length > 1 && safeDisplayIdx === choices.length - 1;
 				const matrixVisible = inMax && atMaxPos;
 				const posPct = choices.length > 1 ? posIdx / (choices.length - 1) * 100 : 0;
 				const matrixCells = react.useMemo(() => {
-					if (!inMax || grid.c <= 0 || grid.r <= 0) return [];
+					if (!inMax || grid === null) return [];
 					const deep = [
 						65,
 						118,
@@ -239,6 +330,17 @@ window.__ModuleLoader__.load({
 						158,
 						254
 					];
+					/**
+					* How far the lightest cells reach past deepseek-400 (103,158,254)
+					* toward deepseek-300 (183,200,254): a small lift reads lighter without
+					* going pale. This is the knob for "a touch lighter".
+					*/
+					const lightLift = .3;
+					const lightPeak = lightMax.map((v, i) => Math.round(v + ([
+						183,
+						200,
+						254
+					][i] - v) * lightLift));
 					const revealMs = 1e3;
 					const revealCycles = 3;
 					const revealDepth = .6;
@@ -262,15 +364,23 @@ window.__ModuleLoader__.load({
 					}
 					const out = [];
 					for (let r = 0; r < grid.r; r++) for (let c = 0; c < grid.c; c++) {
-						const k = .45 + (r * 37 + c * 53) % 51 / 100;
-						const lc = deep.map((v, i) => Math.round(v + (lightMax[i] - v) * k));
-						const flashDelay = ((r * 7 + c * 13) % 29 * .034).toFixed(3) + "s";
+						const k = .45 + cellUnit(r, c, 1) * .5;
+						const lc = deep.map((v, i) => Math.round(v + (lightPeak[i] - v) * k));
+						const flashDelay = (cellUnit(r, c, 2) * 1.38 + .35).toFixed(3) + "s";
+						/**
+						* Per-cell cycle length, jittered around the stylesheet's 1.45s base.
+						* With one shared duration every cell keeps a fixed phase, so the
+						* whole pattern repeats exactly each round and a local area replays
+						* the same order; the spread drifts the phases apart instead.
+						*/
+						const flashDuration = (FLASH_CYCLE_S * (.92 + cellUnit(r, c, 3) * 2 * FLASH_JITTER)).toFixed(3) + "s";
 						const fx = grid.c > 1 ? c / (grid.c - 1) : 0;
 						const appearDelay = (revealMs * (integrate(grid.c > 1 ? (grid.c - 1 - c) / (grid.c - 1) : 0, phases[r]) / fulls[r]) / 1e3).toFixed(3) + "s";
 						out.push({
 							key: r + "-" + c,
 							flashLight: "rgb(" + lc[0] + "," + lc[1] + "," + lc[2] + ")",
 							animationDelay: flashDelay,
+							flashDuration,
 							appearDelay,
 							fade: fadeAt(fx)
 						});
@@ -285,6 +395,21 @@ window.__ModuleLoader__.load({
 				const insetPx = HANDLE_W / 2;
 				const posFrac = posPct / 100;
 				const dotLeft = (i) => "calc(10px + (100% - 20px) * " + (choices.length > 1 ? i / (choices.length - 1) : 0) + ")";
+				/**
+				* Level dots are laid out in whole device pixels. Their proportional
+				* `left` is fractional by nature, and a 6-device-pixel circle that
+				* straddles two pixels reads as a rounded square: snapping both axes to
+				* the device grid gives the rasterizer a symmetric circle to draw.
+				*/
+				const dpr = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+				const dotDev = 4 * dpr;
+				const insetDev = insetPx * dpr;
+				const dotLeftSnapped = (i) => {
+					if (grid === null) return dotLeft(i);
+					const frac = choices.length > 1 ? i / (choices.length - 1) : 0;
+					return Math.round(insetDev + (grid.trackWDev - 2 * insetDev) * frac) / dpr + "px";
+				};
+				const dotTopSnapped = grid === null ? void 0 : Math.round((grid.trackHeight * dpr - dotDev) / 2) / dpr + "px";
 				const handleLeft = "calc(10px + (100% - 20px) * " + posFrac + ")";
 				const fillWidth = handleLeft;
 				const fillHidden = inMax && atMaxPos;
@@ -310,7 +435,7 @@ window.__ModuleLoader__.load({
 					const el = trackRef.current;
 					if (el === null || choices.length < 2) return 0;
 					const rect = el.getBoundingClientRect();
-					const usable = Math.max(rect.width - insetPx * 2, 1);
+					const usable = Math.max(rect.width - 20, 1);
 					const frac = Math.max(0, Math.min(1, (ev.clientX - rect.left - insetPx) / usable));
 					const idx = Math.round(frac * (choices.length - 1));
 					return Math.max(0, Math.min(choices.length - 1, idx));
@@ -352,7 +477,7 @@ window.__ModuleLoader__.load({
 					window.addEventListener("pointercancel", onWinCancel);
 					window.addEventListener("blur", onWinCancel);
 				};
-				const triggerTitle = curGroup !== void 0 && curModel !== void 0 ? curGroup.name + " / " + curModel.name + (effectiveEffort !== void 0 ? " · " + displayLabel : "") : "选择模型";
+				const triggerTitle = curGroup !== void 0 && curModel !== void 0 ? curGroup.name + " / " + curModel.name + (effectiveEffort !== void 0 ? " · " + displayLabel : "") : tr("trigger.selectModel");
 				return react.createElement("div", {
 					ref: rootRef,
 					className: "sk5-root"
@@ -368,7 +493,7 @@ window.__ModuleLoader__.load({
 					type: "button",
 					className: "sk5-trigger sk5-triggerEffort",
 					disabled: locked || busy || current === null,
-					title: "思考强度",
+					title: tr("effort.title"),
 					"aria-haspopup": "menu",
 					"aria-expanded": menu === "effort",
 					onClick: () => setMenu((m) => m === "effort" ? null : "effort")
@@ -378,8 +503,8 @@ window.__ModuleLoader__.load({
 				}, displayLabel)) : null), menu === "model" ? react.createElement("div", {
 					className: "sk5-drop sk5-model",
 					role: "menu",
-					"aria-label": "选择模型"
-				}, react.createElement("div", { className: "sk5-modelsTitle" }, "Models"), react.createElement("div", { className: "sk5-list" }, data === null && error === null ? react.createElement("div", { className: "sk5-status" }, "加载中…") : null, data === null && error !== null ? react.createElement("div", { className: "sk5-err" }, error) : null, data !== null && groups.length === 0 ? react.createElement("div", { className: "sk5-status" }, "暂无可用模型") : null, data !== null ? groups.map((g) => react.createElement("div", { key: g.id }, react.createElement("div", { className: "sk5-group" }, g.name), g.models.map((m) => {
+					"aria-label": tr("trigger.selectModel")
+				}, react.createElement("div", { className: "sk5-modelsTitle" }, tr("menu.models")), react.createElement("div", { className: "sk5-list" }, !loaded && shownError === null ? react.createElement("div", { className: "sk5-status" }, tr("status.loading")) : null, !loaded && shownError !== null ? react.createElement("div", { className: "sk5-err" }, shownError) : null, loaded && groups.length === 0 ? react.createElement("div", { className: "sk5-status" }, tr("status.noModels")) : null, loaded ? groups.map((g) => react.createElement("div", { key: g.id }, react.createElement("div", { className: "sk5-group" }, g.name), g.models.map((m) => {
 					const active = current !== null && current.provider === g.id && current.model === m.id;
 					return react.createElement("button", {
 						key: m.id,
@@ -392,7 +517,7 @@ window.__ModuleLoader__.load({
 				}))) : null)) : null, menu === "effort" ? react.createElement("div", {
 					className: "sk5-drop sk5-effort",
 					role: "menu",
-					"aria-label": "思考强度"
+					"aria-label": tr("effort.title")
 				}, react.createElement("div", { className: "sk5-titleRow" }, react.createElement("span", { className: "sk5-effortLabel" }, "Effort"), react.createElement("span", {
 					key: displayLabel,
 					className: "sk5-effortValue" + (choices.length > 1 && inMax ? " sk5-effortValueMax" : ""),
@@ -400,24 +525,39 @@ window.__ModuleLoader__.load({
 				}, displayLabel), react.createElement("div", { className: "sk5-help" }, react.createElement("button", {
 					type: "button",
 					className: "sk5-helpBtn",
-					"aria-label": "思考强度说明"
-				}, "?"), react.createElement("div", { className: "sk5-helpTip" }, react.createElement("div", { className: "sk5-helpTitle" }, "思考强度"), react.createElement("div", { className: "sk5-helpText" }, "调节模型推理深度，低强度回复快、内容简洁；高强度思考更全面，适合复杂问题，响应会稍慢。")))), react.createElement("div", { className: "sk5-labelsRow" }, react.createElement("span", { className: "sk5-endLabel" }, "Faster"), react.createElement("span", { className: "sk5-endLabel" }, "Smarter")), react.createElement("div", {
+					"aria-label": tr("help.aria")
+				}, react.createElement("svg", {
+					className: "sk5-helpRing",
+					viewBox: "0 0 16 16",
+					"aria-hidden": "true"
+				}, react.createElement("circle", {
+					cx: 8,
+					cy: 8,
+					r: 7.35,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: .75
+				})), react.createElement("span", { className: "sk5-helpQ" }, "?")), react.createElement("div", { className: "sk5-helpTip" }, react.createElement("div", { className: "sk5-helpTitle" }, tr("effort.title")), react.createElement("div", { className: "sk5-helpText" }, tr("help.text"))))), react.createElement("div", { className: "sk5-labelsRow" }, react.createElement("span", { className: "sk5-endLabel" }, "Faster"), react.createElement("span", { className: "sk5-endLabel" }, "Smarter")), react.createElement("div", {
 					ref: trackRef,
 					className: "sk5-track",
+					style: grid === null ? void 0 : { height: grid.trackHeight + "px" },
 					onPointerDown: onTrackDown
 				}, react.createElement("div", {
-					className: "sk5-fill",
+					className: "sk5-fill" + (posPct > 96 ? " sk5-fillEnd" : ""),
 					style: {
 						width: fillWidth,
 						background: fillSolid,
-						opacity: fillHidden ? 0 : 1,
-						borderRadius: posPct > 96 ? 6 : "6px 0 0 6px"
+						opacity: fillHidden ? 0 : 1
 					}
-				}), matrixVisible && grid.c > 0 && grid.r > 0 ? react.createElement("div", {
+				}), matrixVisible && grid !== null ? react.createElement("div", {
 					className: "sk5-matrix",
 					style: {
-						gridTemplateColumns: "repeat(" + grid.c + ",4px)",
-						gridTemplateRows: "repeat(" + grid.r + ",4px)"
+						gridTemplateColumns: "repeat(" + grid.c + "," + grid.sq + "px)",
+						gridTemplateRows: "repeat(" + grid.r + "," + grid.sq + "px)",
+						gap: grid.gap + "px",
+						padding: grid.padTop + "px " + grid.padRight + "px " + grid.padBottom + "px " + grid.padLeft + "px",
+						justifyContent: "start",
+						alignContent: "start"
 					}
 				}, matrixCells.map((sq) => react.createElement("div", {
 					key: sq.key,
@@ -429,16 +569,30 @@ window.__ModuleLoader__.load({
 						background: "var(--dsw-static-deepseek-500)",
 						opacity: sq.fade,
 						animationDelay: sq.animationDelay,
+						animationDuration: sq.flashDuration,
+						borderRadius: grid.radius + "px",
 						"--flash-light": sq.flashLight
 					}
 				})))) : null, !inMax ? choices.map((c, i) => react.createElement("span", {
 					key: c.key,
 					className: "sk5-dotHit",
-					style: { left: dotLeft(i) }
-				}, react.createElement("span", { className: "sk5-dot" }))) : null, react.createElement("div", {
+					style: { left: dotLeftSnapped(i) }
+				}, react.createElement("span", {
+					className: "sk5-dot" + (i === choices.length - 1 ? " sk5-dotMax" : ""),
+					style: { marginTop: dotTopSnapped }
+				}, react.createElement("svg", {
+					className: "sk5-dotShape",
+					viewBox: "0 0 4 4",
+					"aria-hidden": "true"
+				}, react.createElement("circle", {
+					cx: 2,
+					cy: 2,
+					r: 2,
+					fill: "currentColor"
+				}))))) : null, react.createElement("div", {
 					className: "sk5-handle" + (inMax ? " sk5-handleMax" : ""),
 					style: { left: handleLeft }
-				})), error !== null ? react.createElement("div", { className: "sk5-err" }, error) : null) : null);
+				})), shownError !== null ? react.createElement("div", { className: "sk5-err" }, shownError) : null) : null);
 			}));
 		}
 		//#endregion
@@ -447,5 +601,3 @@ window.__ModuleLoader__.load({
 		return module.exports;
 	}
 });
-
-//# sourceMappingURL=client.js.map

package/lib/index.js

@@ -1,4 +1,4 @@
-//#region lib/types/index.js
+//#region src/index.ts
 /**
 * Skin-switcher plugin, node half. Pure UI plugin: the empty apply exists so
 * the plugin appears in the host cordis.yml / Loader; the browser half ships

package/lib/invariant.js

@@ -1,8 +1,4 @@
-//#region lib/types/invariant.js
-/**
-* Package-owned invariant companion for `@domitor-syh/dsh-ui-skin-switcher`.
-* @module @domitor-syh/dsh-ui-skin-switcher/invariant
-*/
+//#region src/invariant.ts
 const PACKAGE_NAME = "@domitor-syh/dsh-ui-skin-switcher";
 /** Cordis companion plugin name. */
 const name = "client-ui-skin-switcher-invariant";

package/package.json

@@ -1,32 +1,20 @@
 {
   "name": "@domitor-syh/dsh-ui-skin-switcher",
   "description": "Model and reasoning-effort switcher: composer seat with an Off/Max effort slider over session.models / session.selectModel",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/deepseek-ai/deepseek-harness.git",
-    "directory": "packages/client/ui-skin-switcher"
+    "url": "git+https://github.com/domitor-syh/dsh-ui-skin-switcher.git"
   },
   "type": "module",
   "main": "lib/index.js",
-  "types": "lib/types/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./lib/types/index.d.ts",
-      "default": "./lib/index.js"
-    },
-    "./invariant": {
-      "types": "./lib/types/invariant.d.ts",
-      "default": "./lib/invariant.js"
-    },
-    "./client": {
-      "types": "./lib/types/client/index.d.ts",
-      "default": "./lib/client.js"
-    },
-    "./src/*": "./src/*",
+    ".": "./lib/index.js",
+    "./invariant": "./lib/invariant.js",
+    "./client": "./lib/client.js",
     "./package.json": "./package.json"
   },
   "dsh": {
@@ -35,44 +23,29 @@
     },
     "client": {
       "inject": [
-        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-api-session-controller",
+        "@deepseek-ai/dsh-client-locale",
         "@deepseek-ai/dsh-client-ui-conversation",
-        "@deepseek-ai/dsh-client-ui-slots"
+        "@deepseek-ai/dsh-client-ui-model-selection"
       ],
       "platform": "web"
     }
   },
+  "scripts": {
+    "build": "tsdown"
+  },
   "license": "MIT",
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-connection": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-invariants": "^0.1.1-rc.2",
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-connection": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-invariants": "^0.1.1-rc.2",
-    "@types/react": "~18.3.1",
-    "react": "^18.2.0"
+    "tsdown": "^0.22.2"
   },
   "files": [
     "lib/index.js",
     "lib/invariant.js",
     "lib/client.js",
-    "lib/types/**/*.d.ts",
     "cordis.patch.yml"
-  ],
-  "scripts": {
-    "bundle": "tsdown",
-    "watch": "tsdown --watch"
-  }
-}
+  ]
+}

package/lib/types/client/index.d.ts

@@ -1,11 +0,0 @@
-/** Required services: the connection RPC face (sessions) and the slot registry. */
-/** Required services: the connection RPC face (sessions models/selectModel), the runtime sessions service (subagentAddress), and the slot registry. */
-export declare const inject: string[];
-/**
- * Client plugin body: inject the stylesheet once, then register the composer
- * model seat whose component reads `sessions.models` and writes
- * `sessions.selectModel`.
- * @param ctx - client root context carrying connection and slots.
- */
-export declare function apply(ctx: any): void;
-//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * Skin-switcher plugin, node half. Pure UI plugin: the empty apply exists so
- * the plugin appears in the host cordis.yml / Loader; the browser half ships
- * via exports["./client"], discovered through the package.json dsh.client
- * declaration.
- */
-/** Host plugin body — no host-side behavior for this surface plugin. */
-export declare function apply(): void;
-//# sourceMappingURL=index.d.ts.map

package/lib/types/invariant.d.ts

@@ -1,16 +0,0 @@
-/**
- * Package-owned invariant companion for `@domitor-syh/dsh-ui-skin-switcher`.
- * @module @domitor-syh/dsh-ui-skin-switcher/invariant
- */
-import type { Context } from '@deepseek-ai/cordis';
-/** Cordis companion plugin name. */
-export declare const name = "client-ui-skin-switcher-invariant";
-/** Service required before the companion can reserve package ownership. */
-export declare const inject: string[];
-/**
- * Register this package's invariant companion.
- * @param ctx - Cordis context carrying the invariant service.
- * @returns the installed registration's disposer after setup succeeds.
- */
-export declare const apply: (ctx: Context) => Promise<() => void>;
-//# sourceMappingURL=invariant.d.ts.map