@linxin666/dsh-remote-web-ui 0.2.0 → 0.2.1

package/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   node scripts/verify-docs.mjs --write <dir>
-README.md: ed09a3bb6b09641147fecd3a465a6766f22fb298
-README.zh.md: d95d6fefe6b583c90169cd201464a62ac52381e0
+README.md: 30f19949c347321da330c22bee0f61ba42b70bcf
+README.zh.md: 5221d455f62613b62795a1340e64bbdd7ed63937

package/README.md

@@ -103,7 +103,7 @@ Install the family aggregate package `@linxin666/dsh-web-ui-all` (all plugins an
 
 ```sh
 # Recommended: install directly from npm
-dsh plugin --profile web add @linxin666/dsh-remote-web-ui
+dsh plugin --profile web add @linxin666/dsh-remote-web-ui@latest
 
 # Or from the repository (development loop)
 git clone https://github.com/zhu1090093659/dsh-web-ui.git
@@ -130,9 +130,11 @@ mounts both halves.
 3. Scan with the phone (or open the copied link): the phone binds and
    lands on the **standalone mobile surface at `/m/`** — no desktop UI on a
    small screen. The surface is deliberately thin:
-   - workspaces straight away (a 新建会话 button lives on each workspace's
-     session list: it creates a blank session attached to that workspace via
-     the host's `session.create` and opens the new chat immediately),
+   - workspaces straight away (each workspace's session list offers an Agent
+     mode picker before 新建会话: it selects the usable default preset, or the
+     first usable preset, and passes that roster id with the workspace id to
+     the host's `session.create`; an empty or unavailable roster keeps the
+     host-default creation flow),
    - one workspace's sessions load **incrementally** (20 rows per page,
      "加载更多会话" continues; never the whole list at once),
    - opening a session fetches its chat content **on demand** (history
@@ -172,9 +174,10 @@ pages `session.list` itself), so the tunneled Host never has to enter the
 connection plugin's trust fence. The phone is gated by its paired-device
 cookie and an explicit method allowlist (settings/credentials/host-action
 domains are never reachable from the phone; model reads/writes are limited
-to the advisory `session.models` / `session.selectModel` pair, creation to
-`session.create` (workspace id only — the phone never names a working
-directory of its own), and the permission picker only ever sends the
+to the advisory `session.models` / `session.selectModel` pair, agent preset
+access to read-only `agentPreset.list`, creation to `session.create`
+(workspace id plus an optional id from that roster — the phone never names a
+working directory of its own), and the permission picker only ever sends the
 mode-agnostic `/permission` command
 through the already-allowlisted `session.prompt`); the live stream arrives
 over Server-Sent Events on `/m/api/events.mux`. The canonical `/m/` page owns a same-scope manifest and Service Worker; its cache is limited to the static shell and an offline page, never mobile API responses, session data, or commands.
@@ -242,6 +245,11 @@ pairing fence trusts the tunneled host. Two knobs are involved:
   card): the public origin, e.g. `https://foo.trycloudflare.com`. The QR
   link is built from it, and `accept`/`heartbeat`/`status` accept its host.
   Malformed values are ignored with a warning (LAN-only behavior kept).
+  Unpaired callers of `status` see only the pairing-relevant fields (phase /
+  LAN bases); token expiry, device roster, and the tunnel URL require a live
+  device cookie. The accept rate limit partitions its buckets by the
+  client-visible `X-Forwarded-For` hop so one internet client cannot
+  exhaust the shared bucket behind the tunnel.
 - **`--trusted-host <authority>`** (dsh web flag): the transport-level
   `/api` fence of the connection plugin must accept the public host too —
   without it every `/api` request through the tunnel 403s *before* the

package/README.zh.md

@@ -37,7 +37,7 @@
 
 ```sh
 ### 从 npm 安装（推荐）
-dsh plugin --profile web add @linxin666/dsh-remote-web-ui
+dsh plugin --profile web add @linxin666/dsh-remote-web-ui@latest
 
 ### 从仓库安装（开发调试）
 git clone https://github.com/zhu1090093659/dsh-web-ui.git
@@ -56,7 +56,7 @@ dsh plugin --profile web add link:$(pwd)/packages/dsh-remote-web-ui
 1. `dsh web --host 0.0.0.0`（打印的局域网 URL 确认可达性）。
 2. 点击手机图标 → 面板铸一枚新的二维码。
 3. 用手机扫码（或打开复制的链接）：手机绑定并落到 **`/m/` 独立移动端界面**——不在小屏显示桌面 UI。该界面刻意精简：
-   - 直接进入工作区（每个工作区的会话列表上有 新建会话 按钮：它经 host 的 `session.create` 创建附加到该工作区的空白会话，并立即打开新聊天），
+   - 直接进入工作区（每个工作区的会话列表在 新建会话 前提供 Agent 模式选择器：默认选择可用的默认预设，否则选择第一个可用预设，并把该清单 id 与工作区 id 一起传给 host 的 `session.create`；清单为空或不可用时保留 host 默认创建流程），
    - 一个工作区的会话**增量**加载（每页 20 行，"加载更多会话"继续；绝不同时加载整份列表），
    - 打开会话**按需**抓取聊天内容（历史分页，"加载更早的消息"继续往回翻），
    - 实时流随消息到达展示新消息，带发送自己消息的输入框（默认 **Enter 发送、Shift+Enter 换行**；设 `mobileEnterToSend: false` 后 Enter 改为换行，发送仅走「发送」按钮），
@@ -67,7 +67,7 @@ dsh plugin --profile web add link:$(pwd)/packages/dsh-remote-web-ui
 5. 桌面徽标实时翻到 已连接；手机离开时回落到离线/断开。
 6. 刷新二维码 使旧链接失效并铸一枚新的。停止 撤销移动端访问：已配对设备下一次请求 403，包括其实时流。
 
-该移动端界面完全自包含在本插件内：`/m/` 页面及其数据通道（`/m/api`）由插件自己的路由伺服，**无需任何 harness 源码改动**——手机的 RPC 调用走插件的 `/m/api` 代理（它委托给 host 的 ApiProxy 服务并自己分页 `session.list`），因此被隧道化的 Host 永远不必进入连接插件的信任围栏。手机受其已配对设备 cookie 与显式方法白名单门控（settings/credentials/host-action 域手机永远不可达；模型读写限制于建议性的 `session.models` / `session.selectModel` 对，创建限制于 `session.create`（仅工作区 id——手机绝不自命名工作目录），权限选择器只通过已放行的 `session.prompt` 发送模式无关的 `/permission` 命令）；实时流在 `/m/api/events.mux` 上经 Server-Sent Events 送达。规范的 `/m/` 页面拥有同 scope 的 manifest 与 Service Worker；其缓存仅包含静态壳和离线页，绝不包含移动端 API 响应、会话数据或命令。
+该移动端界面完全自包含在本插件内：`/m/` 页面及其数据通道（`/m/api`）由插件自己的路由伺服，**无需任何 harness 源码改动**——手机的 RPC 调用走插件的 `/m/api` 代理（它委托给 host 的 ApiProxy 服务并自己分页 `session.list`），因此被隧道化的 Host 永远不必进入连接插件的信任围栏。手机受其已配对设备 cookie 与显式方法白名单门控（settings/credentials/host-action 域手机永远不可达；模型读写限制于建议性的 `session.models` / `session.selectModel` 对，Agent 预设访问限制于只读 `agentPreset.list`，创建限制于 `session.create`（工作区 id 加清单中的可选 id——手机绝不自命名工作目录），权限选择器只通过已放行的 `session.prompt` 发送模式无关的 `/permission` 命令）；实时流在 `/m/api/events.mux` 上经 Server-Sent Events 送达。规范的 `/m/` 页面拥有同 scope 的 manifest 与 Service Worker；其缓存仅包含静态壳和离线页，绝不包含移动端 API 响应、会话数据或命令。
 
 ### 行为说明
 
@@ -92,7 +92,7 @@ dsh plugin --profile web add link:$(pwd)/packages/dsh-remote-web-ui
 
 二维码链接通常是局域网 URL，所以家外的手机无法使用。把隧道指向 dsh web 端口，并告知插件其公网地址——二维码随后由隧道 URL 构建，面向手机的配对围栏信任隧道化的主机。涉及两个钮：
 
-- **`publicBaseUrl`**（插件配置，在 profile patch 或设置卡片里）：公网 origin，如 `https://foo.trycloudflare.com`。二维码链接由它构建，`accept`/`heartbeat`/`status` 接受它的主机。畸形值被忽略并告警（保持仅局域网行为）。
+- **`publicBaseUrl`**（插件配置，在 profile patch 或设置卡片里）：公网 origin，如 `https://foo.trycloudflare.com`。二维码链接由它构建，`accept`/`heartbeat`/`status` 接受它的主机。畸形值被忽略并告警（保持仅局域网行为）。未配对调用方的 `status` 只看到配对相关字段（phase / 局域网地址）；token 过期时间、设备列表与隧道 URL 需要有效设备 cookie。accept 限速按客户端可见的 `X-Forwarded-For` 跳点分桶，避免隧道背后的单个来源耗尽共享桶。
 - **`--trusted-host <authority>`**（dsh web flag）：连接插件传输层 `/api` 围栏也必须接受公网主机——否则经隧道的每个 `/api` 请求在**配对层之前**就 403（插件自己的围栏只覆盖 `/api/pair` 路由）。请像隧道转发那样精确传入公网主机（或 `host:port`）。
 
 ### Cloudflare 隧道（quick tunnel——无账号、无域名）

package/lib/client.js

@@ -1740,13 +1740,20 @@ window.__ModuleLoader__.load({
 						t,
 						status
 					}),
-					view.kind === "updating" && status !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: remote_module_css_default.updateStatus,
-						children: t("update.updating", {
-							name: anchorName(status) ?? "",
-							version: anchorLatest(status) ?? ""
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageList, { status })] }),
+					view.kind === "updating" && status !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.updateStatus,
+							children: t("update.updating", {
+								name: anchorName(status) ?? "",
+								version: anchorLatest(status) ?? ""
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.updateDetail,
+							children: t("update.cooldownNotice")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageList, { status })
+					] }),
 					view.kind === "done" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DoneBody, {
 						t,
 						result: view.result
@@ -1809,16 +1816,23 @@ window.__ModuleLoader__.load({
 				className: remote_module_css_default.updateDetail,
 				children: t("update.offlineDetail")
 			})] });
