dsh-desktop-statusbar 2.0.0 → 2.0.2

package/lib/client.js

@@ -40,6 +40,8 @@ window.__ModuleLoader__.load({
 		 * v6 起：`segments` 存全部段的有序列表（顺序对整份列表生效），`hidden` 存未勾选的段。
 		 */
 		const CONFIG_VERSION = 6;
+		/** 插件版本：显示在设置页底部，用来确认页面加载的是哪一版客户端代码。 */
+		const VERSION = "2.0.2";
 		/** 官方参考价的版本：官方调价时改这个数字，老价格库会自动并入新参考价。 */
 		const PRICE_VERSION = 2;
 
@@ -346,7 +348,10 @@ window.__ModuleLoader__.load({
 		 * 累加用 costOf 的原始值，只在这里做一次舍入。
 		 */
 		function costText(amount) {
-			return amount.toFixed(2);
+			const n = Number(amount);
+			/* 兜住 NaN / -0 / 负数：它们会显示成 "NaN" 或 "-0.00"，看着像坏掉了 */
+			if (Number.isFinite(n) !== true || n <= 0) return "0.00";
+			return n.toFixed(2);
 		}
 
 		/** 逐字段相减，得到两次全量用量之间的增量 —— 即本轮消耗。 */
@@ -447,12 +452,16 @@ window.__ModuleLoader__.load({
 			f_tokensTurn: "本轮用量",
 			tipModelTime: "模型用时",
 			tipToolTime: "工具调用",
+			tipTtftTurn: "本轮平均首字",
 			tipTtftFast: "最快首字延迟",
 			tipTtftSlow: "最慢首字延迟",
+			tipTpsTurn: "本轮平均速度",
 			tipTpsFast: "最快输出速度",
 			tipTpsSlow: "最慢输出速度",
 			tipTopUp: "充值余额",
 			tipGranted: "赠金余额",
+			tipSpent: "累计消费",
+			tipHitTurn: "本轮缓存命中率",
 			tipHitHigh: "最高缓存命中率",
 			tipHitLow: "最低缓存命中率",
 			contextAria: "上下文已用 {percent}",
@@ -464,7 +473,7 @@ window.__ModuleLoader__.load({
 			f_cost: "总计 {symbol}{cost}",
 			priceTierPeak: "高峰时段",
 			priceTierOffPeak: "空闲时段",
-			f_balanceDash: "余额 -",
+			f_balanceDash: "余额 {symbol}-",
 			f_lastCost: "本轮 {symbol}{cost}",
 			f_balance: "余额 {symbol}{amount}",
 			f_balanceSubCent: "余额 <{symbol}0.01",
@@ -533,12 +542,16 @@ window.__ModuleLoader__.load({
 			f_tokensTurn: "This turn usage",
 			tipModelTime: "Model time",
 			tipToolTime: "Tool calls",
+			tipTtftTurn: "Average TTFT this turn",
 			tipTtftFast: "Fastest TTFT",
 			tipTtftSlow: "Slowest TTFT",
+			tipTpsTurn: "Average TPS this turn",
 			tipTpsFast: "Fastest TPS",
 			tipTpsSlow: "Slowest TPS",
 			tipTopUp: "Top-up balance",
 			tipGranted: "Granted balance",
+			tipSpent: "Total spent",
+			tipHitTurn: "Cache hit rate this turn",
 			tipHitHigh: "Highest cache hit rate",
 			tipHitLow: "Lowest cache hit rate",
 			contextAria: "{percent} of context used",
@@ -573,7 +586,7 @@ window.__ModuleLoader__.load({
 			unitCountSteps: " steps",
 			unitSpeed: "t/s",
 			priceSuggestedHint: "The price book uses the DeepSeek reference prices.",
-			f_balanceDash: "Balance -",
+			f_balanceDash: "Balance {symbol}-",
 			priceNewModel: "Custom model",
 			priceAdd: "Add",
 			priceEmpty: "Price book is empty — type a model name (e.g. deepseek-flash) and click Add.",
@@ -762,18 +775,34 @@ window.__ModuleLoader__.load({
 			return !(Array.isArray(cfg.hidden) && cfg.hidden.indexOf(id) !== -1);
 		}
 		/**
-		 * 把 fromId 插到 toId 的前面（after=false）或后面（after=true）。
-		 * 先摘出被拖项再按目标定位，避免向下拖时索引差一位。
+		 * 拖动中算落点：浮层的下边界压过哪一行的中线，影子就往下滑到那一行；
+		 * 上边界举过哪一行的中线，就往上滑。
+		 * slots 是按下那一刻按原始顺序量下的各行矩形，shift 是这期间页面滚动的位移
+		 * （每次移动都重新量锚点得到）—— 直接用真实矩形，行距里有没有 gap、
+		 * 某行是不是比别人高，都不影响判定。
 		 */
-		function reorderSegments(fromId, toId, after) {
-			if (fromId === null || fromId === undefined || toId === null || toId === undefined) return;
-			if (fromId === toId) return;
-			const next = config.segments.slice();
-			if (next.indexOf(fromId) === -1 || next.indexOf(toId) === -1) return;
-			next.splice(next.indexOf(fromId), 1);
-			const at = next.indexOf(toId) + (after === true ? 1 : 0);
-			next.splice(at, 0, fromId);
-			setConfig({ segments: next });
+		function dropIndexAt(slots, shift, from, top, bottom) {
+			let to = from;
+			for (let i = from + 1; i < slots.length; i += 1) {
+				const rect = slots[i];
+				if (rect === null || rect === undefined) continue;
+				if (bottom <= rect.top + shift + rect.height / 2) break;
+				to = i;
+			}
+			for (let i = from - 1; i >= 0; i -= 1) {
+				const rect = slots[i];
+				if (rect === null || rect === undefined) continue;
+				if (top >= rect.top + shift + rect.height / 2) break;
+				to = i;
+			}
+			return to;
+		}
+
+		/** 把 from 位置的元素挪到 to 位置（不动原数组）。 */
+		function moveItem(list, from, to) {
+			const next = list.slice();
+			next.splice(to, 0, next.splice(from, 1)[0]);
+			return next;
 		}
 
 		/* ---------------------------------------------------------------- 工具 */
@@ -915,6 +944,19 @@ window.__ModuleLoader__.load({
 		 * 令牌面板数据：第一行是总用量，第二行三段占比（顶满 100%），下面三行明细。
 		 * 数字一律千分位精确值，不带单位（面板标题已经说明是 token 用量）。
 		 */
+		/** 没有 token 数据时的面板：不画三段条，三行都给横杠 —— 保证气泡在任何情况下都点得开。 */
+		function dashTokenPanel(t) {
+			return {
+				totalText: "-",
+				segments: [],
+				rows: [
+					{ label: t("f_tokensHit"), color: "var(--dsw-static-neutral-bluish-400)", value: "-" },
+					{ label: t("f_tokensMiss"), color: "#a78bfa", value: "-" },
+					{ label: t("f_tokensOut"), color: "var(--dsw-static-blue-450)", value: "-" }
+				]
+			};
+		}
+
 		function tokenPanelView(cached, missInput, output, t) {
 			const total = cached + missInput + output;
 			if (total <= 0) return null;
@@ -993,18 +1035,58 @@ window.__ModuleLoader__.load({
 			});
 		}
 
-		/** 令牌面板的 tip；三段全 0 时不给面板（省得弹一个空泡泡）。 */
+		/** 令牌面板的 tip。没有数据也给面板（三行横杠）—— 气泡必须任何情况下都点得开。 */
 		function tokensTip(parts, title, t) {
 			const panel = parts === null ? null : tokenPanelView(parts.cached, parts.missInput, parts.output, t);
-			return panel === null ? null : { kind: "tokens", title: title, panel: panel };
+			return { kind: "tokens", title: title, panel: panel === null ? dashTokenPanel(t) : panel };
 		}
 
-		/** 毫秒 → 面板里的时长文本；0 或缺数据给横杠。 */
+		/** 毫秒 → 面板里的时长文本（精确到秒）；0 或缺数据给横杠。 */
 		function tipDuration(ms) {
-			const text = formatDuration(ms);
+			const text = formatDurationFine(ms);
 			return text === null ? "-" : text;
 		}
 
+		/** 时长精确到秒：1h23m45s / 23m45s / 45s。底栏那条用 formatDuration（省掉秒，宽度有限）。 */
+		function formatDurationFine(ms) {
+			const n = Number(ms) || 0;
+			if (n <= 0) return null;
+			const whole = Math.round(n / 1000);
+			if (whole < 60) return whole + "s";
+			const minutes = Math.floor(whole / 60);
+			if (minutes < 60) return minutes + "m" + (whole % 60) + "s";
+			return Math.floor(minutes / 60) + "h" + (minutes % 60) + "m" + (whole % 60) + "s";
+		}
+
+		/** 本轮缓存命中率：这一轮的输入 token 里命中缓存的比例；本轮还没有调用给横杠。
+		    读插件自己的 desktopStatusbarUsage 投影 —— 官方 tokenUsage 只有会话累计值。
+		    注意字段是短名（input / cacheRead / cacheWrite），与官方投影的 *Tokens 不同名。 */
+		function turnHitRate(sessionUsage) {
+			const current = sessionUsage === undefined || sessionUsage === null ? null : sessionUsage.current;
+			if (current === null || current === undefined) return "-";
+			const denominator = (current.input || 0) + (current.cacheRead || 0) + (current.cacheWrite || 0);
+			if (denominator <= 0) return "-";
+			return hitRateText(((current.cacheRead || 0) / denominator) * 100);
+		}
+
+		/** 本轮平均首字；本轮还没有样本给横杠。 */
+		function turnAverageTtft(timing) {
+			if (timing === null || timing === undefined) return "-";
+			const samples = timing.turnTtftSamples || 0;
+			if (samples <= 0) return "-";
+			const text = formatSeconds(timing.turnTtftMs / samples);
+			return text === null ? "-" : text + "s";
+		}
+
+		/** 本轮平均输出速度；本轮还没有可测样本给横杠。 */
+		function turnAverageTps(timing, t) {
+			if (timing === null || timing === undefined) return "-";
+			const decodeMs = timing.turnDecodeMs || 0;
+			const tokens = timing.turnDecodeTokens || 0;
+			if (decodeMs <= 0 || tokens <= 0) return "-";
+			return formatThroughput(tokens / (decodeMs / 1000)) + t("unitSpeed");
+		}
+
 		/** 首字极值（毫秒）→ "9.3s"；没有样本给横杠。 */
 		function tipSeconds(mark) {
 			if (mark === null || mark === undefined) return "-";
@@ -1126,6 +1208,7 @@ window.__ModuleLoader__.load({
 						kind: "rows",
 						title: t("segTtft"),
 						rows: [
+							{ label: t("tipTtftTurn"), value: turnAverageTtft(timing) },
 							{ label: t("tipTtftFast"), value: tipSeconds(timing === null ? null : timing.fastestTtft) },
 							{ label: t("tipTtftSlow"), value: tipSeconds(timing === null ? null : timing.slowestTtft) }
 						]
@@ -1147,6 +1230,7 @@ window.__ModuleLoader__.load({
 						kind: "rows",
 						title: t("segCacheHit"),
 						rows: [
+							{ label: t("tipHitTurn"), value: turnHitRate(src.sessionUsage) },
 							{ label: t("tipHitHigh"), value: extremes === null ? "-" : extremes.high },
 							{ label: t("tipHitLow"), value: extremes === null ? "-" : extremes.low }
 						]
@@ -1165,6 +1249,7 @@ window.__ModuleLoader__.load({
 						kind: "rows",
 						title: t("segTps"),
 						rows: [
+							{ label: t("tipTpsTurn"), value: turnAverageTps(timing, t) },
 							{ label: t("tipTpsFast"), value: tipSpeed(timing === null ? null : timing.fastestTps, t) },
 							{ label: t("tipTpsSlow"), value: tipSpeed(timing === null ? null : timing.slowestTps, t) }
 						]
@@ -1207,9 +1292,9 @@ window.__ModuleLoader__.load({
 
 			if (id === "cost") {
 				const sessionUsage = src.sessionUsage;
-				if (sessionUsage === undefined || sessionUsage === null) return null;
-				const calls = Array.isArray(sessionUsage.calls) ? sessionUsage.calls : null;
-				if (calls === null || calls.length === 0) return null;
+				const calls = sessionUsage === undefined || sessionUsage === null || Array.isArray(sessionUsage.calls) !== true
+					? []
+					: sessionUsage.calls;
 				/* 每条调用按自己发生的那一刻、自己的模型定峰谷：跨时段、跨模型都不会串价。
 				   累加的是未舍入金额，最后一次性舍入 —— 逐条舍入会累积出几毛钱的误差。 */
 				const fallbackModel = src.sessionModel !== undefined && src.sessionModel !== null ? src.sessionModel.model : null;
@@ -1222,10 +1307,10 @@ window.__ModuleLoader__.load({
 					priced = true;
 					total += one;
 				}
-				if (!priced) return null;
 				return {
 					id: id,
-					text: t("f_cost", { symbol: symbol, cost: costText(total) }),
+					/* 算不出价（价格库里没这个模型）时给 ¥-：与"这笔真的是 0"区分开 */
+					text: t("f_cost", { symbol: symbol, cost: priced ? costText(total) : "-" }),
 					/* token 计数并进总计：点这一段看会话的 token 明细 */
 					tip: tokensTip(sessionTokenParts(src.usage), t("f_tokensTotal"), t)
 				};
@@ -1240,29 +1325,31 @@ window.__ModuleLoader__.load({
 					&& Array.isArray(sessionUsageNow.current.calls)
 					? sessionUsageNow.current.calls
 					: null;
-				if (turnCalls !== null && turnCalls.length > 0) {
-					let turnTotal = 0;
-					let turnPriced = false;
-					const turnParts = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0 };
-					for (let i = 0; i < turnCalls.length; i += 1) {
-						const callModel = typeof turnCalls[i].model === "string" ? turnCalls[i].model : fallbackModel;
-						const one = costOf(turnCalls[i], callModel, turnCalls[i].at);
-						turnParts.input += turnCalls[i].input || 0;
-						turnParts.cacheRead += turnCalls[i].cacheRead || 0;
-						turnParts.cacheWrite += turnCalls[i].cacheWrite || 0;
-						turnParts.output += turnCalls[i].output || 0;
-						if (one === null) continue;
-						turnPriced = true;
-						turnTotal += Number(one);
-					}
-					if (turnPriced) {
-						return {
-							id: id,
-							text: t("f_lastCost", { symbol: symbol, cost: costText(turnTotal) }),
-							/* 本轮点开的是本轮 token 明细，读法与总计那个面板同一套 */
-							tip: tokensTip(billableParts(turnParts), t("f_tokensTurn"), t)
-						};
-					}
+				/* 本轮的 token 汇总与定价一起算：即使价格库里没有这个模型（算不出钱），
+				   也要留住 token 汇总 —— 本轮气泡照样能点开看明细。 */
+				const turnParts = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0 };
+				let turnTotal = 0;
+				let turnPriced = false;
+				const turnList = turnCalls === null ? [] : turnCalls;
+				for (let i = 0; i < turnList.length; i += 1) {
+					const callModel = typeof turnList[i].model === "string" ? turnList[i].model : fallbackModel;
+					const one = costOf(turnList[i], callModel, turnList[i].at);
+					turnParts.input += turnList[i].input || 0;
+					turnParts.cacheRead += turnList[i].cacheRead || 0;
+					turnParts.cacheWrite += turnList[i].cacheWrite || 0;
+					turnParts.output += turnList[i].output || 0;
+					if (one === null) continue;
+					turnPriced = true;
+					turnTotal += Number(one);
+				}
+				const turnTip = tokensTip(billableParts(turnParts), t("f_tokensTurn"), t);
+				if (turnPriced) {
+					return {
+						id: id,
+						text: t("f_lastCost", { symbol: symbol, cost: costText(turnTotal) }),
+						/* 本轮点开的是本轮 token 明细，读法与总计那个面板同一套 */
+						tip: turnTip
+					};
 				}
 				/* 本轮是不是正在跑（与状态段同一套判断） */
 				const active = src.running === true
@@ -1279,37 +1366,77 @@ window.__ModuleLoader__.load({
 				if (active === true && bucket !== null && sameTurn === true) {
 					const runningCost = costOf(bucket, fallbackModel, src.now);
 					if (runningCost !== null) {
-						return { id: id, text: t("f_lastCost", { symbol: symbol, cost: costText(runningCost) }), tip: null };
+						return { id: id, text: t("f_lastCost", { symbol: symbol, cost: costText(runningCost) }), tip: turnTip };
 					}
 				}
-				/* 新一轮已经开跑、但还没有属于它的调用：本轮就是 0。
-				   这里必须拦住 —— 否则会退回上一轮（节点折叠还错位过一轮，显示成上上轮）的金额，
-				   发完消息底栏挂着一个旧数字，看着像没重置。 */
+				/* 新一轮已经开跑、但还没有属于它的调用：必须归零，不能退回上一轮
+				   —— 节点折叠曾错位一轮，底栏显示成上上轮的金额，这条就是为堵它留的。
+				   一次模型调用都还没完成过（第一轮）时没有"归零"可言，跟总计一样给横杠。
+				   等这一轮真的产生了调用，上面那条精确口径就接管了。 */
 				if (active === true) {
-					return { id: id, text: t("f_lastCost", { symbol: symbol, cost: costText(0) }), tip: null };
+					const settled = src.sessionUsage !== undefined && src.sessionUsage !== null
+						&& Array.isArray(src.sessionUsage.calls) === true
+						&& src.sessionUsage.calls.length > 0;
+					return {
+						id: id,
+						text: t("f_lastCost", { symbol: symbol, cost: settled ? costText(0) : "-" }),
+						tip: turnTip
+					};
 				}
-				/* 空闲：显示最近完成的一轮（节点折叠 → 官方差分兜底），同样只出金额 */
-				if (bucket === null) return null;
-				const cost = costOf(bucket, fallbackModel, src.now);
-				if (cost === null) return null;
-				return { id: id, text: t("f_lastCost", { symbol: symbol, cost: costText(cost) }), tip: null };
+				/* 空闲：显示最近完成的一轮（节点折叠 → 官方差分兜底），同样只出金额。
+				   没有可用数据时也给 ¥0.00：本轮不整段消失，底栏长度稳定，
+				   也不会退回上一轮（节点折叠曾错位一轮，显示成上上轮）的旧金额。 */
+				const cost = bucket === null ? null : costOf(bucket, fallbackModel, src.now);
+				return {
+					id: id,
+					text: t("f_lastCost", { symbol: symbol, cost: cost === null ? "-" : costText(cost) }),
+					tip: turnTip
+				};
 			}
 
 						if (id === "balance") {
+				/* 查不到余额（非 DeepSeek 会话 / 还没查到 / 查询失败）时用同一套两行结构，值都是横杠：
+				   气泡里仍然是「充值余额 / 赠金余额」两行，只是没有数字。 */
+				const dashBalance = () => {
+					const dashSymbol = currencySymbol(src.currency);
+					return {
+						id: id,
+						text: t("f_balanceDash", { symbol: dashSymbol }),
+						tip: {
+							kind: "rows",
+							title: t("segBalance"),
+							rows: [
+								{ label: t("tipTopUp"), value: dashSymbol + "-" },
+								{ label: t("tipGranted"), value: dashSymbol + "-" }
+							]
+						}
+					};
+				};
+				const sessionModelNow = src.sessionModel;
+				const modelText = sessionModelNow === undefined || sessionModelNow === null
+					? ""
+					: String(sessionModelNow.provider === undefined ? "" : sessionModelNow.provider)
+						+ " " + String(sessionModelNow.model === undefined ? "" : sessionModelNow.model);
+				if (modelText.toLowerCase().includes("deepseek") !== true) return dashBalance();
 				const balance = src.balance;
-				if (balance === null || balance === undefined) return null;
-				if (balance.ok !== true) return null;
-				if (typeof balance.total !== "string") return null;
+				if (balance === null || balance === undefined) return dashBalance();
+				if (balance.ok !== true) return dashBalance();
+				if (typeof balance.total !== "string") return dashBalance();
 				/* 余额用接口自己报的币种：账户里是人民币就显示 ¥，不跟着上面的计价单位走 */
-				const balSymbol = currencySymbol(balance.currency !== undefined && balance.currency !== null ? balance.currency : src.currency);
+				/* 百分比口径（GLM 配额）不带货币符号，否则会显示成 ¥37.50% */
+				const balSymbol = balance.isPercent === true ? "" : currencySymbol(balance.currency !== undefined && balance.currency !== null ? balance.currency : src.currency);
 				/* 点开看构成：total = 充值余额 + 赠金余额；没有赠金时接口不给这个字段，按 0.00 显示 */
 				const tip = {
 					kind: "rows",
 					title: t("segBalance"),
 					rows: [
 						{ label: t("tipTopUp"), value: balSymbol + balanceAmount(balance.toppedUp) },
-						{ label: t("tipGranted"), value: balSymbol + balanceAmount(balance.granted) }
-					]
+						{ label: t("tipGranted"), value: balSymbol + balanceAmount(balance.granted) },
+					/* 累计消费只有部分平台能给（智谱有，DeepSeek 的接口没有），没有就不显示这一行 */
+					balance.spent === undefined || balance.spent === null
+						? null
+						: { label: t("tipSpent"), value: balSymbol + balanceAmount(balance.spent) }
+					].filter((one) => one !== null)
 				};
 				/* 不足一分钱时官方显示 <¥0.01，这里跟着来 */
 				if (balance.subCent === true) return { id: id, text: t("f_balanceSubCent", { symbol: balSymbol }), tip: tip };
@@ -1339,8 +1466,8 @@ window.__ModuleLoader__.load({
 			/* 速度占位不带单位：英文那边标签已经是 TPS，再跟 t/s 就重复了 */
 			if (id === "tps") return label + " " + dash;
 			if (id === "sessionTime") return label + " " + dash + "m " + dash + "s";
-			if (id === "cost" || id === "lastCost") return label + " " + dash + " " + currencySymbol(config.currency);
-			if (id === "balance") return t("f_balanceDash");
+			if (id === "cost" || id === "lastCost") return label + " " + currencySymbol(config.currency) + dash;
+			if (id === "balance") return t("f_balanceDash", { symbol: currencySymbol(config.currency) });
 			return dash;
 		}
 		/* ---------------------------------------------------------------- css */
@@ -1416,21 +1543,29 @@ window.__ModuleLoader__.load({
 			".dsb-settings .dsb-section{display:flex;flex-direction:column;gap:8px}",
 			".dsb-settings .dsb-sectitle{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;letter-spacing:.02em}",
 			".dsb-settings .dsb-hint{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.6}",
-			".dsb-settings .dsb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;padding:6px 8px;background:var(--dsw-alias-bg-layer-1,transparent)}",
+			".dsb-settings .dsb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;padding:6px 8px;background:var(--dsw-alias-bg-layer-1,transparent);user-select:none;-webkit-user-select:none}",
 			".dsb-settings .dsb-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08))}",
+			/* 拖动中不给悬停反馈：浮层不吃指针事件，鼠标其实悬在下面那行上，会莫名发灰 */
+			".dsb-settings:has(.dsb-dragging) .dsb-row:hover{background:var(--dsw-alias-bg-layer-1,transparent)}",
+			/* 拖动中光标一律抓手：光标由鼠标底下那个元素决定，而浮层不吃指针事件，
+			   底下既可能是握把（grab）、文字（pointer）、也可能是行间空隙（默认箭头）。
+			   !important 是因为这些元素各自都写了 cursor，靠继承压不住握把那条。 */
+			".dsb-settings:has(.dsb-dragging) *{cursor:grabbing !important}",
 			".dsb-settings .dsb-check{display:flex;align-items:flex-start;gap:8px;cursor:pointer;flex:1;min-width:0}",
 			".dsb-settings .dsb-check input{flex:none;margin:2px 0 0}",
 			".dsb-settings input[type=checkbox]{accent-color:var(--dsw-alias-label-primary,#202020)}",
 			".dsb-settings .dsb-labels{display:flex;flex-direction:column;gap:2px;min-width:0}",
 			".dsb-settings .dsb-name{color:var(--dsw-alias-label-primary)}",
 			".dsb-settings .dsb-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}",
-			".dsb-settings .dsb-row.dsb-dragging{opacity:.35}",
-			".dsb-settings .dsb-row.dsb-over-before{box-shadow:inset 0 2px 0 var(--dsw-alias-brand-primary,#4d6bfe)}",
-			".dsb-settings .dsb-row.dsb-over-after{box-shadow:inset 0 -2px 0 var(--dsw-alias-brand-primary,#4d6bfe)}",
+			/* 被拿起来的那一行：原位留个淡影，跟手的是下面那张卡 */
+			".dsb-settings .dsb-row.dsb-dragging{opacity:.32}",
+			/* 跟手的浮层：气泡同款材质（只有 .5px 描边，没有柔光），不吃指针事件 */
+			".dsb-settings .dsb-drag-card{position:fixed;z-index:40;pointer-events:none;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:var(--dsw-radius-md,12px);background:rgb(from var(--dsw-specific-menu,var(--dsw-alias-bg-layer-1,#1f1f1f)) r g b / .382);backdrop-filter:var(--dsw-menu-backdrop-filter,blur(40px) saturate(150%));-webkit-backdrop-filter:var(--dsw-menu-backdrop-filter,blur(40px) saturate(150%));box-shadow:0 0 0 .5px var(--dsw-alias-border-l1,rgba(127,127,127,.3))}",
 			".dsb-settings .dsb-handle{position:relative;flex:none;width:16px;height:16px;color:var(--dsw-alias-label-tertiary);cursor:grab}",
 			'.dsb-settings .dsb-handle::before{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:5px 0 0 currentColor,0 5px 0 currentColor,5px 5px 0 currentColor,0 10px 0 currentColor,5px 10px 0 currentColor}',
 			".dsb-settings .dsb-handle:active{cursor:grabbing}",
-			".dsb-settings .dsb-handle-off{opacity:.25;cursor:default}",
+			/* 未勾选的段也能调位置，所以光标跟勾选时一样是抓手，只是点阵淡一些 */
+			".dsb-settings .dsb-handle-off{opacity:.25}",
 			/* 价格库 */
 			".dsb-settings .dsb-card{border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.25));border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:10px}",
 			".dsb-settings .dsb-current{color:var(--dsw-alias-label-secondary);font-size:13px;line-height:1.6}",
@@ -1475,6 +1610,8 @@ window.__ModuleLoader__.load({
 			".dsb-settings .dsb-action:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.1))}",
 			".dsb-settings .dsb-action-sm{height:24px;padding:0 8px;font-size:12px}",
 			".dsb-settings .dsb-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}",
+			/* 版本号贴右侧、与按钮底边对齐 */
+			".dsb-settings .dsb-version{margin-left:auto;align-self:flex-end;font-size:11px;line-height:1;color:var(--dsw-alias-label-tertiary);opacity:.75}",
 			".dsb-settings .dsb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"
 		].join("");
 
@@ -1646,19 +1783,34 @@ window.__ModuleLoader__.load({
 			}, []);
 
 			const wantsBalance = isSegmentOn(cfg, "balance");
+			/* 当前会话用的 provider / model：host 按它决定查哪个平台的余额。
+			   这两个值变了要重新查，所以下面 effect 的依赖里带着它们。 */
+			const balanceProvider = sessionModel !== undefined && sessionModel !== null ? sessionModel.provider : null;
+			const balanceModel = sessionModel !== undefined && sessionModel !== null ? sessionModel.model : null;
+			const balanceQuery = "?provider=" + encodeURIComponent(String(balanceProvider === undefined || balanceProvider === null ? "" : balanceProvider))
+				+ "&model=" + encodeURIComponent(String(balanceModel === undefined || balanceModel === null ? "" : balanceModel));
+			/* 点开余额气泡时先强制重查一次：host 端余额不缓存，带上 force 就不用等
+			   下一次轮询（最多 60 秒），气泡里直接是此刻的数字。轮询本身不带 force。 */
+			const balanceReloadRef = react.useRef(null);
 			react.useEffect(() => {
 				if (!wantsBalance) return undefined;
 				let alive = true;
-				const load = () => {
-					window.fetch(BALANCE_URL, { cache: "no-store" })
+				const load = (force) => {
+					const url = BALANCE_URL + balanceQuery + (force === true ? "&force=1" : "");
+					window.fetch(url, { cache: "no-store" })
 						.then((response) => response.json())
 						.then((data) => { if (alive) setBalance(data); })
 						.catch(() => { if (alive) setBalance({ ok: false, reason: "fetch-failed" }); });
 				};
-				load();
-				const timer = window.setInterval(load, BALANCE_POLL_MS);
-				return () => { alive = false; window.clearInterval(timer); };
-			}, [wantsBalance]);
+				balanceReloadRef.current = () => load(true);
+				load(false);
+				const timer = window.setInterval(() => load(false), BALANCE_POLL_MS);
+				return () => {
+					alive = false;
+					balanceReloadRef.current = null;
+					window.clearInterval(timer);
+				};
+			}, [wantsBalance, balanceProvider, balanceModel]);
 
 			/* 只在"点别处"时收起。这里刻意不监听 scroll：底栏固定在视口底部，对话区滚动
 			   不会移动触发项，但每来一次工具调用/新一轮，对话区都会自动滚到底 ——
@@ -1798,7 +1950,9 @@ window.__ModuleLoader__.load({
 				const at = tipKeys.indexOf(key);
 				if (at < 0) return "center";
 				if (at === 0) return "left";
-				return at === tipKeys.length - 1 ? "right" : "center";
+				/* 只有余额贴右边（它固定在栏尾）。其余一律居中、装不下时再夹 ——
+				   否则某一段没有气泡时会被当成"最右项"改成右对齐，看起来就不居中了。 */
+				return key === "balance" ? "right" : "center";
 			};
 			/* 打开时保存触发项的位置并收起上一次的气泡；真正的坐标等面板挂上、量到宽度后再算 */
 			const toggleTip = (id, event, mode) => {
@@ -1807,6 +1961,8 @@ window.__ModuleLoader__.load({
 					setTipPos(null);
 					return;
 				}
+				/* 点开余额：顺手重查一次（收起那一下不查），数据回来气泡自己更新 */
+				if (id === "balance" && balanceReloadRef.current !== null) balanceReloadRef.current();
 				const target = event !== undefined && event !== null ? event.currentTarget : null;
 				/* 存节点而不是当次的矩形：窗口缩放后要重新量 */
 				anchorRef.current = target !== null && typeof target.getBoundingClientRect === "function" ? target : null;
@@ -1865,9 +2021,9 @@ window.__ModuleLoader__.load({
 			const t = props.t;
 			const cfg = useConfig();
 
-			const [dragId, setDragId] = react.useState(null);
-			const [overId, setOverId] = react.useState(null);
-			const [overAfter, setOverAfter] = react.useState(false);   /* 落点画在目标行的下半区 */
+			/* 自绘拖拽：全程用 pointer 事件自己跟手。不用原生 HTML5 拖拽 ——
+			   原生拖拽会话期间浏览器不给页面 wheel 事件（滚轮失灵），而且只有松手才换位。 */
+			const [drag, setDrag] = react.useState(null);   /* { id, from, to, dy, startY, height, rects } */
 			const [newModel, setNewModel] = react.useState("");
 			const [hostModel, setHostModel] = react.useState(null);
 			const [editing, setEditing] = react.useState(null);
@@ -1878,21 +2034,38 @@ window.__ModuleLoader__.load({
 			const currencyRef = react.useRef(null);
 			const editPopRef = react.useRef(null);
 
-			/* 编辑浮层比卡片本身高，会被设置页的滚动容器裁掉下半截 —— 打开后滚一下，
-			   把它的底边对齐到可视区底部，整块就都看得见了。 */
+			/* 编辑浮层打开后按需滚动：block:"nearest" 只补上被遮住的那一段，
+			   本来就在视野里就一动不动（旧版用 "end" 会平白往上滚，明明下面有地方）。 */
 			react.useEffect(() => {
 				if (editing === null) return;
 				const node = editPopRef.current;
 				if (node === null || node === undefined || typeof node.scrollIntoView !== "function") return;
-				node.scrollIntoView({ block: "end", behavior: "smooth" });
+				node.scrollIntoView({ block: "nearest", behavior: "smooth" });
 			}, [editing]);
 
-			/* 编辑浮层：点别处就收起，草稿一律丢弃 —— 改了一半的数字、新模型里填的空值都不留下 */
+			/* 编辑浮层：点别处收起并丢弃草稿。判断"里面"上三重保险 —— 浮层节点、价格卡节点，
+			   以及鼠标坐标是否落在卡片或币种下拉的矩形内。切币种时点在卡片内的控件上，
+			   无论 DOM 结构怎么变都不该把编辑区收掉。 */
 			react.useEffect(() => {
 				if (editing === null) return undefined;
-				const onDocClick = (event) => {
+				const inside = (event) => {
+					const target = event.target;
+					if (target !== null && target !== undefined && typeof target.closest === "function"
+						&& target.closest(".dsb-model") !== null) return true;
 					const node = editPopRef.current;
-					if (node !== null && node !== undefined && typeof node.contains === "function" && node.contains(event.target)) return;
+					if (node !== null && node !== undefined && typeof node.contains === "function" && node.contains(target)) return true;
+					const x = event.clientX;
+					const y = event.clientY;
+					if (typeof x !== "number" || typeof y !== "number") return false;
+					return [node, currencyRef.current].some((one) => {
+						if (one === null || one === undefined || typeof one.getBoundingClientRect !== "function") return false;
+						const box = one.getBoundingClientRect();
+						return box.width > 0 && box.height > 0
+							&& x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+					});
+				};
+				const onDocClick = (event) => {
+					if (inside(event)) return;
 					cancelEdit();
 				};
 				document.addEventListener("click", onDocClick);
@@ -2027,7 +2200,168 @@ window.__ModuleLoader__.load({
 				.map((id) => byId[id])
 				.filter((segment) => segment !== undefined && segment !== null);
 
-			const contextRow = h("div", { className: "dsb-row", key: "__context" },
+			/* 行节点 + 拖前位置：前者用来量落点，后者给 FLIP 补位移动画 */
+			const rowNodes = react.useRef(new Map());
+			const rowTops = react.useRef(null);
+			/* 拖动是否还活着：pointerup 会被行和 window 各收到一次，靠它兜住重复落盘 */
+			const draggingRef = react.useRef(false);
+			const captureTops = () => {
+				const tops = new Map();
+				rowNodes.current.forEach((node, id) => {
+					if (node !== null && node !== undefined && typeof node.getBoundingClientRect === "function") {
+						tops.set(id, node.getBoundingClientRect().top);
+					}
+				});
+				rowTops.current = tops;
+			};
+
+			const measure = (segmentId) => {
+				const node = rowNodes.current.get(segmentId);
+				return node !== null && node !== undefined && typeof node.getBoundingClientRect === "function"
+					? node.getBoundingClientRect()
+					: null;
+			};
+
+			const startDrag = (id, index, event) => {
+				const at = measure(id);
+				const anchor = measure("__context");
+				draggingRef.current = true;
+				setDrag({
+					id: id, from: index, to: index, at: at,
+					/* 指针在行内的抓取位置：浮层位置和落点都由它推出来，不依赖按下时的绝对坐标 */
+					grab: at === null || at === undefined ? 0 : event.clientY - at.top,
+					cardTop: at === null || at === undefined ? event.clientY : at.top,
+					pointerY: event.clientY,
+					/* 各槽位按下那一刻的真实矩形；滚动多少由锚点差值补回来 */
+					slots: orderedSegments.map((one) => measure(one.id)),
+					anchorTop: anchor === null || anchor === undefined ? 0 : anchor.top,
+					/* base 是按下那一刻的顺序：每次换位都从它重算，不会累积误差 */
+					base: cfg.segments.slice(),
+					order: cfg.segments.slice()
+				});
+			};
+
+			/* 按给定指针位置重算落点。单独抽出来是因为滚轮滚动不产生 pointermove，
+			   滚动时得靠 scroll 事件带着"上一次的指针位置"再算一遍，影子才不会落在后面。 */
+			const applyDrop = (current, pointerY) => {
+				const cardTop = pointerY - current.grab;
+				const height = current.at === null || current.at === undefined ? 0 : current.at.height;
+				/* 锚点每次实时量：中途滚了滚轮，按下时的坐标早就失效了 */
+				const anchor = measure("__context");
+				const shift = anchor === null || anchor === undefined ? 0 : anchor.top - current.anchorTop;
+				const to = dropIndexAt(current.slots, shift, current.from, cardTop, cardTop + height);
+				/* 落点和指针都没动就别重渲染：滚动事件很密，大多数帧其实什么都没变 */
+				if (to === current.to && cardTop === current.cardTop) return;
+				if (to !== current.to) captureTops();   /* 顺序要变了，先记下当前位置 */
+				setDrag({
+					id: current.id, from: current.from, to: to, cardTop: cardTop, pointerY: pointerY,
+					grab: current.grab, at: current.at, slots: current.slots, anchorTop: current.anchorTop,
+					base: current.base,
+					order: moveItem(current.base, current.from, to)
+				});
+			};
+
+			const moveDrag = (event) => {
+				if (drag === null) return;
+				/* 指针已经松开（截屏工具之类把 pointerup 吃掉了）：按取消处理，回原位 */
+				if (event.buttons === 0) {
+					cancelDrag();
+					return;
+				}
+				applyDrop(drag, event.clientY);
+			};
+
+			/* 松手才落盘：拖动全程只在内存里重排，config 一动不动 */
+			const endDrag = () => {
+				if (draggingRef.current !== true || drag === null) return;
+				draggingRef.current = false;
+				if (drag.to !== drag.from) setConfig({ segments: drag.order });
+				setDrag(null);
+			};
+
+			/* 拖动被系统打断（截屏、切窗口、指针事件丢失）：回原位，什么账都不记 */
+			const cancelDrag = () => {
+				if (draggingRef.current !== true) return;
+				draggingRef.current = false;
+				setDrag(null);
+			};
+
+			/* 拖动中的重排没有过渡可言：DOM 顺序一变，行就是瞬移。
+			   这里把移动补回来 —— 变之前记下位置，变之后先反推回原处，再过渡回去。 */
+			useTipLayout(() => {
+				const before = rowTops.current;
+				if (before === null) return;
+				rowTops.current = null;
+				rowNodes.current.forEach((node, id) => {
+					if (node === null || node === undefined || node.style === undefined) return;
+					const was = before.get(id);
+					if (was === undefined) return;
+					const delta = was - node.getBoundingClientRect().top;
+					if (delta === 0) return;
+					node.style.transition = "none";
+					node.style.transform = "translateY(" + delta + "px)";
+					void node.offsetHeight;   /* 强制回流，否则紧接着的过渡不会触发 */
+					node.style.transition = "transform .18s ease";
+					node.style.transform = "";
+				});
+			}, [drag === null ? "" : drag.order.join(",")]);
+
+			/* 指针事件再挂一份到 window 兜底：被拖的那一行在拖动中会重排，指针捕获一旦丢了，
+			   pointerup 就永远收不到，浮层会一直粘着鼠标。挂在 window 上不受重排影响。
+			   顺带在拖动期间禁掉文本选中 —— 长按拖动会把整页文字刷成蓝底。 */
+			const dragMoveRef = react.useRef(null);
+			const dragEndRef = react.useRef(null);
+			const dragCancelRef = react.useRef(null);
+			const dragRef = react.useRef(null);
+			const dragDropRef = react.useRef(null);
+			dragMoveRef.current = moveDrag;
+			dragEndRef.current = endDrag;
+			dragCancelRef.current = cancelDrag;
+			dragRef.current = drag;
+			dragDropRef.current = applyDrop;
+			react.useEffect(() => {
+				if (drag === null) return undefined;
+				const onMove = (event) => { if (dragMoveRef.current !== null) dragMoveRef.current(event); };
+				const onUp = () => { if (dragEndRef.current !== null) dragEndRef.current(); };
+				/* 打断 = 取消（回原位），绝不能当成落点：截屏工具常把 pointerup 整个吃掉 */
+				const onCancel = () => { if (dragCancelRef.current !== null) dragCancelRef.current(); };
+				window.addEventListener("pointermove", onMove);
+				window.addEventListener("pointerup", onUp);
+				window.addEventListener("pointercancel", onCancel);
+				window.addEventListener("blur", onCancel);
+				/* 滚轮滚动不产生 pointermove：不补这一手，影子会落在后面，要再动一下鼠标才跟上 */
+				const onScroll = () => {
+					const current = dragRef.current;
+					if (current !== null && dragDropRef.current !== null) dragDropRef.current(current, current.pointerY);
+				};
+				window.addEventListener("scroll", onScroll, true);
+				const body = document === undefined || document === null ? undefined : document.body;
+				const style = body === undefined || body === null ? undefined : body.style;
+				/* 禁选：长按拖动会把整页文字刷成蓝底；抓手：光标统一，不再忽抓忽指 */
+				const hadSelect = style === undefined ? null : style.userSelect;
+				const hadCursor = style === undefined ? null : style.cursor;
+				if (hadSelect !== null) style.userSelect = "none";
+				if (hadCursor !== null) style.cursor = "grabbing";
+				return () => {
+					window.removeEventListener("pointermove", onMove);
+					window.removeEventListener("pointerup", onUp);
+					window.removeEventListener("pointercancel", onCancel);
+					window.removeEventListener("blur", onCancel);
+					window.removeEventListener("scroll", onScroll, true);
+					if (hadSelect !== null) style.userSelect = hadSelect;
+					if (hadCursor !== null) style.cursor = hadCursor;
+				};
+			}, [drag === null]);
+
+			const contextRow = h("div", {
+				className: "dsb-row",
+				key: "__context",
+				/* 落点靠它算槽位几何：它在栏首、不参与排序、也没有过渡动画，位置最稳 */
+				ref: (node) => {
+					if (node === null || node === undefined) rowNodes.current.delete("__context");
+					else rowNodes.current.set("__context", node);
+				}
+			},
 				h("label", { className: "dsb-check" },
 					h("input", {
 						type: "checkbox",
@@ -2041,75 +2375,74 @@ window.__ModuleLoader__.load({
 				)
 			);
 
-			const segmentRows = orderedSegments.map((segment) => {
+			/* 行内容抽出来：列表里的行和跟手的浮层共用同一份 */
+			const rowParts = (segment, on) => [
+				h("label", { className: "dsb-check", key: "__check" },
+					h("input", {
+						type: "checkbox",
+						checked: on,
+						onChange: (event) => toggleSegment(segment.id, event.target.checked)
+					}),
+					h("span", { className: "dsb-labels" },
+						h("span", { className: "dsb-name" }, t(segment.label)),
+						h("span", { className: "dsb-desc" }, t(segment.hint))
+					)
+				),
+				h("span", {
+					className: on === true ? "dsb-handle" : "dsb-handle dsb-handle-off",
+					title: on === true ? t("dragHint") : "",
+					key: "__handle"
+				})
+			];
+
+			/* 拖动中就地按落点排好：列表里被拖那一格留淡影，跟手的是上面的浮层 */
+			const visibleOrder = drag === null ? cfg.segments : drag.order;
+			const visibleSegments = visibleOrder
+				.map((id) => byId[id])
+				.filter((segment) => segment !== undefined && segment !== null);
+
+			const segmentRows = visibleSegments.map((segment, index) => {
 				const on = isSegmentOn(cfg, segment.id);
-				const classes = ["dsb-row"];
-				if (dragId === segment.id) classes.push("dsb-dragging");
-				if (overId === segment.id && dragId !== segment.id) {
-					classes.push(overAfter === true ? "dsb-over-after" : "dsb-over-before");
-				}
+				const dragged = drag !== null && drag.id === segment.id;
 				return h("div", {
-					className: classes.join(" "),
+					className: dragged === true ? "dsb-row dsb-dragging" : "dsb-row",
 					key: segment.id,
-					draggable: true,   /* 未勾选的段也能调位置 */
-					onDragStart: (event) => {
-						setDragId(segment.id);
-						try {
-							event.dataTransfer.effectAllowed = "move";
-							event.dataTransfer.setData("text/plain", segment.id);
-						} catch (error) { /* 某些环境 dataTransfer 受限 */ }
-					},
-					onDragOver: (event) => {
-						if (dragId === null || dragId === segment.id) return;
-						event.preventDefault();
-						try { event.dataTransfer.dropEffect = "move"; } catch (error) { /* ignore */ }
-						/* 以目标行中线分前后；中线附近 4px 内保持原状态，避免来回闪 */
-						const rect = event.currentTarget.getBoundingClientRect();
-						const middle = rect.top + rect.height / 2;
-						if (Math.abs(event.clientY - middle) < 4) return;
-						const after = event.clientY > middle;
-						if (overId !== segment.id || overAfter !== after) {
-							setOverId(segment.id);
-							setOverAfter(after);
-						}
-					},
-					onDragLeave: () => {
-						if (overId === segment.id) {
-							setOverId(null);
-							setOverAfter(false);
-						}
+					ref: (node) => {
+						if (node === null || node === undefined) rowNodes.current.delete(segment.id);
+						else rowNodes.current.set(segment.id, node);
 					},
-					onDrop: (event) => {
-						event.preventDefault();
-						reorderSegments(dragId, segment.id, overId === segment.id && overAfter === true);
-						setDragId(null);
-						setOverId(null);
-						setOverAfter(false);
+					onPointerDown: (event) => {
+						if (event.button !== 0) return;
+						/* 只有右侧那六个点能抓：整行可抓会跟勾选、选中文字打架 */
+						const target = event.target;
+						if (target === null || target === undefined) return;
+						if (String(target.className === undefined ? "" : target.className).indexOf("dsb-handle") === -1) return;
+						startDrag(segment.id, index, event);
 					},
-					onDragEnd: () => { setDragId(null); setOverId(null); setOverAfter(false); }
-				},
-					h("label", { className: "dsb-check" },
-						h("input", {
-							type: "checkbox",
-							checked: on,
-							onChange: (event) => toggleSegment(segment.id, event.target.checked)
-						}),
-						h("span", { className: "dsb-labels" },
-							h("span", { className: "dsb-name" }, t(segment.label)),
-							h("span", { className: "dsb-desc" }, t(segment.hint))
-						)
-					),
-					h("span", {
-						className: on === true ? "dsb-handle" : "dsb-handle dsb-handle-off",
-						title: on === true ? t("dragHint") : ""
-					})
-				);
+					onPointerMove: dragged === true ? moveDrag : undefined,
+					onPointerUp: dragged === true ? endDrag : undefined,
+					onPointerCancel: dragged === true ? cancelDrag : undefined
+				}, rowParts(segment, on));
 			});
+
+			/* 跟着鼠标的那张卡：位置锁在按下那一行的矩形上，纵向随 dy 走 */
+			const dragCard = drag === null || drag.at === null || drag.at === undefined ? null : h("div", {
+				className: "dsb-drag-card",
+				key: "__dragcard",
+				style: {
+					left: drag.at.left + "px",
+					top: drag.cardTop + "px",
+					width: drag.at.width + "px",
+					height: drag.at.height + "px"
+				}
+			}, rowParts(byId[drag.id], isSegmentOn(cfg, drag.id)));
+
 			sections.push(h("div", { className: "dsb-section", key: "__segments" },
 				h("div", { className: "dsb-sectitle" }, t("secSegments")),
 				h("p", { className: "dsb-hint" }, t("secSegmentsHint")),
 				contextRow,
-				segmentRows
+				segmentRows,
+				dragCard
 			));
 
 			/* 自定义模型价格 */
@@ -2280,7 +2613,9 @@ window.__ModuleLoader__.load({
 						modelOrder: Object.keys(DEFAULT_PRICES)
 					})
 				}, t("reset")),
-				h("div", { className: "dsb-actions", key: "__actions" }, holidayActions)
+				h("div", { className: "dsb-actions", key: "__actions" }, holidayActions),
+				/* 版本标记贴右、与行内底边对齐：改了客户端代码要刷新页面才生效，这行字让"跑的是哪版"一眼可见 */
+				h("span", { className: "dsb-version", key: "__version" }, "dsh-desktop-statusbar " + VERSION)
 			]));
 
 			return h("div", { className: "dsb-settings" }, sections);