dsh-desktop-statusbar 2.2.2 → 3.0.0

package/lib/client.js

@@ -74,7 +74,7 @@ window.__ModuleLoader__.load({
 		 */
 		const CONFIG_VERSION = 6;
 		/** 插件版本：显示在设置页底部，用来确认页面加载的是哪一版客户端代码。 */
-		const VERSION = "2.2.2";
+		const VERSION = "3.0.0";
 		/** 官方参考价的版本：官方调价时改这个数字，老价格库会自动并入新参考价。 */
 		const PRICE_VERSION = 2;
 		/** 项目主页：设置页那个「去 GitHub 点 star」按钮跳这里（与 package.json 的 repository 同址）。 */
@@ -796,6 +796,115 @@ window.__ModuleLoader__.load({
 			return subagentSummary(subagent === null || subagent === undefined ? null : subagent[which]);
 		}
 
+		/**
+		 * host 响应里的 `running`（仍在运行的子会话数）。
+		 * 两段响应都会带同一个数，先取 `turn` 那一段（它与"此刻"最贴近），拿不到再退回 `session` 那段。
+		 *
+		 * 返回 `null` 表示**这次两问都没问出结论**（网络失败 / 非 200 / 形状不对），
+		 * 调用方据此**保留旧值**、不覆盖。这一点是必须的：底栏的时钟靠这个数决定
+		 * "每秒跳"还是"睡到下一个峰谷边界"，一旦把"问不到"当成 0，队友数据与「总计」里
+		 * 队友那笔金额会一路冻结到几小时后 —— 正是用户报过的那个缺陷。
+		 * 反过来，两问里只要有一问给出数字就按数字走：明确的 0 必须能落下去
+		 * （队友真的全部结束时，时钟要能回到省电档），所以不能用"非 0 才更新"的写法。
+		 */
+		function readSubagentRunning(turnPayload, sessionPayload) {
+			const pick = (one) => (one !== null && one !== undefined && typeof one === "object"
+				&& typeof one.running === "number" && Number.isFinite(one.running) && one.running >= 0
+				? Math.floor(one.running)
+				: null);
+			const fromTurn = pick(turnPayload);
+			const fromSession = pick(sessionPayload);
+			if (fromTurn === null && fromSession === null) return null;
+			if (fromTurn !== null && fromTurn > 0) return fromTurn;
+			if (fromSession !== null && fromSession > 0) return fromSession;
+			return 0;
+		}
+
+		/**
+		 * 把「这一次的两问结果」折算成 `subagentRunning` 的**下一个值**。
+		 *
+		 * 就是 stale-while-revalidate：这次问不到（两个 payload 都不成形状）⇒ 原样返回旧值，
+		 * 调用方什么都不用判断。单独抽成纯函数，一是让调用点没有"覆盖还是跳过"的分支可写错，
+		 * 二是这条规则能被离线断言住（与 `nextSubagentState` 同一个套路）。
+		 *
+		 * @param {number} prev 当前显示的队友在跑个数
+		 * @param {object|null} turnPayload 「本轮窗口」那一问的响应
+		 * @param {object|null} sessionPayload 「整会话」那一问的响应
+		 * @returns {number} 下一个值（问不到就是 prev）
+		 */
+		function nextSubagentRunning(prev, turnPayload, sessionPayload) {
+			const next = readSubagentRunning(turnPayload, sessionPayload);
+			return next === null ? prev : next;
+		}
+
+		/**
+		 * host 响应里的**分层**信息：`{ team, deep, teamPercent, deepPercent }`。
+		 *
+		 *   · `team` / `deep` —— 两个层级各自在跑的个数
+		 *       `team` = 在跑的直接后代里**属于团队成员**的个数（Agent Teams 的队员）
+		 *       `deep` = 其余在跑的个数（团队成员下派的孙会话 + 不在团队内的独立子智能体）
+		 *   · `teamPercent` / `deepPercent` —— 那一级里在跑的人的上下文占用：
+		 *       **成员取最大**（多个成员同时跑时，圆环显示占用最多的那个）
+		 *       **更深层取最小**（用户原话：「成员下派的子智能体那一级别……上下文占用要显示最少的那个」）
+		 *     host 算不出来时给 `null`，调用方必须退回 Lead 自己的占用，不能当 0（会把圆环弄空）。
+		 *
+		 * 恒有 `running === team + deep`（host 侧保证），但**这里不拿 running 反推** ——
+		 * 老 host 没有这两个字段时，硬推会把"团队外独立子智能体"误算成成员。
+		 * 计数字段缺失当 0，百分比字段缺失当 null（老 host / 老夹具照常能跑）。
+		 *
+		 * 为什么单独一个函数、不改 `readSubagentRunning` 的返回形状：那个函数被
+		 * `nextSubagentRunning` 用着，而 `nextSubagentRunning` 的 `null=保留旧值 / 0=真落下`
+		 * 语义是修过的真实缺陷（时钟不降档），`tests/verify-subagent-total.js` 逐字段断言它。
+		 * 加字段就得同步改契约和断言，风险不对等 —— 分层只是一份"额外信息"，
+		 * 用同一套"先 turn 段、再 session 段"的取法另算一遍最省事也最安全。
+		 *
+		 * 取值规则与 `readSubagentRunning` 一致：任一段给出合法数就用它（host 两问带同一份数）。
+		 * 计数字段的 0 与"没有该字段"在这里区分得开（后者当 0，语义上等价：都不在跑）；
+		 * 百分比字段则**严格区分 null 与 0** —— 0% 是真实占用，null 是算不出。
+		 */
+		function readSubagentTiers(turnPayload, sessionPayload) {
+			const pickCount = (payload, key) => (payload !== null && payload !== undefined && typeof payload === "object"
+				&& typeof payload[key] === "number" && Number.isFinite(payload[key]) && payload[key] >= 0
+				? Math.floor(payload[key])
+				: null);
+			const pickPercent = (payload, key) => (payload !== null && payload !== undefined && typeof payload === "object"
+				&& typeof payload[key] === "number" && Number.isFinite(payload[key])
+				? Math.max(0, Math.min(100, payload[key]))
+				: null);
+			const countOf = (key) => {
+				const fromTurn = pickCount(turnPayload, key);
+				const fromSession = pickCount(sessionPayload, key);
+				/* 与 readSubagentRunning 的取舍同构：先看 turn 段，它没有（或为 0）再看 session 段 */
+				if (fromTurn !== null && fromTurn > 0) return fromTurn;
+				if (fromSession !== null && fromSession > 0) return fromSession;
+				return 0;
+			};
+			const percentOf = (key) => {
+				/* 百分比用 `!== null` 判，不用 `> 0`：0% 是合法占用，不能被当成"没有"跳过 */
+				const fromTurn = pickPercent(turnPayload, key);
+				if (fromTurn !== null) return fromTurn;
+				return pickPercent(sessionPayload, key);
+			};
+			return {
+				team: countOf("teamRunning"),
+				deep: countOf("deepRunning"),
+				teamPercent: percentOf("teamContextPercent"),
+				deepPercent: percentOf("deepContextPercent")
+			};
+		}
+
+		/**
+		 * host 推出来的**本轮起点**（毫秒）。只从「本轮窗口」那一问的响应里读 ——
+		 * 整会话那一问（`since=0`）返回的起点语义是"最早的那次"，拿它当本轮起点会把
+		 * 整个会话的队友花费都算进本轮（方向正是"偏大"）。
+		 * 非法值（非数字 / 非正 / NaN）一律当 null，调用方据此退回"客户端折叠"或"本轮不并队友"。
+		 */
+		function readTurnStartMs(payload) {
+			if (payload === null || payload === undefined || typeof payload !== "object") return null;
+			const value = payload.turnStartMs;
+			return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : null;
+		}
+
 		/* ------------------------------------------- 「本轮」稳定性（同轮不跳、换轮归零） */
 		/* 底栏每秒问两个窗口（整会话 / 本轮窗口），任一问失败时旧实现会把队友那段当 0，
 		   于是「本轮」在同轮内跳小、下一次成功又跳大（用户实测）。下面两件纯函数负责把它稳住：
@@ -805,6 +914,37 @@ window.__ModuleLoader__.load({
 		/** 空状态：没有会话、没有轮、两段都没有值。 */
 		const SUBAGENT_STATE_EMPTY = { sessionId: null, turnKey: null, sessionPayload: null, turnPayload: null };
 
+		/**
+		 * 分层在跑的初始值：全 0。`all` 初值是 0 而不是 null —— 首帧没有任何结论时
+		 * 底栏本来就该按"没人在跑"渲染（圆环走 idle 的透明弧），等价于旧实现 `useState(0)`。
+		 * 之后每次响应：有结论就覆盖（含 0），没结论才保留旧值（见 nextSubagentTiers）。
+		 */
+		const SUBAGENT_TIERS_EMPTY = { all: 0, team: 0, deep: 0, teamPercent: null, deepPercent: null };
+
+		/**
+		 * 把「这一次的两问结果」折算成分层状态的**下一个值**（纯函数，便于离线断言）。
+		 *
+		 * 三条规则：
+		 *   ① `all` 沿用 `nextSubagentRunning` 的 stale-while-revalidate：
+		 *      这次问不出结论 ⇒ 原样返回 prev.all；明确的 0 ⇒ 落到 0。
+		 *      这条不能变通 —— 它是修过的真实缺陷（问不到当 0 会让时钟降档、数据冻结）。
+		 *   ② 计数与百分比**跟着 `all` 一起更新或一起保留**：不做"计数更新了但百分比留着旧值"
+		 *      这种半更新，否则会出现"蓝色在转、弧长却是上一次某个成员的占用"的错配。
+		 *   ③ 没有结论时连百分比一起保留（`prev` 里那份百分比仍属于上一个已知状态）。
+		 */
+		function nextSubagentTiers(prev, turnPayload, sessionPayload) {
+			const nextAll = readSubagentRunning(turnPayload, sessionPayload);
+			if (nextAll === null) return prev;
+			const tiers = readSubagentTiers(turnPayload, sessionPayload);
+			return {
+				all: nextAll,
+				team: tiers.team,
+				deep: tiers.deep,
+				teamPercent: tiers.teamPercent,
+				deepPercent: tiers.deepPercent
+			};
+		}
+
 		/**
 		 * 队友两段取值的状态机（纯函数，组件只负责调用）。
 		 *
@@ -926,7 +1066,10 @@ window.__ModuleLoader__.load({
 			/* 账本就地更新：调用方持有的是 useRef 里同一个对象，跨渲染靠它留住累计值 */
 			const box = prev !== null ? prev : {
 				sessionId: null, seen: new Map(), cost: 0, tokens: null,
-				priced: false, subCostSettled: 0, debts: new Map()
+				priced: false, subCostSettled: 0, debts: new Map(),
+				/* ① 用的**指纹缓存**（上一拍的 calls 数组 + 它的计数表 + 长度 + 当时的兜底模型）。
+				   挂在账本盒子上而不是模块级变量：盒子是 useRef 里那个对象，组件卸载即回收，不泄漏。 */
+				scanCalls: null, scanCounts: null, scanFirsts: null, scanLen: -1, scanFallback: undefined
 			};
 			/* 换会话（含首次）：整份状态清空。清空后 seen 为空，
 			   下面那段"只结算没见过的调用"自然退化成"结算现有全部调用"，不必另写一套初始化。 */
@@ -1244,6 +1387,10 @@ window.__ModuleLoader__.load({
 			segCost: "会话费用",
 			segLastCost: "本次费用",
 			segBalance: "余额",
+			/* 缺数据段的气泡标题与说明（空态也必须点得开，见 emptySegmentTip）。
+			   `{label}` 换成该段自己的名字，一个键服务九段。 */
+			tipEmptyTitle: "{label}",
+			tipEmptyBody: "该字段当前没有数据。开发模式下点开它会推进到下一组假数据场景，不会停在这一态。",
 			f_peak: "高峰",
 			f_valley: "低谷",
 			f_counts: "{turns} 轮 {steps} 步",
@@ -1266,7 +1413,6 @@ window.__ModuleLoader__.load({
 			tipTopUp: "充值余额",
 			tipGranted: "赠金余额",
 			tipQuotaLeft: "剩余配额",
-			tipSpent: "累计消费",
 			tipHitTurn: "本轮命中率",
 			tipHitHigh: "最高命中率",
 			tipHitLow: "最低命中率",
@@ -1276,6 +1422,9 @@ window.__ModuleLoader__.load({
 			tipCountsToolCalls: "工具调用",
 			/* 手动调用 / 手动压缩那行星号的悬停说明：星号自己 aria-hidden，含义靠这句文字给 */
 			tipManual: "手动触发",
+			/* 子能力（技能的子文档被读取）名字**后面**那个 † 角标的读屏文案。
+			   必须与 tipManual 分开说 —— 让读屏用户也能分清"我手动敲的"与"模型自己去读的子能力"。 */
+			tipSub: "子能力",
 			/* 压缩明细逐条列时的两段：序号用中文序数（第一次 / 第二次），落点用「第X轮Y步」 */
 			tipCompactItem: "第{index}次压缩",
 			tipCompactWhere: "第{turn}轮{step}步",
@@ -1304,7 +1453,7 @@ window.__ModuleLoader__.load({
 			tipCreditsExpire: " · {date} 到期",
 			tipCreditsRefreshLatest: " · {date} 刷新(最近)",
 			tipCreditsExpireLatest: " · {date} 到期(最近)",
-			tipCreditsUsed: "已用 {used} / {total}",
+			tipCreditsLeft: "剩余 {left} / {total}",
 			dragHint: "拖动排序",
 			secSegments: "统计字段",
 			secSegmentsHint: "勾选显示；按住拖动调整顺序。",
@@ -1371,6 +1520,9 @@ window.__ModuleLoader__.load({
 			segCost: "Session cost",
 			segLastCost: "This turn cost",
 			segBalance: "Balance",
+			/* 缺数据段的气泡标题与说明（见中文那份的同名键） */
+			tipEmptyTitle: "{label}",
+			tipEmptyBody: "This field has no data right now. In dev mode, opening it advances to the next fixture scene instead of trapping you here.",
 			f_peak: "Peak",
 			f_valley: "Off-peak",
 			f_counts: "{turns} Turns · {steps} Steps",
@@ -1393,7 +1545,6 @@ window.__ModuleLoader__.load({
 			tipTopUp: "Top-up balance",
 			tipGranted: "Granted balance",
 			tipQuotaLeft: "Quota left",
-			tipSpent: "Total spent",
 			tipHitTurn: "Hit rate this turn",
 			tipHitHigh: "Highest hit rate",
 			tipHitLow: "Lowest hit rate",
@@ -1403,6 +1554,8 @@ window.__ModuleLoader__.load({
 			tipCountsToolCalls: "Tool calls",
 			/* 星号的悬停说明（见中文那份的同名键） */
 			tipManual: "Manually invoked",
+			/* 子能力角标的读屏文案（见中文那份的 tipSub） */
+			tipSub: "Sub-skill",
 			/* 压缩明细逐条列时的两段：英文直接用阿拉伯数字，落点「Turn X·Step Y」 */
 			tipCompactItem: "Compaction {index}",
 			tipCompactWhere: "Turn {turn}·Step {step}",
@@ -1428,7 +1581,7 @@ window.__ModuleLoader__.load({
 			tipCreditsExpire: " · expires {date}",
 			tipCreditsRefreshLatest: " · refreshes {date} (nearest)",
 			tipCreditsExpireLatest: " · expires {date} (nearest)",
-			tipCreditsUsed: "Used {used} / {total}",
+			tipCreditsLeft: "{left} / {total} left",
 			dragHint: "Drag to reorder",
 			secSegments: "Stats fields",
 			secSegmentsHint: "Select to show; drag to reorder.",
@@ -1995,10 +2148,17 @@ window.__ModuleLoader__.load({
 		/**
 		 * 状态位上的圆环：起点与官方一致在 12 点方向，进度是占用比例，颜色跟随运行状态。
 		 * 轨道在压缩点处挖一个圆头缺口；算不出压缩点时轨道保持整圈。
+		 *
+		 * 六种状态：`running` 绿（Lead 在跑）/ `teamRunning` 蓝（团队成员在跑）/
+		 * `deepRunning` 紫（只有更深层在跑）/ `error` / `approval` / 无类（idle）。
+		 * 蓝紫两色复用总计令牌条已有的「输出」蓝与「未命中输入」紫，不新造颜色。
+		 * 旋转是 CSS animation（见样式表），不占 JS 定时器。
 		 */
 		function contextRing(percent, state, compact) {
 			const stateClass = state === "running" ? " dsb-ring-running"
-				: (state === "error" ? " dsb-ring-error" : (state === "approval" ? " dsb-ring-approval" : ""));
+				: (state === "teamRunning" ? " dsb-ring-team"
+					: (state === "deepRunning" ? " dsb-ring-deep"
+						: (state === "error" ? " dsb-ring-error" : (state === "approval" ? " dsb-ring-approval" : ""))));
 			const offset = METER_CIRCUMFERENCE * (1 - Math.max(0, Math.min(100, percent)) / 100);
 			const dashes = notchDashes(compact);
 			return h("svg", {
@@ -2024,6 +2184,37 @@ window.__ModuleLoader__.load({
 		    可见边缘比 border-box 再往外这么多，左右对齐时要补掉，否则看得见的边还差半像素。 */
 		const TIP_OUTLINE_PX = 0.5;
 
+		/**
+		 * 圆环的弧长取哪一个百分比（纯函数，便于离线断言）。
+		 *
+		 * 用户原话：「那个条还是有上下文占用的百分比的，要增长的。所以如果有多个成员同时在
+		 * 运行，那么这个圆圈应该显示为同一级内上下文占用最多的那一个。成员下派的子智能体
+		 * 那一级别（也就是该显示紫色的那一部分），上下文占用要显示最少的那个。」
+		 *
+		 * 也就是**颜色与弧长是两件独立的事**：
+		 *   · 颜色 = 谁在跑（Lead 绿 / 成员蓝 / 更深紫）
+		 *   · 弧长 = 那一级里在跑的人们的占用，成员取**最大**、更深层取**最小**
+		 *     （"最大 / 最小"由 host 在那一级内部先聚合好 —— 只有它看得到每个子会话的占用；
+		 *      客户端不重复聚合，避免两处口径打架）
+		 *
+		 * 其余四种状态（running / error / approval / idle）一律用 Lead 自己的 `contextMeter.percent`。
+		 * 分层百分比是 `null`（老 host / 那一刻算不出）时**退回** `contextMeter.percent`：
+		 * 显示 0 会让圆环突然空掉，用户只会以为插件坏了。非数字 / NaN 同样退回。
+		 */
+		function ringPercentOf(contextMeter, agentState, tiers) {
+			const own = contextMeter === null || contextMeter === undefined || typeof contextMeter.percent !== "number"
+				|| !Number.isFinite(contextMeter.percent)
+				? 0
+				: contextMeter.percent;
+			const layered = agentState === "teamRunning"
+				? (tiers === null || tiers === undefined ? null : tiers.teamPercent)
+				: (agentState === "deepRunning"
+					? (tiers === null || tiers === undefined ? null : tiers.deepPercent)
+					: null);
+			if (typeof layered !== "number" || !Number.isFinite(layered)) return own;
+			return Math.max(0, Math.min(100, layered));
+		}
+
 		/** 气泡的 fixed 内联位置：JS 已按视口与底栏范围夹住；pos 为空时不写。
 		    宽度交给内容（CSS width:max-content），但比底栏还宽时按底栏跨度压住，多出的列自己折行。 */
 		function panelStyle(pos) {
@@ -2044,8 +2235,19 @@ window.__ModuleLoader__.load({
 		/**
 		 * 气泡定位诊断回传：把这次算出的基准与结果发给 host 落盘（只含数字与短字符串），
 		 * 便于在打不开控制台的环境里核对气泡为什么越界。任何失败都静默，不影响气泡本身。
+		 *
+		 * **开发模式一律不发**：那时气泡里的数字全是假的（假投影算出来的假坐标），
+		 * 诊断日志只会污染 host 的 tip-diag.log，而且用户对开发模式的要求是
+		 * 「所有数据都是伪造的，不许发任何真实请求」。
+		 *
+		 * 守的是**模块级 `devMode`** 而不是组件里的 `devActive`：两者同一份真相
+		 * （`publishDev` 读的就是 devMode），但这里是模块级函数、调用点在 StatusBar 的
+		 * layout effect 里，加参数会多一条「谁都得记得传」的隐式约定；而 devMode 与
+		 * reportTipDiag 本来就同处一个闭包，直接读它零参数、零同步风险，且比
+		 * useSyncExternalStore 的快照更早生效（进入开发模式的那一帧就不会漏发）。
 		 */
 		function reportTipDiag(payload) {
+			if (devMode === true) return;
 			try {
 				window.fetch(TIP_DIAG_URL, {
 					method: "POST",
@@ -2170,9 +2372,24 @@ window.__ModuleLoader__.load({
 		/**
 		 * 积分套餐面板（WorkBuddy）：标题 + 总积分，下面每个套餐一个块：
 		 * 第一行 = 包名/备注 + 「已用 X / 总数」；第二行 = 一条进度。
-		 * 进度方向：**已用从左侧起**（剩余在右）—— 两段实现：前段灰（已用宽 = percent，
-		 * 颜色同「充值余额」图例 BALANCE_COLORS.topUp）、后段透明（剩余宽 = 100 - percent，露出轨道底色）。
-		 * `.dsb-bar` 始终渲染：percent=0 时只有空轨道、没有填充段（与已用套餐视觉一致）。
+		 *
+		 * **进度条语义（与余额的「剩余配额」条完全一致，改一处必须同步另一处）**：
+		 *   **灰 = 还剩多少，从左端起；透明 = 已用，在右。**
+		 *   `segments` 恒为「灰(剩余%) + 透明(已用%)」，按顺序拼 —— flex 从左往右排，
+		 *   所以灰在前自然贴着最左端、透明落在右边。
+		 *   边界：used=0 → 只有灰 100%（额度一点没用）；used>=100 → 只有透明 100%
+		 *   （用完了，露出轨道底色，不画灰）。两段都用 `width: %`，宽度由浏览器按比例切。
+		 *
+		 * 为什么灰是「剩余」而不是「已用」：这套面板里灰（BALANCE_COLORS.topUp）一直是
+		 * 「账户里还剩多少钱」的固定色 —— 余额气泡的充值段、余额配额条的剩余段都用它。
+		 * 进度条如果反过来用灰表示"已用"，同一个颜色在相邻两个气泡里含义相反，最容易读错。
+		 * 为什么从**左**端起（用户拍板，来回改过一次，这里记下来免得再翻烧饼）：
+		 *   灰条长度 = 剩余额度，越长剩得越多；从左读起，「还剩多少」一眼就看到，
+		 *   不用先扫过一段空的已用区。用户原话：「灰条从左边起」。
+		 * 「已用 X / 总数」这行文字保持不变，所以条的方向不影响读数：字在上、条在下，
+		 * 条只承担"视觉比例"。
+		 *
+		 * `.dsb-bar` 始终渲染：used=0 时是整条灰（仍有填充），used=100 时只有空轨道。
 		 * **聚合行（×N）可点**：点进去是子视图 —— 内容与主面板同一套套餐块（一行 + 一条进度），
 		 * 只是每个块代表该组合并前的一个原始包（自己的名字/日期备注、真实已用/总数），竖排单列可滚动；
 		 * 标题只显示聚合的显示名（不带 ×N），右侧不再重复总积分。点标题返回。
@@ -2186,21 +2403,21 @@ window.__ModuleLoader__.load({
 			   主列表与下钻子视图共用这一份，别各写一遍。 */
 			const barOf = (one, key) => {
 				const used = Math.max(0, Math.min(100, one.percent));
-				/* 已用在左（灰段）、剩余在右（透明段）；100% 只画整条灰；0% 只有空轨道 */
+				/* **灰 = 剩余、从左起；透明 = 已用、在右**（与余额配额条同一套语义）。
+				   用户拍板原话：「灰条从左边起」—— 灰条越长表示剩得越多，从左边读起，
+				   和「还剩多少」这个问题的直觉一致。
+				   只推「宽 > 0」的段，所以 used=0 只剩左边的灰 100%、used=100 只剩透明 100%。 */
 				const segments = [];
-				if (used >= 100) {
-					segments.push(h("span", {
-						className: "dsb-bar-seg", key: key + "a",
-						style: { width: "100%", backgroundColor: BALANCE_COLORS.topUp }
-					}));
-				} else if (used > 0) {
+				if (used < 100) {
 					segments.push(h("span", {
 						className: "dsb-bar-seg", key: key + "a",
-						style: { width: used + "%", backgroundColor: BALANCE_COLORS.topUp }
+						style: { width: (100 - used) + "%", backgroundColor: BALANCE_COLORS.topUp }
 					}));
+				}
+				if (used > 0) {
 					segments.push(h("span", {
 						className: "dsb-bar-seg", key: key + "b",
-						style: { width: (100 - used) + "%", backgroundColor: "transparent" }
+						style: { width: used + "%", backgroundColor: "transparent" }
 					}));
 				}
 				return h("span", { className: "dsb-bar", key: key + "bar" }, segments);
@@ -2272,11 +2489,11 @@ window.__ModuleLoader__.load({
 		};
 
 		/* 余额构成的两色：充值取灰（同「系统提示词」图例）、赠金取紫（同「工具定义」图例）。
-		   百分比配额（GLM 那种）只有「剩余」那段上色，取蓝（原赠金那一档）。 */
+		   百分比配额（GLM 那种）只有「剩余」那段上色：取灰（充值那一档）、贴右端 ——
+		   "剩余"在语义上就是这个套餐里还没花掉的部分，和充值余额同属"可用"色系。 */
 		const BALANCE_COLORS = {
 			topUp: "var(--dsw-static-neutral-bluish-400)",
-			granted: "#a78bfa",
-			left: "var(--dsw-static-blue-450)"
+			granted: "#a78bfa"
 		};
 
 		/* 运行用时面板的三色：等待用时取灰（同「系统提示词」图例）、模型用时(解码)取紫、工具调用取蓝 */
@@ -2415,11 +2632,73 @@ window.__ModuleLoader__.load({
 			return textWidth <= available;
 		}
 
+		/**
+		 * 活跃总览里的消费金额文案：**按币种各算各的，不做汇率折算**。
+		 *
+		 * 用户原话：「各自算各自，不再换算成统一币种，就比如说我美元模型用了 7.77。
+		 * 人民币模型用了 145.66。那显示就应该显示 ¥145.66+$7.77」，
+		 * 以及「但是如果其中有一项为 0，也就是没产生费用，就不用显示这个 +」。
+		 *
+		 * 规则（顺序即优先级，全是用户拍板的）：
+		 *   · **人民币在前、美元在后**，用 `+` 连接 → `¥145.66+$7.77`
+		 *   · 每项 `toFixed(2)`；负数与 NaN 一律当 0（金额是浮点累加出来的，会有 -0.0000001 这种噪声）
+		 *   · **某项 ≤ 0 就不出现** —— 所以只有美元时是 `$7.77`，不会出现 `¥0.00+$7.77`
+		 *   · **只有一项时不带 `+`**（`¥145.66` 而不是 `¥145.66+`）
+		 *   · 两项都 ≤ 0 ⇒ `¥0.00`（这一行必须有内容，不能空）
+		 *   · `byCurrency` 是空对象 / undefined / 不是对象 ⇒ **退回旧的 fallbackCost 逻辑**
+		 *     （`¥` + 那个混合数）：老 host 还没有这个字段，行为必须与改动前一模一样
+		 *
+		 * @param {object|undefined} byCurrency `{ CNY?: number, USD?: number }`（host 按币种分好桶）
+		 * @param {number} fallbackCost 老的混合金额（byCurrency 拿不到时用它）
+		 * @param {function} t 取文案
+		 */
+		function costByCurrencyText(byCurrency, fallbackCost, t) {
+			/* **金额不足 0.01 就不显示**（用户原话：「只要金额不足 0.01，就直接不显示。」）。
+			   以前是「≤ 0 才不显示」，于是 0.002 会被 toFixed(2) 显示成 `$0.00` —— 一个
+			   "有这笔钱但看起来是零"的假零，用户明确不要。
+			   判据用 `Math.round(amount * 100) >= 1`，等价于「四舍五入到分后不是 0.00」：
+			     · 0.005 ⇒ round(0.5)=1 ⇒ **显示 `¥0.01`**（正好半分，进位）
+			     · 0.004 ⇒ round(0.4)=0 ⇒ 过滤掉
+			   负数与 NaN 仍按 0 处理（现状不变）；只认 CNY / USD 两个键（现状不变）。 */
+			const showable = (value) => {
+				const amount = Number.isFinite(value) && value > 0 ? value : 0;
+				return amount > 0 && Math.round(amount * 100) >= 1
+					? amount
+					: 0;
+			};
+			const parts = [];
+			const hasMap = byCurrency !== null && byCurrency !== undefined && typeof byCurrency === "object";
+			if (hasMap === true) {
+				/* 固定顺序 CNY → USD：用户要的就是「人民币在前、美元在后」 */
+				["CNY", "USD"].forEach((code) => {
+					const amount = showable(Number(byCurrency[code]));
+					if (amount > 0) parts.push({ code: code, amount: amount });
+				});
+				/* 有 map 但里面一项都不过滤门槛时，分两种情况：
+				   · **有 CNY/USD 键**（宿主算过、结果就是零，或都 < 0.005）⇒ `¥0.00`。
+				     这一行必须有内容，不能返回空串。
+				   · **完全空对象**（老 host 没有分币种数据）⇒ 走下面的 fallback，
+				     用混合 cost 兜底 —— 这是改动前就有的行为，不能因为新规则把它改掉。 */
+				const hasAnyKey = byCurrency.CNY !== undefined || byCurrency.USD !== undefined;
+				if (parts.length === 0 && hasAnyKey === true) return currencySymbol("CNY") + "0.00";
+			}
+			if (parts.length === 0) {
+				/* 老数据兜底：宿主根本没给 byCurrency（不是"给了但是零"）。
+				   同样按新规则过滤：不足 0.01 显示 ¥0.00。 */
+				const fallback = showable(Number(fallbackCost));
+				return currencySymbol("CNY") + fallback.toFixed(2);
+			}
+			return parts.map((one) => currencySymbol(one.code) + one.amount.toFixed(2)).join("+");
+		}
+
 		/**
 		 * 悬停浮层的内容：日期（或周区间）+ 三项总计 → 命中/未命中/输出三行 → API 请求次数 → 消费金额。
 		 * 六行全部走「名称左、数值右」的双边对齐；数量精确到个位并带千分位，不做缩写。
+		 *
+		 * `byCurrency` 是 host 按币种分好的金额（`{CNY, USD}`）；拿不到时退回 `cost` 那个混合数。
+		 * 参数顺序：`byCurrency` 紧跟 `cost` 之后、`t` 之前（`t` 始终是最后一个，与文件其它函数一致）。
 		 */
-		function hoverPanelRows(label, bucket, calls, cost, t) {
+		function hoverPanelRows(label, bucket, calls, cost, byCurrency, t) {
 			const hit = Number(bucket.cacheRead) || 0;
 			const miss = (Number(bucket.input) || 0) + (Number(bucket.cacheWrite) || 0);
 			const out = Number(bucket.output) || 0;
@@ -2429,7 +2708,7 @@ window.__ModuleLoader__.load({
 				hoverRow("__h2", t("f_tokensMiss"), formatTokensExact(miss)),
 				hoverRow("__h3", t("f_tokensOut"), formatTokensExact(out)),
 				hoverRow("__h4", t("hoverCalls"), formatTokensExact(calls)),
-				hoverRow("__h5", t("hoverCost"), currencySymbol("CNY") + (Number(cost) || 0).toFixed(2))
+				hoverRow("__h5", t("hoverCost"), costByCurrencyText(byCurrency, cost, t))
 			]);
 		}
 
@@ -2443,11 +2722,18 @@ window.__ModuleLoader__.load({
 			};
 		}
 
-		/** 把若干天并成一个桶（周条用）。 */
+		/**
+		 * 把若干天并成一个桶（周条 / 全年汇总用）。
+		 *
+		 * 除了老的混合 `cost`（保持不动，老逻辑还读它），还按币种各累各的 `byCurrency`：
+		 * 用户要求活跃总览「各自算各自、不折算」，所以周汇总不能只给一个混合数。
+		 * **只写正数键**：某币种那天没有费用就不建键，让数据本身干净（显示层也会再过滤一遍）。
+		 */
 		function sumDays(days) {
 			const total = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0 };
 			let calls = 0;
 			let cost = 0;
+			const byCurrency = {};
 			for (const day of days) {
 				if (day === null || day === undefined) continue;
 				const one = bucketOf(day);
@@ -2457,8 +2743,61 @@ window.__ModuleLoader__.load({
 				total.output += one.output;
 				calls += Number(day.calls) || 0;
 				cost += Number(day.cost) || 0;
+				/* 按币种累加（老 host 没有这个字段 ⇒ 跳过，只靠 cost 走旧显示） */
+				const map = day.costByCurrency;
+				if (map !== null && map !== undefined && typeof map === "object") {
+					Object.keys(map).forEach((code) => {
+						const amount = Number(map[code]);
+						if (Number.isFinite(amount) && amount > 0) {
+							byCurrency[code] = (byCurrency[code] || 0) + amount;
+						}
+					});
+				}
 			}
-			return { bucket: total, calls: calls, cost: cost };
+			return { bucket: total, calls: calls, cost: cost, byCurrency: byCurrency };
+		}
+
+		/**
+		 * 把一笔混合金额按「形态」拆成 `costByCurrency`（分币种各算各的假数据）。
+		 *
+		 * 用户这一轮要的两个新功能都要在开发模式里能被点到，所以活跃总览的每个日桶/月桶
+		 * 必须带上 `costByCurrency`，而且要**三种形态都有**，否则「某项为 0 就不显示 +」
+		 * 这条规则根本验证不到：
+		 *   · `"mixed"` —— 人民币 + 美元都有（悬停显示 `¥x+$y`）
+		 *   · `"cny"`   —— 只有人民币（悬停显示 `¥x`，不带 +）
+		 *   · `"usd"`   —— 只有美元（悬停显示 `$y`，不带 +，也不出现 ¥0.00）
+		 *
+		 * **`costByCurrency` 各项之和必须严格等于 `cost`**（这条是硬约束）：
+		 * 两个数对不上，用户一眼就看出是假数据。所以这里用"先按比例切、再把差额补给 CNY"
+		 * 的写法，保证分币种相加与混合值完全一致（浮点误差用四舍五入收到 4 位，
+		 * 差额直接补在人民币上 —— 它总是存在的那一项）。
+		 *
+		 * @param {number} cost 混合金额（已是四舍五入后的值）
+		 * @param {string} shape "mixed" / "cny" / "usd"
+		 * @param {number} ratio 混币时美元那一小份的占比（0~1），默认 0.18
+		 */
+		function devCostSplit(cost, shape, ratio) {
+			const sum = typeof cost === "number" && Number.isFinite(cost) && cost > 0 ? cost : 0;
+			if (sum <= 0) return {};
+			if (shape === "usd") return { USD: sum };
+			if (shape === "cny") return { CNY: sum };
+			/* 混币：按比例切，**差额补给人民币**，保证两块相加 === sum */
+			const share = typeof ratio === "number" && Number.isFinite(ratio) && ratio > 0 && ratio < 1 ? ratio : 0.18;
+			const usd = Math.round(sum * share * 10000) / 10000;
+			const cny = Math.round((sum - usd) * 10000) / 10000;
+			return { CNY: cny, USD: usd };
+		}
+
+		/**
+		 * 按天的序号挑一种形态：让同一个 fixture 里**三种形态都出现**，
+		 * 这样用户在活跃总览里逐天悬停就能看全三种写法。
+		 * 序号对 3 取模 —— 稳定（同一个 index 永远同一种形态，不随重渲染乱跳）。
+		 */
+		function devCostShapeAt(index) {
+			const rest = ((index % 3) + 3) % 3;
+			if (rest === 0) return "mixed";
+			if (rest === 1) return "cny";
+			return "usd";
 		}
 
 		/**
@@ -2486,7 +2825,7 @@ window.__ModuleLoader__.load({
 				   覆盖底板左右两端"露出来"的边，以及跨月天留下的空位格；方块自己报当天，不走这里。 */
 				const edgeHandlers = {
 					onMouseEnter: (event) => onHover(event, hasData
-						? { rows: hoverPanelRows(label, weekSum.bucket, weekSum.calls, weekSum.cost, t), week: wi }
+						? { rows: hoverPanelRows(label, weekSum.bucket, weekSum.calls, weekSum.cost, weekSum.byCurrency, t), week: wi }
 						: { week: wi }),
 					onMouseLeave: () => onHover(null)
 				};
@@ -2511,7 +2850,7 @@ window.__ModuleLoader__.load({
 						key: "__hc" + day.date,
 						/* 没有用量的天不弹浮层 */
 						onMouseEnter: total > 0
-							? (event) => onHover(event, { rows: hoverPanelRows(day.date.slice(5), bucketOf(day), Number(day.calls) || 0, Number(day.cost) || 0, t) })
+							? (event) => onHover(event, { rows: hoverPanelRows(day.date.slice(5), bucketOf(day), Number(day.calls) || 0, Number(day.cost) || 0, day.costByCurrency, t) })
 							: undefined,
 						onMouseLeave: total > 0 ? () => onHover(null) : undefined
 					});
@@ -2554,7 +2893,7 @@ window.__ModuleLoader__.load({
 					className: "dsb-year-cell " + cls,
 					key: "__yc" + month,
 					onMouseEnter: total > 0
-						? (event) => onHover(event, { rows: hoverPanelRows(label, bucketOf(one), Number(one.calls) || 0, Number(one.cost) || 0, t) })
+						? (event) => onHover(event, { rows: hoverPanelRows(label, bucketOf(one), Number(one.calls) || 0, Number(one.cost) || 0, one.costByCurrency, t) })
 						: undefined,
 					onMouseLeave: total > 0 ? () => onHover(null) : undefined
 				});
@@ -2563,6 +2902,9 @@ window.__ModuleLoader__.load({
 			const totals = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0 };
 			let calls = 0;
 			let cost = 0;
+			/* 各月的分币种金额也一起累加（用户要求活跃总览「各自算各自」）；
+			   老数据没有这个字段就跳过，只靠 cost 走旧显示。 */
+			const yearByCurrency = {};
 			for (const one of year.months) {
 				totals.input += Number(one.input) || 0;
 				totals.cacheRead += Number(one.cacheRead) || 0;
@@ -2570,13 +2912,22 @@ window.__ModuleLoader__.load({
 				totals.output += Number(one.output) || 0;
 				calls += Number(one.calls) || 0;
 				cost += Number(one.cost) || 0;
+				const map = one.costByCurrency;
+				if (map !== null && map !== undefined && typeof map === "object") {
+					Object.keys(map).forEach((code) => {
+						const amount = Number(map[code]);
+						if (Number.isFinite(amount) && amount > 0) {
+							yearByCurrency[code] = (yearByCurrency[code] || 0) + amount;
+						}
+					});
+				}
 			}
 			const hasYear = totals.input + totals.cacheRead + totals.cacheWrite + totals.output > 0;
 			const allCell = h("span", {
 				className: "dsb-year-cell dsb-year-all",
 				key: "__yall",
 				onMouseEnter: hasYear
-					? (event) => onHover(event, { rows: hoverPanelRows(String(year.year) + " " + t("hoverYearAll"), totals, calls, cost, t) })
+					? (event) => onHover(event, { rows: hoverPanelRows(String(year.year) + " " + t("hoverYearAll"), totals, calls, cost, yearByCurrency, t) })
 					: undefined,
 				onMouseLeave: hasYear ? () => onHover(null) : undefined
 			});
@@ -2625,7 +2976,7 @@ window.__ModuleLoader__.load({
 					/* 悬停整列都让判定区变灰 —— 没有用量的天也一样；浮层只在有用量时弹 */
 					onMouseEnter: (event) => onHover(event, total > 0
 						? {
-							rows: hoverPanelRows(day.date.slice(5), bucketOf(day), Number(day.calls) || 0, Number(day.cost) || 0, t),
+							rows: hoverPanelRows(day.date.slice(5), bucketOf(day), Number(day.calls) || 0, Number(day.cost) || 0, day.costByCurrency, t),
 							bar: index
 						}
 						: { bar: index }),
@@ -2706,6 +3057,354 @@ window.__ModuleLoader__.load({
 			return current < LIST_ROWS_PER_COLUMN_MAX ? current + 1 : current;
 		}
 
+		/**
+		 * 滚轮 → 横向滚动：工具调用那个列网格**只能靠鼠标滚轮**横移。
+		 *
+		 * 用户拍板两条（实机反馈，原话「我用的是键盘上的方向键，而不是触控板。我要求的就是
+		 * 它只能由鼠标滚轮滑动」）：
+		 *   ① 纵向滚轮deltaY 转成 scrollLeft —— 否则鼠标在气泡上滚滚轮只会带动整页；
+		 *   ② 键盘方向键**一律不滚**（见 dsbBlockKeyScroll），原生的方向键/PageUp/Home 滚动
+		 *      在 `overflow:auto` 的元素被点过之后就会生效，必须主动拦。
+		 *
+		 * `deltaMode` 三种（WheelEvent.DOM_DELTA_*）：
+		 *   0 = 像素（触控板、大多数浏览器）→ 直接当像素用；
+		 *   1 = 行（Firefox 鼠标滚轮常见）→ 乘 `WHEEL_LINE_HEIGHT`（一行≈列表行高 22px）；
+		 *   2 = 页 → 乘容器可视高度（一次滚一屏，符合"翻页"的直觉）。
+		 * 不这么换算的话：行模式下 deltaY 通常只有 3，直接当像素滚 3px，用户会觉得"滚了没反应"。
+		 *
+		 * 只在**真的能横移**时才 preventDefault：没有溢出（或已经滚到边界）时把事件放过去，
+		 * 否则用户滚轮停在气泡上会把整页钉住，反而是新的"滚不动"。
+		 *
+		 * **逐帧惯性（momentum）**：用户第二轮反馈原话「工具调用的滚动还是不够丝滑。我想要的是
+		 * 那种滑动的惯性的动效」。旧实现把 delta 直接累加到 scrollLeft（rAF 只是合并写入），
+		 * 松手即停、一步到位，所以手感是"跳"而不是"滑"。
+		 * 现在换成速度模型：每个容器存 `{ pos, velocity }`，滚轮只**给 velocity 加增量**，
+		 * 之后每帧 `velocity *= WHEEL_FRICTION`、`pos += velocity` —— 一次自然减速的滑行。
+		 *
+		 * 为什么用 rAF 而不是定时器：① rAF 与屏幕刷新同步，帧率变化时滑行距离不变；
+		 * ② rAF 不是定时器，不占 `setInterval` 计数（底栏只允许时钟 + 余额轮询两处）；
+		 * ③ 速度衰减到阈值以下就**不再排下一帧**，空闲期一次回调都没有，不会空转。
+		 * preventDefault 仍然**当场**调（不能延后：延后的话浏览器可能已经开始滚页面了）。
+		 *
+		 * 注意每帧写完要**顺手刷一次渐隐**（`applyColsFade`）：程序性改 scrollLeft 在部分浏览器
+		 * 里不触发 scroll 事件，不主动刷的话滚到尽头渐隐会一直留着。
+		 */
+		const WHEEL_LINE_HEIGHT = 22;
+		/**
+		 * 每帧速度乘这个系数（阻尼）。0.8 是用户实机滚过之后定的：0.92 滑得太久（约 0.7 秒），
+		 * 停手以后内容还在飘，手感发黏。0.8 大约 0.25 秒收住，一推就走、松手即停。
+		 * 调小 → 停得更快更"实"；调大（别过 0.97）→ 更飘更远。
+		 */
+		const WHEEL_FRICTION = 0.8;
+		/**
+		 * 滚轮 delta（像素）→ 初速度（px/帧）的折算系数。
+		 * 取 (1 - friction) / friction：一次手势的总位移正好约等于原始 delta
+		 * （等比级数 Σ v0·f^k = v0/(1-f)），所以「滚一格走多远」与改造前一致，
+		 * 变的只是尾巴上的减速曲线 —— 用户不会觉得滚轮突然变快或变慢。
+		 */
+		const WHEEL_VELOCITY_GAIN = (1 - WHEEL_FRICTION) / WHEEL_FRICTION;
+		/** 速度低于此值（px/帧）就归零收手：再走肉眼已看不出来，白烧一帧。 */
+		const WHEEL_STOP_VELOCITY = 0.1;
+		/** 速度上限（px/帧）：连发事件或触控板可能给出很大的 delta，不封顶会一帧跳出半屏。 */
+		const WHEEL_MAX_VELOCITY = 60;
+		/** 每个容器当前的滑行状态 `{ pos, velocity }`（WeakMap：节点被回收就自动释放）。 */
+		const wheelMotion = new WeakMap();
+		/** 每个容器已排的 rAF id（同一节点同时只排一帧，绝不叠加）。 */
+		const wheelFrame = new WeakMap();
+
+		/** 可横移的最大距离；拿不到几何（测试替身 / 面板未挂载）时按 0 处理。 */
+		function wheelMaxScroll(node) {
+			const scrollWidth = typeof node.scrollWidth === "number" ? node.scrollWidth : 0;
+			const clientWidth = typeof node.clientWidth === "number" ? node.clientWidth : 0;
+			const maxScroll = scrollWidth - clientWidth;
+			return maxScroll > 0 ? maxScroll : 0;
+		}
+
+		/** 推进一帧。返回 true = 还要接着滑，false = 收手（调用方据此清状态、不再排帧）。 */
+		function stepWheelMotion(node) {
+			const motion = wheelMotion.get(node);
+			if (motion === undefined) return false;
+			/* 节点已被 React 卸载：继续算只是烧 CPU；顺带这也是"容器销毁不泄漏"的出口
+			   （WeakMap 本身不阻止回收，但排着的 rAF 会把节点多捂一帧） */
+			if (typeof node.isConnected === "boolean" && node.isConnected === false) return false;
+			const maxScroll = wheelMaxScroll(node);
+			motion.velocity *= WHEEL_FRICTION;
+			if (Math.abs(motion.velocity) < WHEEL_STOP_VELOCITY) {
+				motion.velocity = 0;
+				return false;
+			}
+			const raw = motion.pos + motion.velocity;
+			const next = Math.max(0, Math.min(maxScroll, raw));
+			/* 撞到两端就把速度归零：用户没要回弹，回弹会让"到底了"这个信号变模糊 */
+			const hitEdge = next !== raw;
+			if (hitEdge === true) motion.velocity = 0;
+			motion.pos = next;
+			if (typeof node.scrollLeft === "number") node.scrollLeft = next;
+			applyColsFade(node);
+			return hitEdge !== true;
+		}
+
+		/** 排下一帧；已有排队的就什么都不做（同一节点同时只有一帧在路上）。 */
+		function scheduleWheelMotion(node) {
+			if (wheelFrame.has(node) === true) return;
+			const schedule = typeof window !== "undefined" && window !== null && typeof window.requestAnimationFrame === "function"
+				? window.requestAnimationFrame
+				: null;
+			/* 没有 rAF（测试替身 / 极老环境）：由调用方同步退化，这里不排队 */
+			if (schedule === null) return;
+			const frame = schedule(() => {
+				wheelFrame.delete(node);
+				if (stepWheelMotion(node) === true) {
+					scheduleWheelMotion(node);
+					return;
+				}
+				/* 收手时清掉状态：下次滚轮从真实 scrollLeft 重新取基准，不拿过期的 pos 起跳 */
+				wheelMotion.delete(node);
+			});
+			/* rAF 替身可能是**同步**执行的（有的测试就是这么桩的），那样上面这段已经跑到收手、
+			   状态也清了；此时不能再把 id 记回去 —— 否则 wheelFrame 里留下"已排一帧"的假标记，
+			   之后的滚轮永远排不上帧。 */
+			if (wheelMotion.has(node) === true && wheelFrame.has(node) !== true) wheelFrame.set(node, frame);
+		}
+
+		function wheelToHorizontalScroll(event) {
+			const node = event === null || event === undefined ? null : event.currentTarget;
+			if (node === null || node === undefined) return;
+			const maxScroll = wheelMaxScroll(node);
+			/* 没溢出（含 1px 取整误差）：交回给页面，别把滚轮吃掉 */
+			if (maxScroll <= 1) return;
+			/* Shift + 滚轮很多浏览器已经把 deltaY 换成 deltaX 了，两个都算上 */
+			const rawY = Number(event.deltaY) || 0;
+			const rawX = Number(event.deltaX) || 0;
+			const mode = Number(event.deltaMode) || 0;
+			const perUnit = mode === 1
+				? WHEEL_LINE_HEIGHT
+				: (mode === 2 ? (typeof node.clientHeight === "number" && node.clientHeight > 0 ? node.clientHeight : WHEEL_LINE_HEIGHT) : 1);
+			const delta = (Math.abs(rawY) >= Math.abs(rawX) ? rawY : rawX) * perUnit;
+			if (delta === 0) return;
+			/* 位置基准：滑行中就用我们自己推进的 pos（那才是屏幕上此刻的位置），
+			   空闲时以真实 scrollLeft 为准 —— 用户拖过滚动条、或内容重排过，
+			   都不会从过期位置起跳。 */
+			const inFlight = wheelMotion.has(node) === true && wheelFrame.has(node) === true;
+			const current = inFlight
+				? wheelMotion.get(node)
+				: { pos: Math.max(0, Math.min(maxScroll, Number(node.scrollLeft) || 0)), velocity: 0 };
+			const atLeft = current.pos <= 0;
+			const atRight = current.pos >= maxScroll - 1;
+			/* 已经贴边且继续往那个方向滚：放行，让页面自己滚（别在气泡边缘"顶住"） */
+			if ((delta < 0 && atLeft) || (delta > 0 && atRight)) return;
+			/* preventDefault 必须当场调：延到 rAF 里浏览器可能已经开始滚页面了 */
+			if (typeof event.preventDefault === "function") event.preventDefault();
+			const schedule = typeof window !== "undefined" && window !== null && typeof window.requestAnimationFrame === "function"
+				? window.requestAnimationFrame
+				: null;
+			if (schedule === null || typeof node.scrollLeft !== "number") {
+				/* 没有 rAF / 没有 scrollLeft：没法逐帧缓动，退回一次性位移
+				   （测试替身 / 极老环境），行为仍然正确 —— 至少内容会动。 */
+				const next = Math.max(0, Math.min(maxScroll, current.pos + delta));
+				if (typeof node.scrollLeft === "number") node.scrollLeft = next;
+				applyColsFade(node);
+				return;
+			}
+			/* 滚轮只给速度加增量，位置交给帧循环推进 —— 惯性就来自这里。
+			   delta 先按 gain 折算成 px/帧再封顶；连发时速度是**叠加**的，所以越滚越快。 */
+			const boost = delta * WHEEL_VELOCITY_GAIN;
+			current.velocity = Math.max(-WHEEL_MAX_VELOCITY, Math.min(WHEEL_MAX_VELOCITY, current.velocity + boost));
+			current.pos = Math.max(0, Math.min(maxScroll, current.pos));
+			wheelMotion.set(node, current);
+			scheduleWheelMotion(node);
+		}
+
+		/** 这些键在可滚容器上会触发原生滚动，必须拦掉（用户只要鼠标滚轮）。 */
+		const SCROLL_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"];
+
+		/**
+		 * 拦方向键/翻页键：容器只有 `overflow:auto` 时，点过它一次就获得焦点，
+		 * 之后按方向键浏览器会自己滚它 —— 用户明确不要这条路，全部 preventDefault。
+		 * 只拦滚动键，别的键（Tab / Esc / 复制粘贴）照常放行。
+		 */
+		function blockKeyScroll(event) {
+			const key = event === null || event === undefined ? null : event.key;
+			if (typeof key !== "string" || SCROLL_KEYS.indexOf(key) === -1) return;
+			if (typeof event.preventDefault === "function") event.preventDefault();
+		}
+
+		/**
+		 * 右缘淡出：给 `.dsb-meter-cols` 挂 / 摘 `dsb-cols-fade` 控制遮罩要不要出现。
+		 *
+		 * **为什么不直接在 CSS 里常开 mask**：常开的话"已经滚到最右"时最右那一列也会被
+		 * 渐变啃掉一条，看起来像内容被裁了。所以按几何切 class：
+		 *   · 没溢出（scrollWidth ≈ clientWidth）→ 不挂（整排都看得见，没有"还有更多"的暗示）
+		 *   · 滚到最右（scrollLeft + clientWidth ≈ scrollWidth）→ 不挂
+		 *   · 其余（还有内容在右边）→ 挂上
+		 * 遮罩只做视觉，**不改任何布局尺寸**（mask-image 不参与排版），所以气泡宽度/列宽不变。
+		 *
+		 * **性能与闪烁**（用户实机反馈「一卡一顿、闪烁」的两个成因，都在这里治）：
+		 *   ① 原实现每个 scroll 事件都 `classList.toggle` —— 即使值没变也会触发样式重算，
+		 *      而 mask-image 一变就要整层重新栅格化，Windows Chromium 上表现为闪。
+		 *      现在用 **ref 记住上一次的完整状态（含两侧像素宽度）**，只在**真的变化**时才碰
+		 *      class / 写 CSS 变量。
+		 *   ② scroll 是高频事件（一次滚轮可能几十个），用 **requestAnimationFrame 合并**：
+		 *      一帧最多算一次，且同一帧内到达的多个 scroll 只保留最后一次。
+		 *      rAF 不是定时器（不受 setInterval 计数约束），也不会有"自己造循环"的问题 ——
+		 *      每帧最多排一次，没有新 scroll 就不再排。
+		 *
+		 * 首次不显示的问题见 `primeColsFade`（挂载那一刻主动算一次）；
+		 * **逐档加行之后不重算**的问题见 `refreshColsFade`（在 useTipLayout 里每次渲染后调一次）——
+		 * 那条是用户第二次实机报的：「能完整显示、不需要滑动，右侧却挂着一道淡出」。
+		 */
+		const COLS_FADE_CLASS = "dsb-cols-fade";
+		/**
+		 * 渐隐带的宽度（px）。两侧共用同一个值，**是固定值，不随溢出量变化**。
+		 * 24 → 40：用户实机看过后觉得"淡出范围太窄、像被切了一刀"，加宽到 40 才像自然淡出。
+		 * 曾经试过按实际溢出量收窄（`min(40, 溢出量)`），被用户否掉，原话：
+		 * 「遮罩的宽度是固定的呀，溢出两个像素，就抹两个像素，那样好看吗？」
+		 * 理由：宽度随内容跳变会让同一种淡出忽宽忽窄、溢出 2px 时更是不成形；
+		 * 固定 40px + 只在"挂不挂"上二值切换，观感才稳定。
+		 */
+		const COLS_FADE_PX = 40;
+		/**
+		 * 每个滚动容器上一次的 `{left, right}`（WeakMap：节点被回收就自动清掉，不泄漏）。
+		 * 宽度现在是常量（只可能是 0 或 COLS_FADE_PX），所以只需记"挂不挂"这两个布尔 ——
+		 * 布尔一变就整体重写两个变量，不会出现"宽度该改却没改"的情况。
+		 */
+		const colsFadeLast = new WeakMap();
+		/** 每个滚动容器已排的 rAF id（同一帧只排一次）。 */
+		const colsFadeFrame = new WeakMap();
+
+		/**
+		 * 按几何算一次该不该挂渐隐，**只在状态真的变化时**才动 class / 写内联变量。
+		 * 返回 `{left, right, leftPx, rightPx}`（两个 Px 恒为 `0` 或 `COLS_FADE_PX`）。
+		 *
+		 * 两侧各自独立判断：
+		 *   · `right` —— 右边还有没滚到的内容（`overflow - scrollLeft > 1px`）
+		 *   · `left`  —— 左边已经有内容滚出去了（`scrollLeft > 1px`）
+		 * 两个都为 false 时整条 mask 摘掉：不挂 class 就不参与合成，滚动时也没有额外重绘。
+		 *
+		 * **宽度固定 40px，不按溢出量收窄**（用户拍板，理由见 COLS_FADE_PX 上方注释）。
+		 * 也就是说这里只做"该不该挂"的二值判断，不关心溢出 2px 还是 200px ——
+		 * 溢出一丁点就说明要滚，那就给同样的 40px 淡出。
+		 *
+		 * **还能继续加行的容器一律不挂**：见下面 `data-cols-grow` 那段。
+		 *
+		 * 为什么用 CSS 变量而不是写死两个 class：mask-image 是单条属性，两条规则会互相覆盖，
+		 * 只有把「左边留多宽 / 右边留多宽」变成变量，才能在一条 gradient 里同时表达两侧。
+		 * 变量只在状态真的变化那一帧写一次，滚动过程中完全不碰。
+		 */
+		function applyColsFade(node) {
+			const idle = { left: false, right: false, leftPx: 0, rightPx: 0 };
+			if (node === null || node === undefined) return idle;
+			if (node.classList === undefined || node.classList === null || typeof node.classList.add !== "function") return idle;
+			if (typeof node.classList.remove !== "function") return idle;
+			const scrollWidth = typeof node.scrollWidth === "number" ? node.scrollWidth : 0;
+			const clientWidth = typeof node.clientWidth === "number" ? node.clientWidth : 0;
+			const scrollLeft = Number(node.scrollLeft) || 0;
+			const overflow = scrollWidth - clientWidth;
+			/* **还能继续加行的容器一律不显示遮罩**（用户最终判据，原话：
+			   「只有超过每列 12 的情况才应该有这个淡出遮罩，因为其他情况都不涉及到滚动。」）。
+			   `data-cols-grow="1"` 由 rowsPanel 只挂在「工具调用子视图 + perColumn 未到 12 行」的
+			   多列容器上。此时量出来的溢出只是"还没加完行"的中间态 —— 下一帧 useTipLayout 会
+			   继续加行、气泡随之变宽，用户永远不需要横向滚，挂遮罩就是误报
+			   （用户实机报的「4 行 × 5 列、明明能完整显示却有淡出」正是这个中间态）。
+			   非 tight 的多列面板（技能列表 / 压缩列表）没有加行机制，不带这个属性 ⇒ 照旧按
+			   几何决定，溢出就是真要滚。
+			   用 DOM 属性而不是给函数加参数：applyColsFade 的调用点有 4 处（挂载 ref、onScroll、
+			   滚轮写入后、refreshColsFade），挨个传参会漏；属性跟着节点走，谁调都读得到。 */
+			const growable = typeof node.getAttribute === "function" && node.getAttribute("data-cols-grow") === "1";
+			/* 1px 容差与 toolColumnsOverflow 同口径：亚像素取整不该被当成"还有内容" */
+			const hiddenRight = overflow - scrollLeft;
+			const showRight = growable !== true && overflow > 1 && hiddenRight > 1;
+			const showLeft = growable !== true && overflow > 1 && scrollLeft > 1;
+			/* 宽度**固定** COLS_FADE_PX：只在"挂不挂"上二值切换，不按溢出量收窄
+			   （用户拍板理由见 COLS_FADE_PX 上方注释）。所以这里只有 0 / 40 两种值。 */
+			const state = {
+				right: showRight,
+				left: showLeft,
+				rightPx: showRight === true ? COLS_FADE_PX : 0,
+				leftPx: showLeft === true ? COLS_FADE_PX : 0
+			};
+			const last = colsFadeLast.get(node);
+			/* **只有"挂不挂"真的变化才动 DOM**（关键：没变时连 classList / style 都不碰，不会每帧重新栅格化）。
+			   宽度是常量，所以只比两个布尔就够 —— 布尔一变，两个变量整体重写（恒为 0 / 40）。 */
+			if (last !== undefined && last.left === state.left && last.right === state.right) return state;
+			colsFadeLast.set(node, state);
+			if (state.left !== true && state.right !== true) {
+				node.classList.remove(COLS_FADE_CLASS);
+				return state;
+			}
+			node.classList.add(COLS_FADE_CLASS);
+			/* 只在拿得到内联样式时才写（测试替身可能没有 style） */
+			if (node.style !== undefined && node.style !== null && typeof node.style.setProperty === "function") {
+				node.style.setProperty("--dsb-fade-l", state.leftPx + "px");
+				node.style.setProperty("--dsb-fade-r", state.rightPx + "px");
+			}
+			return state;
+		}
+
+		/** 首次挂载 / 尺寸变化时主动算一次：光等 onScroll 的话，刚打开的面板永远等不到事件。 */
+		function primeColsFade(node) {
+			if (node === null || node === undefined) return;
+			applyColsFade(node);
+		}
+
+		/**
+		 * 对一个**面板**里所有列网格重算渐隐。
+		 *
+		 * 为什么需要这个入口：渐隐原来只在「挂载那一刻」和「滚动时」重算，而工具气泡会
+		 * **逐档加行**（3 → 4 → 5 …）—— 加完之后列数变少、气泡变宽，可能已经不需要滚动了，
+		 * 但节点被 React 复用（key 没变、ref 是模块级常量），ref 不会再触发 ⇒ 遮罩一直留着。
+		 * 用户实机看到的就是「4 行 × 5 列、明明不用滚，右侧却有一道淡出」。
+		 *
+		 * 取法与 toolColumnsOverflow 完全一致（同为 `panel.querySelectorAll(".dsb-meter-cols")`）。
+		 * 拿不到 DOM 几何（测试替身）时 applyColsFade 自己会兜住，不报错。
+		 */
+		function refreshColsFade(panel) {
+			if (panel === null || panel === undefined) return;
+			if (typeof panel.querySelectorAll !== "function") return;
+			const grids = panel.querySelectorAll(".dsb-meter-cols");
+			if (grids === null || grids === undefined) return;
+			for (let g = 0; g < grids.length; g += 1) applyColsFade(grids[g]);
+		}
+
+		/**
+		 * 列网格的回调 ref：**必须是模块级常量**，不能放进渲染函数里。
+		 *
+		 * 为什么：React 在 ref 回调的**引用**变化时会先 `ref(null)` 再 `ref(node)`。
+		 * 渲染函数里每帧都写 `const colsFadeRef = (node) => ...`，等于每帧都换一个新函数，
+		 * 于是底栏每秒一次的重渲染都会重新触发一次 ref 回调 —— 而 `applyColsFade` 第一件事
+		 * 就是读 `scrollWidth` / `clientWidth`，那是**强制同步布局**。打开多列工具气泡
+		 * （尤其 420 个工具那档）期间就变成每秒一次强制布局，正是用户报的「一卡一顿」。
+		 * 换成模块级常量后引用永远不变，只在真正挂载/卸载时才跑。
+		 *
+		 * （这里也不能用 react.useRef：rowsPanel 是 StatusBar 渲染时直接调用的普通函数，
+		 *   在里面调 hook 会往 hook 链里插一个时有时无的 hook，破坏 hook 顺序。）
+		 */
+		const colsFadeRef = (node) => { primeColsFade(node); };
+
+		/**
+		 * onScroll 入口：用 rAF 合并，一帧最多算一次。
+		 * `event.currentTarget` 在异步回调里会变成 null（React 合成事件会回收），所以**先取出节点**。
+		 */
+		function syncColsFade(event) {
+			const node = event === null || event === undefined ? null : event.currentTarget;
+			if (node === null || node === undefined) return;
+			/* 已经排过这一帧：什么都不做（被合并掉） */
+			if (colsFadeFrame.has(node) === true) return;
+			const schedule = typeof window !== "undefined" && window !== null && typeof window.requestAnimationFrame === "function"
+				? window.requestAnimationFrame
+				: null;
+			if (schedule === null) {
+				/* 没有 rAF（测试替身 / 极老环境）：直接算，退化成同步版本，行为仍然正确 */
+				applyColsFade(node);
+				return;
+			}
+			const frame = schedule(() => {
+				colsFadeFrame.delete(node);
+				applyColsFade(node);
+			});
+			colsFadeFrame.set(node, frame);
+		}
+
 		/**
 		 * 工具调用子视图的列网格**是否横向放不下**：放不下返回 true，交给 nextToolRows 逐档加行
 		 * （3 → 4 → 5 …，行数加上去列数就变少，直到一排放得下）。
@@ -2718,13 +3417,20 @@ window.__ModuleLoader__.load({
 		 * 判据用 `1px` 容差：scrollWidth / clientWidth 都是整数，亚像素取整可能差 1px，
 		 * 差 1px 不该被当成溢出，否则会白加一档行数。真溢出时通常差几十上百像素。
 		 *
-		 * 只有工具调用那个子视图（带 dsb-meter-tight）才换行数，别的子视图不参与。
+		 * **所有支持逐档加行的子视图**都参与：工具调用、技能注入、上下文压缩这三个
+		 * （它们的列表对象上带 `growable: true`，渲染时多列容器会带 `data-cols-growable`）。
+		 * 以前这里只认 `dsb-meter-tight`，于是后两个列表固定 3 行、直接横向滚动 ——
+		 * 用户明确要求「技能注入也和工具调用同理……上下文压缩也同理」。
+		 * **不能用 tight 当判据**：tight 是视觉样式（收窄名字与数值的间隙），只适合短英文工具名；
+		 * 技能名和「第二次压缩*」都很长，套 tight 会挤在一起。所以判据换成能力标记。
 		 * 拿不到 DOM 几何（测试替身 / 面板还没挂上）时一律当"放得下"，避免在非浏览器环境里误判。
 		 */
 		function toolColumnsOverflow(panel) {
 			if (panel === null || panel === undefined) return false;
 			if (typeof panel.querySelector !== "function" || typeof panel.querySelectorAll !== "function") return false;
-			if (panel.querySelector(".dsb-meter-tight") === null) return false;
+			/* `data-cols-growable` 表示"这类列表支持加行"（与 `data-cols-grow` 不是一回事：
+			   后者表示"当前还没加到 12 行上限"，只给遮罩判据用）。两者都要，别合并。 */
+			if (panel.querySelector("[data-cols-growable]") === null) return false;
 			const grids = panel.querySelectorAll(".dsb-meter-cols");
 			if (grids === null || grids === undefined) return false;
 			for (let g = 0; g < grids.length; g += 1) {
@@ -2747,14 +3453,20 @@ window.__ModuleLoader__.load({
 		 */
 		function rowsPanel(tip, pos, ref, sub) {
 			const rows = tip.rows === undefined ? [] : tip.rows;
+			/* 列网格的 ref：节点一挂上就量一次几何（右缘渐隐"首次就要显示"靠它）。
+			   **注意这里不能用 react.useRef** —— rowsPanel 是 StatusBar 渲染时**直接调用的普通函数**
+			   （不是组件），在里面调 hook 会往 StatusBar 的 hook 链里插一个条件下才出现的 hook，
+			   破坏 hook 顺序。所以用**回调 ref**：React 挂载节点时回调一次，值不进 hook 链。
+			   ref 用模块级常量（见 colsFadeRef 定义处）：每帧新建函数会让 React 每帧重跑一次
+			   ref 回调，进而每帧强制同步布局。 */
 			const openedAt = sub === undefined || sub === null || typeof sub.id !== "number" ? null : sub.id;
 			const opened = openedAt === null || rows[openedAt] === undefined || rows[openedAt].sub === undefined
 				? null
 				: rows[openedAt].sub;
 			/* 一行里的三块：色块（可选，与上面那条色条一一对应）+ 名称 + 数值。
-			   名称也可能是节点数组（手动调用 / 手动压缩的名字后要跟上标星号，压缩的星号还得夹在
-			   序号后面 —— 拼成字符串就插不进去了），这里原样交给 React 当子节点。
-			   可点行与普通行共用这一份，别各写一遍。 */
+			   名称也可能是节点数组（手动调用 / 手动压缩的名字**后面**要挂上标星号，
+			   子能力的名字后面挂 `+` 角标 —— 拼成字符串就插不进去了），这里原样交给
+			   React 当子节点。可点行与普通行共用这一份，别各写一遍。 */
 			const parts = (row, key) => [
 				row.color === undefined || row.color === null
 					? null
@@ -2782,10 +3494,13 @@ window.__ModuleLoader__.load({
 						}, parts(row, "__xr" + index));
 					}));
 			} else {
-				/* 每列几行：工具调用那档由 StatusBar 量完 DOM 后逐档加（3 → 4 → 5 …，最多 12），
-				   其余子视图照旧 3。所有行统一走**一个**列网格 —— 工具名就是原生英文名，
+				/* 每列几行：**支持加行的三个子视图**（工具调用 / 技能注入 / 上下文压缩）
+				   由 StatusBar 量完 DOM 后逐档加（3 → 4 → 5 …，最多 12），其余子视图照旧 3。
+				   判据用 `growable`（能力）而不是 `tight`（视觉）：tight 只管把名字与数值的
+				   间隙收到 1ch，只适合短英文工具名；技能名与「第二次压缩*」都很长，套了会挤。
+				   所有行统一走**一个**列网格 —— 工具名就是原生英文名，
 				   不再有「中文/英文整行块」两套结构。 */
-				const perColumn = opened.tight === true && sub !== undefined && sub !== null
+				const perColumn = opened.growable === true && sub !== undefined && sub !== null
 					&& typeof sub.rowsPerColumn === "number"
 					? sub.rowsPerColumn
 					: LIST_ROWS_PER_COLUMN;
@@ -2796,11 +3511,44 @@ window.__ModuleLoader__.load({
 				const cls = "dsb-meter-rows dsb-meter-rows-fit"
 					+ (columns.length > 1 ? " dsb-meter-cols" : "")
 					+ (opened.tight === true ? " dsb-meter-tight" : "");
+				/* 多列时的交互约定（用户拍板）：
+				   · 横向滚动**只能用鼠标滚轮** —— onWheel 把 deltaY 转成 scrollLeft 并
+				     preventDefault（详见 wheelToHorizontalScroll 的 deltaMode 说明）；
+				   · 方向键/翻页键一律拦掉（onKeyDown + blockKeyScroll）；
+				   · **不可聚焦**：tabIndex -1 让它不参与 Tab 序列，也不给浏览器"点过就获得焦点、
+				     随后方向键能滚"的机会。overlay 上的焦点由 stopTipClick 挡住冒泡来保证。
+				   · 右缘淡出：`ref: colsFadeRef` 在**挂载那一刻**就量一次几何（这就是"首次打开
+				     也要有渐隐"的修法 —— 光靠 onScroll 永远等不到首次事件），之后滚动由
+				     syncColsFade 用 rAF 合并着维护。
+				   · `data-cols-grow="1"`：**这个容器还能继续加行**（支持加行的子视图且未到 12 行上限）。
+				     applyColsFade 见到它就不显示遮罩 —— 加行机制保证未到上限前程序会继续加行，
+				     此时"量出来溢出"只是还没加完行的中间态，用户并不会真的需要横向滚。
+				     用户最终判据原话：「只有超过每列 12 的情况才应该有这个淡出遮罩，
+				     因为其他情况都不涉及到滚动。」
+				   · `data-cols-growable="1"`：**这类列表支持加行**（能力标记，与上面那个不是一回事）。
+				     它跟着 `opened.growable` 走，加到 12 行上限后**依然带着** —— 因为
+				     `toolColumnsOverflow` 靠它判断"要不要量溢出"，而那时仍然需要量
+				     （量出来才知道该不该显示遮罩）。两个属性都留着，别合并。 */
+				const canGrow = opened.growable === true;
+				const stillGrowable = canGrow === true && perColumn < LIST_ROWS_PER_COLUMN_MAX;
+				const colProps = columns.length > 1
+					? {
+						className: cls,
+						key: "__xrows",
+						ref: colsFadeRef,
+						tabIndex: -1,
+						onWheel: wheelToHorizontalScroll,
+						onKeyDown: blockKeyScroll,
+						onScroll: syncColsFade,
+						"data-cols-growable": canGrow === true ? "1" : undefined,
+						"data-cols-grow": stillGrowable === true ? "1" : undefined
+					}
+					: { className: cls, key: "__xrows" };
 				body = columns.length > 1
-					? h("span", { className: cls, key: "__xrows" },
+					? h("span", colProps,
 						columns.map((column, at) => h("span", { className: "dsb-meter-col", key: "__col" + at },
 							column.map((row, index) => cell(row, "__c" + at + "r" + index)))))
-					: h("span", { className: cls, key: "__xrows" },
+					: h("span", colProps,
 						(columns[0] === undefined ? [] : columns[0]).map((row, index) => cell(row, "__r" + index)));
 			}
 			/* 标题下那条：根视图用 tip.segments（余额/用时那种），子视图用 opened.segments（工具调用彩条）；
@@ -2923,7 +3671,8 @@ window.__ModuleLoader__.load({
 
 		/** 毫秒 → 面板里的时长文本（精确到秒）；0 或缺数据给横杠。 */
 		function tipDuration(ms) {
-			const text = formatDurationFine(ms);
+			/* 面板要精确到秒，底栏那条省秒（宽度有限）。 */
+			const text = formatDuration(ms, true);
 			return text === null ? "-" : text;
 		}
 
@@ -2944,17 +3693,6 @@ window.__ModuleLoader__.load({
 			].filter((one) => one.width > 0);
 		}
 
-		/** 时长精确到秒：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 不同名。 */
@@ -3032,6 +3770,27 @@ window.__ModuleLoader__.load({
 			}, "*");
 		}
 
+		/**
+		 * **子能力**（`sub: true`）名字后面的角标：一个上标的 `+`。
+		 *
+		 * 符号由用户指定（先前试过 `†`，用户看完实机后要求换成 `+`）。
+		 * `+` 比 `*` / `†` **笔画细、体量小**，同一个 `.dsb-sup` 字号（.7em）下会显得比星号轻一档，
+		 * 所以额外挂一个 `.dsb-sup-strong` 修饰类，把字重提到 600 —— 只改粗细，**不改字号与抬高量**：
+		 * 两种角标的行盒高度必须一样，否则同一列表里一行高一行低（`.dsb-sup` 的 line-height:0 就是为此），
+		 * 只加粗不会碰到这一点。
+		 *
+		 * 读屏另有文案（`tipSub`），不与手动的「手动触发」重名。
+		 */
+		function subStar(t) {
+			/* 与 manualStar 同样不挂 title：亚 11px 的角标上没有可停留的鼠标热区 */
+			return h("span", {
+				className: "dsb-sup dsb-sup-strong",
+				key: "__substar",
+				role: "img",
+				"aria-label": t("tipSub")
+			}, "+");
+		}
+
 		/** 子视图没有内容时给一行横杠：气泡任何情况下都要打得开，也不能是一片空白。 */
 		function emptyList(title) {
 			return { title: title, rows: [{ label: title, value: "-" }] };
@@ -3041,17 +3800,25 @@ window.__ModuleLoader__.load({
 		 * 技能注入子视图：只列名字，**不显示统计次数**（用户明确要求：次数只用来排序）。
 		 * 同名注入在内部聚合计数，排序 = **名字短的在前** → 注入次数多的在前 → 字典序；
 		 * 次数只参与排序，不进界面（与工具调用「次」那套无关）。
-		 * 手动调用的技能（`manual: true`）名字后跟上标星号；只要其中有一次是手动就算。
+		 *
+		 * 两种角标（用户拍板：**平铺、不加父技能前缀**，两个都挂在名字**后面**）：
+		 *   · 手动调用的技能（`manual: true`）→ `名字*`（manualStar 上标）
+		 *   · 子能力（`sub: true`，模型读了某技能的子能力文档）→ `名字+`（subStar 上标）
+		 * 同名聚合时"只要其中有一次是手动就算手动"、"只要有一次是子能力就算子能力" ——
+		 * 聚合规则沿用现状，不做分组、不按来源拆行。
 		 * 全局提示词（AGENTS.md 这类）**固定排第一**：它也是注入的一种，但不是技能调用，
-		 * 不参与上面那套技能排序；其余技能照常排。
+		 * 不参与上面那套技能排序；其余技能照常排（子能力与普通技能混在同一个列表里）。
 		 */
 		function skillList(skills, globalInstruction, t) {
 			const title = t("tipCountsSkills");
 			const names = [];
 			const counts = new Map();
 			const manual = new Set();
+			/* 子能力是**新增的可选字段**：老宿主 / 旧 state 里根本没有 `sub`，
+			   这里一律按 false 处理（不是"未知"），旧数据因此渲染得与改动前一模一样。 */
+			const subs = new Set();
 			const pinned = typeof globalInstruction === "string" && globalInstruction.length > 0 ? globalInstruction : null;
-			const add = (name, isManual) => {
+			const add = (name, isManual, isSub) => {
 				const key = String(name);
 				if (key.length === 0) return;
 				if (counts.has(key) !== true) {
@@ -3060,17 +3827,18 @@ window.__ModuleLoader__.load({
 				}
 				counts.set(key, counts.get(key) + 1);
 				if (isManual === true) manual.add(key);
+				if (isSub === true) subs.add(key);
 			};
-			if (pinned !== null) add(pinned, false);
+			if (pinned !== null) add(pinned, false, false);
 			if (Array.isArray(skills)) {
 				skills.forEach((entry) => {
-					/* 契约是 `{ name, manual }`；旧宿主（还没升级的那一半）只给字符串，兼容一下 */
+					/* 契约是 `{ name, manual, sub? }`；旧宿主（还没升级的那一半）只给字符串，兼容一下 */
 					if (typeof entry === "string") {
-						add(entry, false);
+						add(entry, false, false);
 						return;
 					}
 					if (entry === null || entry === undefined || typeof entry.name !== "string") return;
-					add(entry.name, entry.manual === true);
+					add(entry.name, entry.manual === true, entry.sub === true);
 				});
 			}
 			if (names.length === 0) return emptyList(title);
@@ -3079,12 +3847,28 @@ window.__ModuleLoader__.load({
 				|| counts.get(b) - counts.get(a)
 				|| (a < b ? -1 : (a > b ? 1 : 0)));
 			const ordered = pinned !== null && counts.has(pinned) ? [pinned].concat(rest) : rest;
-			/* 行上只有名字（手动调用的带行尾星号），不带 value —— 次数只用于上面的排序 */
+			/* 行上只有名字 + 两种角标，不带 value —— 次数只用于上面的排序。
+			   角标**都挂在名字后面**（用户拍板，实机看完改回来的）：手动 `*` → `名字*`，
+			   子能力 `+` → `名字+`。以前试过"手动星号前置、子能力后置"靠前后位置区分，
+			   但用户指出**子能力不可能由他手动调用**，两者不会落在同一个名字上，不需要位置区分；
+			   而"星号在后"读起来更像脚注标注，也与压缩列表保持同一种写法。
+			   （代码仍兼容两者同时出现的情况：那时渲染成 `名字*+`，谁在前谁在后都不影响识别。） */
 			return {
 				title: title,
-				rows: ordered.map((name) => ({
-					label: manual.has(name) === true ? [name, manualStar(t)] : name
-				}))
+				rows: ordered.map((name) => {
+					const isManual = manual.has(name) === true;
+					const isSub = subs.has(name) === true;
+					if (isManual !== true && isSub !== true) return { label: name };
+					const label = [name];
+					if (isManual === true) label.push(manualStar(t));
+					if (isSub === true) label.push(subStar(t));
+					return { label: label };
+				}),
+				/* **支持逐档加行**（用户原话：「技能注入也和工具调用同理呀，如果超过每列 3 个
+				   依然排不下，就是加每列的个数啊，而不是直接可滚动啊」）。
+				   注意这里是**能力**标记，与 `tight`（视觉：把名字与数值的间隙收到 1ch）无关 ——
+				   技能名很长，套 tight 会把长名字挤在一起，所以两者必须分开。 */
+				growable: true
 			};
 		}
 
@@ -3109,14 +3893,16 @@ window.__ModuleLoader__.load({
 		 */
 		function toolList(counts, t) {
 			const title = t("tipCountsToolCalls");
-			if (counts === null || typeof counts !== "object") return Object.assign(emptyList(title), { tight: true });
+			/* `growable: true` 见 skillList 末尾的说明：能力标记，表示这个子视图支持逐档加行。
+			   工具调用是最早支持的那个（也是唯一需要 tight 视觉收紧的：原生工具名都是短英文）。 */
+			if (counts === null || typeof counts !== "object") return Object.assign(emptyList(title), { tight: true, growable: true });
 			const entries = Object.keys(counts)
 				.map((name) => ({ label: name, count: Number(counts[name]) || 0 }))
 				.filter((one) => one.count > 0)
 				.sort((a, b) => a.label.length - b.label.length
 					|| b.count - a.count
 					|| (a.label < b.label ? -1 : (a.label > b.label ? 1 : 0)));
-			if (entries.length === 0) return Object.assign(emptyList(title), { tight: true });
+			if (entries.length === 0) return Object.assign(emptyList(title), { tight: true, growable: true });
 			const total = entries.reduce((sum, one) => sum + one.count, 0);
 			const rows = entries.map((one) => ({ label: one.label, value: formatTokensExact(one.count) + t("unitCountCalls") }));
 			const segments = entries.map((one, index) => {
@@ -3129,7 +3915,7 @@ window.__ModuleLoader__.load({
 					percentText: percent.toFixed(2) + "%"
 				};
 			});
-			return { title: title, rows: rows, tight: true, segments: segments };
+			return { title: title, rows: rows, tight: true, segments: segments, growable: true };
 		}
 
 		/**
@@ -3139,8 +3925,12 @@ window.__ModuleLoader__.load({
 		 *   turn 为 null（手动 /compact 的轮间压缩）→ 用 afterTurn 显示「第X轮后」，
 		 *     否则手动压缩只剩一个横杠，用户看不出它发生在哪儿（2026-10 实测反馈）；
 		 *   afterTurn 也没有 → 「-」。
-		 * 手动压缩（`manual: true`）在**行尾**跟上标星号（「第二次压缩*」）—— 星号不插进序号里，
-		 * 免得把「第二次」拆开。
+		 *
+		 * 手动压缩（`manual: true`）在**名字后面**跟上标星号（「第二次压缩*」），与技能列表
+		 * 里「手动调用的技能」保持同一种写法（用户拍板：两种列表的星号都挂在名字后）。
+		 * 星号挂在**整个名字**之后、不进序号内部 —— 序号本身仍是完整的「第二次」，
+		 * 不会被拆成「第二*次」。以前一度挪到名字前（「*第二次压缩」），实机看完后用户
+		 * 要求改回行尾：星号在后读起来更像脚注标注，与技能列表也一致。
 		 */
 		function compactList(compacts, t) {
 			const title = t("tipCountsCompactAt");
@@ -3156,13 +3946,17 @@ window.__ModuleLoader__.load({
 				const afterTurn = typeof mark.afterTurn === "number" ? mark.afterTurn : null;
 				const label = t("tipCompactItem", { index: text });
 				return {
+					/* 星号在名字**后面**（与 skillList 一致）：手动压缩是「第二次压缩*」 */
 					label: mark.manual === true ? [label, manualStar(t)] : label,
 					value: turn !== null
 						? (step === null ? t("tipCompactTurnOnly", { turn: turn }) : t("tipCompactWhere", { turn: turn, step: step }))
 						: (afterTurn === null ? "-" : t("tipCompactAfter", { turn: afterTurn }))
 				};
 			});
-			return { title: title, rows: rows };
+			/* 与技能注入、工具调用同一套：**支持逐档加行**，不是直接横向滚动
+			   （用户原话：「上下文压缩也同理啊」）。
+			   同样只是能力标记 —— 压缩条目的名字（「第二次压缩*」）也不短，不能套 tight。 */
+			return { title: title, rows: rows, growable: true };
 		}
 
 		/** 余额接口给的金额字符串；没有这个字段时按 0.00 显示。 */
@@ -3315,7 +4109,10 @@ window.__ModuleLoader__.load({
 					refreshAt: refreshAt,
 					monthly: monthly,
 					label: itemLabel,
-					valueText: t("tipCreditsUsed", { used: formatCredits(used), total: formatCredits(total) }),
+					/* 显示**剩余**而不是已用（用户要求：「不要显示已用，显示剩余」）。
+					   `used` 仍然留着 —— 进度条宽度与 percent 都要它，只是不出现在文字里。
+					   left 夹到 0：脏数据里 used > total 时绝不能显示负数。 */
+					valueText: t("tipCreditsLeft", { left: formatCredits(Math.max(0, total - used)), total: formatCredits(total) }),
 					percent: total > 0 ? Math.max(0, Math.min(100, (used / total) * 100)) : 0
 				};
 				const last = merged.length > 0 ? merged[merged.length - 1] : null;
@@ -3350,7 +4147,10 @@ window.__ModuleLoader__.load({
 					refreshAt: one.refreshAt,
 					monthly: one.monthly,
 					label: creditsLabel(one, t),
-					valueText: t("tipCreditsUsed", { used: formatCredits(one.used), total: formatCredits(one.total) }),
+					/* 聚合行同样显示**剩余**（与原始包 items 一致）；left 同样夹到 0，脏数据不出负数。
+					   这里复用上面算好的 `remaining`（`Math.max(0, total - used)`），
+					   保证"文字里的剩余"与"下钻标题右侧的剩余"是同一个数。 */
+					valueText: t("tipCreditsLeft", { left: formatCredits(remaining), total: formatCredits(one.total) }),
 					percent: one.total > 0 ? Math.max(0, Math.min(100, (one.used / one.total) * 100)) : 0
 				};
 			}));
@@ -3392,16 +4192,17 @@ window.__ModuleLoader__.load({
 			if (n <= 0) return null;
 			return String(Math.round(n / 100) / 10);
 		}
-		/** 时长按最小单位给：>=1h 用 h/m，>=1m 用 m/s，不足一分钟只给整数秒；分钟与秒之间不加空格。 */
-		function formatDuration(ms) {
+		/** 时长按最小单位给：>=1h 用 h/m（withSeconds 时再带秒），>=1m 用 m/s，不足一分钟只给整数秒；
+		    分钟与秒之间不加空格。面板要精确到秒传 true，底栏那条省秒（宽度有限）不传。 */
+		function formatDuration(ms, withSeconds) {
 			const n = Number(ms) || 0;
 			if (n <= 0) return null;
-			const seconds = n / 1000;
-			const whole = Math.round(seconds);
+			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";
+			const head = Math.floor(minutes / 60) + "h" + (minutes % 60) + "m";
+			return withSeconds === true ? head + (whole % 60) + "s" : head;
 		}
 		function formatThroughput(tokensPerSecond) {
 			return String(Math.round(Number(tokensPerSecond) || 0));
@@ -3865,24 +4666,62 @@ window.__ModuleLoader__.load({
 					};
 				}
 				/* 分隔线换成色条，两种情况各一套：
-				   金额余额（DeepSeek 等）= 充值 : 赠金，按金额占比分两段（紫 / 蓝）；
-				   百分比配额（GLM 等）= 已用 : 剩余，未用那段用「系统提示词」的同款灰。
+				   金额余额（DeepSeek 等）= 充值 : 赠金，按金额占比分两段（灰 / 紫）；
+				   百分比配额（GLM 等）= 剩余（灰）在左、已用（透明）在右。
+				   这条色条的方向是「灰 = 剩余、在左」，与积分套餐条（creditsView）同一套语义，
+				   改一处必须同步另一处。
 				   余额为负或拿不到数字时算不出占比，就不给 segments，面板退回普通分隔线。 */
 				const isQuota = balance.isPercent === true;
-				const topUp = Number(balance.toppedUp) || 0;
-				const granted = Number(balance.granted) || 0;
+				/* 色条的「充值 : 赠金」两段。**分币种时先折汇率再相加**（用户原话：
+				   「色调的比例就两者混合，不要拆分出来 4 个色条」「金额两者相加」，且明确
+				   选了"折汇率后再加"而不是把 13.14 和 5.21 直接相加 —— 后者是拿两种不同的
+				   计价单位相加，数字没有意义）。
+				   折算目标币种用 `symbolCurrency`（= `normalizeCurrency(src.currency)`）：
+				   与底栏「总计 / 本轮」是同一个数（`segmentView` 里所有金额都折到它）；
+				   内部拿不到时 `convertCurrency` 自己会原样返回，不会抛。
+				   **仍然是两段**（灰 = 充值总额、紫 = 赠金总额），不按币种拆成四段。
+				   拿不到 `toppedUp` / `granted`（老 host 或 task-66 之前）⇒ 完全退回
+				   `balance.toppedUp` / `balance.granted` 那条老逻辑，行为零变化。 */
+				const balanceTopUpRows = (() => {
+					if (Array.isArray(balance.balances) !== true || balance.balances.length === 0) return null;
+					let topSum = 0;
+					let grantSum = 0;
+					let sawAny = false;
+					balance.balances.forEach((one) => {
+						if (one === null || one === undefined || typeof one !== "object") return;
+						if (one.toppedUp === undefined && one.granted === undefined) return;
+						sawAny = true;
+						const code = one.currency === "USD" ? "USD" : "CNY";
+						topSum += convertCurrency(Number(one.toppedUp) || 0, code, symbolCurrency);
+						grantSum += convertCurrency(Number(one.granted) || 0, code, symbolCurrency);
+					});
+					/* 一个币种都没带这两个字段 ⇒ 当作"拿不到"，回退老口径 */
+					if (sawAny !== true) return null;
+					return { topUp: topSum, granted: grantSum };
+				})();
+				const topUp = balanceTopUpRows === null ? (Number(balance.toppedUp) || 0) : balanceTopUpRows.topUp;
+				const granted = balanceTopUpRows === null ? (Number(balance.granted) || 0) : balanceTopUpRows.granted;
 				const balanceSum = Math.max(0, topUp) + Math.max(0, granted);
+				/* ⚠ 百分比配额（智谱 Coding Plan 等）的 `total` 是**已用**百分比，不是余额。
+				   上游解析器（lib/balance-api.js 的 deepseek 适配器 parse 里的 isPercent 分支）把接口给的 `percentage` 原样当 `total` 返回 ——
+				   那个字段语义就是"已用"，所以这里必须自己减一次得到"剩余"。
+				   **底栏那行文字与气泡这行必须同源**：两处都用 `quotaLeft`，否则就会出现
+				   「底栏 余额 62.50%、气泡 剩余配额 37.50%」这种同屏打架（用户 2026-10 实机报的就是它）。
+				   改这里之前先看一眼 segmentView 末尾那两行 f_balance / f_balanceSubCent 的 return 取值。 */
 				const quotaUsed = isQuota ? Math.max(0, Math.min(100, Number(String(balance.total).replace("%", "")) || 0)) : 0;
 				const quotaLeft = isQuota ? Math.max(0, 100 - quotaUsed) : 0;
-				/* 百分比配额（GLM 等）：只有「未用」那段有颜色，且它**从最左边开始**画；
-				   右边已用的位置由一个透明段顶着（露出轨道底色）。
-				   为什么不用单段 + 右侧留空：气泡是 width:max-content，条又是 flex 容器，
-				   单个百分比段在"容器宽度由谁决定"上循环，实际渲染出来比例会偏；
-				   两段显式百分比之和为 100%，宽度就由浏览器按比例切，不会漂。
+				/* 百分比配额（GLM 等）：**剩余（灰）占左段、已用（透明）在右**。
+				   用户拍板原话：「灰条从左边起」—— 灰条长度 = 剩余额度，越长剩得越多，
+				   从左读起一眼就知道"还剩多少"，不用先扫过一段空的已用区。
+				   为什么用灰而不是蓝：灰是这套面板里"账户里的钱"的固定色（充值段、余额配额条都用它），
+				   蓝色留给"用量/命中"这类过程指标，语义不再混。
+				   为什么仍要两段而不是单段 + 右侧留空：气泡是 width:max-content，条又是 flex 容器，
+				   单个百分比段在"容器宽度由谁决定"上循环，实际渲染比例会偏；
+				   两段显式百分比之和为 100%，宽度由浏览器按比例切，不会漂。
 				   行只列「剩余配额」一行并带同款灰图例；已用那边不列行。 */
 				const balanceSegments = isQuota
 					? [
-						{ color: BALANCE_COLORS.left, width: quotaLeft },
+						{ color: BALANCE_COLORS.topUp, width: quotaLeft },
 						{ color: "transparent", width: quotaUsed }
 					].filter((one) => one.width > 0)
 					: balanceSum > 0
@@ -3891,26 +4730,112 @@ window.__ModuleLoader__.load({
 							{ color: BALANCE_COLORS.granted, width: (Math.max(0, granted) / balanceSum) * 100 }
 						].filter((one) => one.width > 0)
 						: [];
+				/* 气泡里仍然是那两行：**「充值余额」/「赠金余额」**，label 一个字不改。
+				   用户这一轮要的是「值里体现两种币种的构成」，**不是**把行改成 CNY / USD
+				   （原话：「你改了我的项，原本气泡里面只显示充值余额和赠金余额，
+				   我没有让你把它改成 CNY 和 USD」—— 上一版按币种分行是错的，已回退）。
+
+				   所以：
+				     · 充值余额那行的值 = 各币种 `toppedUp` 拼起来的串（`¥13.14+$5.21`）
+				     · 赠金余额那行的值 = 各币种 `granted` 拼起来的串（`¥2.50+$1.00`）
+				   拼串复用 `costByCurrencyText`：它已经实现了「人民币在前、美元在后、
+				   某项 ≤0 不出现（含不足 0.01）、只有一项不带 +、全 0 给 ¥0.00」这一整套规则，
+				   与底栏那行文字、活跃总览用的是同一套 —— 三处口径必须一致。
+
+				   兜底：`balances` 空、或每笔都没有 `toppedUp`/`granted`（老宿主）⇒
+				   完全退回改动前的 `balSymbol + balanceAmount(...)`，行为零变化。 */
+				const currencyMapsOf = (() => {
+					if (Array.isArray(balance.balances) !== true || balance.balances.length === 0) return null;
+					const topUpMap = {};
+					const grantedMap = {};
+					let sawAny = false;
+					balance.balances.forEach((one) => {
+						if (one === null || one === undefined || typeof one !== "object") return;
+						if (one.toppedUp === undefined && one.granted === undefined) return;
+						sawAny = true;
+						const code = one.currency === "USD" ? "USD" : "CNY";
+						/* 同币种多笔防御性累加（宿主一般已合并，这里再收一遍不会错） */
+						const topAmount = Number(one.toppedUp);
+						if (Number.isFinite(topAmount) && topAmount > 0) topUpMap[code] = (topUpMap[code] || 0) + topAmount;
+						const grantAmount = Number(one.granted);
+						if (Number.isFinite(grantAmount) && grantAmount > 0) grantedMap[code] = (grantedMap[code] || 0) + grantAmount;
+					});
+					/* 一笔都没带这两个字段 ⇒ 当作"拿不到"，走下面的老逻辑 */
+					if (sawAny !== true) return null;
+					return { topUp: topUpMap, granted: grantedMap };
+				})();
 				const balanceRows = isQuota
-					? [{ label: t("tipQuotaLeft"), value: quotaLeft.toFixed(2) + "%", color: BALANCE_COLORS.left }]
-					: [
-						{ label: t("tipTopUp"), value: balSymbol + balanceAmount(balance.toppedUp), color: BALANCE_COLORS.topUp },
-						{ label: t("tipGranted"), value: balSymbol + balanceAmount(balance.granted), color: BALANCE_COLORS.granted }
-					];
+					? [{ label: t("tipQuotaLeft"), value: quotaLeft.toFixed(2) + "%", color: BALANCE_COLORS.topUp }]
+					: (currencyMapsOf !== null
+						? [
+							/* 两个 map 都为空 ⇒ costByCurrencyText 给 ¥0.00（那一行必须有内容，不能空串） */
+							{ label: t("tipTopUp"), value: costByCurrencyText(currencyMapsOf.topUp, 0, t), color: BALANCE_COLORS.topUp },
+							{ label: t("tipGranted"), value: costByCurrencyText(currencyMapsOf.granted, 0, t), color: BALANCE_COLORS.granted }
+						]
+						: [
+							{ label: t("tipTopUp"), value: balSymbol + balanceAmount(balance.toppedUp), color: BALANCE_COLORS.topUp },
+							{ label: t("tipGranted"), value: balSymbol + balanceAmount(balance.granted), color: BALANCE_COLORS.granted }
+						]);
+				/* 余额气泡：配额口径一行；金额口径**固定两行**（充值余额 / 赠金余额，
+				   值与是否分币种无关 —— 分币种只影响那两行的**值怎么写**，不影响行数）。
+				   **不再显示「累计消费」**：用户明确要求「所有的都不显示累计消费」。
+				   宿主侧 `spent` 字段照旧返回（智谱适配器会给），但客户端一律不画 ——
+				   这一行口径与「总计」不同源、又只在部分平台出现，
+				   摆在同一张气泡里容易被当成同一个数字。 */
 				const tip = {
 					kind: "rows",
 					title: t("segBalance"),
 					segments: balanceSegments,
-					rows: balanceRows.concat([
-					/* 累计消费只有部分平台能给（智谱有，DeepSeek 的接口没有），没有就不显示这一行 */
-					balance.spent === undefined || balance.spent === null
-						? null
-						: { label: t("tipSpent"), value: balSymbol + balanceAmount(balance.spent) }
-					].filter((one) => one !== null))
+					rows: balanceRows
 				};
 				/* 不足一分钱时官方显示 <¥0.01，这里跟着来 */
 				if (balance.subCent === true) return { id: id, text: t("f_balanceSubCent", { symbol: balSymbol }), tip: tip };
-				return { id: id, text: t("f_balance", { symbol: balSymbol, amount: balance.total }), tip: tip };
+				/* 底栏那行文字：**百分比配额走 `quotaLeft`（剩余），不走 `balance.total`（已用）**。
+				   与上面气泡那行同一个数（都是 quotaLeft），所以「余额 37.50%」点进去就是
+				   「剩余配额 37.50%」，不会同屏打架。
+				   `balSymbol` 在 isPercent 时已经是空串（见 segmentView 里 const balSymbol 那行），所以不会出现 "¥37.50%"。
+				   其余口径（金额 / 积分）照旧用 `balance.total` —— 那两种的 total 本来就是余额本身。 */
+
+				/* **双币种余额**（用户要求：「有一些 API，它是人民币和美元两个余额共存的，
+				   应该都能查到，也就是显示成 ¥14.12+$3.17 这种格式」）。
+				   仅指底栏那行文字 —— 气泡里那两行充值/赠金**不动**（用户明确说「不是指点击气泡里」）。
+
+				   数据来源：host 的 `balance.balances`（`[{currency, total}, …]`，只含 > 0 的币种）。
+				   格式**复用活跃总览那套** `costByCurrencyText`：人民币在前、美元在后，
+				   某项 ≤ 0 不出现、只有一项不带 `+`、两项都没有就给 ¥0.00 —— 两处口径必须一致，
+				   否则同一个 `¥14.12+$3.17` 的写法在两个地方会长得不一样。
+				   把数组转成它要的 `{CNY: n, USD: n}`：同币种多笔就累加（host 一般已合并，
+				   这里再加一遍是防重复项）。
+
+				   **两个易错点**：
+				   ① `fallbackCost` 必须传 **0**、不能传 `balance.total` —— 一旦进了双币种分支，
+				      就说明 host 给了分币种数据，不该再拿那个混合 total 兜底；
+				   ② 拼好的串**自带 ¥/$ 符号**，所以下面 `balSymbol` 要传空串，
+				      否则会出现 `¥¥14.12+$3.17`。
+				   老 host / 老数据没有 `balances` ⇒ 完全走原来的单币种逻辑，行为零变化。 */
+				const balances = balance.balances;
+				const hasBalances = Array.isArray(balances) && balances.length > 0;
+				let balAmountText = null;
+				let balTextSymbol = balSymbol;
+				if (isQuota !== true && hasBalances === true) {
+					const map = {};
+					for (const one of balances) {
+						if (one === null || one === undefined || typeof one !== "object") continue;
+						const amount = Number(one.total);
+						if (!Number.isFinite(amount) || amount <= 0) continue;
+						const code = one.currency === "USD" ? "USD" : "CNY";
+						map[code] = (map[code] || 0) + amount;
+					}
+					if (Object.keys(map).length > 0) {
+						balAmountText = costByCurrencyText(map, 0, t);
+						/* 串里已经有符号了，外层不能再补一个 */
+						balTextSymbol = "";
+					}
+				}
+				if (balAmountText === null) {
+					balAmountText = isQuota === true ? quotaLeft.toFixed(2) + "%" : balance.total;
+				}
+				return { id: id, text: t("f_balance", { symbol: balTextSymbol, amount: balAmountText }), tip: tip };
 			}
 
 						return null;
@@ -3942,6 +4867,37 @@ window.__ModuleLoader__.load({
 			if (id === "balance") return t("f_balanceDash", { symbol: symbol });
 			return dash;
 		}
+
+		/**
+		 * 缺数据的段也要有一个气泡（**P0：不加就会把用户锁死**）。
+		 *
+		 * `segmentView` 返回 null 时，渲染处原本只拿到 `{ id, text }`、没有 tip，
+		 * 而那段 JSX 是「tip !== null 才挂 onClick」—— 于是这一格变成死块：
+		 * 点不开 → 推进场景的代码（在 toggleTip 里）永远不执行 → 用户停在这个空态出不来。
+		 * 开发模式下尤其致命：底栏整排横杠、假数据还在，用户既退不出去也翻不到下一格。
+		 *
+		 * 所以气泡一定要有，内容则**刻意极简**（一行解释 + 一行横杠）：
+		 *   · 这一段的真实内容是"没有数据"，编不出有意义的明细；
+		 *   · 但用户点它本来也不是为了看内容，而是为了推进到下一格（开发模式）
+		 *     或至少确认"这里确实没数据"（正式模式）。
+		 * 用 `kind: "rows"` 是为了复用现成的两列面板外壳，不再造一种新面板类型。
+		 */
+		function emptySegmentTip(id, view, t, currency) {
+			const segment = SEGMENTS.filter((s) => s.id === id)[0];
+			const locale = detectLocale(t);
+			const label = segment === undefined || segment.short === undefined
+				? t("segBalance")
+				: (segment.short[locale] !== undefined ? segment.short[locale] : segment.short.zh);
+			return {
+				kind: "rows",
+				title: t("tipEmptyTitle", { label: label }),
+				rows: [
+					/* 值就用该段自己的横杠占位文案，保证气泡与底栏读的是同一句话 */
+					{ label: t("tipEmptyTitle", { label: label }), value: segmentText(id, null, t, currency) },
+					{ label: t("tipEmptyBody"), value: "" }
+				]
+			};
+		}
 		/* ---------------------------------------------------------------- css */
 		const CSS = [
 			/* 接管输入框下方的统计行：dock 里凡“不是本插件那一项”的都藏掉（也就是官方 StatsPills）。
@@ -3974,7 +4930,18 @@ window.__ModuleLoader__.load({
 			   transform-box:view-box + origin:center 让旋转中心稳稳落在 viewBox 中心 (7,7)。 */
 			"@keyframes dsb-ring-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}",
 			".dsb-ring-running .dsb-ring-fill{stroke:#22c55e;transform-box:view-box;transform-origin:center;animation:dsb-ring-spin 1.4s linear infinite}",
-			"@media (prefers-reduced-motion: reduce){.dsb-ring-running .dsb-ring-fill{animation:none}}",
+			/* 蓝色 / 紫色两档（Agent Teams 场景，用户新需求）：
+			   绿 = Lead 在跑、蓝 = 团队成员在跑、紫 = 只有成员下派的孙会话或团队外独立子智能体在跑。
+			   两个颜色**复用总计令牌条已有的两个色**，不新造：
+			     蓝 = var(--dsw-static-blue-450) —— 总计「输出」那段用的就是它
+			     紫 = #a78bfa                      —— 总计「未命中输入」那段用的就是它
+			   旋转与绿色那一档完全同参数（1.4s linear infinite，同一个 keyframes），
+			   三种颜色在观感上是同一件事，只有颜色不同 —— 用户要的就是这个。
+			   **旋转是 CSS animation，不占任何 JS 定时器**（`setInterval` 计数仍为 2）。 */
+			".dsb-ring-team .dsb-ring-fill{stroke:var(--dsw-static-blue-450);transform-box:view-box;transform-origin:center;animation:dsb-ring-spin 1.4s linear infinite}",
+			".dsb-ring-deep .dsb-ring-fill{stroke:#a78bfa;transform-box:view-box;transform-origin:center;animation:dsb-ring-spin 1.4s linear infinite}",
+			/* 减弱动效偏好下三档一起停：蓝紫与绿色同待遇，不能只停一个 */
+			"@media (prefers-reduced-motion: reduce){.dsb-ring-running .dsb-ring-fill,.dsb-ring-team .dsb-ring-fill,.dsb-ring-deep .dsb-ring-fill{animation:none}}",
 			".dsb-ring-error .dsb-ring-fill{stroke:#ef4444}",
 			".dsb-ring-approval .dsb-ring-fill{stroke:#f59e0b}",
 			/* 条形图恢复原设计：**段与段之间 1px 间隔（gap:1px）+ 分段 1px 圆角**。
@@ -4005,7 +4972,11 @@ window.__ModuleLoader__.load({
 			".dsb-bar-hoverable .dsb-bar-seg:hover{transform:scaleY(1.45);z-index:2}",
 			/* 工具彩条的悬停提示：**不要气泡、也不要阴影**，只显示一行文字（比 10px 的悬停浮层大、
 			   但小于 12px 的标题）。位置由 JS 给 left/top，贴在鼠标上方很近处。 */
-			".dsb-hover-plain{position:fixed;z-index:41;pointer-events:none;white-space:nowrap;font-size:11px;line-height:15px;font-weight:500;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}",
+			/* 气泡上的工具名悬停提示。**z-index = 106，必须始终比气泡（105）高一层**：
+			   它是气泡内部的提示，被自己的容器盖住就没意义了。
+			   106 同样夹在官方档位的 101（子菜单）与 1000（对话框/遮罩）之间 ——
+			   盖得住对话区的浮动控件，又盖不住系统级弹层。详见 `.dsb-tip` 那段的说明。 */
+			".dsb-hover-plain{position:fixed;z-index:106;pointer-events:none;white-space:nowrap;font-size:11px;line-height:15px;font-weight:500;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}",
 			/* 宽度按内容自适应：width:max-content 让气泡收到"最长那一行"的宽度，
 			 * 行内标签与数值之间至少留 5ch（.dsb-meter-value 的 padding-left），所以不会出现大片留白；
 			 * 内容超过 max-width 时退回换行（white-space:normal）。 */
@@ -4034,8 +5005,14 @@ window.__ModuleLoader__.load({
 			".dsb-meter-value{margin-left:auto;padding-left:5ch;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}",
 			/* 手动调用 / 手动压缩的星号：做成上标（像 X² 的 ²），不是普通的星号字符。
 			   .7em 收小、vertical-align:super 抬到基线以上；line-height:0 防止把行盒撑高
-			   （行高 18px 是按字体度量算好的，多 1px 同排的行就会错位）。 */
+			   （行高 18px 是按字体度量算好的，多 1px 同排的行就会错位）。
+			   星号挂在名字**后面**（"ponytail*"）：用户拍板 —— 子能力不可能由他手动调用，
+			   所以两种角标不会落在同一个名字上，不需要靠前后位置去区分。 */
 			".dsb-sup{font-size:.7em;line-height:0;vertical-align:super;margin-left:1px}",
+			/* 子能力的 `+` 角标单独加粗：`+` 在这个字号下笔画比 `*` 细一档，不加粗会显得"没画完"。
+			   **只改字重**，字号与行盒都不动（前者会改变两种角标的体量差，后者会撑高行盒）——
+			   与 .dsb-sup 同一套抬升量，同一列表里两行才一样高。 */
+			".dsb-sup-strong{font-weight:600}",
 			/* 积分套餐列表：同一屏最多显示 5 个套餐块，超出就往下滑。高度按单块 37px 推算：
 			   .dsb-credit 上下 padding 2+1=3px + .dsb-meter-row（line-height 18 + padding 1+3=4 → 22px）
 			   + .dsb-bar（height 4 + margin 6+2=8 → 12px）= 37px；5 块 = 185px。
@@ -4072,6 +5049,29 @@ window.__ModuleLoader__.load({
 			   滚动条隐藏但保留滚动：沿用 .dsb-credits-list 那套写法（见下方 ::-webkit-scrollbar）。 */
 			".dsb-meter-cols{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:flex-start;gap:6px 16px;max-height:calc(50vh - 46px);overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}",
 			".dsb-meter-cols::-webkit-scrollbar{display:none}",
+			/* 右缘淡出（用户批准）：还有内容在右边时，最右 COLS_FADE_PX（40px）从实到透明，
+			   暗示"往右还有"。**只是视觉遮罩**：mask-image 不参与排版，宽度/列宽/滚动范围
+			   一个像素都不变。
+			   **宽度固定 40px**（`--dsb-fade-r` 由 applyColsFade 写成 `40px` 或 `0px`），
+			   不随溢出量收窄 —— 用户拍板原话：「遮罩的宽度是固定的呀，溢出两个像素，就抹两个
+			   像素，那样好看吗？」宽度随内容跳变会忽宽忽窄、2px 那档更不成形；
+			   固定 40px + 只在"挂不挂"上二值切换，观感才稳定。常量与 JS 里的 COLS_FADE_PX
+			   是同一个数，改一处必须同步。
+			   这个类由 applyColsFade 按几何切换（没溢出、或已经滚到最右时摘掉），且**在逐档加行
+			   之后会由 refreshColsFade 重算一次** —— 所以"加完行已经不用滚了"时遮罩会立刻消失。
+			   更根本的一条判据：**还能继续加行的容器（`data-cols-grow="1"`）一律不挂遮罩** ——
+			   加行机制保证未到 12 行前程序会继续加行，用户不会真的需要滚；只有加到 12 行仍溢出
+			   才显示（用户原话：「只有超过每列 12 的情况才应该有这个淡出遮罩」）。
+			   **为什么保留 mask 而不用绝对定位覆盖层**：用户反馈的闪烁根因是"每个 scroll 事件
+			   都 toggle class ⇒ mask 每帧重新栅格化"，这一点已在 applyColsFade 里治掉
+			   （只在"挂不挂"真的变化时才碰 class ⇒ 一次滚动过程中 mask 完全不变，只在一个
+			   边界处变一次）。mask 的另一个好处是**零布局改动**：覆盖层方案得给滚动容器加一层
+			   `position:relative` 的包裹元素，而气泡宽度是 `width:max-content` ——
+			   多一层包裹会改变"宽度由谁决定"的链路，容易让超宽气泡的宽度算错（那正是这套
+			   自适应宽度反复踩过的坑）。既然闪烁已从根上解决，就不引入布局风险。
+			   `-webkit-mask-image` 与标准写法并列：DSH 桌面端是 Chromium，新版本支持标准属性，
+			   但旧内核只认带前缀那个，两个都写才不是"在这台机器上不生效"。 */
+			".dsb-cols-fade{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--dsb-fade-l,0px),#000 calc(100% - var(--dsb-fade-r,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--dsb-fade-l,0px),#000 calc(100% - var(--dsb-fade-r,0px)),transparent 100%)}",
 			/* 每列**不收缩**（flex:none）：容器放不下时 flex 默认会先把列压扁（flex-shrink:1），
 			   那等于用"挤扁内容"替代折行 —— 同样是用户禁止的坏形态，而且会让"是否溢出"的
 			   判定失真。列保持自身内容宽度，放不下就交给上面的横向滚动。 */
@@ -4161,7 +5161,16 @@ window.__ModuleLoader__.load({
 			 * （rgb(from …) 是 CSS 相对颜色语法，Chromium 119+ 支持；不支持时上一行的官方原值仍然生效）。 */
 			/* 柔光阴影去掉：只留 .5px 描边，浮层看起来更利落 */
 			/* box-sizing:border-box 必须留着：内联宽度要含 padding，否则面板右边缘会比对齐点偏出 22px */
-			".dsb-tip{position:fixed;box-sizing:border-box;padding:6px 10px;border-radius:var(--dsw-radius-lg,16px);background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-1,#1f1f1f));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));white-space:nowrap;z-index:40;pointer-events:auto}",
+			/* 底栏气泡。**z-index = 105，不是随手取的数**：
+			   官方前端（dsh-web-frontend）的层级档位是 1 / 2 / 6 / 10 / 70 / 100 / 101 / 1000 / 1100，
+			   其中 100 = 气泡/卡片/hovercard/下拉列表、101 = 子菜单、1000 = 对话框与遮罩、
+			   1100 = portal / toast。105 刚好夹在 101 和 1000 之间，两头都照顾到：
+			     · 高于 100/101 ⇒ 对话区那些浮动控件（比如右下角「拉到最后」那个圆形按钮）
+			       会被压在气泡下面，不再挡住气泡最后一列的内容（用户实机报的就是它）；
+			     · 低于 1000/1100 ⇒ 对话框、遮罩、toast 仍然盖在气泡之上 ——
+			       那些是用户必须能点到的系统级弹层，被数据气泡挡住就是严重问题。
+			   早先这里是 40，比官方浮动控件低，所以按钮压在了气泡上。 */
+			".dsb-tip{position:fixed;box-sizing:border-box;padding:6px 10px;border-radius:var(--dsw-radius-lg,16px);background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-1,#1f1f1f));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));white-space:nowrap;z-index:105;pointer-events:auto}",
 			".dsb-sep{color:var(--dsw-alias-separator-primary);margin:0 6px}",
 			/* 整块禁选（用户拍板）：底栏、底栏气泡、设置页按住鼠标拖动会刷出蓝色选中底，
 			   看着像出了 bug。这三处都是插件自己画的纯展示/操作界面，用户没有复制文字的需求；
@@ -4358,6 +5367,1312 @@ window.__ModuleLoader__.load({
 		const DEV_CLICKS = 5;
 		/** 连点计数：两次点击间隔超过这个毫秒数就重新计数（否则慢慢点 5 次也会进去）。 */
 		const DEV_CLICK_WINDOW_MS = 1500;
+
+		/* ---------------------------------------------- 开发模式：解锁记忆 */
+		/**
+		 * 「解锁过开发模式」记在 localStorage 里，**存的是解锁时的 VERSION**。
+		 * 为什么存版本而不是一个 true：版本号升级后 VERSION 常量变了，旧记录自动失效，
+		 * 于是要求重新连点 DEV_CLICKS 次 —— 既不用额外写迁移代码，也不会让作者在升级后
+		 * 忘了手势还能一键进出。
+		 *
+		 * 这个键与配置无关（不参与 CONFIG_VERSION 迁移），因为它只影响一个隐藏手势。
+		 */
+		const DEV_UNLOCK_KEY = "dsh.desktopStatusBar.devUnlock";
+
+		/** 读「解锁时的版本」；任何异常都当没解锁（无痕模式下 localStorage 读写会抛错）。 */
+		function devUnlockVersion() {
+			try {
+				const raw = window.localStorage.getItem(DEV_UNLOCK_KEY);
+				return typeof raw === "string" && raw.length > 0 ? raw : null;
+			} catch (error) {
+				return null;
+			}
+		}
+
+		/** 记住「这一版已经解锁过」。写不进去（无痕模式）就返回 false，行为退化成每次都要连点。 */
+		function rememberDevUnlock() {
+			try {
+				window.localStorage.setItem(DEV_UNLOCK_KEY, VERSION);
+				return true;
+			} catch (error) {
+				return false;
+			}
+		}
+
+		/* ------------------------- 开发模式：每字段独立计数（点哪项只变哪项） */
+		/**
+		 * 用户明确要求（第三次强调，前两次实现都没对上）：
+		 *   「点其中一个底栏，为什么其他所有的底栏都变了？点一个，应该只变那一个啊」
+		 *   「我要求的是，点底栏其中一项，它自己那一项就切换情况」
+		 *
+		 * 所以**每个能开气泡的字段各有一个独立计数器**，点开 X 只让 X +1，其余一动不动。
+		 * 早先只有一个全局 `devBubbleTick`，任何气泡打开都 +1，于是点一个全变 —— 那是错的。
+		 *
+		 * 键就是底栏字段的 id（与 SEGMENTS 的 id 一致，圆环用 "context"）：
+		 *   status / counts / cacheHit / tps / ttft / sessionTime / lastCost / cost / balance / context
+		 */
+		const DEV_FIELD_KEYS = [
+			"status", "counts", "cacheHit", "tps", "ttft",
+			"sessionTime", "lastCost", "cost", "balance", "context"
+		];
+
+		/** 一份全 0 的字段计数表（每次进入开发模式都从这里重来）。 */
+		function devEmptyFieldScenes() {
+			const out = {};
+			DEV_FIELD_KEYS.forEach((key) => { out[key] = 0; });
+			return out;
+		}
+
+		/** 第几次进入开发模式（退出不清零；只做"这是第几次"的记录，不再驱动余额）。 */
+		let devRound = 0;
+
+		/** 每字段独立计数器：{ status: 0, counts: 0, ..., balance: 0, context: 0 }。 */
+		let devFieldScenes = devEmptyFieldScenes();
+
+		/** 给 StatusBar / 设置页订阅用的快照：必须**换对象才换引用**，否则 useSyncExternalStore 会死循环。 */
+		let devSnapshot = { on: false, round: 0, fields: devEmptyFieldScenes() };
+		const devListeners = new Set();
+		function subscribeDev(fn) {
+			devListeners.add(fn);
+			return () => { devListeners.delete(fn); };
+		}
+		function snapshotDev() { return devSnapshot; }
+		function useDevState() {
+			return react.useSyncExternalStore(subscribeDev, snapshotDev, snapshotDev);
+		}
+		/**
+		 * 模块级标记一变就通知：开发模式的假数据必须立刻出现在底栏上。
+		 * 快照里的 `fields` 每次**复制一份** —— 组件按 `fields.xxx` 读到的是稳定的数字，
+		 * 而对象本身换引用才能让 useSyncExternalStore 认为"变了"（不换引用会死循环或者不刷新）。
+		 */
+		function publishDev() {
+			devSnapshot = { on: devMode === true, round: devRound, fields: Object.assign({}, devFieldScenes) };
+			devListeners.forEach((fn) => { try { fn(); } catch (error) { /* 单个订阅者失败不影响其余 */ } });
+		}
+
+		/* ------------------- 开发模式：工具形态场景（5 种，只由 counts 这一个计数驱动） */
+		/**
+		 * 工具调用气泡的**形态**（几列、名字多长）：
+		 *   ① 短气泡（3 个短名） ② 18 个中长名 ③ 420 个极端 ④ 24 个（2 列 × 12 行） ⑤ 长短名极端混排
+		 * 它只听 `counts` 那一个计数 —— 用户要的是"点 counts 才换 counts"，点余额不该把
+		 * 工具形态也换掉（那正是前两版被否掉的行为）。
+		 */
+		const DEV_BUBBLE_SCENES = 5;
+
+		/** 某个字段当前的计数（未初始化 / 非法值都当 0）。 */
+		function devFieldCount(key) {
+			if (devFieldScenes === null || devFieldScenes === undefined) return 0;
+			const value = devFieldScenes[key];
+			return typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+		}
+
+		/**
+		 * 冒泡：**点开哪个字段就只推进哪个字段**（关闭不推进；开发模式外调用一律无效）。
+		 * @param {string} fieldId 字段 id（见 DEV_FIELD_KEYS）
+		 * @returns {number} 推进后的该字段计数
+		 */
+		function advanceDevBubbleScene(fieldId) {
+			if (devMode !== true) return 0;
+			if (typeof fieldId !== "string" || DEV_FIELD_KEYS.indexOf(fieldId) === -1) return 0;
+			devFieldScenes[fieldId] = devFieldCount(fieldId) + 1;
+			publishDev();
+			return devFieldScenes[fieldId];
+		}
+
+		/** 重置所有字段计数（进入开发模式时调用；退出时也清一遍，保证下次从第 1 组开始）。 */
+		function resetDevFieldScenes() {
+			devFieldScenes = devEmptyFieldScenes();
+		}
+		/** 余额轮数 / 工具场景轮数，决定 ((轮-1) % N) + 1 的取模。 */
+		const DEV_BALANCE_ROUNDS = 6;
+		const DEV_TOOL_ROUNDS = 4;
+
+		/* ------------------- 开发模式：上下文圆环的形态（只由 context 计数驱动） */
+		/**
+		 * 圆环要展示 **4 种状态色 × 占用极端** 的组合，每一种都必须在图上**看得见**。
+		 *
+		 * 一条实测教训（用户原话「红色在哪里？」）：最早 error 那格配的是 percent=0，
+		 * 状态类确实挂上了、`stroke:#ef4444` 也确实生效，但**描边长度是 0 像素** ——
+		 * 红色一点都画不出来。所以现在每一格都给足可见的占用；error 给两格
+		 * （65% 中等、92% 接近满），让"红 + 长描边 + 缺口"能同时出现。
+		 *
+		 * **不再演示 dashMeter（空环 + 横杠）那一格**：用户明确否决了"没数据也占一格"
+		 * —— 横杠什么信息都看不出来。兜底代码路径（meterView 返回 null ⇒ dashMeter）
+		 * 当然还在，真实环境照样会走（比如会话刚发出时），只是开发模式不主动演它。
+		 *
+		 * 格序：
+		 *   0 running 55%   —— 常规态（进开发模式立刻看到的就是它）
+		 *   1 error 65%     —— 红色，中等长度
+		 *   2 error 92%     —— 红色，接近满环 + 缺口
+		 *   3 approval 97%  —— 黄色，将满
+		 *   4 idle 55% + 缺口算不出 —— 灰色，且轨道保持整圈（capacity 缺 maxOutputTokens）
+		 *   5 running 100%  —— 满环，描边整圈闭合
+		 *   6 idle 0%       —— 空环（占用 0 这个极端本身，不是"没数据"）
+		 *   7 teamRunning 55% —— **蓝色旋转**：只有团队成员在跑，弧长 = 成员级最大占用
+		 *   8 deepRunning 10% —— **紫色旋转**：只有更深层在跑，弧长 = 深层最小占用
+		 *
+		 * 最后两格是 Agent Teams 那两档颜色。它们的 `percent` 是"Lead 自己的占用"，
+		 * 与真实环境一样：**颜色由谁在跑决定，弧长切到分层百分比**（见 ringPercentOf）。
+		 * 这里故意给两格差异明显的数（55 / 10），开发模式一眼就能看出弧长真的跟着层级变。
+		 */
+		const DEV_CONTEXT_SCENES = 9;
+		/** 假上下文窗口（1M，与官方默认同量级）。压力与容量两处必须用同一个数，否则占用率会自相矛盾。 */
+		const DEV_CONTEXT_WINDOW = 1000000;
+		/** 本次请求的输出上限（384K，官方默认）——压缩点算得出与否就取决于它在不在。 */
+		const DEV_CONTEXT_MAX_OUTPUT = 384000;
+		const DEV_CONTEXT_SCENARIO = [
+			{ state: "running", percent: 55, notchKnown: true },
+			{ state: "error", percent: 65, notchKnown: true },
+			{ state: "error", percent: 92, notchKnown: true },
+			{ state: "approval", percent: 97, notchKnown: true },
+			{ state: "idle", percent: 55, notchKnown: false },
+			{ state: "running", percent: 100, notchKnown: true },
+			{ state: "idle", percent: 0, notchKnown: true },
+			/* 蓝档：成员级占用取**最大**（55），比 Lead 自己的 20 大一截，弧长变化看得出来 */
+			{ state: "teamRunning", percent: 20, notchKnown: true, teamRunning: 2, deepRunning: 0, teamContextPercent: 55, deepContextPercent: null },
+			/* 紫档：深层占用取**最小**（10），比 Lead 自己的 20 小，方向相反也好认 */
+			{ state: "deepRunning", percent: 20, notchKnown: true, teamRunning: 0, deepRunning: 3, teamContextPercent: null, deepContextPercent: 10 }
+		];
+
+		/** 假数据的「现在」：模块加载那一刻固定下来。
+		    为什么必须固定：总计账本按「调用时刻 + token 数」做指纹去重，如果假数据的 at 每帧都变，
+		    每一帧都会被当成一批新调用 —— 底栏上的金额会自己往上涨。 */
+		const DEV_FIXTURE_ANCHOR = Date.now();
+
+		/* ------------------- 开发模式：其余 9 个字段的形态矩阵（每字段独立计数） */
+		/**
+		 * 用户要「开发模式下展示各种情况、各种状态以及极端状况」。
+		 *
+		 * **但「没数据 → 横杠」整类已经被用户否掉**（原话：「就不要做横杠形态啊，
+		 * 既然都没数据，我看得出来什么?」）。理由站得住：横杠什么都看不出来，
+		 * 占一格纯浪费；而且它曾经把用户锁死过一次（点不动就翻不到下一格）。
+		 * 所以现在每张表**只保留两类**：
+		 *   ① 正常有数据  ② 极端值（极大/极小/边界）
+		 * 兜底代码路径（segmentText 的横杠、dashMeter、dashBalance、emptySegmentTip）
+		 * **一律保留** —— 真实环境照样会走（会话刚发出、某平台查不到余额等），
+		 * 只是开发模式不再主动演示它们。
+		 */
+		const DEV_STATUS_SCENES = 2;
+		const DEV_COUNTS_SCENES = 5;
+		const DEV_TTFT_SCENES = 2;
+		const DEV_CACHEHIT_SCENES = 3;
+		const DEV_TPS_SCENES = 2;
+		const DEV_SESSIONTIME_SCENES = 3;
+		const DEV_LASTCOST_SCENES = 3;
+		const DEV_COST_SCENES = 3;
+		/**
+		 * 余额的两个格数**故意不同**，别混：
+		 *   · `DEV_BALANCE_ROUNDS = 6` —— 老契约：`devFixture(round)` 不传字段计数时按它取模，
+		 *     tests 的 6 轮矩阵断言钉着它，**不要动**。
+		 *   · `DEV_BALANCE_CLICK_SCENES = 11` —— 点余额气泡那一路（每点一次换一格）。
+		 *     1~6 是最初那 6 种形态；7~11 是分币种相关的五种
+		 *     （双币种 / 只有美元 / 某项为 0 / 两币种都有赠金 / 只有美元带赠金）。
+		 */
+		const DEV_BALANCE_CLICK_SCENES = 11;
+
+		/**
+		 * 假「现在」：**只喂 status 与 sessionTime 两段**，底栏时钟仍走真实 Date.now()。
+		 *
+		 * 为什么必须假化：status 段就是 `isPeakTime(src.now)` 判出来的，而时钟 state 永远给
+		 * 真实时刻 —— 于是"高峰"那一支在开发模式里几乎永远点不到（除非正好在 9-12 / 14-18）。
+		 * 用户要看到峰谷两种形态，就必须能人为把"现在"放进指定的时段。
+		 *
+		 * 为什么只改 src.now 而不改组件 state：改 state 会连带影响每秒时钟的节奏、
+		 * sessionTime 的 elapsed 累计、以及"当前是否在跑"的判定 —— 牵一发动全身。
+		 * 只在 src 组装处覆盖一次，退出开发模式立刻恢复真实值，风险最小。
+		 *
+		 * 日期从 2026-11-02（周一）起往后找第一个"按 isPeakTime 判定真的符合"的日子：
+		 * 不能硬编码某一天 —— 那天可能是周末或法定节假日（HOLIDAY_SETS 会把它判成低谷），
+		 * 写死就会出现「号称高峰、实际低谷」的自相矛盾。运行时用同一个 isPeakTime 自检。
+		 */
+		const DEV_NOW_CACHE = new Map();
+		function devNowAt(wantPeak) {
+			const key = wantPeak === true ? "peak" : "valley";
+			if (DEV_NOW_CACHE.has(key) === true) return DEV_NOW_CACHE.get(key);
+			/* 北京时间的 10:00 落在高峰、20:00 落在低谷；Date.UTC 的小时数要减 8 才是北京小时 */
+			const hourUtc = wantPeak === true ? 2 : 12;
+			const base = Date.UTC(2026, 10, 2);
+			for (let day = 0; day < 60; day += 1) {
+				const at = base + day * 86400000 + hourUtc * 3600000;
+				if (isPeakTime(at) === (wantPeak === true)) {
+					DEV_NOW_CACHE.set(key, at);
+					return at;
+				}
+			}
+			/* 六十天都找不到（理论上不可能）：退回固定锚点，至少不崩 */
+			DEV_NOW_CACHE.set(key, DEV_FIXTURE_ANCHOR);
+			return DEV_FIXTURE_ANCHOR;
+		}
+
+		/** counts 技能那一路的 30 条名字池（要能看出多列 + 逐档加行，名字长短也要有差）。 */
+		const DEV_SKILL_NAMES = [
+			"i-have-adhd", "ponytail", "cangjie-skill", "ui-ux-pro-max", "chanlun",
+			"office", "office-docx", "office-xlsx", "office-pptx", "office-render",
+			"web-search", "web-fetch", "todo-write", "subagent", "workflow",
+			"ralph", "goal-tools", "skill-install", "agent-team", "cordis-plugin",
+			"diagnose-sandbox", "dsh-badge", "trade-data", "futu-skill", "hithink",
+			"zhouyi", "sunzi", "mao-works", "gann-trend", "elliott-wave"
+		];
+
+		/* 本地日期键用现成的 dateKeyOf（同文件的 dateKeyOf 函数）—— 这里原先另写了一份 devDateKey，
+		   与它逐字节相同（只有"ms 缺省时怎么兜底"不同，而假数据的两个调用点都必传实参），
+		   属于重复实现，已删（审查报告 2-5 条）。 */
+
+		/* ------------------------------ 确定性伪随机（以"场景"为种子） */
+		/**
+		 * 以 `seed` 为基础的确定性伪随机数发生器（xorshift32）。
+		 *
+		 * 为什么**必须**用这个而不是 `Math.random()`：
+		 *   假数据在底栏每次重渲染时都会重新生成。用真随机的话，同一屏里两次渲染的数字不同 ⇒
+		 *   ① 用户看到数字在抖；② 「总计」账本按"调用时刻 + token 数"做指纹去重，每次都是新指纹，
+		 *   金额会自己往上涨。
+		 * 所以：**同一个 seed ⇒ 永远同一串数**（同场景完全稳定），换 seed 才换一组（看起来没规律）。
+		 * 这正是用户要的「随机呀」+ 我们要的「可复现」。
+		 *
+		 * xorshift32 选它是因为：实现只有三行、状态就是一个 32 位整数、分布够用；
+		 * 不需要密码学强度（这只是演示数据）。
+		 */
+		function devRandom(seed) {
+			/* seed 0 是 xorshift 的退化点（永远输出 0），先抬到非零 */
+			let state = (Number(seed) | 0) || 0x9e3779b9;
+			return function next() {
+				state ^= state << 13; state |= 0;
+				state ^= state >>> 17;
+				state ^= state << 5; state |= 0;
+				/* 转成 [0,1)：>>> 0 把它当无符号整数 */
+				return ((state >>> 0) % 100000) / 100000;
+			};
+		}
+
+		/** 把若干场景计数混成一个种子（不同字段组合 ⇒ 不同 seed）。 */
+		function devSeedOf() {
+			let seed = 0x12345678;
+			for (let i = 0; i < arguments.length; i += 1) {
+				const value = typeof arguments[i] === "number" && Number.isFinite(arguments[i]) ? arguments[i] : 0;
+				seed = ((seed * 31) + (value | 0)) | 0;
+			}
+			return seed;
+		}
+
+		/** 用伪随机取一个区间内的整数（含两端）。 */
+		function devRandInt(next, min, max) {
+			const lo = Math.ceil(min);
+			const hi = Math.floor(max);
+			if (hi <= lo) return lo;
+			return lo + Math.floor(next() * (hi - lo + 1));
+		}
+
+		/**
+		 * 工具场景 ③ 的名字池（420 条那档专用）
+		 *
+		 * 用户实机反馈：「工具调用极端情况可滚动的那个情况，工具名太整齐了，看不出效果」。
+		 * 旧实现生成 `tool_001` ~ `tool_420`：全部 8 字符、同前缀、同长度，而列表是
+		 * **按名字长度升序**排的 ⇒ 排出来是一块方正网格，横向滚动滚的全是同样的格子。
+		 *
+		 * 现在改用**真实工具名**，长度从 2 到 37 连续分布，分成四段：
+		 *   · 短名区（2~3 字符）   5 个 —— `ls` / `cat` / `pwd`，排在最前
+		 *   · 原生区（4~18 字符）  59 个 —— `read` / `git_log` / `stream_read`……
+		 *   · MCP 中段（11~21）   336 个 —— `mcp__fs__get` / `mcp__k8s__deploy`……
+		 *   · 极长名（25~37）     20 个 —— `mcp__brave_search__wait_for_selector`……
+		 * 排序按长度分组，所以滚轮滚过去会依次看到「几格窄的 → 越来越宽 → 最后一大片很宽」，
+		 * 一眼能看出确实在滚；最后那批极长名也正好触发 hoverSuppressed。
+		 *
+		 * **坚决不加数字后缀**：给名字补序号会把长度重新抹平，等于把旧问题换个地方重演。
+		 * 420 条互不相同的名字全部由"真实前缀 × 真实动词"组合出来 —— 这些形状在真实的
+		 * 工具/MCP 客户端里就是这么写的，不是占位符。
+		 */
+		const DEV_TOOL_SHORT_NAMES = ["ls", "cat", "pwd", "top", "awk"];
+		const DEV_TOOL_BUILTIN_NAMES = [
+			"read", "edit", "bash", "glob", "grep", "pwsh", "write", "skill", "task", "wait",
+			"kill", "list", "open", "save", "copy", "move", "undo", "redo", "test", "lint",
+			"sync", "push", "pull", "dump", "load", "tidy",
+			"fs_read", "fs_write", "git_log", "git_diff", "git_show", "sql_query", "http_get",
+			"web_fetch", "web_search", "todo_write", "multi_edit", "subagent", "notebook",
+			"image_gen", "db_query", "db_migrate", "fs_tree", "git_blame", "git_stash",
+			"task_wait", "task_kill", "task_list", "file_open", "file_save", "memory_read",
+			"cache_get", "queue_push", "stream_read", "log_query", "health_check", "cron_list",
+			"uuid_generate", "semver_compare"
+		];
+		/* MCP 中段：短服务名 × 短动词，组合出来 11~21 字符（落在「其余在 4~20」那条要求附近）。
+		   服务名长短也拉开（`fs` 2 字符 → `postgres` 8 字符），这样中段自身也有梯度，
+		   而不是从短名区到长名区中间夹一大块等长格子。 */
+		const DEV_MCP_SERVERS = ["fs", "db", "s3", "git", "k8s", "aws", "ssh", "dns", "http", "redis", "kafka", "postgres"];
+		const DEV_MCP_VERBS = [
+			"get", "set", "put", "del", "run", "list", "find", "read", "push", "pull",
+			"sync", "copy", "move", "open", "save", "test", "lint", "scan", "watch", "build",
+			"deploy", "restart", "status", "logs", "tail", "merge", "query", "reload"
+		];
+		/* 极长名：长服务名 × 长动词，组合出来 25~37 字符（触发悬停抑制那一档） */
+		const DEV_MCP_LONG_SERVERS = ["playwright", "filesystem", "memory_bank", "brave_search"];
+		const DEV_MCP_LONG_VERBS = [
+			"merge_pull_request", "wait_for_selector", "evaluate_script", "download_file", "add_comment"
+		];
+
+		/**
+		 * 工具场景（`desktopStatusbarProgress.toolCounts` 的假值）。编号与含义：
+		 *   ① 3 个短名工具（4~7 字符，最窄的一档） ② 18 个名字 2~27 字符（含 >=20 字符的）
+		 *   ③ 420 个**真实长短名混排**（见上面那四组名字池；2~37 字符连续分布）
+		 *   ④ 24 个 4~5 字符短名（2 列 × 12 行）
+		 *   ⑤ 长短名**极端**混排：2 字符与 50+ 字符同屏（只供"点 counts 换形态"那一路）
+		 *
+		 * ①~④ 同时供 `devFixture(round)` 按轮取模用（每轮一种，旧的演示节奏靠它）；
+		 * ⑤ 只在 counts 计数推进时出现，不进轮次取模 ——
+		 * 否则 devFixture 的 4 轮循环会被打破（tests/verify-dev-fixtures.js 有断言盯着）。
+		 */
+		function devToolCounts(scene) {
+			const out = {};
+			if (scene === 1) {
+				out.read = 7;
+				out.edit = 3;
+				out.browser = 2;
+				return out;
+			}
+			if (scene === 2) {
+				/* 名字长度 3~27 混排：底栏的工具列表按名字长度升序排，能看出长短混排的效果 */
+				const names = [
+					"cat", "ls", "grep", "read", "edit", "bash", "pwsh", "glob", "write", "skill",
+					"subagent", "web_fetch", "web_search", "todo_write", "multi_edit",
+					"mcp__demo__search", "mcp__playwright__screenshot", "mcp__agents__spawn_subagent"
+				];
+				names.forEach((name, index) => { out[name] = 1 + (index % 5); });
+				return out;
+			}
+			if (scene === 3) {
+				/* 420 条 = 5 短 + 59 原生 + 336 中段 MCP + 20 极长 MCP。
+				   次数 1~12 各不相同，悬停占比条因此不会全一样。
+				   写入顺序按"短→中→长"，JSON 里读起来也能看出梯度（列表自己排序，与写入顺序无关）。 */
+				let index = 0;
+				const put = (name) => {
+					out[name] = 1 + ((index * 5) % 12);
+					index += 1;
+				};
+				DEV_TOOL_SHORT_NAMES.forEach(put);
+				DEV_TOOL_BUILTIN_NAMES.forEach(put);
+				DEV_MCP_SERVERS.forEach((server) => {
+					DEV_MCP_VERBS.forEach((verb) => put("mcp__" + server + "__" + verb));
+				});
+				DEV_MCP_LONG_SERVERS.forEach((server) => {
+					DEV_MCP_LONG_VERBS.forEach((verb) => put("mcp__" + server + "__" + verb));
+				});
+				return out;
+			}
+			if (scene === 4) {
+				/* 24 个 4~5 字符短名：24 ÷ 12 行 = 2 列，正好停在上限那一档 */
+				const short = [
+					"read", "edit", "bash", "glob", "grep", "pwsh", "task", "wait",
+					"kill", "list", "open", "save", "copy", "move", "undo", "redo",
+					"test", "lint", "sync", "push", "pull", "dump", "load", "tidy"
+				];
+				short.forEach((name, index) => { out[name] = 1 + (index % 4); });
+				return out;
+			}
+			/* ⑤ 长短名极端混排：2 字符的挤在最前、30+ 字符的排在最后（列表按长度升序）。
+			   用来暴露「短名时名字与次数的间隙」与「长名时悬停提示放不下就整组关掉」这两条边界。 */
+			const mixed = [
+				"lm", "ok", "go", "up", "id", "ip",
+				"read", "edit", "bash", "glob", "grep", "skill",
+				"web_search", "todo_write", "mcp__demo__search",
+				"mcp__playwright__screenshot",
+				"mcp__agents__spawn_subagent__with_extra_long_suffix",
+				"mcp__external__fetch_and_transform_document_pipeline"
+			];
+			mixed.forEach((name, index) => { out[name] = 1 + (index % 6); });
+			return out;
+		}
+
+		/**
+		 * 11 种余额形态（点余额那一项的轮换顺序见 DEV_BALANCE_CLICK_SCENES）：
+		 *   ① DeepSeek 金额（充值 70 + 赠金 30，色条按 7:3 分两段）
+		 *   ② 智谱 Coding Plan 百分比配额（isPercent，已用 62.50%）
+		 *   ③ WorkBuddy 积分（1280，rewards：1 个月度包 + 4 个同名裂变包 + 2 个同名普通包）
+		 *   ④ 中转站按量计费（USD 86.40 + 累计消费 13.60）
+		 *   ⑤ 中转站积分制（320 积分，3 个套餐 25% / 50% / 75%）
+		 *   ⑥ DeepSeek 不足一分钱（subCent:true + 已截断的 "0.00" ⇒ 界面显示「余额 <¥0.01」）
+		 *   ⑦ 人民币 + 美元双币种（¥14.12 + $3.17，底栏 `余额 ¥14.12+$3.17`）
+		 *   ⑧ 只有美元一项（`余额 $3.17`，验证单项不带 +）
+		 *   ⑨ 美元项为 0（`余额 ¥14.12`，验证 0 那项不出现）
+		 *   ⑩ **两币种都有赠金**（CNY 10.00+2.50 / USD 4.00+1.00 ⇒ 色条灰约 80% / 紫约 20%）
+		 *   ⑪ 只有美元且带赠金（验证 USD→CNY 折算方向是乘）
+		 *
+		 * 字段名照宿主真实响应（lib/index.js 的 queryBalance / balance-api.js 的 parse）：
+		 * ok / at / currency / total / toppedUp / granted / spent / subCent / isPercent / isCredits / rewards。
+		 * **3.0.0 起 `balances` 每笔也带 `toppedUp` / `granted`**（`{currency, total, toppedUp, granted}`）：
+		 * 气泡里那条「按币种折算的色条」靠它算比例；少了这两个字段会静默退回顶层混合值，
+		 * 于是折算逻辑在开发模式里永远演示不出来（这正是 ⑩ 存在的意义）。
+		 */
+		function devBalanceFixture(which) {
+			const at = DEV_FIXTURE_ANCHOR;
+			if (which === 1) {
+				return {
+					ok: true, at: at, source: "dev", currency: "CNY",
+					total: "100.00", toppedUp: "70.00", granted: "30.00", available: true,
+					parts: [{ label: "toppedUp", amount: "70.00" }, { label: "granted", amount: "30.00" }]
+				};
+			}
+			if (which === 2) {
+				/* 百分比口径：total 带 %、currency 留空（客户端据此不拼货币符号），
+				   气泡里只列「剩余配额」一行 = 100 - 62.50 = 37.50% */
+				return {
+					ok: true, at: at, source: "dev", provider: "zhipu", currency: "",
+					total: "62.50%", isPercent: true, parts: [], toppedUp: "0.00", granted: "0.00"
+				};
+			}
+			if (which === 3) {
+				/* WorkBuddy 积分：rewards 的顺序**必须**是「月度包 → 4 个同名裂变包 → 2 个同名普通包」。
+				   客户端只聚合**相邻同名**包（先聚合、后排序），中间插了别的名字就并不成 ×4 / ×2。
+				   聚合后的 percent：月度 400/800=50%、裂变 396/1200=33%、普通 402/600=67%。 */
+				const split = { name: "个人版国内运营裂变包", used: 99, total: 300, monthly: false, expireAt: "2026-12-31", refreshAt: null };
+				const normal = { name: "活动赠送包", used: 201, total: 300, monthly: false, expireAt: "2026-11-20", refreshAt: null };
+				return {
+					ok: true, at: at, source: "dev", provider: "workbuddy", currency: "",
+					total: "1280", isCredits: true, parts: [],
+					rewards: [
+						{ name: "专业版月度包", used: 400, total: 800, monthly: true, expireAt: null, refreshAt: "2026-11-01" },
+						split, split, split, split,
+						normal, normal
+					]
+				};
+			}
+			if (which === 4) {
+				return {
+					ok: true, at: at, source: "dev", currency: "USD",
+					total: "86.40", toppedUp: "86.40", granted: "0.00", spent: "13.60",
+					parts: [{ label: "toppedUp", amount: "86.40" }, { label: "spent", amount: "13.60" }]
+				};
+			}
+			if (which === 5) {
+				/* 积分制中转站：3 个**不同名**套餐（不聚合），percent 25 / 50 / 75，没有裂变包 */
+				return {
+					ok: true, at: at, source: "dev", currency: "",
+					total: "320", isCredits: true, parts: [],
+					rewards: [
+						{ name: "标准套餐", used: 25, total: 100, monthly: false, expireAt: "2026-12-15", refreshAt: null },
+						{ name: "专业套餐", used: 100, total: 200, monthly: false, expireAt: "2026-11-30", refreshAt: null },
+						{ name: "团队套餐", used: 300, total: 400, monthly: false, expireAt: "2026-11-10", refreshAt: null }
+					]
+				};
+			}
+			if (which === 7) {
+				/* ⑦ **人民币 + 美元双币种**（用户原话那个例子：「我美元模型用了 7.77。
+				   人民币模型用了 145.66。那显示就应该显示 ¥145.66+$7.77」）。
+				   这里用 14.12 / 3.17 两个数（任务指定），底栏应显示 `余额 ¥14.12+$3.17`。
+				   注意 `total` 仍给一个混合值（17.29 = 14.12 + 3.17）：老 host 没有 balances 时
+				   靠它兜底，两者语义一致才不矛盾。
+
+				   **每笔 balances 都带 toppedUp / granted**（3.0.0 起宿主也给）：
+				   没有这两个字段的话，气泡里「按币种折算的色条」永远走回退分支
+				   （只能拿顶层混合值），折算逻辑在开发模式里就一次都演示不出来。
+				   本形态赠金全是 0 ⇒ 色条会是一整段灰（这是正确表现，见形态 10 的双向赠金）。 */
+				return {
+					ok: true, at: at, source: "dev", currency: "CNY",
+					total: "17.29", toppedUp: "17.29", granted: "0.00",
+					parts: [{ label: "toppedUp", amount: "17.29" }, { label: "granted", amount: "0.00" }],
+					balances: [
+						{ currency: "CNY", total: "14.12", toppedUp: "14.12", granted: "0.00" },
+						{ currency: "USD", total: "3.17", toppedUp: "3.17", granted: "0.00" }
+					]
+				};
+			}
+			if (which === 8) {
+				/* ⑧ **只有美元一项**：验证「单项不带 +」——底栏应是 `余额 $3.17`，
+				   不能出现 `¥0.00+$3.17` 那种写法。 */
+				return {
+					ok: true, at: at, source: "dev", currency: "USD",
+					total: "3.17", toppedUp: "3.17", granted: "0.00",
+					parts: [{ label: "toppedUp", amount: "3.17" }, { label: "granted", amount: "0.00" }],
+					balances: [{ currency: "USD", total: "3.17", toppedUp: "3.17", granted: "0.00" }]
+				};
+			}
+			if (which === 9) {
+				/* ⑨ **美元项为 0**：验证用户那条规则「其中有一项为 0…就不用显示这个 +」。
+				   底栏应仍是 `余额 ¥14.12`（0 那项被过滤掉），不会出现 `¥14.12+$0.00`。 */
+				return {
+					ok: true, at: at, source: "dev", currency: "CNY",
+					total: "14.12", toppedUp: "14.12", granted: "0.00",
+					parts: [{ label: "toppedUp", amount: "14.12" }, { label: "granted", amount: "0.00" }],
+					balances: [
+						{ currency: "CNY", total: "14.12", toppedUp: "14.12", granted: "0.00" },
+						{ currency: "USD", total: "0", toppedUp: "0", granted: "0" }
+					]
+				};
+			}
+			if (which === 10) {
+				/* ⑩ **两个币种都有赠金** —— 这是唯一能让「按币种折算的色条」真正出效果的形态。
+				   前几种形态赠金全是 0，色条只会是一整段灰，折算逻辑等于没演示；
+				   这里两个币种各带一部分赠金，折算后应当出现灰 / 紫两段。
+
+				   数值自洽（每笔 toppedUp + granted === total，顶层也等于各笔之和）：
+				     · CNY：10.00 充值 + 2.50 赠金 = 12.50
+				     · USD： 4.00 充值 + 1.00 赠金 =  5.00
+				     · 顶层：14.00 充值 + 3.50 赠金 = 17.50
+				   色条预期（REFERENCE_RATE ≈ 6.7424，折到 CNY）：
+				     充值 = 10.00 + 4.00×6.7424 = 36.97
+				     赠金 =  2.50 + 1.00×6.7424 =  9.24
+				     ⇒ **灰约 80% / 紫约 20%**（仍是两段，不按币种拆四段）。
+				   若看到的是「灰 100%」或「灰 87.9%（直接相加没折算）」，说明折算分支没生效。 */
+				return {
+					ok: true, at: at, source: "dev", currency: "CNY",
+					total: "17.50", toppedUp: "14.00", granted: "3.50",
+					parts: [{ label: "toppedUp", amount: "14.00" }, { label: "granted", amount: "3.50" }],
+					balances: [
+						{ currency: "CNY", total: "12.50", toppedUp: "10.00", granted: "2.50" },
+						{ currency: "USD", total: "5.00", toppedUp: "4.00", granted: "1.00" }
+					]
+				};
+			}
+			if (which === 11) {
+				/* ⑪ **只有美元且带赠金** —— 验证折算方向（USD → CNY 是**乘**汇率，不是除）。
+				   如果方向搞反了，充值/赠金都会被缩小 45 倍，但**比例仍可能是 80:20**，
+				   所以单看百分比看不出错 —— 这条形态主要配合下面 `devBalanceFixture`
+				   的数值断言一起看（折算绝对值对不对）。
+				   数值：USD 4.00 充值 + 1.00 赠金 = 5.00，比例仍是 灰 80% / 紫 20%。 */
+				return {
+					ok: true, at: at, source: "dev", currency: "USD",
+					total: "5.00", toppedUp: "4.00", granted: "1.00",
+					parts: [{ label: "toppedUp", amount: "4.00" }, { label: "granted", amount: "1.00" }],
+					balances: [{ currency: "USD", total: "5.00", toppedUp: "4.00", granted: "1.00" }]
+				};
+			}
+			/* ⑥ 不足一分钱：宿主判定的是**未截断**的 total（0 < total < 0.01 ⇒ subCent:true），
+			   而显示用的 total 已经被 formatBalanceAmount 截到分 ⇒ "0.00"。
+			   客户端只要看到 subCent:true 就显示「余额 <¥0.01」，两个字段必须成对出现。
+			   **保持在第 6 格**：`DEV_BALANCE_ROUNDS`（6 轮矩阵）那条旧契约是按它断言的，
+			   新加的分币种形态排在它后面（7~11），不能把 6 挤走。 */
+			return {
+				ok: true, at: at, source: "dev", currency: "CNY",
+				total: "0.00", subCent: true, toppedUp: "0.00", granted: "0.00",
+				parts: [{ label: "toppedUp", amount: "0.00" }, { label: "granted", amount: "0.00" }]
+			};
+		}
+
+		/** 单次调用的用量记录（desktopStatusbarUsage.calls 的元素，字段照 usageCall schema）。 */
+		function devUsageCall(atMs, input, cacheRead, cacheWrite, output) {
+			return {
+				at: atMs,
+				model: "deepseek-flash",
+				input: input, cacheRead: cacheRead, cacheWrite: cacheWrite, output: output
+			};
+		}
+
+		/**
+		 * desktopStatusbarUsage 的假值。
+		 *
+		 * 两个独立驱动：
+		 *   · `costCount`  —— 「总计」那一堆历史调用（calls / models / overflow）
+		 *   · `lastCostCount` —— 「本轮」那一条（current）与轮号（turn）
+		 * 分成两份的原因：用户要求"点总计只变总计、点本轮只变本轮"。早先一个计数同时驱动两者，
+		 * 点任一个都会让另一个的数字跳。
+		 *
+		 * 金额会**随计数明显变大**：costCount 越大，历史调用的 token 越多（每 +1 多一批），
+		 * 所以「总计」的金额单调上涨、一眼看得出变化。
+		 *
+		 * 时间戳全部以 DEV_FIXTURE_ANCHOR 为基准且与计数无关 ⇒ 同一场景反复调用得到完全相同的
+		 * 指纹（总计账本按"时刻 + token"去重，乱变会让钱自己涨）。
+		 */
+		function devSessionUsageFixture(costCount, lastCostCount, baseTurn, turnEmpty) {
+			const anchor = DEV_FIXTURE_ANCHOR;
+			/* 历史调用：条数与 token 量都随 costCount 增长（阶梯明显，不是微调） */
+			const history = devRandom(devSeedOf(7, costCount));
+			const callTotal = 3 + costCount * 2;
+			const calls = [];
+			for (let i = 0; i < callTotal; i += 1) {
+				const scale = (costCount + 1) * (0.6 + history() * 0.9);
+				calls.push(devUsageCall(
+					anchor - (callTotal - i) * 60000,
+					Math.round(devRandInt(history, 4000, 40000) * scale),
+					Math.round(devRandInt(history, 60000, 700000) * scale),
+					Math.round(devRandInt(history, 0, 12000) * scale),
+					Math.round(devRandInt(history, 6000, 60000) * scale)
+				));
+			}
+			const total = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0 };
+			calls.forEach((one) => {
+				total.input += one.input;
+				total.cacheRead += one.cacheRead;
+				total.cacheWrite += one.cacheWrite;
+				total.output += one.output;
+			});
+			/* 本轮：只由 lastCostCount 驱动；轮号跟着它走，这样「本轮」的粘性下限会作废重算 */
+			const turnNext = devRandom(devSeedOf(8, lastCostCount));
+			const turnNo = typeof baseTurn === "number" && Number.isFinite(baseTurn) ? baseTurn : 1;
+			const turnScale = (lastCostCount + 1) * (0.7 + turnNext() * 1.1);
+			const currentCall = devUsageCall(
+				anchor - 240000,
+				Math.round(devRandInt(turnNext, 3000, 30000) * turnScale),
+				Math.round(devRandInt(turnNext, 40000, 500000) * turnScale),
+				Math.round(devRandInt(turnNext, 0, 8000) * turnScale),
+				Math.round(devRandInt(turnNext, 4000, 50000) * turnScale)
+			);
+			const current = {
+				provider: "deepseek-official", model: "deepseek-flash", time: currentCall.at,
+				input: currentCall.input, cacheRead: currentCall.cacheRead,
+				cacheWrite: currentCall.cacheWrite, output: currentCall.output,
+				/* turnEmpty：本轮还没有任何调用。
+				   segmentView 的 lastCost 就是按 current.calls 逐条算价的 —— 留一条就一定会
+				   算出金额，"正在跑但本轮没调用（¥0.00）"与"空闲无数据（¥-）"两格就都到不了。
+				   轮号（turn）仍保留：它只用来判断"这份用量属不属于本轮"，与本轮有没有调用无关。 */
+				calls: turnEmpty === true ? [] : [currentCall]
+			};
+			return {
+				models: { "deepseek-flash": total },
+				calls: calls,
+				overflow: {},
+				/* 轮号由本轮计数推出：一变「本轮」的轮标识就变，粘性下限自动作废 */
+				turn: turnNo + lastCostCount * 7,
+				current: current,
+				last: calls.length > 2 ? {
+					provider: "deepseek-official", model: "deepseek-flash", time: calls[calls.length - 2].at,
+					input: calls[calls.length - 2].input, cacheRead: calls[calls.length - 2].cacheRead,
+					cacheWrite: calls[calls.length - 2].cacheWrite, output: calls[calls.length - 2].output,
+					calls: [calls[calls.length - 2]]
+				} : current,
+				/* 压缩摘要那一份额外累计（「总计用量」要把它加到官方投影上） */
+				summaryParts: {
+					input: Math.round(total.input * 0.03),
+					cacheRead: Math.round(total.cacheRead * 0.01),
+					cacheWrite: 0,
+					output: Math.round(total.output * 0.015)
+				}
+			};
+		}
+
+		/**
+		 * 当一个月的日历假值（字段照 lib/index.js 的 monthUsagePayload）。
+		 *
+		 * **月份由 status 计数轮换**：用户实机反馈「一直在用 10 月份的呢」—— 早先这里写死
+		 * `new Date(now)` 取当前月，所以月热力图永远停在本月，换月这个 UI 形态根本看不到。
+		 * 现在从**当前月往前推** `shift` 个月（0 = 本月、1 = 上月…），点一次 status 就翻一页。
+		 * 往前推而不是随便取，是为了"连续看几个月"这件事本身说得通。
+		 *
+		 * 每天的用量用确定性伪随机生成（同一个月 ⇒ 同一组数），所以柱高有高有低、不是斜线。
+		 */
+		function devMonthFixture(now, shift) {
+			const back = typeof shift === "number" && Number.isFinite(shift) && shift > 0 ? Math.floor(shift) : 0;
+			const today = new Date(now);
+			/* 用 Date 的月份归一化能力往前推（它会自动跨年） */
+			const first = new Date(today.getFullYear(), today.getMonth() - back, 1);
+			const year = first.getFullYear();
+			const month = first.getMonth() + 1;
+			const firstWeekday = (new Date(year, month - 1, 1).getDay() + 6) % 7;
+			const daysInMonth = new Date(year, month, 0).getDate();
+			const lastWeekday = (new Date(year, month - 1, daysInMonth).getDay() + 6) % 7;
+			const gridDays = daysInMonth + firstWeekday + (6 - lastWeekday);
+			const gridStart = new Date(year, month - 1, 1 - firstWeekday);
+			/* 这个月的伪随机种子 = 年月（同一个月永远同一组数） */
+			const next = devRandom(devSeedOf(11, year * 100 + month));
+			const days = [];
+			let max = 0;
+			let maxDate = null;
+			for (let i = 0; i < gridDays; i += 1) {
+				const at = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i).getTime();
+				const key = dateKeyOf(at);
+				const inMonth = i >= firstWeekday && i < firstWeekday + daysInMonth;
+				/* 每天的量：伪随机 + 周末更低（真实用量确实有周末效应），不是等差 */
+				const weekday = (new Date(at).getDay() + 6) % 7;
+				const weekend = weekday >= 5 ? 0.35 : 1;
+				const total = inMonth === true
+					? Math.round((600 + next() * 9000) * weekend)
+					: 0;
+				const input = Math.round(total * (0.08 + next() * 0.12));
+				const cacheRead = Math.round(total * (0.6 + next() * 0.18));
+				const cacheWrite = Math.round(total * (0.01 + next() * 0.03));
+				const output = Math.max(0, total - input - cacheRead - cacheWrite);
+				/* 量级与 devDailyFixture 对齐（1 元级）：原来是 `total/1e6`，当月单日只有 0.01 级，
+				   而「金额不足 0.01 不显示」那条规则一上，日历上会全是 ¥0.00 —— 开发模式就验证不到
+				   分币种格式了。把 1e6 改成 1e4 等于放大 100 倍，落到 1~几元这一档。
+				   （只动量级，不动拆币逻辑：costByCurrency 各项之和仍严格等于 cost。） */
+				const dayCost = total > 0 ? Math.round(total / 1e4 * 2.2 * 10000) / 10000 : 0;
+				days.push({
+					date: key,
+					inMonth: inMonth,
+					total: total,
+					calls: total > 0 ? Math.round(1 + next() * 9) : 0,
+					cost: dayCost,
+					/* 分币种：按格序号轮换三种形态（混币 / 只有人民币 / 只有美元），
+					   各币种之和 === cost；合计为 0 的天给空对象（没费用就没有币种） */
+					costByCurrency: devCostSplit(dayCost, devCostShapeAt(i)),
+					input: input, cacheRead: cacheRead, cacheWrite: cacheWrite, output: output
+				});
+				if (inMonth === true && total > max) {
+					max = total;
+					maxDate = key;
+				}
+			}
+			return { year: year, month: month, max: max, maxDate: maxDate, days: days };
+		}
+
+		/**
+		 * 当年 12 个月聚合假值（字段照 lib/index.js 的 yearUsagePayload）。
+		 * 每月一个伪随机量（同一年的值稳定），不是"逐月 +9000"那种斜线。
+		 */
+		function devYearFixture(now, shift) {
+			const back = typeof shift === "number" && Number.isFinite(shift) && shift > 0 ? Math.floor(shift) : 0;
+			const first = new Date(new Date(now).getFullYear(), new Date(now).getMonth() - back, 1);
+			const year = first.getFullYear();
+			const next = devRandom(devSeedOf(12, year));
+			const months = [];
+			let max = 0;
+			let maxMonth = null;
+			for (let m = 1; m <= 12; m += 1) {
+				const input = Math.round(devRandInt(next, 8000, 260000));
+				const cacheRead = Math.round(devRandInt(next, 60000, 3200000));
+				const cacheWrite = Math.round(devRandInt(next, 0, 40000));
+				const output = Math.round(devRandInt(next, 20000, 420000));
+				const total = input + cacheRead + cacheWrite + output;
+				/* **保持 1e6 不动**：年度桶的 `total` 是「四个 token 数相加」（百万级），
+				   本身比月度的单日 `total`（几百）大 ~400 倍，所以 1e6 算出来就是 1~5 元，
+				   已经是与 devDailyFixture 同量级。真正太小的是月度那条（见 devMonthFixture）。 */
+				const monthCost = Math.round(total / 1e6 * 2.2 * 10000) / 10000;
+				months.push({
+					month: m, total: total, calls: devRandInt(next, 4, 120),
+					cost: monthCost,
+					/* 分币种：12 个月也轮换三种形态，各币种之和 === cost */
+					costByCurrency: devCostSplit(monthCost, devCostShapeAt(m - 1)),
+					input: input, cacheRead: cacheRead, cacheWrite: cacheWrite, output: output
+				});
+				if (total > max) {
+					max = total;
+					maxMonth = m;
+				}
+			}
+			return { year: year, max: max, maxMonth: maxMonth, months: months };
+		}
+
+		/**
+		 * 活跃总览（峰谷气泡）假值：近 7 天 + 当月日历 + 12 个月方块，字段照 /api/daily-usage。
+		 *
+		 * **全部由 status 计数驱动**（用户要"点峰谷那一项只变峰谷"）：
+		 *   · 月份往前翻 `status` 个月（月热力图不再永远停在本月）
+		 *   · 近 7 天的柱高用确定性伪随机生成，有高有低 —— 用户原话「随机呀，懂不懂什么叫随机？」，
+		 *     明确不要"每天比前一天多 1200"那种等差斜线
+		 * 同一 status 值 ⇒ 同一组数（同场景稳定，总计账本不会被带乱）。
+		 */
+		function devDailyFixture(now, statusCount) {
+			const shift = typeof statusCount === "number" && Number.isFinite(statusCount) && statusCount > 0
+				? Math.floor(statusCount)
+				: 0;
+			const today = new Date(now);
+			const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6).getTime();
+			/* 种子里带 shift：每翻一次月/点一次 status，整组数都换一遍 */
+			const next = devRandom(devSeedOf(13, shift));
+			const days = [];
+			const totals = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, total: 0, calls: 0, cost: 0 };
+			for (let i = 0; i < 7; i += 1) {
+				const at = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6 + i).getTime();
+				const weekday = (new Date(at).getDay() + 6) % 7;
+				/* 周末低谷 + 每根柱子独立随机：相邻两天可能相差好几倍，也可能相近 —— 看不出规律 */
+				const weekend = weekday >= 5 ? 0.3 : 1;
+				const input = Math.round(devRandInt(next, 2000, 30000) * weekend);
+				const cacheRead = Math.round(devRandInt(next, 30000, 900000) * weekend);
+				const cacheWrite = Math.round(devRandInt(next, 0, 9000) * weekend);
+				const output = Math.round(devRandInt(next, 4000, 120000) * weekend);
+				const total = input + cacheRead + cacheWrite + output;
+				const cost = Math.round(total / 1e6 * 2.2 * 10000) / 10000;
+				const peakRatio = 0.35 + next() * 0.4;
+				const peak = {
+					input: Math.round(input * peakRatio), cacheRead: Math.round(cacheRead * peakRatio),
+					cacheWrite: Math.round(cacheWrite * peakRatio), output: Math.round(output * peakRatio)
+				};
+				peak.total = peak.input + peak.cacheRead + peak.cacheWrite + peak.output;
+				/* 分币种金额：三天形态轮换（混币 / 只有人民币 / 只有美元），
+				   与 `cost` 严格相等 —— 悬停逐天看就能看到 `¥x+$y`、`¥x`、`$y` 三种写法。 */
+				const costByCurrency = devCostSplit(cost, devCostShapeAt(i));
+				days.push({
+					date: dateKeyOf(at), input: input, cacheRead: cacheRead, cacheWrite: cacheWrite,
+					output: output, total: total, calls: Math.round(2 + next() * 14),
+					peak: peak, cost: cost, costByCurrency: costByCurrency
+				});
+				totals.input += input;
+				totals.cacheRead += cacheRead;
+				totals.cacheWrite += cacheWrite;
+				totals.output += output;
+				totals.total += total;
+				totals.calls += days[days.length - 1].calls;
+				totals.cost += cost;
+			}
+			totals.cost = Math.round(totals.cost * 10000) / 10000;
+			/* 周汇总也要带分币种（周条悬停读的是 totals）：把 7 天各自那份相加，
+			   各币种之和因此**严格等于** totals.cost（不是另外造一个数）。 */
+			const totalsByCurrency = {};
+			days.forEach((one) => {
+				const map = one.costByCurrency;
+				if (map === null || map === undefined || typeof map !== "object") return;
+				Object.keys(map).forEach((code) => {
+					totalsByCurrency[code] = Math.round(((totalsByCurrency[code] || 0) + map[code]) * 10000) / 10000;
+				});
+			});
+			totals.costByCurrency = totalsByCurrency;
+			return {
+				ok: true, at: now, rangeStart: start,
+				days: days, totals: totals,
+				month: devMonthFixture(now, shift), year: devYearFixture(now, shift)
+			};
+		}
+
+		/**
+		 * 队友（子智能体）用量假值：`session`（整会话，供「总计」）与 `turn`（本轮窗口，供「本轮」）
+		 * 两段都给 ok:true 且 cost > 0，界面上两侧都能看出「已经把队友并进来」。
+		 *
+		 * **刻意不随任何字段计数变化**（`seed` 只由 devRound 决定）：队友那两段同时进「总计」
+		 * 与「本轮」，一旦跟着某字段变，点别的气泡时金额也会动 —— 那正是用户反对的串扰。
+		 * 字段照 /api/subagent-usage 的真实响应（total.cost / tokens / calls / stats / costByCurrency）。
+		 */
+		function devSubagentFixture(sessionId, seed) {
+			const next = devRandom(devSeedOf(14, seed));
+			const pick = (min, max) => devRandInt(next, min, max);
+			const tokensOf = (input, cacheRead, cacheWrite, output) => ({
+				input: input, cacheRead: cacheRead, cacheWrite: cacheWrite, output: output
+			});
+			const sessionCost = Math.round((0.4 + next() * 6) * 100) / 100;
+			const turnCost = Math.round((0.1 + next() * 1.6) * 100) / 100;
+			const sessionTokens = tokensOf(pick(8000, 40000), pick(40000, 220000), pick(0, 3000), pick(12000, 70000));
+			const turnTokens = tokensOf(pick(1000, 8000), pick(6000, 40000), 0, pick(2000, 16000));
+			return {
+				session: {
+					ok: true, sessionId: sessionId, sinceSource: "client", running: 0,
+					children: [{ id: "dev-subagent-1", cost: sessionCost, tokens: sessionTokens, calls: pick(3, 20) }],
+					total: {
+						cost: sessionCost, costByCurrency: { CNY: sessionCost }, tokens: sessionTokens,
+						calls: pick(3, 20),
+						stats: {
+							ttftMs: pick(2000, 12000), ttftSteps: pick(1, 4),
+							decodeMs: pick(8000, 60000), decodeTokens: pick(2000, 12000)
+						}
+					}
+				},
+				turn: {
+					ok: true, sessionId: sessionId, sinceSource: "client", running: 0,
+					children: [{ id: "dev-subagent-1", cost: turnCost, tokens: turnTokens, calls: pick(1, 5) }],
+					total: {
+						cost: turnCost, costByCurrency: { CNY: turnCost }, tokens: turnTokens, calls: pick(1, 5),
+						stats: { ttftMs: 0, ttftSteps: 0, decodeMs: 0, decodeTokens: 0 }
+					}
+				}
+			};
+		}
+
+
+		/* ----------------------- 每个数据槽听哪个字段计数（点哪项只变哪项的核心）
+		 *
+		 * 归属取舍（写在 devFixture 里，没单列成映射表 —— 那张表自从写好后一次都没被读过，
+		 * 各槽位全是硬编码的，留着只会让人以为改表就能改行为）：
+		 *   · `stats.decodeMs` / `decodeTokens` —— 归 **tps**。它们同时被「综合速度」
+		 *     （decodeTokens/decodeMs）与「总用时」气泡的"模型用时"读，二选一；
+		 *     归 tps 是因为那两项是速度的直接分子分母，归 sessionTime 会让"点总用时"时
+		 *     速度也跟着变（更违反"点哪项只变哪项"）。
+		 *     代价：点 tps 时总用时气泡里的"模型用时"一行也会变 —— 但底栏那个总时长不变，
+		 *     属于可接受的最小串扰。
+		 *   · `sessionUsage.current`（本轮）—— 归 **lastCost**。它同时被「本轮费用」与
+		 *     「本轮命中率」读；本轮费用是那个字段的主数字，命中率另有 usage 那条路。
+		 *   · `sessionUsage.turn` —— 归 **lastCost**。它一变「本轮」的轮标识就变，
+		 *     同轮粘性下限自动作废、本轮金额因此能真的跟着换，而不是被旧下限锁住。
+		 *   · `usage.*`（官方 tokenUsage）—— 归 **cacheHit**。综合命中率的分母就是它；
+		 *     它同时也进「总计」气泡的 token 明细（底栏金额不受影响），属于可接受串扰。
+		 *   · 表里没提到的槽位（例如 subagent、sessionModel）**永远不变** ——
+		 *     这样点任何一个气泡都不会顺手改到别人的数据。
+		 */
+
+		/**
+		 * 生成整套假投影。
+		 *
+		 * 入参 `fieldScenes` 是**每字段独立计数**（见 DEV_FIELD_KEYS）：
+		 *   { status:0, counts:2, cacheHit:0, tps:0, ttft:0, sessionTime:0,
+		 *     lastCost:0, cost:1, balance:3, context:0 }
+		 * 每个槽位只读自己那个字段的计数，于是：
+		 *   **点开哪个气泡，就只有那个气泡的数据变**。
+		 *
+		 * 完全不传时所有计数为 0，且 balance / toolCounts 仍按 round 取模 ——
+		 * 这样 `devFixture(round, t)` 这个纯函数契约与 tests/verify-dev-fixtures.js 的
+		 * 6 轮余额 / 4 轮工具断言原样成立。
+		 *
+		 * 一级字段（与 StatusBar 读投影的名字一一对应，注入时按这些键覆盖）：
+		 *   balance / stats / usage / sessionUsage / timing / pressure / breakdown /
+		 *   capacity / progress / timeRange / daily / subagent / sessionModel
+		 */
+		function devFixture(round, t, fieldScenes) {
+			const value = typeof round === "number" && Number.isFinite(round) ? Math.max(1, Math.floor(round)) : 1;
+			/* 归一化第三个参数：只接受对象（调用方一律传对象或 undefined） */
+			const scenes = fieldScenes !== null && fieldScenes !== undefined && typeof fieldScenes === "object"
+				? fieldScenes
+				: null;
+			const countOf = (key) => {
+				if (scenes === null) return 0;
+				const raw = scenes[key];
+				return typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? Math.floor(raw) : 0;
+			};
+
+			const balanceCount = countOf("balance");
+			const statusCount = countOf("status");
+			const countsCount = countOf("counts");
+			const ttftCount = countOf("ttft");
+			const tpsCount = countOf("tps");
+			const cacheHitCount = countOf("cacheHit");
+			const sessionTimeCount = countOf("sessionTime");
+			const costCount = countOf("cost");
+			const lastCostCount = countOf("lastCost");
+			const contextCount = countOf("context");
+
+			const at = DEV_FIXTURE_ANCHOR;
+
+			/* ---------- 余额：只听 balance ---------- */
+			/* 没传场景时按 round 取模（旧契约，测试的 6 轮矩阵契约不变）；
+			   传了就从第 1 种起、每点一次前进一种。
+			   **点击时是 11 格**（见 DEV_BALANCE_CLICK_SCENES）：1~6 是最初的 6 种真实形态
+			   （金额 / 百分比配额 / 积分 / USD / 积分制 / 不足一分钱），7~11 是五种分币种形态
+			   （双币种 / 只有美元 / 某项为 0 / 两币种都有赠金 / 只有美元带赠金）。**不再有「完全查不到」那一格**
+			   （ok:false ⇒ 两行横杠）—— 用户已明确不要演示横杠。
+			   dashBalance 兜底路径保留，真实环境照样会走。
+			   （原先这里还有一个 balanceClickScene 变量，取值后从未被读，已删。） */
+			/* 两条路用**不同的格数**，别混：
+			   · `scenes === null`（不传字段计数，测试用的旧契约）⇒ 按老契约 `DEV_BALANCE_ROUNDS`（6 轮）
+			     取模，tests 的 6 轮矩阵断言钉着它；
+			   · 点余额气泡那一路 ⇒ 走 `DEV_BALANCE_CLICK_SCENES`（11 格），每点一次换一格。
+			   **两者故意不同**：老契约（6 轮）只服务于 `scenes === null` 那条路径，
+			   点击路径按 11 格走，1~6 的原形态和 7~11 的分币种形态才都能点到。 */
+			const balanceRound = scenes === null
+				? ((value - 1) % DEV_BALANCE_ROUNDS) + 1
+				: (balanceCount % DEV_BALANCE_CLICK_SCENES) + 1;
+			/* ---------- 轮次/步数/工具形态：只听 counts ---------- */
+			/* counts 5 格，**全部有数据**（横杠那格已按用户要求删掉）：
+			   0 正常 / 1 **技能 30 条**（多列 + 逐档加行）/ 2 压缩 20 条（列表滚动）/
+			   3 工具 0 条（子视图里一行占位，但**底栏本身仍有轮次步数**，不是横杠）/
+			   4 技能 6 条且同时带 * 与 + 两种角标。
+			   工具形态本身有 5 档（DEV_BUBBLE_SCENES），与上面不是一一对应，仍按 counts 取模轮换。 */
+			const countsScene = countsCount % DEV_COUNTS_SCENES;
+			const toolRound = scenes === null
+				? ((value - 1) % DEV_TOOL_ROUNDS) + 1
+				: (countsCount % DEV_BUBBLE_SCENES) + 1;
+			const toolCounts = countsScene === 3 ? {} : devToolCounts(toolRound);
+			let toolCalls = 0;
+			Object.keys(toolCounts).forEach((name) => { toolCalls += toolCounts[name]; });
+
+			/* counts 这一路的伪随机：轮次、步数、技能条数都从这里出。
+			   **压缩不再单独随机条数** —— 见下面 compacts 生成处的说明。 */
+			const countsNext = devRandom(devSeedOf(2, countsCount));
+			/* 轮次与步数**永远有值**：横杠那一格删掉之后，`segmentView` 的 `!(stats.steps > 0)`
+			   分支在开发模式里不再被触发（它作为兜底仍然留着）。 */
+			const turns = devRandInt(countsNext, 3, 48);
+			const steps = devRandInt(countsNext, turns + 2, turns * 9 + 12);
+			const turnNo = devRandInt(countsNext, 1, turns);
+			const turnSteps = devRandInt(countsNext, 1, 9);
+			/* 第 1 格 30 条技能（多列 + 逐档加行）、第 4 格 6 条但两种角标都在 */
+			const skillCount = countsScene === 1 ? DEV_SKILL_NAMES.length
+				: (countsScene === 4 ? 6 : devRandInt(countsNext, 2, 5));
+			/* 第 0 格：压缩 20 条 —— 超过列表的半屏高度上限，点进去要能滚 */
+			const compactTotal = countsScene === 0 ? 20 : devRandInt(countsNext, 2, 4);
+
+			/* ---------- 首字：只听 ttft ---------- */
+			/* 2 格，都有数据：0 正常 / 1 极端慢（2 次共 68000ms ⇒ 平均 34s，单次 30 秒以上） */
+			const ttftScene = ttftCount % DEV_TTFT_SCENES;
+			const ttftNext = devRandom(devSeedOf(3, ttftCount));
+			const ttftSteps = ttftScene === 1 ? 2 : devRandInt(ttftNext, 2, 30);
+			const ttftMs = ttftScene === 1 ? 68000 : devRandInt(ttftNext, ttftSteps * 300, ttftSteps * 9000);
+			const turnTtftMs = devRandInt(ttftNext, 400, 14000);
+			const fastestTtft = devRandInt(ttftNext, 300, 1600);
+			const slowestTtft = ttftScene === 1 ? 34000 : devRandInt(ttftNext, 2500, 42000);
+
+			/* ---------- 速度：只听 tps ---------- */
+			/* 2 格，都有数据：0 正常 / 1 个位数速度（1200 tokens / 200s = 6 t/s） */
+			const tpsScene = tpsCount % DEV_TPS_SCENES;
+			const tpsNext = devRandom(devSeedOf(4, tpsCount));
+			const decodeMs = tpsScene === 1 ? 200000 : devRandInt(tpsNext, 20000, 2100000);
+			const decodeTokens = tpsScene === 1 ? 1200 : devRandInt(tpsNext, 5000, 520000);
+			const fastestTps = tpsScene === 1 ? 9 : devRandInt(tpsNext, 60, 180);
+			const slowestTps = tpsScene === 1 ? 6 : devRandInt(tpsNext, 3, 40);
+			const turnDecodeMs = devRandInt(tpsNext, 300, 30000);
+			const turnDecodeTokens = devRandInt(tpsNext, 20, 3600);
+
+			/* ---------- 命中率：只听 cacheHit ---------- */
+			/* 3 格，都有数据：0 正常 / 1 顶到 99.99% 封顶 / 2 一次都没命中（0%） */
+			const hitScene = cacheHitCount % DEV_CACHEHIT_SCENES;
+			const hitNext = devRandom(devSeedOf(5, cacheHitCount));
+			let usage;
+			if (hitScene === 1) {
+				/* 未命中只留 1 个 token：比例 99.99999…%，被 Math.min(99.99, …) 压到封顶值 */
+				usage = { uncachedInputTokens: 1, cacheReadTokens: 8000000, cacheWriteTokens: 0, outputTokens: 120000 };
+			} else if (hitScene === 2) {
+				/* 命中为 0：分母全落在未命中那一侧，比例正好 0% */
+				usage = { uncachedInputTokens: 900000, cacheReadTokens: 0, cacheWriteTokens: 0, outputTokens: 120000 };
+			} else {
+				usage = {
+					uncachedInputTokens: devRandInt(hitNext, 20000, 1800000),
+					cacheReadTokens: devRandInt(hitNext, 200000, 26000000),
+					cacheWriteTokens: devRandInt(hitNext, 0, 460000),
+					outputTokens: devRandInt(hitNext, 30000, 2400000)
+				};
+			}
+
+			/* ---------- 总用时：只听 sessionTime ---------- */
+			/* 3 格，都有数据：0 分钟级 / 1 超过 1 小时（4500000ms = 1h15m）/ 2 不足一分钟（42000ms = 42s） */
+			const timeScene = sessionTimeCount % DEV_SESSIONTIME_SCENES;
+			const timeNext = devRandom(devSeedOf(6, sessionTimeCount));
+			const llmMs = timeScene === 1 ? 3000000 : devRandInt(timeNext, 60000, 2400000);
+			const toolMs = timeScene === 1 ? 900000 : devRandInt(timeNext, 12000, 900000);
+			const durationMs = timeScene === 1 ? 4500000
+				: (timeScene === 2 ? 42000 : llmMs + toolMs + devRandInt(timeNext, 30000, 2600000));
+
+			/* ---------- 上下文占用：只听 context ---------- */
+			/* 点一次 context 前进一格：第 0 格是进开发模式立刻看到的常规态，1~5 格是各极端。
+			   占用百分比、缺口算不算得出、有没有窗口，**三样都从同一张表出** ——
+			   各自随机的话很容易撞出「0% 却算得出缺口」「缺窗口却画着占用」这种自相矛盾的组合，
+			   而开发模式的意义恰恰是每种形态都能被如实地看一眼。 */
+			const ctxScene = DEV_CONTEXT_SCENARIO[contextCount % DEV_CONTEXT_SCENES];
+			const ctxNext = devRandom(devSeedOf(9, contextCount));
+			/* 占用率直接从 percent 反算成 token 数（0% 就是真的一个 token 都没占）。
+			   这里**不再判「有没有窗口」**：场景表 7 格全都带 percent，而「缺 contextWindow ⇒
+			   dashMeter 空环 + 横杠」那一格已按用户要求删掉 —— 留着那个判断只会恒为 true，
+			   属于死分支（审查报告 2-3 条）。dashMeter 本身作为兜底仍留在 meterView 里。 */
+			const projectedTokens = Math.round(DEV_CONTEXT_WINDOW * ctxScene.percent / 100);
+			/* 分项三段之和必须等于总占用：小占用时先给每段封顶（总占用的三分之一），
+			   否则 0% 那格会算出负数消息段，圆环与分项气泡立刻自相矛盾。 */
+			const segmentCap = Math.floor(projectedTokens / 3);
+			const systemTokens = projectedTokens === 0 ? 0 : Math.min(devRandInt(ctxNext, 1200, 4200), segmentCap);
+			const toolsTokens = projectedTokens === 0 ? 0 : Math.min(devRandInt(ctxNext, 4500, 22000), segmentCap);
+			const messageTokens = Math.max(0, projectedTokens - systemTokens - toolsTokens);
+
+			/* ---------- 总计：只听 cost；本轮：只听 lastCost ---------- */
+			/* lastCost 3 格，**三格都有金额**（横杠那格已删）：
+			   0 有调用（正常） / 1 正在跑但本轮还没有调用（active 分支，显示 ¥0.00）/
+			   2 空闲、显示最近一轮。
+			   `turnKey` 跟着 lastCost 计数走：否则「本轮只增不减」的下限会把上一格的大数字
+			   顶住，¥0.00 那条分支永远出不来（下限的作废条件就是换轮）。
+			   第 1 格要连 sessionUsage.current.calls 一起清空 —— 留着一条就一定能算出金额，
+			   ¥0.00 那条分支永远到不了（见 devSessionUsageFixture 的 turnEmpty）。 */
+			const lastCostScene = lastCostCount % DEV_LASTCOST_SCENES;
+			const devRunning = lastCostScene === 1;
+			const devTurnKey = "dev-turn-" + String(lastCostScene);
+			/* 第 1 格「在跑但还没调用」要求本轮用量为空 */
+			const devTurnEmpty = lastCostScene === 1;
+
+			/* cost 3 格，**三格都有金额显示**（横杠那格已删）：
+			   0 正常（队友也并入）/ 1 队友不并入（看总计只算本会话）/ 2 金额暴涨（长会话极端）。
+			   「算不出价」那条兜底（held.cost === null ⇒ ¥-）仍然留着，只是不再演示。 */
+			const costScene = costCount % DEV_COST_SCENES;
+			const subSessionZeroed = costScene === 1;
+			const sessionUsage = devSessionUsageFixture(costCount, lastCostCount, turnNo, devTurnEmpty);
+
+			/* ---------- 活跃总览：只听 status ---------- */
+			/* status 2 格，**都有数据**（"整块查不到"那两格已删）：
+			   0 低谷 + 数据齐全 / 1 高峰 + 数据齐全。 */
+			const statusScene = statusCount % DEV_STATUS_SCENES;
+			const peakNow = statusScene === 1;
+			/* 假「现在」：月历、年条、峰谷文字、总用时 elapsed **必须同源**。
+			   用真实 `Date.now()`（at）去生成月历、却用假 now 去算「今天」的话，两边会跨月：
+			   月历落在真实当月、todayKey 落在假 now 那个月，于是 `day.date > todayKey`
+			   永远不成立 —— 月热力图与年条那两个"未来日"灰阶在开发模式里一天都看不到。
+			   开发模式的意义就是每种形态都能被看一眼，所以统一取 devNowAt（同一个峰谷档）。 */
+			const dailyNow = devNowAt(peakNow);
+			const daily = devDailyFixture(dailyNow, statusCount);
+
+			/* 轮次项气泡那三行：压缩固定两条（自动 + 手动，展示契约），技能条数听 counts */
+			const skillPool = [
+				{ name: "i-have-adhd", manual: true },
+				{ name: "cangjie-skill", manual: false },
+				{ name: "ponytail", manual: false },
+				{ name: "deepseek-harness", manual: false },
+				{ name: "sub-capability-demo", manual: false, sub: true }
+			];
+			/* 技能列表：**第 1 格 30 条**（触发多列 + 逐档加行）、**第 4 格 6 条**且两种角标都在，
+			   其余格沿用原来那 2~5 条的小池子。
+			   这里必须取 DEV_SKILL_NAMES（30 条名字池）而不是下面那个只有 5 条的 skillPool：
+			   5 条无论怎么 slice 都凑不出 30 条 —— 那正是旧代码「30 条那格永远出不来」的根因
+			   （旧条件是 `=== 3 || === 5`，而 countsScene 只可能是 0~4，5 永不成立，
+			   而 count 为 30 的第 1 格又落到了 `skillPool.slice(0, 30)`，被截成 5 条）。
+			   变量名不能叫 skillList —— 那是同名的列表构造函数，遮蔽了会静默改掉语义。 */
+			const devSkills = countsScene === 1 || countsScene === 4
+				? DEV_SKILL_NAMES.slice(0, skillCount).map((name, index) => ({
+					name: name,
+					/* 第 4 格：隔三个标一种来源，`名字*` 与 `名字+` 都能看到 */
+					manual: countsScene === 4 ? index % 3 === 0 : index % 5 === 1,
+					sub: countsScene === 4 ? index % 3 === 1 : index % 5 === 3
+				}))
+				: skillPool.slice(0, skillCount);
+
+			/* 队友两段（几处刻意归零，各自只服务一个形态，都不动别人的那份）：
+			   · cost 第 1 格「一条都算不出价」—— 队友金额一进账本就会把 priced 置 true，
+			     不归零就永远走不到横杠；第 2 格「队友不并入」同样清零。
+			   · lastCost 第 1 格「正在跑但本轮没调用」要 ¥0.00、第 3 格要横杠 ——
+			     两者都要求本轮队友金额为 0，否则活分支会直接把队友那笔显示出来。
+			   · ttft / tps / cacheHit 的「没数据」与「极端值」格：这三个段都是
+			     **本会话 + 队友**合并后再算的（mergedSessionStats / billedInputTokens + sub），
+			     本会话那一半清零了，队友那份仍会把结果抬起走 —— 横杠与个位数速度因此永远出不来。
+			     所以按字段只清**它自己依赖的那几项**（ttft 组 / decode 组 / tokens 组互不重叠），
+			     避免"点首字却把速度也改了"这种串扰。 */
+			const subagent = devSubagentFixture("dev-" + String(value), devSeedOf(10));
+			const zeroCostOf = (slice) => {
+				slice.total.cost = 0;
+				slice.total.costByCurrency = { CNY: 0 };
+				slice.children.forEach((one) => { one.cost = 0; });
+			};
+			if (subSessionZeroed === true) zeroCostOf(subagent.session);
+			/* 只清「在跑但还没调用」那一格（lastCost 第 1 格）：要把 ¥0.00 显示出来，
+			   本轮队友那份金额必须是 0，否则活分支会直接把队友那笔显示成金额。
+			   （原来还有第 3 格「算不出价 ⇒ 横杠」，那格已按用户要求删掉。） */
+			if (lastCostScene === 1) zeroCostOf(subagent.turn);
+			/* 队友的 stats 两段都在 session 那份里（subagentStatsOf 只读 session.total.stats） */
+			const subStats = subagent.session.total.stats;
+			if (ttftScene !== 0) {
+				subStats.ttftMs = 0;
+				subStats.ttftSteps = 0;
+			}
+			if (tpsScene !== 0) {
+				subStats.decodeMs = 0;
+				subStats.decodeTokens = 0;
+			}
+			/* 命中率：两个极端格都要把队友那份也清掉，否则合并后的比例永远到不了 0 / 99.99：
+			   第 1 格要封顶（队友输入会把比例拉回常态）、第 2 格要命中为 0
+			   （队友的 cacheRead 会把它抬起来）。 */
+			if (hitScene === 1 || hitScene === 2) {
+				subagent.session.total.tokens.cacheRead = 0;
+				if (hitScene === 1) {
+					/* 封顶那一格必须一个未命中 token 都不留 —— 分母只靠本会话那 1 个 */
+					subagent.session.total.tokens.input = 0;
+					subagent.session.total.tokens.cacheWrite = 0;
+				}
+			}
+
+			return {
+				/* 余额：6 种形态轮换（**不再有 ok:false 那格**，横杠不演示）。
+				   dashBalance 兜底仍在 client.js 里，真实环境查不到余额时照旧用。 */
+				balance: devBalanceFixture(balanceRound),
+				/* 官方 sessionStats：底栏的轮次/步数、首字平均、综合速度、总用时都读它 */
+				stats: {
+					turns: turns, steps: steps,
+					ttftMs: ttftMs, ttftSteps: ttftSteps,
+					decodeMs: decodeMs, decodeTokens: decodeTokens,
+					toolMs: toolMs, llmMs: llmMs
+				},
+				/* 官方 tokenUsage：综合命中率的分母 */
+				usage: usage,
+				sessionUsage: sessionUsage,
+				timing: {
+					samples: ttftSteps,
+					fastestTtft: { value: fastestTtft, at: at - 1200000, model: "deepseek-flash" },
+					slowestTtft: { value: slowestTtft, at: at - 240000, model: "deepseek-flash" },
+					fastestTps: { value: fastestTps, at: at - 1200000, model: "deepseek-flash" },
+					slowestTps: { value: slowestTps, at: at - 240000, model: "deepseek-flash" },
+					/* 本轮轮号跟着 lastCost 走：它一变「本轮」的粘性下限就作废 */
+					turn: sessionUsage.turn,
+					turnTtftMs: turnTtftMs,
+					turnTtftSamples: 1,
+					turnDecodeMs: turnDecodeMs,
+					turnDecodeTokens: turnDecodeTokens
+				},
+				/* 上下文占用：官方 contextPressure / contextBreakdown + 本插件折的 capacity。
+				   capacity 照 host 的 sessionCapacitySchema（在 lib/index.js，就是 .strict() 那段）给全三个字段 ——
+				   少一个 updatedAt 的话真实投影过不了校验，假数据也要同一套形状。
+				   这里**只保留「有窗口」这一种形态**：`contextOccupancy` 见到窗口缺失就返回 null、
+				   圆环退回空环 + 横杠，而那个形态用户明确不要（「都没数据，我看得出来什么？」）。
+				   兜底代码仍在 meterView / dashMeter 里（真实环境会话刚发出时照样会走），
+				   只是开发模式不再主动演示它。 */
+				pressure: { projectedTokens: projectedTokens, pressureTokens: projectedTokens, contextWindow: DEV_CONTEXT_WINDOW },
+				breakdown: { systemTokens: systemTokens, toolsTokens: toolsTokens, messageTokens: messageTokens },
+				/* 缺 maxOutputTokens ⇒ compactPercent 返回 null ⇒ 圆环不挖缺口、横条不压竖线。
+				   其余格给齐三字段，缺口就能算出来（1M 窗口 / 384K 输出 → 55.0%，与实机一致）。 */
+				capacity: ctxScene.notchKnown === true
+					? { contextWindow: DEV_CONTEXT_WINDOW, maxOutputTokens: DEV_CONTEXT_MAX_OUTPUT, updatedAt: null }
+					: { contextWindow: DEV_CONTEXT_WINDOW, updatedAt: null },
+				/* 轮次项气泡那三行：压缩 / 技能注入 / 工具调用。
+				   压缩的**条数与列表必须是同一个数据源**：用户实机看到「上下文压缩 4」点进去只有 2 条，
+				   因为条数是独立随机的、列表是写死两条。现在先按 compactTotal 生成数组，
+				   再让 `compactCount` 直接取数组长度 —— 数字与点开的条数**不可能**再对不上。
+				   展示契约（必须同时存在，不能因为"随机"被切掉）：
+				     · 至少一条自动压缩（带轮号 turn/step，manual:false）
+				     · 至少一条手动压缩（轮间压缩，turn:null + afterTurn，manual:true）
+				   所以 compactTotal 下限是 2；多出来的按序补自动压缩，轮号往前推。 */
+				progress: (() => {
+					const compacts = [];
+					const total = Math.max(2, compactTotal);
+					for (let i = 0; i < total; i += 1) {
+						if (i === total - 1) {
+							/* 最后一条固定是「手动 / 轮间压缩」：turn=null，落点靠 afterTurn */
+							compacts.push({ turn: null, step: null, afterTurn: Math.max(1, turnNo - 1), manual: true });
+						} else {
+							/* 其余是自动压缩：轮号从前往后推，步号取本轮步数 */
+							compacts.push({
+								turn: Math.max(1, turnNo - (total - 1 - i)),
+								step: turnSteps,
+								afterTurn: null,
+								manual: false
+							});
+						}
+					}
+					return {
+						turn: turnNo, turnSteps: turnSteps,
+						toolCalls: toolCalls, toolCounts: toolCounts,
+						skills: devSkills,
+						globalInstruction: "AGENTS.md",
+						/* **直接取数组长度**：一个数据源，行数与点开后的条数永远一致 */
+						compactCount: compacts.length,
+						compactStep: compacts[compacts.length - 1].step,
+						compacts: compacts
+					};
+				})(),
+				/* 总用时（desktopStatusbarActiveTime）：空闲态，只有累计值、没有进行中的基线。
+				   第 1 格 durationMs 为 0 ⇒ segmentView 先看时间窗（0 不算），
+				   再退回 timeline；那条路也要一起断（见 devSrc.timeline），否则横杠出不来。 */
+				timeRange: { turns: durationMs, since: null, steps: 0, stepSince: null },
+				daily: daily,
+				/* 队友那两段**不随任何字段变**：它同时进「总计」与「本轮」，一旦跟着变就会
+				   让点别的气泡时金额也动 —— 那正是用户反对的串扰。
+				   （cost 第 1/2 格与 lastCost 第 1/3 格例外，各自只清金额、不动令牌，见上） */
+				subagent: subagent,
+				sessionModel: { provider: "deepseek-official", model: "deepseek-flash", updatedAt: at },
+				/* 圆环状态色：**只听 context 计数**，与占用百分比同表同格。
+				   为什么必须由 fixture 给：真实判定读的是 running / pendingApprovals /
+				   lastAgentError / 分层在跑，这几样在开发模式里仍是真实值、不会因为点圆环而变 ——
+				   于是各档状态色在开发模式里永远只显示当前那一种，用户看不到其余的。
+				   取值域就是 contextRing 认得的那六个字符串；给别的值只会退回默认灰。 */
+				agentState: ctxScene.state,
+				/* **不是投影，是 StatusBar 那几个 state 的开发模式替代值**，所以单独收在一个键里，
+				   不跟上面那些"与投影同名"的字段混在一起（混了以后没人分得清哪个能给 projected() 用）。
+				   每一项的用途见 StatusBar 里 srcNow / srcTimeline / … 那几行。 */
+				devSrc: {
+					/* 分层在跑的**开发模式替代值**：让蓝档 / 紫档连弧长都能被点到。
+					   `ringPercentOf` 在 agentState 是 teamRunning / deepRunning 时会优先读它，
+					   所以那两格必须带上对应百分比（见 DEV_CONTEXT_SCENARIO 最后两格）。
+					   其余格给全 0 / null ⇒ ringPercentOf 原样退回 Lead 自己的占用，与真实环境一致。
+					   形状与 host 那四个字段同名，免得两套名字对不上。
+					   **放在 devSrc 里而不是顶层**：`devFixture` 的顶层键数被既有测试逐个数着
+					   （13 个投影键 + 2 个开发模式专用键），而 devSrc 本来就是"开发模式专用替代值"
+					   的容器，语义正好。 */
+					agentTiers: {
+						team: typeof ctxScene.teamRunning === "number" ? ctxScene.teamRunning : 0,
+						deep: typeof ctxScene.deepRunning === "number" ? ctxScene.deepRunning : 0,
+						teamPercent: typeof ctxScene.teamContextPercent === "number" ? ctxScene.teamContextPercent : null,
+						deepPercent: typeof ctxScene.deepContextPercent === "number" ? ctxScene.deepContextPercent : null
+					},
+					/* status 的峰谷与 sessionTime 的 elapsed 都读 now。真实 now 每秒在跳，
+					   永远落在"此刻"那个时段，「高峰」那一支几乎点不到；假 now 从同一张
+					   时段表里取，峰谷与柱状图因此自洽。
+					   **必须与上面的 dailyNow 是同一个值**：气泡里"今天"那根柱/那一格
+					   靠 `dateKeyOf(src.now)` 与月历数据比大小，两边不同源就一定是跨月的
+					   （一个真实当月、一个假当月），未来日灰阶因此永远出不来。 */
+					now: dailyNow,
+					/* 开发模式没有真实会话节点可折：给 null，让「时间窗算不出 + timeline 也算不出」
+					   这条横杠路径真的走得通。 */
+					timeline: null,
+					/* 只服务「本轮正在跑但还没调用」那一格（那段判定读的就是这三样） */
+					running: devRunning,
+					partial: null,
+					runningCalls: [],
+					/* 本轮用量与"这份用量属于哪一轮"：给确定值，形态才可复现。
+					   第 1 格（在跑但还没调用）与第 3 格（算不出价）都必须是 null：
+					   第 1 格若留着用量，segmentView 就会走「本轮正在进行中的精确口径」算出金额，
+					   ¥0.00 那条 active 分支永远到不了；第 3 格要的就是整份拿不到 ⇒ 横杠。 */
+					turnUsage: devTurnEmpty === true
+						? null
+						: {
+							input: sessionUsage.current.input, cacheRead: sessionUsage.current.cacheRead,
+							cacheWrite: sessionUsage.current.cacheWrite, output: sessionUsage.current.output
+						},
+					turnUsageTurn: sessionUsage.turn,
+					/* 换格即换轮：粘性下限随之作废，横杠与 ¥0.00 才出得来 */
+					turnKey: devTurnKey
+				}
+			};
+		}
+
 		const updateListeners = new Set();
 		function subscribeUpdate(fn) {
 			updateListeners.add(fn);
@@ -4580,9 +6895,24 @@ window.__ModuleLoader__.load({
 		 * 开关开发模式。
 		 * 打开时把状态摆成「有新版本可更新」的样子（但版本号是假的一眼可辨），
 		 * 关闭时清掉定时器并恢复成「没有更新」。
+		 *
+		 * 进入时做两件事：
+		 *   · `devRound` +1（退出**不清零**）：只作为"这是第几次进开发模式"的记录；
+		 *   · **所有字段计数归零**：一次开发模式就是一次「从头看一遍」，
+		 *     上次点到第几种不影响这次（用户明确要求重置）。
+		 * 退出时也把字段计数清一遍，保证下次进来从第 1 组开始、且不会残留到真实界面。
 		 */
 		function setDevMode(on) {
+			const was = devMode;
 			devMode = on === true;
+			if (devMode === true && was !== true) {
+				devRound += 1;
+				resetDevFieldScenes();
+			}
+			if (devMode !== true) resetDevFieldScenes();
+			/* 通知底栏：假数据（含 sessionId 换成 dev-<round>-c<cost计数>、各字段计数归零）
+			   必须立刻生效 / 撤销。 */
+			publishDev();
 			if (devTimer !== null) { clearTimeout(devTimer); devTimer = null; }
 			if (devMode === true) {
 				setUpdateState({ hasUpdate: true, latest: DEV_VERSION, busy: false, note: null, reason: null });
@@ -4600,15 +6930,31 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * 版本号被点了一下：连点 DEV_CLICKS 次进入（或退出）开发模式。
+		 * 版本号被点了一下。两种手势，取决于「这一版解锁过没有」：
+		 *
+		 *   · **解锁过**（localStorage 里记的版本 === 当前 VERSION）→ 单击直接切换开关。
+		 *     作者改这一块的界面时会反复进出，每次都连点 5 下太折腾。
+		 *   · **没解锁过**（首次、换了版本、或 localStorage 写不进去）→ 连点 DEV_CLICKS 次，
+		 *     成功后把当前 VERSION 记下来。普通用户装了这插件，界面上不该多出一个面向
+		 *     作者的调试项；连点是常见的开发者模式手势：记得住、也不会被误触。
+		 *
+		 * 「记版本」而不是「记一个 true」：VERSION 一升级，旧记录自动失配 ⇒ 重新要求连点，
+		 * 不需要任何迁移代码。两次点击间隔超过 DEV_CLICK_WINDOW_MS 就重新计数 ——
+		 * 否则慢慢点 5 次也会进去。
 		 *
-		 * 为什么用「连点」而不是一个可见开关：普通用户装了这插件，界面上不该多出
-		 * 一个面向作者的调试项。连点是常见的开发者模式手势，记得住、不会被误触。
-		 * 两次点击间隔超过 DEV_CLICK_WINDOW_MS 就重新计数 —— 否则慢慢点 5 次也会进去。
+		 * 纯同步：开发模式是主插件的一部分，没有任何"组件在不在"要问宿主 ——
+		 * 入口只看这一次点击的手势。
 		 *
 		 * @returns {object} 供测试断言的计数快照
 		 */
 		function onVersionClick() {
+			/* 解锁记忆读不出来（无痕模式抛错 / 从没写过）⇒ 按未解锁走，退化成"每次都连点" */
+			if (devUnlockVersion() === VERSION) {
+				devClickCount = 0;
+				devClickAt = 0;
+				setDevMode(devMode !== true);
+				return { count: 0, on: devMode };
+			}
 			const now = Date.now();
 			if (devClickAt !== 0 && now - devClickAt > DEV_CLICK_WINDOW_MS) devClickCount = 0;
 			devClickAt = now;
@@ -4616,7 +6962,10 @@ window.__ModuleLoader__.load({
 			if (devClickCount >= DEV_CLICKS) {
 				devClickCount = 0;
 				devClickAt = 0;
-				setDevMode(devMode !== true);
+				const next = devMode !== true;
+				setDevMode(next);
+				/* 只在**进入**时记解锁（退出不记）：写失败（无痕模式）就静默，行为仍是每次连点 */
+				if (next === true) rememberDevUnlock();
 			}
 			return { count: devClickCount, on: devMode };
 		}
@@ -4706,36 +7055,76 @@ window.__ModuleLoader__.load({
 			const t = props.t;
 			const useProjection = props.useProjection;
 			const useSession = props.useSession;
-			const sessionId = props.sessionId;
+			const realSessionId = props.sessionId;
 			const cfg = useConfig();
 
-			const stats = useProjection("sessionStats");
-			const usage = useProjection("tokenUsage");
-			const sessionModel = useProjection("desktopStatusbarModel");
-			const sessionUsage = useProjection("desktopStatusbarUsage");
-			const timeRange = useProjection("desktopStatusbarActiveTime");
+			/* 开发模式：开着的时候整条底栏改吃假数据（见 devFixture）。
+			   `devState.round` 与各字段计数都是**原始值**，给下面几个 effect 当依赖用 ——
+			   依赖一个每次都新建的对象会让 effect 每帧重跑。
+
+			   `devState.fields` 是**每字段独立计数**（{ status, counts, ttft, tps, cacheHit,
+			   sessionTime, cost, lastCost, balance, context }）：点开哪个气泡就只推进哪个计数，
+			   于是只有那个气泡的数据变。这正是用户要的「点一个，只变那一个」。 */
+			const devState = useDevState();
+			const devActive = devState.on === true;
+			/* 各字段计数单独拎出来：effect 依赖数组要用原始值（不能依赖整个 fields 对象，
+			   否则任何字段一变所有 effect 都重跑 —— 又回到"点一个全变"）。 */
+			const devFields = devState.fields !== null && devState.fields !== undefined ? devState.fields : {};
+			const devBalanceCount = devFields.balance;
+			const devStatusCount = devFields.status;
+			const devCostCount = devFields.cost;
+			/* 假数据体量大（420 个工具名那档），按「是否开发模式 + 各字段计数」缓存一份：
+			   底栏每秒重渲染一次，不缓存就是每秒重建一遍。 */
+			const devData = react.useMemo(
+				() => (devActive === true ? devFixture(devState.round, t, devState.fields) : null),
+				[devActive, devState.round,
+					devFields.status, devFields.counts, devFields.cacheHit, devFields.tps, devFields.ttft,
+					devFields.sessionTime, devFields.lastCost, devFields.cost, devFields.balance, devFields.context]
+			);
+			/** 取一个投影：开发模式下用假值覆盖（只覆盖 fixture 里真的给了的键）。 */
+			const projected = (name, real) => (devData !== null && devData[name] !== undefined ? devData[name] : real);
+
+			const stats = projected("stats", useProjection("sessionStats"));
+
+			const usage = projected("usage", useProjection("tokenUsage"));
+			const sessionModel = projected("sessionModel", useProjection("desktopStatusbarModel"));
+			const sessionUsage = projected("sessionUsage", useProjection("desktopStatusbarUsage"));
+			const timeRange = projected("timeRange", useProjection("desktopStatusbarActiveTime"));
 			/* 逐次调用的首字/速度极值（host 侧折出来的，官方 sessionStats 只有累计值） */
-			const timing = useProjection("desktopStatusbarTiming");
+			const timing = projected("timing", useProjection("desktopStatusbarTiming"));
 			/* 上下文占用直接读 DSH 自带的两个投影，跟官方那一行同源同口径 */
-			const pressure = useProjection("contextPressure");
-			const breakdown = useProjection("contextBreakdown");
+			const pressure = projected("pressure", useProjection("contextPressure"));
+			const breakdown = projected("breakdown", useProjection("contextBreakdown"));
 			/* 压缩点的两个入参（窗口 + 本次请求输出上限）由本插件从请求事件里折出来 */
-			const capacity = useProjection("desktopStatusbarCapacity");
+			const capacity = projected("capacity", useProjection("desktopStatusbarCapacity"));
 			/* 轮次项气泡那三行（上下文压缩 / 技能注入 / 工具调用）同样由本插件折 */
-			const progress = useProjection("desktopStatusbarProgress");
+			const progress = projected("progress", useProjection("desktopStatusbarProgress"));
+			/* 会话标识：开发模式下换成 `dev-<轮次>-c<cost计数>` —— applyTotalFloor / applyTurnFloor
+			   都以它为界，换了就等于「换会话」，账本自动清空重算。
+			   **必须带上 cost 计数**：只带 round 的话，点「总计」气泡时 round 不变，
+			   applyTotalFloor 认为是同一会话、只结算"没见过的调用指纹"，而假数据时间戳固定
+			   （DEV_FIXTURE_ANCHOR）⇒ 指纹全见过 ⇒ 一分钱都不会再加（用户实测的"总计点开不涨"）。
+			   只带 cost 计数（不带别的字段计数）也很重要：点别的气泡时总计账本不能被重置，
+			   否则就是反向串扰。 */
+			const sessionId = devData !== null
+				? "dev-" + String(devState.round) + "-c" + String(typeof devCostCount === "number" ? devCostCount : 0)
+				: realSessionId;
 			/* 设置页拿不到会话投影，把当前模型上报给 host，供设置页读取 */
 			const reportedModel = sessionModel !== null && sessionModel !== undefined && typeof sessionModel.model === "string" && sessionModel.model.length > 0
 				? sessionModel.model
 				: null;
 			const reportedProvider = sessionModel !== null && sessionModel !== undefined && typeof sessionModel.provider === "string" ? sessionModel.provider : null;
 			react.useEffect(() => {
+				/* 开发模式：假模型绝不报给 host —— 否则设置页会照着假数据改真实会话的「当前模型」，
+				   而且开发模式要求一个真实请求都不发。 */
+				if (devActive === true) return;
 				if (reportedModel === null) return;
 				window.fetch(ACTIVE_MODEL_URL, {
 					method: "POST",
 					headers: { "content-type": "application/json" },
 					body: JSON.stringify({ provider: reportedProvider, model: reportedModel })
 				}).catch(() => { /* 上报失败不影响底栏 */ });
-			}, [reportedModel, reportedProvider]);
+			}, [reportedModel, reportedProvider, devActive]);
 
 			/* 价格库上报给 host：活跃总览的 cost 是 host 记账时算的，
 			   它拿不到 localStorage，必须由这里把当前价格库送过去，
@@ -4744,6 +7133,8 @@ window.__ModuleLoader__.load({
 			   即当时没有单价、还没算钱的那部分用量，已经算好的历史费用不动。 */
 			const reportedPrices = react.useMemo(() => JSON.stringify(cfg.models === undefined || cfg.models === null ? {} : cfg.models), [cfg.models]);
 			react.useEffect(() => {
+				/* 开发模式：一次真实请求都不发（verify-dev-mode ⑦ 盯着这条） */
+				if (devActive === true) return;
 				let models = null;
 				try {
 					models = JSON.parse(reportedPrices);
@@ -4769,7 +7160,7 @@ window.__ModuleLoader__.load({
 				}).catch((error) => {
 					console.warn("[dsh-desktop-statusbar] 价格库上报失败：" + String(error && error.message));
 				});
-			}, [reportedPrices]);
+			}, [reportedPrices, devActive]);
 
 			const running = pick(useSession, (s) => s.running, undefined);
 			const partial = pick(useSession, (s) => s.partial, undefined);
@@ -4787,6 +7178,25 @@ window.__ModuleLoader__.load({
 			   同一轮里某次请求失败就沿用上一次成功的值，换了轮/换了会话一律清空重算，
 			   界面上不出现任何提示文字。段落取值用 `subagentState.sessionPayload / turnPayload`。 */
 			const [subagentState, setSubagentState] = react.useState(SUBAGENT_STATE_EMPTY);
+			/* 队友里**还在跑**的分层情况（host 响应里的 `running` / `teamRunning` / `deepRunning` +
+			   两级的占用百分比）。两个用途：
+			   ① `all > 0` 时让时钟继续每秒跳 —— 主对话已经结束、但队友还在干活，
+			      否则「总计」与队友数据会静止到下一个峰谷边界（可能几小时），
+			      用户看到的症状是「必须点开总计气泡才刷新」；
+			   ② 决定上下文圆环的颜色（Lead 绿 / 成员蓝 / 更深层紫）与弧长（那两级各自的占用）。
+			   **合并成一个对象 state**：五个数放一起，一次 setState 收尾 —— 拆成五个
+			   state 会让同一份响应触发五次重渲染，而底栏每秒本来就在重渲染。
+			   单独一个 state 而不是塞进 subagentState：后者是两段取值的状态机，
+			   形状被既有测试逐字段断言着（见 nextSubagentState 的契约），不该混进新字段。
+			   **语义必须守住**：`all === null` 表示"这次没结论、保留旧值"；`all === 0` 是
+			   真空闲、必须落下去（这是修过的真实缺陷：把"问不到"当 0 会让时钟降到省电档）。 */
+			const [subagentTiers, setSubagentTiers] = react.useState(SUBAGENT_TIERS_EMPTY);
+			const subagentRunning = subagentTiers.all;
+			/* host 推出来的**本轮起点**（`turnStartMs`）+ 它属于哪个会话/哪一轮。
+			   只在客户端自己折叠不出起点（或折叠出的是上一轮）时兜底用，主路径不碰它。
+			   带 sessionId / turnKey 是为了换会话、换轮时自动失配 —— 复用 nextSubagentState
+			   那套「归属对不上就作废」的判定思路，不另立一套。 */
+			const hostTurnStartRef = react.useRef({ sessionId: null, turnKey: null, value: null });
 			/* 「本轮」显示值的粘性下限盒子（同轮内只增不减，换轮作废）：一个可变盒子，
 			   由 lastCost 段在渲染时更新，跨渲染靠这个 ref 留住（见 applyTurnFloor）。 */
 			const lastCostHoldRef = react.useRef({ sessionId: null, turnKey: null, value: 0 });
@@ -4808,8 +7218,13 @@ window.__ModuleLoader__.load({
 			/* 积分套餐气泡的下钻层：null = 根视图，数字 = 点开了第几个聚合行（×N 那行）。
 			   换字段 / 收起气泡 / 点标题返回都清掉，下次打开回到套餐列表。 */
 			const [creditSub, setCreditSub] = react.useState(null);
-			/* 工具调用子视图「每列几行」：默认 3 行一列；量到一排放不下（列被折到下一排）就
-			   逐档 +1（最多 12 行，见下面气泡定位那条 layout effect）。换字段 / 换子视图都重置回 3。 */
+			/* 子视图「每列几行」：默认 3 行一列；量到一排放不下（列被折到下一排）就
+			   逐档 +1（最多 12 行，见下面气泡定位那条 layout effect）。换字段 / 换子视图都重置回 3。
+			   **名字保留 `toolRows`（历史原因），但它现在服务三个列表**：工具调用、技能注入、
+			   上下文压缩 —— 后两个是用户后加的（「技能注入也和工具调用同理……上下文压缩也同理」）。
+			   三者共用同一个 `rowsPanel` 入口与同一个 state，所以三处 `setToolRows(LIST_ROWS_PER_COLUMN)`
+			   重置（换字段 / sub.open / sub.back）对三者一视同仁，不需要各写一份。
+			   改名成 listRows 会牵动既有测试里对这个名字的引用，收益不值当。 */
 			const [toolRows, setToolRows] = react.useState(LIST_ROWS_PER_COLUMN);
 			/* 柱 / 方块 / 每周底条的悬停浮层：内容 + 触发元素的位置（自己算 fixed 坐标） */
 			const [hoverCard, setHoverCard] = react.useState(null);
@@ -4953,10 +7368,28 @@ window.__ModuleLoader__.load({
 			const clockActive = timeRangeNow !== null
 				&& ((timeRangeNow.since !== null && timeRangeNow.since !== undefined)
 					|| (timeRangeNow.stepSince !== null && timeRangeNow.stepSince !== undefined));
+			/* 队友还在跑 ⇒ 时钟必须继续跳（哪怕主对话已经结束）。
+			   为什么需要它：主对话一结束 `running` 与 `clockActive` 都会转 false，旧行为是
+			   睡到下一个峰谷边界（可能几小时），于是「总计」里的队友金额与队友数据都不再
+			   每秒更新 —— 用户观察到的「必须点开总计气泡才刷新」就是它。
+			   `subagentRunning` 由 host 响应的 `running` 维护，队友全部结束就回 0，
+			   时钟随即退回原来的省电行为（不会永久每秒跳）。 */
+			const subagentBusy = subagentRunning > 0;
 			react.useEffect(() => {
-				if (needsNow !== true) return undefined;
-				if (running === true || clockActive) {
-					const timer = window.setInterval(() => setNow(Date.now()), running === true ? 1000 : 10000);
+				/* 队友在跑时**必须**有钟：即使「总用时 / 峰谷」两段都被关掉，`now` 每秒一跳
+				   才能驱动队友用量的重拉（那条 effect 依赖 now，节流靠 SUBAGENT_REFRESH_MS），
+				   否则「总计」又退回到"不点气泡就不更新"。
+				   **开发模式开着时也必须有钟**：底栏的时间类字段（本轮金额的粘性下限、
+				   总用时累加）都按 now 走，没有钟它们就冻在上一拍。
+				   （这里以前还写着「作为每 N 秒核对组件还在不在的驱动源」——那段组件探测
+				   逻辑已经整体删掉了，注释一并移除，免得后来人去找一个不存在的定时核对。） */
+				if (needsNow !== true && subagentBusy !== true && devActive !== true) return undefined;
+				if (running === true || clockActive || subagentBusy === true || devActive === true) {
+					/* 1 秒一档：主对话在跑、或队友在跑 —— 这两件事都需要"实时"；
+					   开发模式也走 1 秒档（演示数据要跟着气泡点击立即反映到时间类字段上）；
+					   只有 clockActive（正在计时但没人在产出）才降到 10 秒省电。 */
+					const fast = running === true || subagentBusy === true || devActive === true;
+					const timer = window.setInterval(() => setNow(Date.now()), fast === true ? 1000 : 10000);
 					return () => window.clearInterval(timer);
 				}
 				/* 空闲：睡到下一个峰谷边界再刷新，不轮询 */
@@ -4967,12 +7400,14 @@ window.__ModuleLoader__.load({
 				};
 				timer = window.setTimeout(tick, msToNextPeakBoundary(Date.now()) + 1000);
 				return () => window.clearTimeout(timer);
-			}, [needsNow, running, clockActive]);
+			}, [needsNow, running, clockActive, subagentBusy, devActive]);
 
-			/* 价格库缺省或全 0 时自动补上官方参考价（不用用户手动填） */
+			/* 价格库缺省或全 0 时自动补上官方参考价（不用用户手动填）。
+			   开发模式跳过：它内部会发一次真实 fetch（verify-dev-mode ⑦ 要求开发模式 0 次请求）。 */
 			react.useEffect(() => {
+				if (devActive === true) return;
 				void ensurePrices();
-			}, []);
+			}, [devActive]);
 
 			const wantsBalance = isSegmentOn(cfg, "balance");
 			/* 当前会话用的 provider / model：host 按它决定查哪个平台的余额。
@@ -4985,14 +7420,29 @@ window.__ModuleLoader__.load({
 			   下一次轮询（最多 60 秒），气泡里直接是此刻的数字。轮询本身不带 force。 */
 			const balanceReloadRef = react.useRef(null);
 			react.useEffect(() => {
+				/* 开发模式：一次请求都不发，直接吃假余额（6 种轮换见 devFixture）。 */
+				if (devData !== null) {
+					setBalance(devData.balance);
+					balanceReloadRef.current = () => setBalance(devData.balance);
+					return () => { balanceReloadRef.current = null; };
+				}
 				if (!wantsBalance) return undefined;
+				/* 换了 provider / 换了 model 时**先清空**再查：不清的话，新平台的第一次查询
+				   回来之前（或它一直查不到时），界面会把上一个平台的数字当成当前平台的余额显示，
+				   那比横杠更误导（用户拍板：宁可先显示横杠）。 */
+				setBalance(null);
 				let alive = true;
 				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" }); });
+						.then((data) => {
+							/* **只有真的拿到余额才覆盖**：某一轮失败（平台临时 5xx / 超时 / 该平台没配 key）
+							   不能把上一次成功的数字换成空，否则底栏会在 ¥12.34 与 ¥- 之间来回跳，
+							   用户每次抬眼看到的都是"查不到"。 */
+							if (alive && data !== null && data !== undefined && data.ok === true) setBalance(data);
+						})
+						.catch(() => { /* 网络异常同样保留上一次成功值（首次就一直保持 null = 横杠） */ });
 				};
 				balanceReloadRef.current = () => load(true);
 				load(false);
@@ -5002,7 +7452,10 @@ window.__ModuleLoader__.load({
 					balanceReloadRef.current = null;
 					window.clearInterval(timer);
 				};
-			}, [wantsBalance, balanceProvider, balanceModel]);
+			/* 依赖里**必须带 devBalanceCount**：开发模式下余额来自 devFixture，而这个 effect 负责
+			   把它 setBalance 进去。只依赖 round 的话，点余额气泡时 round 不变 ⇒ effect 不重跑
+			   ⇒ setBalance 压根不执行 ⇒ 余额数字冻住（用户实测的"余额点开不变"就是这个）。 */
+			}, [wantsBalance, balanceProvider, balanceModel, devActive, devState.round, devBalanceCount]);
 
 			/* 活跃总览（峰谷段的气泡）：不轮询。挂载时取一次（走 host 缓存），
 			   之后每次点开气泡都带 force=1 —— force 只绕过 host 那 30 秒缓存；
@@ -5011,7 +7464,16 @@ window.__ModuleLoader__.load({
 			const wantsWeekly = isSegmentOn(cfg, "status");
 			const dailyReloadRef = react.useRef(null);
 			react.useEffect(() => {
+				/* 开发模式：直接吃假数据（近 7 天 + 当月日历 + 12 个月都齐），一次请求都不发 */
+				if (devData !== null) {
+					setDaily(devData.daily);
+					dailyReloadRef.current = () => setDaily(devData.daily);
+					return () => { dailyReloadRef.current = null; };
+				}
 				if (!wantsWeekly) return undefined;
+				/* 与余额同一条规矩：退出开发模式后先清空，别让真实的活跃总览还没回来时
+				   继续显示开发模式那套假数据。 */
+				setDaily(null);
 				let alive = true;
 				const load = (force) => {
 					const url = DAILY_URL + (force === true ? "?force=1" : "");
@@ -5026,7 +7488,11 @@ window.__ModuleLoader__.load({
 					alive = false;
 					dailyReloadRef.current = null;
 				};
-			}, [wantsWeekly]);
+			/* 依赖里**必须带 devStatusCount**：与余额那条完全同一个道理 —— 活跃总览的假数据来自
+			   devFixture，而这个 effect 负责把它 setDaily 进去。只依赖 round 的话，点「峰谷」
+			   气泡时 round 不变 ⇒ effect 不重跑 ⇒ setDaily 不执行 ⇒ 柱状图/月历一直冻在旧值
+			   （用户实测的"柱状图一直同高、月份一直 10 月"里，一半原因就是这个）。 */
+			}, [wantsWeekly, devActive, devState.round, devStatusCount]);
 
 			/* 队友用量（「总计」「本轮」都要算上它）：换会话、对话新增了节点、本轮换了、
 			   或距上次超过 3 秒（活跃时）才重拉；点开气泡再强制拉一次。
@@ -5046,16 +7512,32 @@ window.__ModuleLoader__.load({
 				? sessionUsage.turn
 				: null;
 			const turnIsCurrent = foldedTurnNum === null || hostTurn === null || foldedTurnNum === hostTurn;
-			const turnStartMs = turnIsCurrent === true && foldedTurnNow !== null && typeof foldedTurnNow.at === "number"
-				? foldedTurnNow.at
-				: null;
 			/* 「同一轮」的轮标识（给队友状态机与"本轮只增不减"用）。两个来源都只会在真的换轮时前进：
 			   host 投影的 turn 随用量事件走，节点折叠的轮号随助手节点走。取**较大者**是为了尽早认定
 			   "换轮了"——两者谁先看到新一轮，就从那一刻起归零重算；认不出轮次（两个都拿不到）时为 null，
-			   此时既不沿用旧值也不做粘性，避免把两轮的数字混在一起。 */
+			   此时既不沿用旧值也不做粘性，避免把两轮的数字混在一起。
+			   **必须定义在下面 turnStartMs 之前**：host 起点兜底要拿它判定"这份值属于哪一轮"。 */
 			const subagentTurnKey = hostTurn !== null && foldedTurnNum !== null
 				? Math.max(hostTurn, foldedTurnNum)
 				: (hostTurn !== null ? hostTurn : foldedTurnNum);
+			/* 客户端自己折叠出来的起点。**这是主路径**，算得出来就用它，不碰 host 那个兜底值。 */
+			const foldedStartMs = turnIsCurrent === true && foldedTurnNow !== null && typeof foldedTurnNow.at === "number"
+				? foldedTurnNow.at
+				: null;
+			/* host 推出来的那一个起点（上一次响应里存下的）。**只在主路径拿不到时才用**：
+			   典型场景是客户端折叠出的是上一轮起点（新一轮已开、主助手还没输出），
+			   host 通常能收紧到真正的本轮起点；而 host 自己读不出父会话日志时会返回 null，
+			   那就还是 null（宁少不多，本轮不并队友）。
+			   归属必须同时对上**会话 + 轮**才认，否则就是上一个会话/上一轮留下的旧值 ——
+			   与 nextSubagentState 的判定思路一致（归属对不上就作废，不沿用）。 */
+			const hostStart = hostTurnStartRef.current;
+			const hostStartUsable = hostStart !== null && hostStart !== undefined
+				&& hostStart.sessionId === sessionId
+				&& subagentTurnKey !== null && hostStart.turnKey === subagentTurnKey
+				&& typeof hostStart.value === "number" && Number.isFinite(hostStart.value) && hostStart.value > 0;
+			const turnStartMs = foldedStartMs !== null
+				? foldedStartMs
+				: (hostStartUsable === true ? hostStart.value : null);
 			const chatNodeCount = Array.isArray(chatNodes) ? chatNodes.length : -1;
 			const subagentReqRef = react.useRef({ sessionId: null, nodes: -1, since: null, at: 0 });
 			const subagentForceRef = react.useRef(false);
@@ -5063,19 +7545,40 @@ window.__ModuleLoader__.load({
 			/* 一次"要拉取"的凭据：nonce 变一次就拉一次（sessionId / since 跟着它一起走，读的时候不会串会话） */
 			const [subagentQuery, setSubagentQuery] = react.useState(null);
 			react.useEffect(() => {
-				subagentReloadRef.current = () => {
-					subagentForceRef.current = true;
-					setSubagentTick((n) => n + 1);
-				};
+				/* 开发模式：点开「总计」气泡时不该真去拉队友用量（0 请求要求）。 */
+				subagentReloadRef.current = devActive === true
+					? null
+					: () => {
+						subagentForceRef.current = true;
+						setSubagentTick((n) => n + 1);
+					};
 				return () => { subagentReloadRef.current = null; };
-			}, []);
+			}, [devActive]);
 			react.useEffect(() => {
+				/* 开发模式：「总计 / 本轮」的队友那一段直接取假值（见 devFixture 的 subagent），
+				   不发请求，也不让上一条真实请求的残留值混进来。
+				   `running` 一并归零：假数据里没有"还在跑的队友"这回事，留着旧值会让
+				   时钟一直按每秒一档空转（假数据根本不刷新）。
+				   host 起点同理清掉，免得退出开发模式后拿假轮次的旧起点去算本轮。 */
+				if (devData !== null) {
+					setSubagentState(SUBAGENT_STATE_EMPTY);
+					setSubagentTiers(SUBAGENT_TIERS_EMPTY);
+					hostTurnStartRef.current = { sessionId: null, turnKey: null, value: null };
+					return undefined;
+				}
 				if (typeof sessionId !== "string" || sessionId.length === 0) return undefined;
 				const last = subagentReqRef.current;
 				const switched = last.sessionId !== sessionId;
 				const forced = subagentForceRef.current;
 				subagentForceRef.current = false;
-				const due = switched === true || last.nodes !== chatNodeCount || last.since !== turnStartMs
+				/* `since`（本轮起点）**不**参与这里的判定：它是从对话节点时间戳折叠出来的，
+				   每秒都在毫秒级漂移；拿它当"有变化"的信号会让每次重渲染都判成 due，
+				   把 SUBAGENT_REFRESH_MS 的节流整个绕过去，实际每秒打好几次请求、白烧 CPU。
+				   本轮起点变了这类变化，由下面 `subagentRunning > 0`（队友还在跑就每秒一次）
+				   和 `last.at` 的节流兜住；它依旧写进 subagentReqRef，别处读它当请求参数。 */
+				const due = switched === true
+					|| last.nodes !== chatNodeCount
+					|| subagentRunning > 0
 					|| Date.now() - last.at >= SUBAGENT_REFRESH_MS;
 				if (forced !== true && due !== true) return undefined;
 				subagentReqRef.current = { sessionId: sessionId, nodes: chatNodeCount, since: turnStartMs, at: Date.now() };
@@ -5090,6 +7593,8 @@ window.__ModuleLoader__.load({
 				return undefined;
 			}, [sessionId, chatNodeCount, turnStartMs, now, subagentTick, subagentTurnKey]);
 			react.useEffect(() => {
+				/* 开发模式：队友那两段是假值，一个请求都不发（含"进开发模式前已经在途的那次"）。 */
+				if (devActive === true) return undefined;
 				if (subagentQuery === null) return undefined;
 				if (typeof window === "undefined" || typeof window.fetch !== "function") return undefined;
 				let alive = true;
@@ -5132,9 +7637,37 @@ window.__ModuleLoader__.load({
 						nextSubagentState(prev, action("session", both[0])),
 						action("turn", both[1])
 					));
+					/* 队友还在跑的分层情况（个数 + 两级占用百分比）：两段响应里任一段带这些字段就用它
+					   （host 两问都会带上同一份数）。
+					   **两问都没结论时整份保留旧值**（nextSubagentTiers 里的 stale-while-revalidate，
+					   内部沿用 nextSubagentRunning 的判定），与旁边 hostTurnStartRef 是同一条规矩。
+					   为什么不能当成 0：`all` 决定"时钟继续每秒跳"还是"睡到下一个峰谷边界"，
+					   一次网络抖动把 0 写进去，时钟就会一路睡到几小时后，队友数据与「总计」里
+					   队友那笔金额跟着冻结 —— 正是用户报过的那个缺陷原样复现。
+					   反过来"两问都成功且都是 0"必须能落下去（队友真的全部结束，时钟要回到省电档），
+					   所以不能写成"新值 > 0 才更新"。
+					   五个数一次 setState：拆开会让同一份响应触发多次重渲染，而底栏每秒都在重渲染。 */
+					setSubagentTiers((prev) => nextSubagentTiers(prev, both[1], both[0]));
+					/* host 推出来的本轮起点：存进 ref，附上它属于哪个会话 / 哪一轮。
+					   只在**「本轮窗口」那一问**的响应里读 —— `load(0)`（整会话那一问）返回的起点
+					   语义是"最早的那次"，拿它当本轮起点会把整个会话的队友花费算进本轮。
+					   归属（sessionId + turnKey）必须一起存：换会话换轮时自动失配作废，
+					   与 nextSubagentState 的判定思路一致（归属对不上就不沿用）。
+					   **同一归属下这一次没拿到就保留旧值**（和两段取值的 stale-while-revalidate 同理）：
+					   起点偶尔读不出来时，不该让本轮立刻退回"不并队友"。 */
+					const prevStart = hostTurnStartRef.current;
+					const sameOwner = prevStart !== null && prevStart !== undefined
+						&& prevStart.sessionId === subagentQuery.sessionId
+						&& prevStart.turnKey === subagentQuery.turnKey;
+					const turnStart = readTurnStartMs(both[1]);
+					hostTurnStartRef.current = {
+						sessionId: subagentQuery.sessionId,
+						turnKey: subagentQuery.turnKey,
+						value: turnStart !== null ? turnStart : (sameOwner === true ? prevStart.value : null)
+					};
 				});
 				return () => { alive = false; };
-			}, [subagentQuery]);
+			}, [subagentQuery, devActive]);
 
 			/* 只在"点别处"时收起。这里刻意不监听 scroll：底栏固定在视口底部，对话区滚动
 			   不会移动触发项，但每来一次工具调用/新一轮，对话区都会自动滚到底 ——
@@ -5142,8 +7675,22 @@ window.__ModuleLoader__.load({
 			react.useEffect(() => {
 				if (tipId === null) return undefined;
 				const close = () => { setTipId(null); setTipPos(null); setTipSub(null); setCreditSub(null); };
+				/**
+				 * 点面板外部就收起。
+				 *
+				 * **气泡已经 Portal 到 body，不在 rootRef 里了**（见 tipPanelInner 上方那段说明），
+				 * 所以这里必须同时检查气泡自身 —— 否则点气泡会被当成"点在外面"、立刻把它关掉，
+				 * 表现为"气泡一出现就消失 / 点里面没反应"。
+				 * `tipRef.current` 是气泡节点自己的 ref（五个面板构造函数都收了它），
+				 * Portal 之后它指向的仍是那个真实 DOM，contains 判定照旧有效。
+				 * 两个 ref 都可能还是 null（首次渲染 / 气泡没开）：逐个判空，不要直接 .contains。
+				 */
 				const onDocClick = (event) => {
-					if (rootRef.current !== null && rootRef.current.contains(event.target)) return;
+					const target = event === null || event === undefined ? null : event.target;
+					const root = rootRef === null || rootRef === undefined ? null : rootRef.current;
+					if (root !== null && root !== undefined && root.contains(target)) return;
+					const panel = tipRef === null || tipRef === undefined ? null : tipRef.current;
+					if (panel !== null && panel !== undefined && typeof panel.contains === "function" && panel.contains(target)) return;
 					close();
 				};
 				/* 窗口尺寸变了只是位置要重算，不必把气泡收掉 */
@@ -5176,9 +7723,13 @@ window.__ModuleLoader__.load({
 				const width = node !== null && node !== undefined && typeof node.getBoundingClientRect === "function"
 					? node.getBoundingClientRect().width
 					: 0;
-				/* 工具调用子视图：默认每列 3 行，一排放不下就逐档加行
+				/* **支持加行的子视图**（工具调用 / 技能注入 / 上下文压缩三个，判据是列表对象上的
+				   `growable: true`，不是 `tight`）：默认每列 3 行，一排放不下就逐档加行
 				   （3 → 4 → 5 …，上限 LIST_ROWS_PER_COLUMN_MAX）。只有这一套行数 ——
 				   不再有「中文/英文整行块」两套结构（见 rowsPanel 的注释）。
+				   用户原话：「技能注入也和工具调用同理呀，如果超过每列 3 个依然排不下，
+				   就是加每列的个数啊，而不是直接可滚动啊，上下文压缩也同理啊」——
+				   所以三个列表走的是同一条路，都不直接横向滚动。
 				   列网格是 nowrap（绝不折行），所以"放不下"用横向溢出判（见 toolColumnsOverflow）；
 				   每加一行列数就少一档，直到一排放得下。行数一加气泡就变窄 —— 这就是用户要的
 				   "宽度 = 加完行数之后刚好不折的那个宽度"（理解 B），不会停在加行前的旧宽度上。
@@ -5188,6 +7739,23 @@ window.__ModuleLoader__.load({
 				const overflow = toolColumnsOverflow(node);
 				const nextRows = nextToolRows(toolRows, overflow);
 				if (nextRows !== toolRows) setToolRows(nextRows);
+				/* 逐档加行之后**必须重算一次右缘渐隐**。
+				   用户实机报的现象：4 行 × 5 列、内容明明能完整显示，右侧却挂着一道淡出。
+				   成因链：打开时按 3 行排 → 6 列放不下 → 挂遮罩 → 这里把行数加到 4 → 列数降到 5、
+				   气泡变宽、已经不用滚了，但节点被 React 复用（key 没变、ref 是模块级常量），
+				   ref 不会再触发 ⇒ 遮罩一直留着。
+				   为什么放在这里、并且**不加条件**：
+				     · 这个 useTipLayout 本来就**没有依赖数组**（每次渲染都跑），而它上面几行已经
+				       调过 `getBoundingClientRect()` —— 布局早就被强制刷新过了，这里再读一次
+				       scrollWidth/clientWidth 的边际成本≈0（同一帧内的第二次读不再触发重排）。
+				       所以「每帧多一次强制布局」这个担心在本位置不成立。
+				     · 不加 `nextRows !== toolRows` 条件：加行是「这一帧测到溢出、下一帧才换行数」，
+				       真正需要重算的是**换完行之后那一帧**（那时 nextRows 已经等于 toolRows 了）。
+				       无条件调用才能在换行后的第一次渲染就纠正；applyColsFade 内部有记忆，
+				       几何没变时连 classList / style 都不碰，不会造成每帧栅格化。
+				     · 不用 rAF 延后一帧：那样中间会有一帧"遮罩还在"的可见闪烁，而这里根本没有
+				       时序问题（下一帧渲染时 DOM 已是新行数，量到的就是新几何）。 */
+				refreshColsFade(node);
 				const centered = anchor.left + anchor.width / 2 - width / 2;
 				/* 左右两条硬约束，任何气泡都适用，而且是**对齐**不是仅仅不越界：
 				   左 —— 可见左边缘压在上下文占用那个**圆圈灰底**的左边。灰底是圆环按钮自己画的
@@ -5312,9 +7880,12 @@ window.__ModuleLoader__.load({
 					return;
 				}
 				const box = panel.getBoundingClientRect();
+				/* 悬停浮层与主气泡之间只留 3px（原为 6px）：用户看实机后觉得"两个气泡中间的缝太大"。
+				   两个都是圆角 16px 的毛玻璃块，叠在一起时 6px 会被圆角吃出明显的空隙感，
+				   收到 3px 既能看出是两层、又不会像断开的两块。 */
 				setHoverPos({
 					left: Math.max(8, box.left),
-					top: Math.max(8, box.top - size.height - 6),
+					top: Math.max(8, box.top - size.height - 3),
 					width: box.width
 				});
 			}, [hoverCard, hoverPlain, hoverMouse]);
@@ -5356,10 +7927,14 @@ window.__ModuleLoader__.load({
 			   状态里还是上一轮的值，直接拿来加会把上一轮的队友钱算进本轮（实测会让本轮虚高
 			   并被粘性下限锁住）。轮次认不出来（turnKey 为 null）时同样不用它 —— 宁少不多。 */
 			const turnSliceUsable = subagentTurnKey !== null && subagentState.turnKey === subagentTurnKey;
-			const subagent = {
-				session: subagentState.sessionPayload,
-				turn: turnSliceUsable === true ? subagentState.turnPayload : null
-			};
+			const subagent = devData !== null
+				/* 开发模式：两段都直接用假值（都带 ok:true、cost>0、tokens 三段、stats），
+				   所以「总计」「本轮」都看得出队友已经并进来了。 */
+				? { session: devData.subagent.session, turn: devData.subagent.turn }
+				: {
+					session: subagentState.sessionPayload,
+					turn: turnSliceUsable === true ? subagentState.turnPayload : null
+				};
 			/* 底栏币种：主模型那个条目的币种（消耗最多的模型），认不出主模型才退回默认币种。
 			   段里的「总计 / 本轮 / 余额」都读这一个值。 */
 			const mainModel = mainModelOf(sessionUsage);
@@ -5400,20 +7975,42 @@ window.__ModuleLoader__.load({
 				sessionTime: segmentText("sessionTime", segmentView("sessionTime", debugSrc, t), t, displayCurrency)
 			};
 
+			/* 开发模式在 src 层的覆盖（**只在这一个对象里生效**，组件 state 与时钟一行不动）。
+			   来源是 fixture 的 `devSrc` 那一格（它刻意不叫 now/timeline 这些投影名，
+			   就是为了让人一眼看出"这不是投影、是 state 替代值"）。四项各自的理由：
+			   · now        —— status 的峰谷与 sessionTime 的 elapsed 都读它；真实 now 每秒跳，
+			                   「高峰」那一支在开发模式里几乎点不到。
+			   · timeline   —— 开发模式没有真实会话节点可折，给 null，用时横杠才走得通。
+			   · running 等 —— 只服务「本轮正在跑但还没调用」那一格；其余格一律空闲。
+			   · 本轮用量三件套 —— 给确定值，本轮费用那几格形态才可复现；换格即换轮，
+			                   粘性下限随之作废。
+			   退出开发模式时 devData 为 null，全部退回真实值 —— 机制与原来完全一致。 */
+			const devSrc = devData !== null && devData.devSrc !== undefined && devData.devSrc !== null
+				? devData.devSrc
+				: null;
+			const srcNow = devSrc !== null && typeof devSrc.now === "number" ? devSrc.now : now;
+			const srcTimeline = devSrc !== null ? devSrc.timeline : timeline;
+			const srcRunning = devSrc !== null && typeof devSrc.running === "boolean" ? devSrc.running : running;
+			const srcPartial = devSrc !== null ? devSrc.partial : partial;
+			const srcRunningCalls = devSrc !== null && Array.isArray(devSrc.runningCalls) ? devSrc.runningCalls : runningCalls;
+			const srcTurnUsage = devSrc !== null && devSrc.turnUsage !== undefined ? devSrc.turnUsage : turnUsage;
+			const srcTurnUsageTurn = devSrc !== null && devSrc.turnUsageTurn !== undefined ? devSrc.turnUsageTurn : turnUsageTurn;
+			const srcLastCostTurn = devSrc !== null && typeof devSrc.turnKey === "string" ? devSrc.turnKey : subagentTurnKey;
+
 			const src = {
 				stats: stats, usage: usage,
 				sessionModel: sessionModel, sessionUsage: sessionUsage, timeRange: timeRange,
-				running: running, partial: partial, runningCalls: runningCalls,
-				lastAgentError: lastAgentError, pendingApprovals: pendingApprovals, timeline: timeline,
-				now: now, balance: balance, turnUsage: turnUsage, currency: displayCurrency,
+				running: srcRunning, partial: srcPartial, runningCalls: srcRunningCalls,
+				lastAgentError: lastAgentError, pendingApprovals: pendingApprovals, timeline: srcTimeline,
+				now: srcNow, balance: balance, turnUsage: srcTurnUsage, currency: displayCurrency,
 				models: config.models, defaultCurrency: config.currency,
 				pressure: pressure, breakdown: breakdown, timing: timing,
 				daily: daily,
-				turnUsageTurn: turnUsageTurn, currentTurn: currentTurn,
+				turnUsageTurn: srcTurnUsageTurn, currentTurn: currentTurn,
 				progress: progress, subagent: subagent,
 				/* 「本轮」同轮粘性下限的载体：sessionId/turnKey 说明"这份下限属于谁"，
 				   lastCostHold 是个可变盒子（ref 里那个对象），段里渲染时按需更新它 —— 见 applyTurnFloor。 */
-				sessionId: sessionId, lastCostTurn: subagentTurnKey, lastCostHold: lastCostHoldRef.current,
+				sessionId: sessionId, lastCostTurn: srcLastCostTurn, lastCostHold: lastCostHoldRef.current,
 				/* 「总计」增量式账本的载体（见 applyTotalFloor 的注释） */
 				totalHold: totalHoldRef.current
 			};
@@ -5421,10 +8018,19 @@ window.__ModuleLoader__.load({
 			const views = [];
 			cfg.segments.filter((id) => isSegmentOn(cfg, id)).forEach((id) => {
 				const view = segmentView(id, src, t);
-				/* 保留 view 上的 state（状态点靠它上色），只把缺数据的段换成占位文本 */
+				/* 保留 view 上的 state（状态点靠它上色），只把缺数据的段换成占位文本。
+				   **占位段也必须可点**：`segmentView` 返回 null 时若只给 { id, text }，
+				   渲染处「tip !== null 才挂 onClick」会让它变成死块 —— 用户点不开气泡，
+				   也就没法推进场景，**直接被锁死在空态里出不来**（用户实测踩到）。
+				   所以空态补一个极简气泡（标题 = 段名，一行说明 + 一行横杠），
+				   点开后 toggleTip 照常把该字段计数 +1，下一格就不是空态了。 */
 				views.push(view !== null && view !== undefined
 					? view
-					: { id: id, text: segmentText(id, view, t, displayCurrency) });
+					: {
+						id: id,
+						text: segmentText(id, view, t, displayCurrency),
+						tip: emptySegmentTip(id, view, t, displayCurrency)
+					});
 			});
 
 			/* 运行状态：只用来给上下文占用圆环上色（空闲灰 / 运行绿 / 错误红 / 待审批黄） */
@@ -5435,7 +8041,24 @@ window.__ModuleLoader__.load({
 			const approvalWaiting = approvals !== undefined && approvals !== null
 				&& (Array.isArray(approvals) ? approvals.length > 0 : true);
 			const agentFailed = !agentRunning && src.lastAgentError !== undefined && src.lastAgentError !== null;
-			const agentState = agentRunning ? "running" : (agentFailed ? "error" : (approvalWaiting ? "approval" : "idle"));
+			/* 队友分层在跑：成员一级 / 更深一级。只影响"Lead 没在跑时圆环该显示哪个颜色"，
+			   不参与上面 running / error / approval 的判定（那三档现有顺序一个字不动）。 */
+			const memberBusy = subagentTiers.team > 0;
+			const deepBusy = subagentTiers.deep > 0;
+			/* 开发模式下 6 种状态色必须都能点到：真实那几样（running / pendingApprovals /
+			   lastAgentError / 分层在跑）在开发模式里不会被假数据覆盖，光靠真实判定圆环
+			   永远只有一种颜色。所以只在这一处**前置**一个判断：fixture 给了 agentState 就用它，
+			   没给就走下面原封不动的真实判定。真实路径字号没改 —— 退出开发模式立刻回到真实状态。
+			   `teamRunning` / `deepRunning` 两档插在 `idle` 之前（用户明确要求的优先级）：
+			   三级同时在工作时显示 **Lead 优先（绿）**，Lead 不工作了才蓝，成员也不工作了才紫。
+			   注意它们排在 approval **之后** —— 「等你点确认」比"队友在跑"更需要人看，
+			   而且这条既有顺序用户没有要求改，保持 `running > error > approval > …` 现状。 */
+			const agentState = devData !== null && typeof devData.agentState === "string"
+				? devData.agentState
+				: (agentRunning ? "running"
+					: (agentFailed ? "error"
+						: (approvalWaiting ? "approval"
+							: (memberBusy ? "teamRunning" : (deepBusy ? "deepRunning" : "idle")))));
 			/* 上下文占用是独立开关：固定在栏首、不参与排序。
 			   拿不到占用数据时给**空环 + 横杠**，绝不整块消失 —— 会话刚发出就被中断时
 			   provider 还没报过压力，一整块没掉，底栏就少一项，看着像插件坏了（实测 2026-10-09）。 */
@@ -5459,6 +8082,12 @@ window.__ModuleLoader__.load({
 					setTipPos(null);
 					return;
 				}
+				/* 开发模式：**只推进被点开的那一个字段的计数**（关闭 / 换字段到这里之前就 return 了，
+				   所以只有"从关到开"这一下推进）。
+				   用户原话：「点一个，应该只变那一个啊」—— 所以这里传 `id`，只让 `devFieldScenes[id]`
+				   +1，其余字段一动不动。点余额只换余额、点总计只换总计。
+				   注意推进发生在 setTipId 之前：这一次渲染拿到的 devData 就是新数据，气泡一开就是新值。 */
+				advanceDevBubbleScene(id);
 				/* 点开余额 / 峰谷用量：顺手重查一次（收起那一下不查），数据回来气泡自己更新 */
 				if (id === "balance" && balanceReloadRef.current !== null) balanceReloadRef.current();
 				if (id === "status" && dailyReloadRef.current !== null) dailyReloadRef.current();
@@ -5473,7 +8102,23 @@ window.__ModuleLoader__.load({
 				setTipPos(null);
 			};
 			/* 面板挂在触发项自己身上（当子元素），这样气泡正好出现在该项正上方 */
-			const tipPanelOf = (tip) => {
+			/**
+			 * 气泡面板节点。**构造逻辑一行不动**，只在最后统一用 Portal 挂到 body。
+			 *
+			 * 为什么必须 Portal（2026-10 实机才发现，光调 z-index 治不了）：
+			 * 本插件的底栏是通过 `conversation.composer.dock` 注入的，也就是挂在官方的
+			 * `.an3WzG_composerSeat` **内部**，而官方给那个容器设了
+			 * `z-index:7; position:sticky` —— 于是气泡的 `z-index:105` 只能在这个
+			 * z-index:7 的层叠上下文**内部**比大小，跟外面的官方浮动控件
+			 * （「回到底部」那个圆形按钮在 `.V4vHZW_toBottomSlot` 里）根本不在同一层比较，
+			 * 数值给到 105 也压不住它（用户实测：改完按钮依旧在上面）。
+			 * 挂到 `document.body` 之后气泡成为 body 的直接子节点，105 才真正参与
+			 * 与官方 100/101 那一档的比较。
+			 * 附带好处：那个 `position:sticky` + `overflow:hidden` 的祖先不再裁剪气泡。
+			 * 取不到 createPortal 时退回就地渲染（与设置页拖拽卡片同一套兜底）：
+			 * 功能照旧，只是层级问题依旧存在。
+			 */
+			const tipPanelInner = (tip) => {
 				if (tip === undefined || tip === null) return null;
 				if (tip.kind === "tokens") return tokenPanel(tip.panel, tip.title, tipPos, tipRef);
 				if (tip.kind === "credits") {
@@ -5510,6 +8155,34 @@ window.__ModuleLoader__.load({
 					hoverMove: onHoverMove
 				});
 			};
+			/** 气泡的最终节点：就地构造，再套一层 Portal（拿不到 createPortal 时原样返回）。 */
+			const tipPanelOf = (tip) => {
+				const node = tipPanelInner(tip);
+				if (node === null) return null;
+				if (canPortal !== true) return node;
+				if (typeof document === "undefined" || document === null) return node;
+				if (document.body === undefined || document.body === null) return node;
+				return reactDom.createPortal(node, document.body);
+			};
+			/* 圆环的弧长：**跟着"谁在跑"换数据源**，颜色与弧长是两件独立的事。
+			   用户原话：「那个条还是有上下文占用的百分比的，要增长的。所以如果有多个成员
+			   同时在运行，那么这个圆圈应该显示为同一级内上下文占用最多的那一个。成员下派的
+			   子智能体那一级别（也就是该显示紫色的那一部分），上下文占用要显示最少的那个。」
+			   即：
+			     · Lead 在跑（绿）/ error / approval / idle ⇒ 用 Lead 自己的占用 contextMeter.percent
+			     · 只有成员在跑（蓝）⇒ 用 host 算好的**成员级最大** teamContextPercent
+			     · 只有更深层在跑（紫）⇒ 用 host 算好的**深层最小** deepContextPercent
+			   「最大 / 最小」由 host 在那一级内部先算好（它才看得到每个子会话的占用），
+			   客户端只负责"切数据源"，不在前端重新聚合。
+			   分层百分比为 null（老 host / 算不出）⇒ **退回 contextMeter.percent**：
+			   不能显示 0，否则圆环会突然空掉，看着像坏了。
+			   开发模式下用 fixture 自带的分层值（`devData.devSrc.agentTiers`）：真实 host 在开发模式里
+			   一次请求都不发，`subagentTiers` 永远是空对象，蓝紫两格的弧长就只能靠它。 */
+			const ringTiers = devData !== null && devData.devSrc !== undefined && devData.devSrc !== null
+				&& devData.devSrc.agentTiers !== undefined && devData.devSrc.agentTiers !== null
+				? devData.devSrc.agentTiers
+				: subagentTiers;
+			const ringPercent = ringPercentOf(contextMeter, agentState, ringTiers);
 			/* 圆环自己就是触发项：点开上下文占用面板；峰谷那两个字不带气泡 */
 			const contextTip = contextMeter === null ? null : { kind: "meter", meter: contextMeter };
 			const children = [];
@@ -5521,7 +8194,7 @@ window.__ModuleLoader__.load({
 					"aria-expanded": tipId === "context" ? "true" : "false",
 					onClick: (event) => toggleTip("context", event)
 				}, [
-					contextRing(contextMeter.percent, agentState, contextMeter.compact),
+					contextRing(ringPercent, agentState, contextMeter.compact),
 					tipId === "context" ? tipPanelOf(contextTip) : null
 				]));
 			}
@@ -5625,26 +8298,29 @@ window.__ModuleLoader__.load({
 			const t = props.t;
 			const cfg = useConfig();
 			const update = useUpdateState();
-			/* 开发模式是本组件内的界面状态；它不写配置、不动真实更新。
-			   **不给它可见开关**：入口是页脚版本号的「连点 5 次」（见 onVersionClick）。
-			   进入后标题右侧挂一枚「开发模式」胶囊，这是唯一的可见迹象。 */
-			const [devOn, setDevOn] = react.useState(false);
+			/* 开发模式的状态**只读模块级那一份**（useDevState 订阅 publishDev）。
+			   以前这里是组件本地的 `devOn` useState，那是"开发模式只影响设置页"时代的做法；
+			   现在开发模式还接管了**底栏**的假数据（底栏在对话页），本地 state 会带来两个毛病：
+			     ① 关掉设置页再打开，胶囊消失而底栏仍是假数据（两边不同步）；
+			     ② 从设置页以外的入口进出开发模式时，这里读不到。
+			   改用模块级快照后组件不再持有副本，也就不存在"两边不一致"这回事。
+			   **不给它可见开关**：入口仍是页脚版本号的「连点 5 次」（见 onVersionClick），
+			   进入后标题右侧挂一枚「开发模式」胶囊 —— 那是唯一的可见迹象。 */
+			const devState = useDevState();
+			const devOn = devState.on === true;
+
 			/* 版本号被点击：累计连点次数，够 5 次就切换开发模式。
-			   计数与时间窗在模块级（onVersionClick），这里只负责把结果同步给 React。 */
-			const onVersionClicked = () => {
-				const state = onVersionClick();
-				setDevOn(state.on === true);
-			};
-			/* 卸载时清掉演示的定时器，并把开发模式**一并关掉**。
-			   只清定时器是不够的：devMode 是模块级变量，而 devOn 是本组件的 useState。
-			   卸载后重挂时 devOn 回到 false，devMode 若还是 true，两者就不同步了 ——
-			   界面看不见「开发模式」胶囊，更新按钮却仍显示演示版本号，点下去走
-			   startPluginUpdate 的 devMode 分支只播演示、不安装也不报错，用户无从判断。
-			   只在**真的开着**时才复位：setDevMode(false) 会顺手重查一次 registry，
-			   没开还调用等于每次卸载白打一次网络请求，并且会把已有的真实更新提示清掉。 */
-			react.useEffect(() => () => {
-				if (devMode === true) setDevMode(false);
-			}, []);
+			   计数与时间窗都在模块级（onVersionClick）；
+			   切换成功后 setDevMode 里的 publishDev 会通知订阅者，本组件因此自然重渲染 ——
+			   这里**不需要**再自己 setState。 */
+			const onVersionClicked = () => onVersionClick();
+			/* 这里**刻意不再有**「卸载时把开发模式关掉」的复位 effect。
+			   那条复位是旧设计的残留：那时开发模式只影响设置页那颗更新按钮，卸载后不复位会留下
+			   "按钮显示演示版本号、胶囊却没了"的状态。现在开发模式接管了**底栏的假数据**，
+			   而底栏在对话页 —— 关掉设置页就把开发模式一起关掉，等于把对话页的假数据也带没了。
+			   用户已确认：**开发模式跨页面一直存在是预期行为**，要退出就连点版本号，不是关页面。
+			   卸载时仍然要清的只有「更新中」那一步的演示定时器（见 setDevMode 里那段），
+			   它由 setDevMode 自己管着，且模块级定时器不随组件卸载泄漏。 */
 
 			/* 自绘拖拽：全程用 pointer 事件自己跟手。不用原生 HTML5 拖拽 ——
 			   原生拖拽会话期间浏览器不给页面 wheel 事件（滚轮失灵），而且只有松手才换位。 */
@@ -5792,8 +8468,13 @@ window.__ModuleLoader__.load({
 			}, [currencyOpen]);
 
 			/* 当前会话模型：底栏在模型一变时就 POST 给 host（那个 effect 依赖 sessionModel），
-			   所以 host 的投影始终最新；设置页进来读一次就够，不需要轮询。 */
+			   所以 host 的投影始终最新；设置页进来读一次就够，不需要轮询。
+			   **开发模式开着时一次真实请求都不发**（项目硬约束）：这时底栏吃的是假数据，
+			   设置页显示的"当前会话使用"也是假的，再去问真实 host 既没意义、又破坏
+			   「开发模式纯本地」这个前提。依赖里必须带 devOn：退出开发模式后要真去取一次，
+			   否则设置页会一直停在「未识别」。 */
 			react.useEffect(() => {
+				if (devOn === true) return undefined;
 				let alive = true;
 				window.fetch(ACTIVE_MODEL_URL, { cache: "no-store" })
 					.then((response) => response.json())
@@ -5804,7 +8485,7 @@ window.__ModuleLoader__.load({
 					})
 					.catch(() => { /* 拿不到就保持未识别 */ });
 				return () => { alive = false; };
-			}, []);
+			}, [devOn]);
 
 			/* ---- 价格库操作：先改草稿，点保存才写入配置 ---- */
 			/* 顺序来自 modelOrder：新加的模型追加在末尾 */
@@ -6484,28 +9165,7 @@ window.__ModuleLoader__.load({
 
 		/* --------------------------------------------------------------- apply */
 
-		/* 自测/测试成员可直接拿到的纯函数（跨请求场景要靠它们驱动，见 tests/ 里的 harness）。
-		   注意：测试 harness 习惯在 `exports.apply = apply;` 那一行**前**插一份自己的
-		   `exports.__test = {...}`，位置在下面这行之后 ⇒ 它们那份会覆盖这一份（这是有意的，
-		   免得两份列表互相打架）；要测这里的东西，把它们加进 harness 自己那份列表即可。 */
-		exports.__test = {
-			nextSubagentState: nextSubagentState,
-			applyTurnFloor: applyTurnFloor,
-			SUBAGENT_STATE_EMPTY: SUBAGENT_STATE_EMPTY,
-			/* 开发模式的驱动入口：测试要能直接触发连点、并读回状态，
-			   不然这段只存在于设置页组件里的逻辑没法离线验证。 */
-			setDevMode: setDevMode,
-			runDevPreview: runDevPreview,
-			isDevMode: isDevMode,
-			onVersionClick: onVersionClick,
-			/* 更新按钮的两个点击入口：失败态只退回可重试、其余真发起更新 */
-			onUpdateClick: onUpdateClick,
-			dismissUpdateFailure: dismissUpdateFailure,
-			DEV_VERSION: DEV_VERSION,
-			DEV_FAIL_REASON: DEV_FAIL_REASON,
-			DEV_CLICKS: DEV_CLICKS,
-			DEV_CLICK_WINDOW_MS: DEV_CLICK_WINDOW_MS
-		};
+		/* 各测试用 replace(marker) 注入自己的 __test 表（插在文件末尾 exports.apply 赋值那行之前），本文件不自带表。 */
 
 		function apply(ctx) {
 			/* 注意：这里**不保存 ctx**。更新走本插件自己的 host 路由