-			if (status.outdated) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: remote_module_css_default.updateStatus,
-				children: t("update.found")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: remote_module_css_default.updateDetail,
-				children: anchor !== void 0 ? t("update.foundDetail", {
-					name: anchor,
-					version: latest ?? ""
-				}) : ""
-			})] });
+			if (status.outdated) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: remote_module_css_default.updateStatus,
+					children: t("update.found")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: remote_module_css_default.updateDetail,
+					children: anchor !== void 0 ? t("update.foundDetail", {
+						name: anchor,
+						version: latest ?? ""
+					}) : ""
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: remote_module_css_default.updateDetail,
+					children: t("update.cooldownNotice")
+				})
+			] });
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: remote_module_css_default.updateStatus,
@@ -2058,6 +2072,7 @@ window.__ModuleLoader__.load({
 			}, [state]);
 			const [copied, setCopied] = (0, react.useState)(false);
 			const eventSource = (0, react.useRef)(void 0);
+			const openSeq = (0, react.useRef)(0);
 			const workspaceId = useWorkspaces((s) => s.recentWorkspaceId);
 			const closeEventSource = (0, react.useCallback)(() => {
 				eventSource.current?.close();
@@ -2091,8 +2106,10 @@ window.__ModuleLoader__.load({
 				};
 			}, [workspaceId]);
 			const openPanel = (0, react.useCallback)(async () => {
+				const seq = ++openSeq.current;
 				setOpen(true);
 				const next = await mint();
+				if (seq !== openSeq.current) return;
 				setState(next);
 				if (next.kind !== "ready" && next.kind !== "lan-required") return;
 				const source = new EventSource("/api/pair/events");
@@ -2111,6 +2128,7 @@ window.__ModuleLoader__.load({
 				};
 			}, [mint]);
 			const closePanel = (0, react.useCallback)(() => {
+				openSeq.current += 1;
 				closeEventSource();
 				setOpen(false);
 			}, [closeEventSource]);
@@ -2260,7 +2278,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:packages/dsh-remote-web-ui/src/client/settings-card.module.css.mjs
-		const css = ".Kwoi6G_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}.Kwoi6G_card:hover{border-color:var(--dsw-alias-label-dimmed)}.Kwoi6G_cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}.Kwoi6G_header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}.Kwoi6G_header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}.Kwoi6G_headerStatic{border-radius:12px;align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}.Kwoi6G_headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.Kwoi6G_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}.Kwoi6G_description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}.Kwoi6G_pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.Kwoi6G_chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.Kwoi6G_chevronOpen{transform:rotate(180deg)}.Kwoi6G_body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}.Kwoi6G_readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}.Kwoi6G_notExposed{color:var(--dsw-alias-state-warn-primary);margin:12px 0 0;font-size:12px;line-height:1.5}.Kwoi6G_footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex}.Kwoi6G_failed{min-width:0;color:var(--dsw-alias-label-error);text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:12px;line-height:1.5;overflow:hidden}.Kwoi6G_discard,.Kwoi6G_save{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}.Kwoi6G_discard{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}.Kwoi6G_discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}.Kwoi6G_save{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}.Kwoi6G_discard:disabled,.Kwoi6G_save:disabled{opacity:.4;cursor:default}.Kwoi6G_discard:focus-visible,.Kwoi6G_save:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}.Kwoi6G_field{flex-direction:column;gap:6px;padding:12px 0;display:flex}.Kwoi6G_field+.Kwoi6G_field{border-top:1px solid var(--dsw-alias-border-l2)}.Kwoi6G_head{align-items:center;gap:8px;display:flex}.Kwoi6G_label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}.Kwoi6G_badges{align-items:center;gap:8px;display:inline-flex}.Kwoi6G_badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.Kwoi6G_reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}.Kwoi6G_reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}.Kwoi6G_reset:disabled{cursor:default}.Kwoi6G_reset:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.Kwoi6G_input,.Kwoi6G_select{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.Kwoi6G_input:focus-visible,.Kwoi6G_select:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.Kwoi6G_input:disabled,.Kwoi6G_select:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}.Kwoi6G_inputInvalid{border:1px solid var(--dsw-alias-label-error);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.Kwoi6G_inputInvalid:focus-visible{outline:2px solid var(--dsw-alias-label-error);outline-offset:1px;border-color:var(--dsw-alias-label-error)}.Kwoi6G_invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}.Kwoi6G_hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){.Kwoi6G_card,.Kwoi6G_header,.Kwoi6G_chevron,.Kwoi6G_chevronOpen,.Kwoi6G_discard,.Kwoi6G_save{transition:none}}";
+		const css = ".Kwoi6G_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}.Kwoi6G_card:hover{border-color:var(--dsw-alias-label-dimmed)}.Kwoi6G_cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}.Kwoi6G_header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}.Kwoi6G_header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}.Kwoi6G_headerStatic{border-radius:12px;align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}.Kwoi6G_headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.Kwoi6G_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}.Kwoi6G_description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}.Kwoi6G_pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.Kwoi6G_chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.Kwoi6G_chevronOpen{transform:rotate(180deg)}.Kwoi6G_body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}.Kwoi6G_readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}.Kwoi6G_notExposed{color:var(--dsw-alias-state-warn-primary);margin:12px 0 0;font-size:12px;line-height:1.5}.Kwoi6G_footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex}.Kwoi6G_failed{min-width:0;color:var(--dsw-alias-label-error);text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:12px;line-height:1.5;overflow:hidden}.Kwoi6G_discard,.Kwoi6G_save{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}.Kwoi6G_discard{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}.Kwoi6G_discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}.Kwoi6G_save{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}.Kwoi6G_discard:disabled,.Kwoi6G_save:disabled{opacity:.4;cursor:default}.Kwoi6G_discard:focus-visible,.Kwoi6G_save:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}.Kwoi6G_field{flex-direction:column;gap:6px;padding:12px 0;display:flex}.Kwoi6G_field+.Kwoi6G_field{border-top:1px solid var(--dsw-alias-border-l2)}.Kwoi6G_head{align-items:center;gap:8px;display:flex}.Kwoi6G_label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}.Kwoi6G_badges{align-items:center;gap:8px;display:inline-flex}.Kwoi6G_badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.Kwoi6G_reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}.Kwoi6G_reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}.Kwoi6G_reset:disabled{cursor:default}.Kwoi6G_reset:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.Kwoi6G_input,.Kwoi6G_select{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.Kwoi6G_input:focus-visible,.Kwoi6G_select:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.Kwoi6G_input:disabled,.Kwoi6G_select:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}.Kwoi6G_inputInvalid{border:1px solid var(--dsw-alias-label-error);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.Kwoi6G_inputInvalid:focus-visible{outline:2px solid var(--dsw-alias-label-error);outline-offset:1px;border-color:var(--dsw-alias-label-error)}.Kwoi6G_selectWrap{position:relative}.Kwoi6G_selectButton{appearance:none;text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.Kwoi6G_selectLabel{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.Kwoi6G_selectChevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.Kwoi6G_selectChevronOpen{transform:rotate(180deg)}.Kwoi6G_selectPopup{z-index:40;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);max-height:240px;box-shadow:0 8px 24px var(--dsw-alias-bg-mask-2);opacity:0;border-radius:8px;flex-direction:column;padding:4px;transition:opacity .1s,transform .1s;display:flex;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;transform:translateY(-4px)}.Kwoi6G_selectPopupOpen{opacity:1;transform:none}.Kwoi6G_selectPopupClose{opacity:0;pointer-events:none;transform:translateY(-4px)}.Kwoi6G_selectOption{color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.5;overflow:hidden}.Kwoi6G_selectOption:hover,.Kwoi6G_selectOptionActive{background:var(--dsw-alias-interactive-bg-hover)}.Kwoi6G_selectOptionSelected{color:var(--dsw-alias-brand-primary);background:color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color) 10%, transparent);font-weight:500}.Kwoi6G_invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}.Kwoi6G_hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){.Kwoi6G_card,.Kwoi6G_header,.Kwoi6G_chevron,.Kwoi6G_chevronOpen,.Kwoi6G_discard,.Kwoi6G_save,.Kwoi6G_selectChevron,.Kwoi6G_selectChevronOpen,.Kwoi6G_selectPopup{transition:none}}";
 		const tagId = "@linxin666/dsh-remote-web-ui/settings-card.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -2297,7 +2315,18 @@ window.__ModuleLoader__.load({
 			"readOnly": "Kwoi6G_readOnly",
 			"reset": "Kwoi6G_reset",
 			"save": "Kwoi6G_save",
-			"select": "Kwoi6G_select"
+			"select": "Kwoi6G_select",
+			"selectButton": "Kwoi6G_selectButton",
+			"selectChevron": "Kwoi6G_selectChevron",
+			"selectChevronOpen": "Kwoi6G_selectChevronOpen",
+			"selectLabel": "Kwoi6G_selectLabel",
+			"selectOption": "Kwoi6G_selectOption",
+			"selectOptionActive": "Kwoi6G_selectOptionActive",
+			"selectOptionSelected": "Kwoi6G_selectOptionSelected",
+			"selectPopup": "Kwoi6G_selectPopup",
+			"selectPopupClose": "Kwoi6G_selectPopupClose",
+			"selectPopupOpen": "Kwoi6G_selectPopupOpen",
+			"selectWrap": "Kwoi6G_selectWrap"
 		};
 		//#endregion
 		//#region src/client/PluginSettingsCard.tsx
@@ -2476,6 +2505,175 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		const NON_SKIN_BODY_MARKERS = /* @__PURE__ */ new Set(["dshSkinCenter", "dshSidebarCollapsed"]);
+		function isSkinActive() {
+			return Object.keys(document.body.dataset).some((key) => key.startsWith("dsh") && !NON_SKIN_BODY_MARKERS.has(key));
+		}
+		const SELECT_CLOSE_MS = 100;
+		/**
+		* The shared dual-mode select control. While an appearance skin is active it
+		* renders the legacy native `<select>` untouched, so element-level skin
+		* selectors keep working; under the default appearance it renders a
+		* self-drawn `role="listbox"` popup whose open/close is transition-animated.
+		* Staged cards reach it through BooleanField/ChoiceField; immediate-apply
+		* editors (the side-card prefs) bind it directly through onEdit.
+		* 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
+		*/
+		function SelectField(props) {
+			const { id, options, value } = props;
+			const [open, setOpen] = (0, react.useState)(false);
+			const [closing, setClosing] = (0, react.useState)(false);
+			const [phase, setPhase] = (0, react.useState)("initial");
+			const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+			const closeTimer = (0, react.useRef)(void 0);
+			const wrapRef = (0, react.useRef)(null);
+			const popupRef = (0, react.useRef)(null);
+			const currentIndex = () => {
+				const index = options.findIndex((option) => option.value === value);
+				return index >= 0 ? index : 0;
+			};
+			const close = (0, react.useCallback)(() => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+				setClosing(true);
+				closeTimer.current = setTimeout(() => {
+					setClosing(false);
+					setOpen(false);
+				}, SELECT_CLOSE_MS);
+			}, []);
+			const openPopup = () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+				setActiveIndex(currentIndex());
+				setPhase("initial");
+				setClosing(false);
+				setOpen(true);
+			};
+			const commit = (index) => {
+				const option = options[index];
+				if (option) props.onEdit(option.value);
+				close();
+			};
+			const onTriggerClick = () => {
+				if (props.disabled) return;
+				if (open && !closing) close();
+				else openPopup();
+			};
+			const onKeyDown = (event) => {
+				if (props.disabled) return;
+				const count = options.length;
+				switch (event.key) {
+					case "ArrowDown":
+					case "ArrowUp":
+					case "Enter":
+					case " ":
+						event.preventDefault();
+						if (!open) openPopup();
+						else if (!closing) if (event.key === "ArrowDown") setActiveIndex((index) => (index + 1) % count);
+						else if (event.key === "ArrowUp") setActiveIndex((index) => (index - 1 + count) % count);
+						else commit(activeIndex);
+						break;
+					case "Escape":
+						if (open) {
+							event.preventDefault();
+							event.stopPropagation();
+							close();
+						}
+						break;
+					case "Tab":
+						if (open) close();
+						break;
+				}
+			};
+			(0, react.useEffect)(() => () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+			}, []);
+			(0, react.useLayoutEffect)(() => {
+				if (open && !closing && phase === "initial") {
+					popupRef.current?.offsetHeight;
+					setPhase("open");
+				}
+			}, [
+				open,
+				closing,
+				phase
+			]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onPointerDown = (event) => {
+					const target = event.target;
+					if (target instanceof Node && !wrapRef.current?.contains(target)) close();
+				};
+				document.addEventListener("pointerdown", onPointerDown);
+				return () => document.removeEventListener("pointerdown", onPointerDown);
+			}, [open, close]);
+			(0, react.useEffect)(() => {
+				if (props.disabled && open) close();
+			}, [
+				props.disabled,
+				open,
+				close
+			]);
+			if (isSkinActive()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				id,
+				className: settings_card_module_css_default.select,
+				value,
+				disabled: props.disabled,
+				onChange: (event) => {
+					props.onEdit(event.target.value);
+				},
+				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))
+			});
+			const label = options.find((option) => option.value === value)?.label ?? "";
+			const popupClass = closing ? `${settings_card_module_css_default.selectPopup} ${settings_card_module_css_default.selectPopupClose}` : phase === "open" ? `${settings_card_module_css_default.selectPopup} ${settings_card_module_css_default.selectPopupOpen}` : settings_card_module_css_default.selectPopup;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: settings_card_module_css_default.selectWrap,
+				ref: wrapRef,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					id,
+					className: `${settings_card_module_css_default.select} ${settings_card_module_css_default.selectButton}`,
+					disabled: props.disabled,
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-activedescendant": open ? `${id}-o${activeIndex}` : void 0,
+					"aria-invalid": props.invalid || void 0,
+					onClick: onTriggerClick,
+					onKeyDown,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: settings_card_module_css_default.selectLabel,
+						children: label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 14 14",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						className: open ? `${settings_card_module_css_default.selectChevron} ${settings_card_module_css_default.selectChevronOpen}` : settings_card_module_css_default.selectChevron,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: "M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z",
+							fill: "currentColor"
+						})
+					})]
+				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: popupClass,
+					role: "listbox",
+					ref: popupRef,
+					children: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						id: `${id}-o${index}`,
+						role: "option",
+						"aria-selected": option.value === value,
+						className: `${settings_card_module_css_default.selectOption}${option.value === value ? ` ${settings_card_module_css_default.selectOptionSelected}` : ""}${index === activeIndex && !closing ? ` ${settings_card_module_css_default.selectOptionActive}` : ""}`,
+						onClick: () => {
+							commit(index);
+						},
+						children: option.label
+					}, option.value))
+				}) : null]
+			});
+		}
 		/** A staged boolean field: 继承 / 开 / 关. */
 		function BooleanField(props) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2501,28 +2699,26 @@ window.__ModuleLoader__.load({
 							})]
 						}) : null]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectField, {
 						id: props.id,
-						className: settings_card_module_css_default.select,
-						value: props.text,
-						disabled: props.disabled,
-						onChange: (event) => {
-							props.onEdit(event.target.value);
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						options: [
+							{
 								value: "",
-								children: props.inheritLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								label: props.inheritLabel
+							},
+							{
 								value: "true",
-								children: props.onLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								label: props.onLabel
+							},
+							{
 								value: "false",
-								children: props.offLabel
-							})
-						]
+								label: props.offLabel
+							}
+						],
+						value: props.text,
+						disabled: props.disabled,
+						invalid: props.invalid,
+						onEdit: props.onEdit
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: settings_card_module_css_default.hint,
@@ -3116,6 +3312,7 @@ window.__ModuleLoader__.load({
 			"update.found": "发现新版本",
 			"update.foundDetail": "{name} 有新版本 v{version}，正在自动更新…",
 			"update.updating": "正在更新 {name} 至 v{version}，可能需要 1-2 分钟…",
+			"update.cooldownNotice": "本次更新由你主动触发，将跳过 pnpm 的 24 小时发布冷却期（供应链保护）直接安装所选版本。",
 			"update.updatingTitle": "正在自动更新…",
 			"update.done": "更新完成",
 			"update.doneDetail": "所有组件已更新到最新版本。",
@@ -3221,6 +3418,7 @@ window.__ModuleLoader__.load({
 			"update.found": "A new version is available",
 			"update.foundDetail": "{name} has a newer release v{version}; updating automatically…",
 			"update.updating": "Updating {name} to v{version}; this may take 1-2 minutes…",
+			"update.cooldownNotice": "This user-initiated update bypasses pnpm's 24-hour release cooldown (supply-chain protection) and installs the selected version immediately.",
 			"update.updatingTitle": "Updating automatically…",
 			"update.done": "Update complete",
 			"update.doneDetail": "All components are up to date.",