dsh-account-pool 0.1.0

package/lib/client.js

@@ -0,0 +1,2049 @@
+// dsh-account-pool client bundle：设置页「WorkBuddy」。
+//
+// 手写 __ModuleLoader__ 工厂（无构建步骤）。唯一外部依赖是 react，
+// 由 loader 的模块表提供。样式全部走宿主主题变量，自动跟随明暗主题。
+window.__ModuleLoader__.load({ id: "dsh-account-pool", factory: (require) => {
+
+	var module = { exports: {} };
+	var exports = module.exports;
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	const react = require("react");
+	const h = react.createElement;
+	const { useState, useEffect, useCallback, useRef } = react;
+
+	const name = "account-pool";
+	const inject = ["slots"];
+
+	// 登录轮询间隔与上限：每 2 秒问一次，最多 5 分钟。
+	const POLL_INTERVAL_MS = 2000;
+
+	const POLL_TIMEOUT_MS = 5 * 60 * 1000;
+
+	// ---------------------------------------------------------------------
+	// 样式（走宿主主题变量，不写死颜色）
+	// ---------------------------------------------------------------------
+
+	const CARD_STYLE = {
+		border: "1px solid var(--dsw-alias-border-l1)",
+		borderRadius: "8px",
+		padding: "14px 16px",
+		marginBottom: "12px",
+		background: "var(--dsw-alias-bg-layer-1)",
+	};
+
+	const BUTTON_STYLE = {
+		padding: "6px 14px",
+		borderRadius: "6px",
+		border: "1px solid var(--dsw-alias-border-l1)",
+		background: "transparent",
+		color: "var(--dsw-alias-label-primary)",
+		cursor: "pointer",
+		fontSize: "13px",
+	};
+
+	const PRIMARY_BUTTON_STYLE = Object.assign({}, BUTTON_STYLE, {
+		background: "var(--dsw-alias-brand-primary)",
+		borderColor: "var(--dsw-alias-brand-primary)",
+		color: "#fff",
+	});
+
+	const TABLE_STYLE = {
+		width: "100%",
+		borderCollapse: "collapse",
+		fontSize: "13px",
+	};
+
+	const TH_STYLE = {
+		textAlign: "left",
+		padding: "6px 8px",
+		borderBottom: "1px solid var(--dsw-alias-border-l1)",
+		color: "var(--dsw-alias-label-secondary)",
+		fontWeight: 500,
+		whiteSpace: "nowrap",
+	};
+
+	const TD_STYLE = {
+		padding: "7px 8px",
+		borderBottom: "1px solid var(--dsw-alias-border-l1)",
+		color: "var(--dsw-alias-label-primary)",
+	};
+
+	const INPUT_STYLE = {
+		padding: "6px 10px",
+		borderRadius: "6px",
+		border: "1px solid var(--dsw-alias-border-l1)",
+		background: "transparent",
+		color: "var(--dsw-alias-label-primary)",
+		fontSize: "13px",
+		minWidth: "260px",
+	};
+
+	// ---------------------------------------------------------------------
+	// 纯格式化函数（无副作用，便于复用）
+	// ---------------------------------------------------------------------
+
+	/** 时间戳 → 「还剩 1 小时 20 分」这种相对描述。 */
+	function formatRemaining(untilMs) {
+		if (!untilMs || untilMs <= Date.now()) return "已结束";
+		const seconds = Math.round((untilMs - Date.now()) / 1000);
+		// 不足一分钟时按秒显示：显示「0 分钟」会让人以为坏了
+		if (seconds < 60) return seconds + " 秒";
+		const minutes = Math.round(seconds / 60);
+		if (minutes < 60) return minutes + " 分钟";
+		const hours = Math.floor(minutes / 60);
+		const rest = minutes % 60;
+		return rest === 0 ? hours + " 小时" : hours + " 小时 " + rest + " 分";
+	}
+
+	/**
+	 * 时间戳 → 本地日期时间。
+	 *
+	 * 必须带日期：凭证到期动辄几十天后，只显示「15:05:01」会被误读成今天。
+	 * 同一天只显示时分，其余显示月-日 + 时分，兼顾紧凑与准确。
+	 */
+	function formatClock(ms) {
+		if (!ms) return "—";
+		const d = new Date(ms);
+		const now = new Date();
+		const pad = (n) => String(n).padStart(2, "0");
+		const time = pad(d.getHours()) + ":" + pad(d.getMinutes());
+		const sameDay = d.getFullYear() === now.getFullYear()
+			&& d.getMonth() === now.getMonth()
+			&& d.getDate() === now.getDate();
+		if (sameDay) return "今天 " + time;
+		return (d.getMonth() + 1) + "-" + pad(d.getDate()) + " " + time;
+	}
+
+	/** 成功率展示；没打过请求就给中性描述。 */
+	function formatRate(successCount, failCount) {
+		const total = (successCount || 0) + (failCount || 0);
+		if (total === 0) return "—";
+		return ((successCount / total) * 100).toFixed(1) + "%";
+	}
+
+	// ---------------------------------------------------------------------
+	// 状态判定：把散落字段折叠成单一状态标签
+	// 这是唯一的判定入口，避免各处各写一遍判断逻辑
+	// ---------------------------------------------------------------------
+
+	/**
+	 * @returns {{label:string, color:string}} 状态标签与颜色变量
+	 */
+	/**
+	 * 账号状态标签。
+	 *
+	 * 用后端给的 stopReason 判定，不再靠「连续失败次数 >= 3」猜——
+	 * 熔断阈值是可配置的，写死 3 会在阈值改成别的值时显示错。
+	 *
+	 * 文案要说清「为什么停」和「还有多久恢复」，不然用户只看到一个
+	 * 数字不知道什么意思。
+	 */
+	function statusOf(account) {
+		if (!account.cooling) {
+			return { label: "可用", color: "var(--dsw-alias-state-success-primary)" };
+		}
+		const left = formatRemaining(account.cooldownUntilMs);
+
+		// 冷却已结束但状态还没刷新：别说「剩 已结束」这种自相矛盾的话
+		if (left === "已结束") {
+			return { label: "恢复中", color: "var(--dsw-alias-state-warn-primary)" };
+		}
+
+		switch (account.stopReason) {
+			case "breaker":
+				return { label: "熔断 · " + left + "后重试", color: "var(--dsw-alias-state-error-primary)" };
+			case "hard_credit":
+				return { label: "积分耗尽 · " + left + "后重试", color: "var(--dsw-alias-state-error-primary)" };
+			case "soft_rate":
+				return { label: "限流 · " + left + "后重试", color: "var(--dsw-alias-state-warn-primary)" };
+			case "session_dead":
+				return { label: "登录失效 · " + left + "后重试", color: "var(--dsw-alias-state-warn-primary)" };
+			default:
+				return { label: "冷却 · " + left + "后重试", color: "var(--dsw-alias-state-warn-primary)" };
+		}
+	}
+
+	// ---------------------------------------------------------------------
+	// 展示组件（只吃 props，不自己取数据）
+	// ---------------------------------------------------------------------
+
+	function StatusBadge({ account }) {
+		const status = statusOf(account);
+		return h("span", { style: { color: status.color, fontSize: "12px", whiteSpace: "nowrap" } }, status.label);
+	}
+
+	/**
+	 * 积分单元格：显示剩余；有总量数据时悬停可看「总量 / 已用 / 剩余」。
+	 *
+	 * 已用 = 总量 − 剩余（两家上游都不直接给「已用」的聚合值，
+	 * 但总量和剩余都有，差值就是消耗进度）。
+	 */
+	function creditCell(account) {
+		const hasCredits = typeof account.credits === "number";
+		const hasSize = typeof account.creditsSize === "number" && account.creditsSize > 0;
+		const value = hasCredits ? formatNumber(account.credits) : "—";
+		if (!hasSize || !hasCredits) return h("span", null, value);
+		// 上游数据偶尔会不一致（比如包过期被剔除后总量没同步），
+		// 剩余大于总量时按「无构成信息」处理，不显示误导性的负数或 >100%。
+		if (account.credits > account.creditsSize) return h("span", null, value);
+		const used = account.creditsSize - account.credits;
+		const percent = Math.round((account.credits / account.creditsSize) * 100);
+		return h("span", {
+			title: "总量 " + formatNumber(account.creditsSize)
+				+ " · 已用 " + formatNumber(used)
+				+ " · 剩余 " + formatNumber(account.credits)
+				+ "（" + percent + "%）",
+			style: { cursor: "help" },
+		}, value);
+	}
+
+	function AccountRow({ account, region, onRevive, onRelogin, onRemove, busy }) {
+		return h("tr", null,
+			h("td", { style: TD_STYLE }, account.nickname || account.uid || account.id.slice(0, 8)),
+			h("td", { style: TD_STYLE }, h(StatusBadge, { account })),
+			// 积分 0 是合法值（真的用光了），不能像 undefined 那样显示 —；
+			// 用 typeof 区分「没数据」和「数据是 0」。
+			// 悬停展示「总量 / 已用 / 剩余」构成——只看剩余看不出消耗进度。
+			h("td", { style: Object.assign({}, TD_STYLE, NUM_STYLE) },
+				creditCell(account)),
+			h("td", { style: TD_STYLE }, formatRate(account.successCount, account.failCount)),
+			h("td", { style: TD_STYLE }, formatClock(account.expiresAtMs)),
+			h("td", { style: Object.assign({}, TD_STYLE, { whiteSpace: "nowrap" }) },
+				// 按状态给对应操作：登录失效的账号「解冻」帮不上忙，
+				// 它真正需要的是重新走一遍 OAuth 换新凭证。
+				account.stopReason === "session_dead"
+					? h("button", {
+						style: Object.assign({}, PRIMARY_BUTTON_STYLE, { padding: "3px 9px", fontSize: "12px", marginRight: "6px", color: "#fff" }),
+						disabled: busy,
+						onClick: () => onRelogin(region),
+						title: "凭证已失效，需要重新登录换新凭证",
+					}, "重新登录")
+					: h("button", {
+						style: Object.assign({}, BUTTON_STYLE, {
+							padding: "3px 9px", fontSize: "12px", marginRight: "6px",
+							// 可用账号没有需要解冻的东西，禁用而不是隐藏——
+							// 保持按钮位置稳定，避免整行跳动。
+							opacity: account.cooling ? 1 : 0.4,
+						}),
+						disabled: busy || !account.cooling,
+						onClick: () => onRevive(region, account.id),
+						title: account.cooling
+							? "立刻清除该账号的冷却与失败计数，让它马上重新参与选号"
+							: "账号当前可用，无需解冻",
+					}, "解冻"),
+				h("button", {
+					style: Object.assign({}, BUTTON_STYLE, { padding: "3px 9px", fontSize: "12px" }),
+					disabled: busy,
+					onClick: () => onRemove(region, account.id),
+					title: "从账号池删除，并删掉本机凭证文件（不可恢复）",
+				}, "移除"),
+			),
+		);
+	}
+
+	function RegionPanel({ region, data, onRefresh, onRefreshCredits, onAddAccount, onImport, onTraeLogin, onRevive, onRemove, busy, notice }) {
+		// onAddAccount 同时充当「重新登录」：都是走同一套 OAuth 设备流。
+		const accounts = data.accounts || [];
+		return h("div", { style: CARD_STYLE },
+			h("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "10px" } },
+				h("div", null,
+					h("span", { style: { fontWeight: 600, fontSize: "14px" } }, data.displayName || region),
+					h("span", { style: { marginLeft: "10px", fontSize: "12px", opacity: 0.7 } },
+						(data.models || 0) + " 个模型"),
+				),
+				h("div", { style: { display: "flex", gap: "8px", alignItems: "center" } },
+					// Trae 的凭证格式与 WorkBuddy 完全不同（Cloud-IDE-JWT + 设备标识），
+					// Trae 的凭证在桌面端的 storage.json 里（加密），
+					// 所以走「导入凭证」而不是网页登录。
+					region === "trae"
+						? h("button", {
+							style: Object.assign({}, PRIMARY_BUTTON_STYLE, { opacity: busy ? 0.6 : 1 }),
+							disabled: busy,
+							onClick: onTraeLogin,
+						}, "导入凭证")
+						: h("button", {
+							// 导入用主色突出：已有凭证的人第一步就是它，比「添加账号」更常用。
+							style: Object.assign({}, PRIMARY_BUTTON_STYLE, { opacity: busy ? 0.6 : 1 }),
+							disabled: busy,
+							onClick: () => onImport(region),
+						}, "导入"),
+					region === "trae"
+						? null
+						: h("button", {
+							style: BUTTON_STYLE,
+							disabled: busy,
+							onClick: () => onAddAccount(region),
+						}, "登录"),
+					h("button", {
+						style: BUTTON_STYLE,
+						disabled: busy,
+						onClick: () => onRefreshCredits(region),
+					}, "刷新积分"),
+					h("button", {
+						style: BUTTON_STYLE,
+						disabled: busy,
+						onClick: () => onRefresh(region),
+					}, "刷新模型"),
+				),
+			),
+
+			notice ? h("p", {
+				style: {
+					margin: "0 0 10px 0",
+					fontSize: "12px",
+					color: notice.kind === "error" ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-state-success-primary)",
+				},
+			}, notice.text) : null,
+
+			accounts.length === 0
+				? h("p", { style: { margin: 0, fontSize: "13px", opacity: 0.7 } },
+					region === "trae"
+						? "还没有 Trae 账号。点「导入凭证」，把 Trae 桌面端的 storage.json 内容粘过来。"
+						: "还没有账号。点「登录」用浏览器完成授权，或点「导入」粘贴已有凭证。")
+				: h("table", { style: TABLE_STYLE },
+					h("thead", null, h("tr", null,
+						h("th", { style: TH_STYLE }, "账号"),
+						h("th", { style: TH_STYLE }, "状态"),
+						h("th", { style: TH_STYLE }, "积分"),
+						h("th", { style: TH_STYLE }, "成功率"),
+						h("th", { style: TH_STYLE }, "凭证到期"),
+						h("th", { style: TH_STYLE }, "操作"),
+					)),
+					h("tbody", null, accounts.map(account =>
+						h(AccountRow, {
+							key: account.id,
+							account,
+							region,
+							busy,
+							onRevive,
+							onRelogin: onAddAccount,
+							onRemove,
+						})
+					)),
+				),
+		);
+	}
+
+	/** 大数字加千位分隔；token 量级动辄百万，不分隔读不出来。 */
+	function formatNumber(n) {
+		if (!n) return "0";
+		return String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	}
+
+	/**
+	 * 大数字紧凑显示：1234567 → 1.23M。
+	 * 指标卡上空间有限，完整千分位会撑破布局；完整值放到 title 里。
+	 */
+	function formatCompact(n) {
+		const v = Number(n) || 0;
+		if (v < 1000) return String(v);
+		if (v < 1e6) return (v / 1e3).toFixed(v < 1e4 ? 1 : 0) + "K";
+		if (v < 1e9) return (v / 1e6).toFixed(v < 1e7 ? 2 : 1) + "M";
+		return (v / 1e9).toFixed(2) + "B";
+	}
+
+	/** 等宽数字：表格里数字列对齐才读得下去。 */
+	const NUM_STYLE = {
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+		fontVariantNumeric: "tabular-nums",
+	};
+
+	/** 字节数 → 人类可读。用量文件通常几十 KB，超过 1MB 就该关注了。 */
+	function formatBytes(n) {
+		if (!n) return "0 B";
+		if (n < 1024) return n + " B";
+		if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KB";
+		return (n / 1024 / 1024).toFixed(2) + " MB";
+	}
+
+	/** 延迟/速率取整展示。 */
+	function formatMs(ms) {
+		if (!ms) return "—";
+		return Math.round(ms) + " ms";
+	}
+
+	/** 页签切换条。 */
+	function TabBar({ tabs, active, onChange }) {
+		return h("div", {
+			style: {
+				display: "flex", gap: "4px", marginBottom: "14px",
+				borderBottom: "1px solid var(--dsw-alias-border-l1)",
+			},
+		}, tabs.map(tab => h("button", {
+			key: tab.id,
+			style: {
+				padding: "7px 16px",
+				border: "none",
+				borderBottom: active === tab.id
+					? "2px solid var(--dsw-alias-brand-primary)"
+					: "2px solid transparent",
+				background: "transparent",
+				color: "var(--dsw-alias-label-primary)",
+				opacity: active === tab.id ? 1 : 0.6,
+				cursor: "pointer",
+				fontSize: "13px",
+				fontWeight: active === tab.id ? 600 : 400,
+				marginBottom: "-1px",
+			},
+			onClick: () => onChange(tab.id),
+		}, tab.label)));
+	}
+
+	/**
+	 * 一个任务的完成情况：已完成的账号数 / 总账号数。
+	 * 「全部完成」时数字用成功色，部分完成用警告色。
+	 */
+	function TaskProgressCell({ done, total }) {
+		if (total === 0) return h("span", { style: { opacity: 0.5 } }, "—");
+		const all = done === total;
+		return h("span", {
+			style: {
+				fontWeight: 600,
+				color: all
+					? "var(--dsw-alias-state-success-primary)"
+					: done > 0
+						? "var(--dsw-alias-state-warn-primary)"
+						: "var(--dsw-alias-label-secondary)",
+			},
+		}, done + "/" + total, all ? h("span", { style: { marginLeft: "6px", fontSize: "11px", opacity: 0.8 } }, "已完成") : null);
+	}
+
+	/**
+	 * 每日任务视图：先列任务清单与完成数量，再列各账号明细。
+	 *
+	 * 完成情况怎么来的：
+	 *   - 只读字段能判断的（旅行 daily_limit_reached、抽奖次数、连登天数）直接算
+	 *   - 签到没有只读接口，用**上次执行结果**；从没执行过就显示「未执行」
+	 *     （打开页面不会偷偷签到——执行是你点按钮触发的）
+	 */
+	function DailyTasksView({ region, data, busy, setBusy, setNotice, notice, lastRun, reload, onRunDone }) {
+		const accounts = data.accounts || [];
+		const total = accounts.length;
+
+		// 每个任务的完成数
+		const count = (predicate) => accounts.filter(predicate).length;
+
+		// 签到：来自上次执行结果（无只读接口）
+		const checkinResults = lastRun
+			? accounts.filter(a => {
+				const r = lastRun[a.accountId];
+				return r && r.checkin && r.checkin.status !== 'failed';
+			}).length
+			: undefined;
+
+		// 旅行：daily_limit_reached 或已在途，都算今天做过了
+		const travelDone = count(a => a.travel && (a.travel.dailyLimitReached || a.travel.state === 'traveling'));
+
+		// 连登兑换：用上游给的 redeemable（已解锁档位）判定，不自己比天数。
+		// 「完成」的含义是「该账号当前没有待兑换的东西」。
+		const redeemPending = accounts.filter(a => (a.streak?.redeemable?.length ?? 0) > 0).length;
+		const redeemDone = total - redeemPending;
+
+		// 抽奖：有次数就是待办
+		const lotteryPending = count(a => a.lottery && a.lottery.chances > 0);
+		const lotteryDone = total - lotteryPending;
+
+		/** 任务清单的一行。 */
+		const taskRow = (name, done, todo, note) => h("tr", { key: name },
+			h("td", { style: TD_STYLE }, name),
+			h("td", { style: TD_STYLE },
+				done === undefined
+					? h("span", { style: { opacity: 0.5 } }, "未执行")
+					: h(TaskProgressCell, { done, total })),
+			h("td", { style: Object.assign({}, TD_STYLE, { fontSize: "12px", opacity: 0.7 }) }, note || ""),
+		);
+
+		return h("div", null,
+			h("div", { style: CARD_STYLE },
+				h("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "10px" } },
+					h("div", null,
+						h("span", { style: { fontWeight: 600, fontSize: "14px" } }, "每日任务"),
+						h("span", { style: { marginLeft: "10px", fontSize: "12px", opacity: 0.7 } },
+							total + " 个账号"),
+					),
+					h("button", {
+						style: Object.assign({}, PRIMARY_BUTTON_STYLE, { opacity: busy ? 0.6 : 1 }),
+						disabled: busy || total === 0,
+						onClick: async () => {
+							setBusy(true);
+							try {
+								const res = await fetch("/account-pool/tasks/daily", {
+									method: "POST",
+									headers: { "content-type": "application/json" },
+									body: JSON.stringify({ region }),
+								});
+								const out = await res.json();
+								if (!out.ok) throw new Error(out.error || "执行失败");
+								// 保存执行结果：签到没有只读接口，清单里的完成数靠它。
+								// 注意 setLastRun 属于主组件，这里只能通过 props 回调，
+								// 直接调用会 ReferenceError（跨作用域）。
+								const map = {};
+								for (const r of out.results || []) map[r.accountId] = r;
+								onRunDone(map);
+								setNotice(region, "ok", "已完成 " + (out.results || []).length + " 个账号的每日任务");
+								// 重新拉只读状态，让旅行/抽奖/连登的完成数同步更新
+								await reload();
+							} catch (error) {
+								setNotice(region, "error", error.message);
+							} finally {
+								setBusy(false);
+							}
+						},
+					}, busy ? "执行中…" : "全部执行"),
+				),
+
+				notice ? h("p", {
+					style: {
+						margin: "0 0 10px 0", fontSize: "12px",
+						color: notice.kind === "error"
+							? "var(--dsw-alias-state-error-primary)"
+							: "var(--dsw-alias-state-success-primary)",
+					},
+				}, notice.text) : null,
+
+				h("table", { style: TABLE_STYLE },
+					h("thead", null, h("tr", null,
+						h("th", { style: TH_STYLE }, "任务"),
+						h("th", { style: TH_STYLE }, "完成情况"),
+						h("th", { style: TH_STYLE }, "说明"),
+					)),
+					h("tbody", null,
+						taskRow("签到", checkinResults, "每天一次，幂等", "无只读接口，需执行后才有数据"),
+						taskRow("猫猫旅行", travelDone, "到站领奖 · 空闲派出", "今日已派或在途都算完成"),
+						taskRow("连登兑换", redeemDone, "满 7/14/28 天可兑换", redeemPending > 0 ? redeemPending + " 个账号有可兑换档位" : "没有待兑换的档位"),
+						taskRow("抽奖", lotteryDone, "次数来自连登兑换", lotteryPending > 0 ? lotteryPending + " 个账号有抽奖次数" : "暂无抽奖次数"),
+					),
+				),
+
+				h("p", { style: { margin: "10px 0 0 0", fontSize: "12px", opacity: 0.6 } },
+					"打开本页只做只读查询，不会替你签到或派出；点「全部执行」才会真正执行。"),
+			),
+
+			// ---- 各账号明细 ----
+			h("div", { style: CARD_STYLE },
+				h("div", { style: { fontWeight: 600, fontSize: "14px", marginBottom: "10px" } }, "账号明细"),
+				total === 0
+					? h("p", { style: { margin: 0, fontSize: "13px", opacity: 0.7 } }, "还没有账号。")
+					: h("table", { style: TABLE_STYLE },
+						h("thead", null, h("tr", null,
+							h("th", { style: TH_STYLE }, "账号"),
+							h("th", { style: TH_STYLE }, "连续登录"),
+							h("th", { style: TH_STYLE }, "猫"),
+							h("th", { style: TH_STYLE }, "旅行"),
+							h("th", { style: TH_STYLE }, "抽奖次数"),
+						)),
+						h("tbody", null, accounts.map(a => h("tr", { key: a.accountId },
+							h("td", { style: TD_STYLE }, a.nickname || a.accountId?.slice(0, 8) || "—"),
+							h("td", { style: TD_STYLE },
+								a.streak
+									? h("span", null, formatNumber(a.streak.days) + " 天",
+										a.streak.nextTier
+											? h("span", { style: { opacity: 0.6, marginLeft: "6px", fontSize: "12px" } },
+												"距 " + a.streak.nextTier + " 还差 " + a.streak.nextTierRemaining + " 天")
+											: null)
+									: h("span", { style: { opacity: 0.5 } }, "—")),
+							h("td", { style: TD_STYLE },
+								a.buddy
+									? h("span", null, a.buddy.name, h("span", { style: { opacity: 0.6, marginLeft: "5px" } }, a.buddy.rarity))
+									: h("span", { style: { opacity: 0.5 } }, "未领养")),
+							h("td", { style: TD_STYLE },
+								a.travel
+									? h("span", { style: { color: a.travel.dailyLimitReached ? "var(--dsw-alias-state-success-primary)" : "inherit" } },
+										a.travel.state === 'traveling' ? "在途中"
+											: a.travel.state === 'arrived' ? "可领奖"
+											: a.travel.dailyLimitReached ? "今日已派"
+											: "空闲")
+									: h("span", { style: { opacity: 0.5 } }, "—")),
+							h("td", { style: TD_STYLE },
+								a.lottery !== undefined ? String(a.lottery.chances) : h("span", { style: { opacity: 0.5 } }, "—")),
+						))),
+					),
+			),
+		);
+	}
+
+	/**
+	 * 把后端的时间片键转成给人看的文字。
+	 *
+	 * 后端键的格式（存储用，保持原样不动）：
+	 *   小时  2026-09-18T14
+	 *   日    2026-06-01
+	 *
+	 * 显示上做两点处理：
+	 *   1. 去掉年份——用量通常只看最近几天，年份是噪音；
+	 *      但跨年时会补回，避免 12-31 和 01-01 分不清哪年在先。
+	 *   2. 小时补上「:00」，让它一眼看出是时刻而不是日期。
+	 *
+	 * @param {string} key 原始时间片键
+	 * @param {string} kind 'hour' | 'day'
+	 * @param {boolean} withYear 是否强制带年份
+	 */
+	/**
+	 * Trae 的每日任务视图。
+	 *
+	 * 比 WorkBuddy 简单：只有签到与积分，没有旅行 / 连登兑换 / 抽奖。
+	 * 而且 Trae **有只读的签到状态接口**，所以完成数直接来自查询，
+	 * 不像 WorkBuddy 那样要靠「上次执行结果」推断。
+	 */
+	/**
+	 * 签到单元格：区分「本账号已签」和「设备已签（别的账号签的）」。
+	 *
+	 * Trae 的签到按**设备**计数。同一台机器上的多个账号共享 deviceId，
+	 * 所以第二个账号永远会看到 checked_in=false，但它其实"今天已经签过了"。
+	 * 直接显示「未签到」会让人以为漏签、反复点执行。
+	 *
+	 * 三态：
+	 *   已签到      本账号领到了（checked_in=true）
+	 *   设备已签到  本账号没领，但同设备今天签过（did_checked_in=true）
+	 *   未签到      都没签，可以执行
+	 */
+	function checkinCell(account) {
+		if (account.checkinError) {
+			return h("span", { style: { color: "var(--dsw-alias-state-error-primary)", fontSize: "12px" } }, "查询失败");
+		}
+		const ci = account.checkin;
+		if (!ci) return h("span", { style: { opacity: 0.5 } }, "—");
+		if (ci.checkedIn) {
+			return h("span", { style: { color: "var(--dsw-alias-state-success-primary)" } }, "已签到");
+		}
+		if (ci.deviceCheckedIn) {
+			return h("span", {
+				title: "该设备今天已由同设备的账号签到；Trae 的签到按设备计数，换设备登录才能各签各的",
+				style: { color: "var(--dsw-alias-state-warn-primary)", cursor: "help" },
+			}, "设备已签到");
+		}
+		return h("span", { style: { opacity: 0.7 } }, "未签到");
+	}
+
+	function TraeTasksView({ region, data, busy, setBusy, setNotice, notice, reload, onRunDone }) {
+		const accounts = data.accounts || [];
+		const total = accounts.length;
+
+		// 签到：直接用只读状态里的 checked_in
+		// 完成数把「设备已签到」也算进来：Trae 按设备计数，同设备的第二个
+		// 账号拿不到该状态，但今天这件事已经发生过了，不该算未完成。
+		const checkedIn = accounts.filter(a => a.checkin
+			&& (a.checkin.checkedIn === true || a.checkin.deviceCheckedIn === true)).length;
+		// 积分：能查到就算「已获取」
+		const withCredits = accounts.filter(a => typeof a.credits === "number").length;
+
+		const sumCredits = accounts.reduce((sum, a) => sum + (typeof a.credits === "number" ? a.credits : 0), 0);
+
+		const taskRow = (name, done, note) => h("tr", { key: name },
+			h("td", { style: TD_STYLE }, name),
+			h("td", { style: TD_STYLE },
+				total === 0
+					? h("span", { style: { opacity: 0.5 } }, "—")
+					: h(TaskProgressCell, { done, total })),
+			h("td", { style: Object.assign({}, TD_STYLE, { fontSize: "12px", opacity: 0.7 }) }, note || ""),
+		);
+
+		return h("div", null,
+			h("div", { style: CARD_STYLE },
+				h("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "10px" } },
+					h("div", null,
+						h("span", { style: { fontWeight: 600, fontSize: "14px" } }, "每日任务"),
+						h("span", { style: { marginLeft: "10px", fontSize: "12px", opacity: 0.7 } },
+							total + " 个账号"),
+					),
+					h("button", {
+						style: Object.assign({}, PRIMARY_BUTTON_STYLE, { opacity: busy ? 0.6 : 1 }),
+						disabled: busy || total === 0,
+						onClick: async () => {
+							setBusy(true);
+							try {
+								const res = await fetch("/account-pool/tasks/daily", {
+									method: "POST",
+									headers: { "content-type": "application/json" },
+									body: JSON.stringify({ region }),
+								});
+								const out = await res.json();
+								if (!out.ok) throw new Error(out.error || "执行失败");
+								const map = {};
+								for (const r of out.results || []) map[r.accountId] = r;
+								onRunDone(map);
+								setNotice(region, "ok", "已完成 " + (out.results || []).length + " 个账号的签到");
+								await reload();
+							} catch (error) {
+								setNotice(region, "error", error.message);
+							} finally {
+								setBusy(false);
+							}
+						},
+					}, busy ? "执行中…" : "全部执行"),
+				),
+
+				notice ? h("p", {
+					style: {
+						margin: "0 0 10px 0", fontSize: "12px",
+						color: notice.kind === "error"
+							? "var(--dsw-alias-state-error-primary)"
+							: "var(--dsw-alias-state-success-primary)",
+					},
+				}, notice.text) : null,
+
+				h("table", { style: TABLE_STYLE },
+					h("thead", null, h("tr", null,
+						h("th", { style: TH_STYLE }, "任务"),
+						h("th", { style: TH_STYLE }, "完成情况"),
+						h("th", { style: TH_STYLE }, "说明"),
+					)),
+					h("tbody", null,
+						taskRow("每日签到", checkedIn, "每天一次，先查状态再领取，不会重复领"),
+						taskRow("积分查询", withCredits, total > 0 ? "当前合计 " + formatNumber(sumCredits) + " 积分" : "只读查询，不消耗额度"),
+					),
+				),
+			),
+
+			// 各账号明细
+			total > 0
+				? h("div", { style: CARD_STYLE },
+					h("div", { style: { fontWeight: 600, fontSize: "14px", marginBottom: "10px" } }, "账号明细"),
+					h("table", { style: TABLE_STYLE },
+						h("thead", null, h("tr", null,
+							h("th", { style: TH_STYLE }, "账号"),
+							h("th", { style: TH_STYLE }, "今日签到"),
+							h("th", { style: TH_STYLE }, "积分"),
+						)),
+						h("tbody", null, accounts.map(a => h("tr", { key: a.accountId },
+							h("td", { style: TD_STYLE }, a.nickname || String(a.accountId).slice(0, 8)),
+							h("td", { style: TD_STYLE }, checkinCell(a)),
+							h("td", { style: Object.assign({}, TD_STYLE, NUM_STYLE) },
+								a.creditsError
+									? "—"
+									: typeof a.credits === "number" ? formatNumber(a.credits) : "—"),
+						))),
+					),
+				)
+				: null,
+		);
+	}
+
+	function formatTimeKey(key, kind, withYear = false) {
+		const raw = String(key ?? "");
+		// 日粒度：2026-06-01
+		if (kind === "day") {
+			const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
+			if (m === null) return raw;
+			return withYear ? `${m[1]}-${m[2]}-${m[3]}` : `${m[2]}-${m[3]}`;
+		}
+		// 小时粒度：2026-09-18T14
+		const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2})$/.exec(raw);
+		if (m === null) return raw;
+		return (withYear ? `${m[1]}-` : "") + `${m[2]}-${m[3]} ${m[4]}:00`;
+	}
+
+	/**
+	 * 时间跨度是否跨年。跨年时两端要显示年份，
+	 * 否则 12-31 和 01-01 摆在一起分不清先后。
+	 */
+	function spansYear(points) {
+		if (points.length < 2) return false;
+		const first = String(points[0]?.t ?? "").slice(0, 4);
+		const last = String(points[points.length - 1]?.t ?? "").slice(0, 4);
+		return first !== "" && last !== "" && first !== last;
+	}
+
+	/**
+	 * 迷你趋势图：按时间聚合的柱状图。
+	 *
+	 * series 是「每（时间片, 账号, 模型）一条」，画图前必须先按时间片合并，
+	 * 否则同一时刻会有多根柱子。
+	 *
+	 * 零依赖实现：不用图表库（插件要保持无第三方运行时依赖），
+	 * 用 div 高度模拟柱子，配合 title 提供悬停数值。
+	 */
+	function UsageTrend({ series, height = 56 }) {
+		if (!Array.isArray(series) || series.length === 0) return null;
+
+		// 按时间片合并（同一个 t 可能有多条：不同账号/模型）
+		const byTime = new Map();
+		for (const point of series) {
+			// kind 必须一起带过来：漏了会让日粒度的数据被当成小时显示
+			// （「2 天有记录」会错写成「2 个小时有记录」）。
+			const slot = byTime.get(point.t)
+				?? { t: point.t, kind: point.kind, requests: 0, errors: 0, totalTokens: 0 };
+			slot.requests += point.requests || 0;
+			slot.errors += point.errors || 0;
+			slot.totalTokens += point.totalTokens || 0;
+			byTime.set(point.t, slot);
+		}
+		const points = [...byTime.values()].sort((a, b) => a.t.localeCompare(b.t));
+
+		// 只显示最近 N 个点，太多柱子会挤成一团
+		const MAX_BARS = 48;
+		const shown = points.slice(-MAX_BARS);
+		const peak = Math.max(...shown.map(p => p.requests), 1);
+		// 是否有失败：决定要不要显示图例。没有失败时不显示，避免无意义噪音。
+		const hasAnyError = shown.some(p => (p.errors || 0) > 0);
+
+		return h("div", { style: { marginBottom: "14px" } },
+			h("div", {
+				style: {
+					display: "flex", justifyContent: "space-between",
+					fontSize: "11px", color: "var(--dsw-alias-label-secondary)",
+					marginBottom: "6px",
+				},
+			},
+				h("span", { style: { display: "flex", alignItems: "center", gap: "10px" } },
+					h("span", null, "请求趋势"),
+					// 图例：技能要求「信息不能只靠颜色传达」，
+					// 所以红色叠加段必须有文字说明它是什么。
+					hasAnyError
+						? h("span", { style: { display: "inline-flex", alignItems: "center", gap: "4px" } },
+							h("span", {
+								style: {
+									width: "7px", height: "7px", borderRadius: "1px",
+									background: "var(--wb-chart-error, #f25a5a)",
+									display: "inline-block",
+								},
+							}),
+							"失败")
+						: null,
+				),
+				h("span", null,
+					// 不用「时间片」这个实现术语（后端按 scope 分桶）。
+					// 粒度会变：近期按小时、超 90 天折叠成按天，两种文案分开写，
+					// 否则「2 个天有记录」这种量词错误会露出来。
+					shown[0]?.kind === 'day'
+						? shown.length + " 天有记录 · 单日最高 " + formatNumber(peak) + " 次"
+						: shown.length + " 小时有记录 · 单小时最高 " + formatNumber(peak) + " 次"),
+			),
+			h("div", {
+				style: {
+					display: "flex", alignItems: "flex-end", gap: "2px",
+					height: height + "px",
+					padding: "0 1px",
+					borderBottom: "1px solid var(--dsw-alias-border-l1)",
+				},
+			}, shown.map((point, i) => {
+				// 最低给 2px，否则 0 请求的柱子看不见，会以为数据缺失
+				const barHeight = Math.max(Math.round((point.requests / peak) * height), 2);
+				const hasError = (point.errors || 0) > 0;
+				// 失败占比决定红色叠加段的高度。
+				// 不给整根柱子标红：一个时段常是几十次成功里夹一两次失败，
+				// 整根变红会把小问题放大成「整体异常」。
+				const errorRatio = point.requests > 0 ? (point.errors || 0) / point.requests : 0;
+				const errorHeight = hasError
+					? Math.max(Math.round(barHeight * errorRatio), 2)
+					: 0;
+
+				return h("div", {
+					key: point.t + i,
+					title: formatTimeKey(point.t, point.kind, true)
+						+ (point.kind === 'day' ? "（整天）" : " 这一小时")
+						+ "\n请求 " + formatNumber(point.requests) + " 次"
+						+ (hasError ? "\n失败 " + formatNumber(point.errors) + " 次（"
+							+ (errorRatio * 100).toFixed(0) + "%）" : "")
+						+ "\n总计 " + formatNumber(point.totalTokens) + " tokens",
+					style: {
+						flex: "1 1 0",
+						minWidth: "2px",
+						height: barHeight + "px",
+						borderRadius: "2px 2px 0 0",
+						// 兜底色：万一 styles 注入失败（变量未定义），var() 会失效
+						// 导致柱子透明看不见。带兜底值就永远有颜色。
+						background: "var(--wb-chart-bar, #3b82f6)",
+						opacity: 0.9,
+						// 相对定位：红色叠加段贴在柱子顶部
+						position: "relative",
+						overflow: "hidden",
+					},
+				},
+					// 失败段：柱子顶部的一小截，高度与失败占比成正比。
+					// 这样「有失败」仍能一眼看出，但不会被误读成整体故障。
+					errorHeight > 0
+						? h("div", {
+							style: {
+								position: "absolute",
+								top: 0, left: 0, right: 0,
+								height: errorHeight + "px",
+								background: "var(--wb-chart-error, #f25a5a)",
+							},
+						})
+						: null,
+				);
+			})),
+			// 横轴两端的时间标签：左早右晚，明确方向避免误读成倒序
+			h("div", {
+				style: {
+					display: "flex", justifyContent: "space-between",
+					fontSize: "10px", color: "var(--dsw-alias-label-secondary)",
+					marginTop: "4px", opacity: 0.8,
+				},
+			},
+				h("span", null, formatTimeKey(shown[0]?.t, shown[0]?.kind, spansYear(shown)) + "（早）"),
+				shown.length > 1
+					? h("span", null,
+						formatTimeKey(shown[shown.length - 1].t, shown[shown.length - 1].kind, spansYear(shown))
+						+ "（近）")
+					: null,
+			),
+		);
+	}
+
+	/**
+	 * 用量统计卡片。
+	 *
+	 * 设计取舍（参考 ui-ux-pro-max 的 Data-Dense Dashboard 风格）：
+	 *   - 主次分层：4 个核心指标用大号数字，3 个次要指标缩小淡化。
+	 *     平铺 7 个等大卡片会让人抓不到重点。
+	 *   - 数字等宽：表格与指标用 tabular-nums，位数变了也不会跳动。
+	 *   - 紧凑格式：卡片上用 1.23M，完整值放 title，鼠标悬停可看。
+	 *   - 表格横向滚动：窄屏不破版（技能明确要求的 table 处理方式）。
+	 *   - 颜色全部走宿主 token，自动跟随明暗主题。
+	 */
+	function UsageCard({ usage, onRefresh, busy }) {
+		if (!usage) return null;
+		const t = usage.totals || {};
+		const models = usage.byModel || [];
+		const totalCalls = t.requests || 0;
+		const failRate = totalCalls > 0 ? (t.errors || 0) / totalCalls : 0;
+
+		/** 核心指标块：大号数字 + 小标签。 */
+		const kpi = (label, value, opts = {}) => h("div", {
+			style: {
+				// 宽度完全由父级网格决定，自己不设 minWidth——
+				// 设了会在窄面板里把第四块挤到下一行。
+				minWidth: 0,
+				overflow: "hidden",
+				padding: "12px 14px",
+				borderRadius: "8px",
+				background: "var(--dsw-alias-bg-layer-2)",
+				border: "1px solid var(--dsw-alias-border-l1)",
+				// 次要指标整体降透明度，视觉上退到第二层
+				opacity: opts.muted ? 0.72 : 1,
+			},
+		},
+			h("div", {
+				style: {
+					fontSize: "11px",
+					letterSpacing: "0.02em",
+					color: "var(--dsw-alias-label-secondary)",
+					marginBottom: "6px",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+				},
+			}, label),
+			h("div", {
+				title: opts.full ?? String(value),
+				style: Object.assign({}, NUM_STYLE, {
+					fontSize: opts.muted ? "15px" : "19px",
+					fontWeight: 600,
+					lineHeight: 1.15,
+					color: opts.color ?? "var(--dsw-alias-label-primary)",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+				}),
+			}, value),
+		);
+
+		/** 失败率条：一眼看出健康度。 */
+		const failBar = totalCalls === 0 ? null : h("div", {
+			title: `失败 ${formatNumber(t.errors)} / 请求 ${formatNumber(totalCalls)}`,
+			style: {
+				height: "3px", borderRadius: "2px", overflow: "hidden",
+				background: "var(--dsw-alias-border-l1)", marginTop: "6px",
+			},
+		}, h("div", {
+			style: {
+				width: Math.max(failRate * 100, failRate > 0 ? 2 : 0) + "%",
+				height: "100%",
+				background: failRate > 0.1
+					? "var(--dsw-alias-state-error-primary)"
+					: "var(--dsw-alias-state-warn-primary)",
+			},
+		}));
+
+		// 表格列宽：数字列右对齐、等宽，读起来才顺
+		const numCell = (value, color) => h("td", {
+			style: Object.assign({}, TD_STYLE, NUM_STYLE, {
+				textAlign: "right",
+				color: color ?? "var(--dsw-alias-label-primary)",
+			}),
+		}, value);
+
+		return h("div", { style: CARD_STYLE },
+			// ---- 标题行 ----
+			h("div", {
+				style: {
+					display: "flex", alignItems: "center",
+					justifyContent: "space-between", marginBottom: "12px",
+				},
+			},
+				h("div", { style: { display: "flex", alignItems: "baseline", gap: "8px" } },
+					h("span", { style: { fontWeight: 600, fontSize: "14px" } }, "用量统计"),
+					usage.since
+						? h("span", { style: { fontSize: "11px", color: "var(--dsw-alias-label-secondary)" } },
+							// 「数据起点」始终带年份：它可能落在几个月前甚至去年，
+							// 不像横轴那样只覆盖一小段时间。粒度为日时不补 :00。
+							"始于 " + formatTimeKey(usage.since, usage.since.includes("T") ? "hour" : "day", true))
+						: null,
+				),
+				h("button", {
+					style: Object.assign({}, BUTTON_STYLE, {
+						padding: "4px 12px", fontSize: "12px",
+						cursor: busy ? "default" : "pointer",
+					}),
+					disabled: busy,
+					onClick: onRefresh,
+				}, busy ? "刷新中…" : "刷新"),
+			),
+
+			// ---- 核心指标：强制 4 列一行 ----
+			// 用 grid 而不是 flex-wrap：wrap 在窄面板里会把第 4 块挤到下一行，
+			// grid 的 1fr 会按可用宽度均分，永远保持一行。
+			h("div", {
+				className: "wb-kpi-grid-4",
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+					gap: "8px",
+					marginBottom: "8px",
+				},
+			},
+				h("div", { style: { minWidth: 0, overflow: "hidden", padding: "12px 14px", borderRadius: "8px", background: "var(--dsw-alias-bg-layer-2)", border: "1px solid var(--dsw-alias-border-l1)" } },
+					h("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-secondary)", marginBottom: "6px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, "请求总数"),
+					h("div", { style: Object.assign({}, NUM_STYLE, { fontSize: "19px", fontWeight: 600, lineHeight: 1.15, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }) },
+						formatCompact(totalCalls)),
+					failBar,
+				),
+				kpi("总 tokens", formatCompact(t.totalTokens), { full: formatNumber(t.totalTokens) }),
+				// 积分精确到个位、不缩写：它是能对账的数字，
+				// 显示成 8.4K 会让人不知道到底扣了多少。
+				kpi("积分消耗", formatNumber(t.credits), { full: formatNumber(t.credits) + " 积分" }),
+				// 延迟只统计成功请求。没有成功请求时显示 —，
+				// 而不是误导性的 0（或把失败请求的快速返回当成"很快"）。
+				h("div", {
+					style: {
+						minWidth: 0, overflow: "hidden",
+						padding: "12px 14px", borderRadius: "8px",
+						background: "var(--dsw-alias-bg-layer-2)",
+						border: "1px solid var(--dsw-alias-border-l1)",
+					},
+				},
+					h("div", {
+						style: {
+							fontSize: "11px", letterSpacing: "0.02em",
+							color: "var(--dsw-alias-label-secondary)",
+							marginBottom: "6px", whiteSpace: "nowrap",
+							overflow: "hidden", textOverflow: "ellipsis",
+						},
+					}, "平均延迟"),
+					h("div", {
+						title: (t.latencySamples || 0) > 0
+							? Math.round(t.avgLatencyMs) + " 毫秒（基于 " + formatNumber(t.latencySamples) + " 次成功请求）"
+							: "暂无成功请求，无法统计延迟",
+						style: Object.assign({}, NUM_STYLE, {
+							fontSize: "19px", fontWeight: 600, lineHeight: 1.15,
+							whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+							color: (t.avgLatencyMs || 0) > 10000
+								? "var(--dsw-alias-state-warn-primary)"
+								: "var(--dsw-alias-label-primary)",
+						}),
+					// formatMs 对 0/undefined 已返回 —，无需再判样本数
+					}, formatMs(t.avgLatencyMs)),
+				),
+			),
+
+			// ---- 次要指标 ----
+			h("div", {
+				className: "wb-kpi-grid-3",
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+					gap: "8px",
+					marginBottom: "12px",
+				},
+			},
+				kpi("输入 tokens", formatCompact(t.promptTokens), { muted: true, full: formatNumber(t.promptTokens) }),
+				kpi("输出 tokens", formatCompact(t.completionTokens), { muted: true, full: formatNumber(t.completionTokens) }),
+				kpi("吐字速度", t.avgTokensPerSecond ? t.avgTokensPerSecond.toFixed(1) + " t/s" : "—", { muted: true }),
+			),
+
+			// ---- 趋势图 ----
+			h(UsageTrend, { series: usage.series }),
+
+			// ---- 按模型明细 ----
+			models.length === 0
+				? h("p", { style: { margin: "4px 0 0 0", fontSize: "13px", color: "var(--dsw-alias-label-secondary)" } },
+					"还没有调用记录。用这个 provider 跑一次对话后这里就会有数据。")
+				: h("div", { style: { overflowX: "auto", marginTop: "4px" } },
+					h("table", { style: Object.assign({}, TABLE_STYLE, { minWidth: "560px" }) },
+						h("thead", null, h("tr", null,
+							h("th", { style: TH_STYLE }, "模型"),
+							h("th", { style: Object.assign({}, TH_STYLE, { textAlign: "right" }) }, "请求"),
+							h("th", { style: Object.assign({}, TH_STYLE, { textAlign: "right" }) }, "失败"),
+							h("th", { style: Object.assign({}, TH_STYLE, { textAlign: "right" }) }, "输入"),
+							h("th", { style: Object.assign({}, TH_STYLE, { textAlign: "right" }) }, "输出"),
+							h("th", { style: Object.assign({}, TH_STYLE, { textAlign: "right" }) }, "总 tokens"),
+							h("th", { style: Object.assign({}, TH_STYLE, { textAlign: "right" }) }, "积分"),
+						)),
+						h("tbody", null, models.map(m =>
+							h("tr", { key: m.key },
+								h("td", { style: Object.assign({}, TD_STYLE, { whiteSpace: "nowrap" }) }, m.key),
+								numCell(formatNumber(m.requests)),
+								numCell(formatNumber(m.errors), m.errors > 0 ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-label-secondary)"),
+								numCell(formatNumber(m.promptTokens)),
+								numCell(formatNumber(m.completionTokens)),
+								numCell(formatNumber(m.totalTokens)),
+								numCell(formatNumber(m.credits)),
+							)
+						)),
+					),
+				),
+
+			// ---- 存储元信息 ----
+			h("p", {
+				style: {
+					margin: "12px 0 0 0", fontSize: "11px",
+					color: "var(--dsw-alias-label-secondary)",
+					paddingTop: "10px",
+					borderTop: "1px solid var(--dsw-alias-border-l1)",
+				},
+			},
+				formatBytes(usage.fileBytes || 0) + " · " + (usage.buckets || 0) + " 个分桶" +
+				(failRate > 0 ? " · 失败率 " + (failRate * 100).toFixed(1) + "%" : ""),
+			),
+		);
+	}
+
+	/** 导入 auth 文件的对话框：支持粘贴 JSON，或填服务器上的文件/目录路径。 */
+	/**
+	 * 弹窗的 z-index。
+	 *
+	 * DSH 前端最高用到 1100（聊天 / 会话 / 模型选择器）。弹窗若低于它，
+	 * 会被那些层的背景盖住——面板看起来是「透明」的，内容与背景混在一起。
+	 * 所以统一取 2000，留出余量。
+	 */
+	const DIALOG_Z_INDEX = 2000;
+
+	function ImportDialog({ region, onClose, onSubmit, busy, result }) {
+		const [mode, setMode] = useState("file"); // file | paste | path
+		const [content, setContent] = useState("");
+		const [path, setPath] = useState("");
+		const [localError, setLocalError] = useState("");
+		const [fileName, setFileName] = useState("");
+		const [readError, setReadError] = useState("");
+		const [dragging, setDragging] = useState(false);
+		const fileRef = useRef(null);
+
+		/** 读选中的 auth 文件（用户手上是文件，不该逼他手动复制内容）。 */
+		const readFile = (file) => {
+			setReadError("");
+			if (file === undefined || file === null) return;
+			if (file.size > 2 * 1024 * 1024) {
+				setReadError("文件太大（" + Math.round(file.size / 1024) + " KB），可能选错了");
+				return;
+			}
+			const reader = new FileReader();
+			reader.onload = () => {
+				setContent(String(reader.result ?? ""));
+				setFileName(file.name);
+				setMode("paste");
+			};
+			reader.onerror = () => setReadError("读取文件失败，请重试或改用粘贴");
+			reader.readAsText(file);
+		};
+
+		const dropProps = {
+			onDragOver: (e) => { e.preventDefault(); setDragging(true); },
+			onDragLeave: () => setDragging(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setDragging(false);
+				readFile(e.dataTransfer?.files?.[0]);
+			},
+		};
+
+		const submit = () => {
+			setLocalError("");
+			if (mode === "file") {
+				setLocalError("请先选择 auth 文件（也可以直接拖进来）");
+				return;
+			}
+			if (mode === "paste" && content.trim() === "") {
+				setLocalError("请粘贴 auth 文件的 JSON 内容");
+				return;
+			}
+			if (mode === "path" && path.trim() === "") {
+				setLocalError("请填写文件或目录路径");
+				return;
+			}
+			onSubmit(mode === "paste" ? { content } : { path });
+		};
+
+		const tabStyle = (active) => Object.assign({}, BUTTON_STYLE, {
+			borderRadius: "6px 6px 0 0",
+			borderBottom: active ? "2px solid var(--dsw-alias-brand-primary)" : "1px solid var(--dsw-alias-border-l1)",
+			opacity: active ? 1 : 0.6,
+			marginRight: "6px",
+		});
+
+		return h("div", {
+			style: {
+				position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)",
+				display: "flex", alignItems: "center", justifyContent: "center", zIndex: DIALOG_Z_INDEX,
+			},
+		},
+			h("div", {
+				style: {
+					background: "var(--dsw-alias-bg-overlay)",
+					border: "1px solid var(--dsw-alias-border-l1)",
+					borderRadius: "10px", padding: "20px 24px", maxWidth: "620px", width: "92%",
+					maxHeight: "85vh", overflowY: "auto",
+				},
+			},
+				h("h3", { style: { margin: "0 0 6px 0", fontSize: "15px" } }, "导入 auth 文件"),
+				h("p", { style: { fontSize: "12px", opacity: 0.7, margin: "0 0 14px 0" } },
+					"支持网关 auths/*.json 的嵌套格式，也支持手写的扁平格式。"),
+
+				h("div", null,
+					h("button", { style: tabStyle(mode === "file"), onClick: () => setMode("file") }, "选择文件"),
+					h("button", { style: tabStyle(mode === "paste"), onClick: () => setMode("paste") }, "粘贴 JSON"),
+					h("button", { style: tabStyle(mode === "path"), onClick: () => setMode("path") }, "服务器路径"),
+				),
+
+				mode === "file"
+					? h("div", Object.assign({
+						style: {
+							border: "2px dashed " + (dragging
+								? "var(--dsw-alias-brand-primary)"
+								: "var(--dsw-alias-border-l2)"),
+							borderRadius: "10px", padding: "28px 20px", textAlign: "center",
+							background: dragging ? "var(--dsw-alias-bg-layer-2)" : "transparent",
+							transition: "background 150ms, border-color 150ms",
+						},
+					}, dropProps),
+						h("p", { style: { margin: "0 0 12px 0", fontSize: "13px", opacity: 0.8 } },
+							"把 auth 文件拖到这里"),
+						h("button", {
+							style: PRIMARY_BUTTON_STYLE,
+							disabled: busy,
+							onClick: () => fileRef.current?.click(),
+						}, "选择文件"),
+						h("input", {
+							type: "file",
+							accept: ".json,application/json",
+							ref: fileRef,
+							style: { display: "none" },
+							onChange: (e) => readFile(e.target.files?.[0]),
+						}),
+						h("p", { style: { margin: "12px 0 0 0", fontSize: "11px", opacity: 0.6 } },
+							"选好后会切到「粘贴 JSON」显示内容"),
+					)
+					: null,
+
+				mode === "paste" && fileName !== ""
+					? h("p", { style: { fontSize: "12px", opacity: 0.7, margin: "0 0 6px 0" } },
+						"已读取文件：" + fileName)
+					: null,
+
+				mode === "paste"
+					? h("textarea", {
+						style: Object.assign({}, INPUT_STYLE, {
+							width: "100%", minWidth: "0", minHeight: "200px", boxSizing: "border-box",
+							fontFamily: "ui-monospace, Consolas, monospace", fontSize: "12px",
+							lineHeight: 1.5, resize: "vertical", display: "block",
+						}),
+						value: content,
+						onChange: (e) => setContent(e.target.value),
+						spellCheck: false,
+						placeholder: '{\n  "auth": { "accessToken": "...", "refreshToken": "...", "domain": "..." },\n  "account": { "uid": "...", "nickname": "..." }\n}',
+					})
+					: h("div", null,
+						h("input", {
+							style: Object.assign({}, INPUT_STYLE, { width: "100%", boxSizing: "border-box" }),
+							value: path,
+							onChange: (e) => setPath(e.target.value),
+							placeholder: "/path/to/auths  （目录会自动扫描里面的 .json）",
+						}),
+						h("p", { style: { fontSize: "12px", opacity: 0.65, margin: "6px 0 0 0" } },
+							"填目录会把里面所有 .json 逐个尝试导入。"),
+					),
+
+				localError ? h("p", { style: { color: "var(--dsw-alias-state-error-primary)", fontSize: "12px", margin: "10px 0 0 0" } }, localError) : null,
+
+				result
+					? h("div", { style: { marginTop: "12px", fontSize: "12px" } },
+						result.imported && result.imported.length > 0
+							? h("div", { style: { color: "var(--dsw-alias-state-success-primary)" } },
+								"成功导入 " + result.imported.length + " 个：" + result.imported.map(a => a.nickname).join("、"))
+							: null,
+						result.failed && result.failed.length > 0
+							? h("div", { style: { marginTop: "6px", color: "var(--dsw-alias-state-error-primary)" } },
+								"失败 " + result.failed.length + " 个：",
+								h("ul", { style: { margin: "4px 0 0 0", paddingLeft: "18px" } },
+									result.failed.map((f, i) => h("li", { key: i }, f.source + " — " + f.error))
+								))
+							: null,
+					)
+					: null,
+
+				h("div", { style: { display: "flex", gap: "8px", marginTop: "16px" } },
+					h("button", { style: PRIMARY_BUTTON_STYLE, disabled: busy, onClick: submit }, busy ? "导入中…" : "导入"),
+					h("button", { style: BUTTON_STYLE, onClick: onClose }, result ? "关闭" : "取消"),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Trae 凭证导入对话框。
+	 *
+	 * 不做网页登录——Trae 授权页把 token fetch 投递到 127.0.0.1:18080，
+	 * DSH 在 NAS、浏览器在另一台电脑时那个地址指用户自己的电脑，
+	 * 请求被拒且地址栏不会出现带 token 的链接，那条路走不通。
+	 *
+	 * 改为：在 Windows/macOS 上登录 Trae，把 storage.json 内容粘过来。
+	 */
+	function TraeImportDialog({ onClose, onSubmit, busy, result }) {
+		const [mode, setMode] = useState("file"); // file | content | path
+		const [content, setContent] = useState("");
+		const [filePath, setFilePath] = useState("");
+		const [fileName, setFileName] = useState("");
+		const [readError, setReadError] = useState("");
+		/** 表单校验的错误（与 readError「读文件失败」分开，便于分别清除）。 */
+		const [localError, setLocalError] = useState("");
+		const [dragging, setDragging] = useState(false);
+		const fileRef = useRef(null);
+		const done = result?.ok === true;
+
+		/**
+		 * 读用户选中的文件。
+		 *
+		 * 用户手上其实就是一个 storage.json 文件——让他自己打开、全选、
+		 * 复制太别扭。直接选文件（或拖进来）最顺手。
+		 *
+		 * FileReader 是浏览器标准 API，不引第三方库。
+		 */
+		const readFile = (file) => {
+			setReadError("");
+			if (file === undefined || file === null) return;
+			// 大文件多半是选错了（storage.json 通常几十 KB）
+			if (file.size > 2 * 1024 * 1024) {
+				setReadError("文件太大（" + Math.round(file.size / 1024) + " KB），可能选错了");
+				return;
+			}
+			const reader = new FileReader();
+			reader.onload = () => {
+				setContent(String(reader.result ?? ""));
+				setFileName(file.name);
+				setMode("content");
+			};
+			reader.onerror = () => setReadError("读取文件失败，请重试或改用粘贴");
+			reader.readAsText(file);
+		};
+
+		/** 拖拽支持：拖进来直接读。 */
+		const dropProps = {
+			onDragOver: (e) => { e.preventDefault(); setDragging(true); },
+			onDragLeave: () => setDragging(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setDragging(false);
+				readFile(e.dataTransfer?.files?.[0]);
+			},
+		};
+
+		const submit = () => {
+			setLocalError("");
+
+			// 文件模式：还没选文件就点导入是操作失误，明确提示而不是
+			// 落进下面「服务器路径」的分支（那样会提交空路径）。
+			if (mode === "file") {
+				setLocalError("请先选择 storage.json 文件（也可以直接拖进来）");
+				return;
+			}
+
+			if (mode === "content") {
+				const text = content.trim();
+				if (text === "") { setLocalError("请粘贴 storage.json 的内容"); return; }
+				if (!text.startsWith("{")) {
+					setLocalError("内容应以 { 开头（是 storage.json 的 JSON 文本）"); return;
+				}
+				onSubmit({ content: text });
+				return;
+			}
+
+			const path = filePath.trim();
+			if (path === "") { setLocalError("请填写服务器上的文件路径"); return; }
+			onSubmit({ path });
+		};
+
+		/** 两种来源用同一个输入框风格。 */
+		const inputStyle = Object.assign({}, INPUT_STYLE, {
+			width: "100%", minWidth: "0", boxSizing: "border-box",
+			fontFamily: "ui-monospace, Consolas, monospace", fontSize: "12px",
+			lineHeight: 1.5, display: "block",
+		});
+
+		return h("div", {
+			style: {
+				position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)",
+				display: "flex", alignItems: "center", justifyContent: "center", zIndex: DIALOG_Z_INDEX,
+			},
+		},
+			h("div", {
+				style: {
+					background: "var(--dsw-alias-bg-overlay)",
+					border: "1px solid var(--dsw-alias-border-l1)",
+					borderRadius: "10px", padding: "20px 24px", maxWidth: "680px", width: "92%",
+					maxHeight: "85vh", overflowY: "auto",
+				},
+			},
+				h("h3", { style: { margin: "0 0 6px 0", fontSize: "15px" } }, "导入 Trae 凭证"),
+
+				done
+					? h("p", { style: { fontSize: "13px", color: "var(--dsw-alias-state-success-primary)", margin: "0 0 14px 0" } },
+						"已导入账号：" + (result.account?.nickname ?? ""))
+					: h("div", { style: { fontSize: "12px", opacity: 0.78, margin: "0 0 14px 0", lineHeight: 1.7 } },
+						h("p", { style: { margin: "0 0 6px 0" } },
+							"在已登录 Trae 的电脑上找到这个文件，把它的内容复制过来："),
+						h("code", {
+							style: {
+								display: "block", padding: "8px 10px", borderRadius: "6px",
+								background: "var(--dsw-alias-bg-layer-2)", fontSize: "11px",
+								wordBreak: "break-all", marginBottom: "6px",
+							},
+						},
+							"%APPDATA%\\Trae CN\\User\\globalStorage\\storage.json"),
+						h("p", { style: { margin: 0, opacity: 0.8 } },
+							"解密不依赖那台电脑的硬件，所以拷过来就能用。"),
+
+				// 两种输入方式
+				!done
+					? h(TabBar, {
+						tabs: [
+							{ id: "file", label: "选择文件" },
+							{ id: "content", label: "粘贴内容" },
+							{ id: "path", label: "服务器路径" },
+						],
+						active: mode,
+						onChange: setMode,
+					})
+					: null,
+
+				// 选文件 —— 用户手上就是一个文件，这是最顺手的入口
+				!done && mode === "file"
+					? h("div", Object.assign({
+						style: {
+							border: "2px dashed " + (dragging
+								? "var(--dsw-alias-brand-primary)"
+								: "var(--dsw-alias-border-l2)"),
+							borderRadius: "10px",
+							padding: "28px 20px",
+							textAlign: "center",
+							background: dragging ? "var(--dsw-alias-bg-layer-2)" : "transparent",
+							transition: "background 150ms, border-color 150ms",
+						},
+					}, dropProps),
+						h("p", { style: { margin: "0 0 12px 0", fontSize: "13px", opacity: 0.8 } },
+							"把 storage.json 拖到这里"),
+						h("button", {
+							style: PRIMARY_BUTTON_STYLE,
+							disabled: busy,
+							onClick: () => fileRef.current?.click(),
+						}, "选择文件"),
+						h("input", {
+							type: "file",
+							accept: ".json,application/json",
+							ref: fileRef,
+							style: { display: "none" },
+							onChange: (e) => readFile(e.target.files?.[0]),
+						}),
+						h("p", { style: { margin: "12px 0 0 0", fontSize: "11px", opacity: 0.6 } },
+							"选好后会切到「粘贴内容」显示，确认无误再点导入"),
+					)
+					: null,
+
+				!done && mode === "content" && fileName !== ""
+					? h("p", { style: { fontSize: "12px", opacity: 0.7, margin: "0 0 6px 0" } },
+						"已读取文件：" + fileName)
+					: null,
+
+				!done && mode === "content"
+					? h("textarea", {
+						style: Object.assign({}, inputStyle, { minHeight: "140px", resize: "vertical" }),
+						value: content,
+						onChange: (e) => setContent(e.target.value),
+						spellCheck: false,
+						placeholder: '{"iCubeAuthInfo://icube.cloudide":"...","telemetry.machineId":"..."}',
+					})
+					: null,
+
+				!done && mode === "path"
+					? h("input", {
+						style: inputStyle,
+						value: filePath,
+						onChange: (e) => setFilePath(e.target.value),
+						spellCheck: false,
+						placeholder: "/root/trae-storage.json",
+					})
+					: null,
+
+				(localError || readError)
+					? h("p", { style: { color: "var(--dsw-alias-state-error-primary)", fontSize: "12px", margin: "10px 0 0 0" } },
+						localError || readError)
+					: null,
+
+				result && result.ok === false
+					? h("p", { style: { color: "var(--dsw-alias-state-error-primary)", fontSize: "12px", margin: "10px 0 0 0" } },
+						"导入失败：" + (result.error ?? "未知错误"))
+					: null,
+
+				done
+					? h("div", { style: { fontSize: "12px", opacity: 0.7, marginTop: "12px" } },
+						"区域：" + (result.region ?? "cn")
+						+ (result.hasRefreshToken ? " · 含刷新令牌（可自动续期）" : " · 无刷新令牌（到期需重新导入）"))
+					: null,
+
+				h("div", { style: { display: "flex", gap: "8px", marginTop: "16px" } },
+					!done
+						? h("button", {
+							style: PRIMARY_BUTTON_STYLE,
+							// 文件模式下没选文件就不该可点
+							disabled: busy || mode === "file",
+							onClick: submit,
+						}, busy ? "导入中…" : "导入")
+						: null,
+					h("button", { style: BUTTON_STYLE, onClick: onClose }, done ? "关闭" : "取消"),
+				),
+			),
+			),
+		);
+	}
+
+	function LoginDialog({ region, authUrl, onCancel, status }) {
+		return h("div", {
+			style: {
+				position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)",
+				display: "flex", alignItems: "center", justifyContent: "center", zIndex: DIALOG_Z_INDEX,
+			},
+		},
+			h("div", {
+				style: {
+					background: "var(--dsw-alias-bg-overlay)",
+					border: "1px solid var(--dsw-alias-border-l1)",
+					borderRadius: "10px", padding: "20px 24px", maxWidth: "520px", width: "90%",
+				},
+			},
+				h("h3", { style: { margin: "0 0 10px 0", fontSize: "15px" } }, "登录 WorkBuddy 账号"),
+				h("p", { style: { fontSize: "13px", opacity: 0.8, margin: "0 0 12px 0" } },
+					"在浏览器中打开下面的链接完成登录，完成后本页面会自动加入账号。"),
+				h("div", {
+					style: {
+						padding: "10px", borderRadius: "6px", wordBreak: "break-all",
+						background: "var(--dsw-alias-bg-layer-2)",
+						fontFamily: "ui-monospace, Consolas, monospace", fontSize: "12px",
+						border: "1px solid var(--dsw-alias-border-l1)", marginBottom: "12px",
+					},
+				}, authUrl),
+				h("div", { style: { display: "flex", alignItems: "center", gap: "12px" } },
+					h("button", {
+						style: PRIMARY_BUTTON_STYLE,
+						onClick: () => window.open(authUrl, "_blank", "noopener,noreferrer"),
+					}, "打开登录页"),
+					h("span", { style: { fontSize: "12px", opacity: 0.75 } }, status),
+					h("button", { style: Object.assign({}, BUTTON_STYLE, { marginLeft: "auto" }), onClick: onCancel }, "取消"),
+				),
+			),
+		);
+	}
+
+	// ---------------------------------------------------------------------
+	// 数据获取 hook：唯一的数据入口，集中处理 loading/error/刷新
+	// ---------------------------------------------------------------------
+
+	/**
+	 * 拉取某个「上游分组」的状态。
+	 *
+	 * 分组是为了让 WorkBuddy 与 Trae 各自成为一个独立菜单：
+	 * 每个菜单只显示自己的区域与账号，不互相干扰。
+	 *
+	 * @param {string[]} regions 该菜单关心的区域，如 ['cn'] 或 ['trae']
+	 */
+	function usePoolState(regions) {
+		const [state, setState] = useState({ loading: true, regions: {}, usage: {}, tasks: [], error: null });
+		// 用字符串做依赖：数组每次渲染都是新引用，会让 useCallback 失效。
+		const regionKey = regions.join(',');
+
+		const load = useCallback(async () => {
+			try {
+				const wanted = regionKey.split(',');
+				// 三个接口并发拉：状态/用量/任务互不依赖，串行会白等三轮。
+				// 任务状态是按区域查的，所以有几个区域就发几次。
+				const [stateRes, usageRes, ...taskResList] = await Promise.all([
+					fetch("/account-pool/state", { cache: "no-store" }),
+					fetch("/account-pool/usage", { cache: "no-store" }),
+					...wanted.map(r => fetch("/account-pool/tasks/status?region=" + encodeURIComponent(r), { cache: "no-store" })),
+				]);
+				const data = await stateRes.json();
+				if (!data.ok) throw new Error(data.error || "读取失败");
+
+				// 只保留本分组关心的区域：接口返回全部区域，这里做过滤，
+				// 否则 Trae 菜单会漏出 WorkBuddy 的区域卡片。
+				const regions_ = {};
+				for (const r of wanted) {
+					if (data.regions?.[r] !== undefined) regions_[r] = data.regions[r];
+				}
+
+				let usage = {};
+				try {
+					const usageData = await usageRes.json();
+					if (usageData.ok) {
+						usage = {};
+						for (const r of wanted) {
+							if (usageData.regions?.[r] !== undefined) usage[r] = usageData.regions[r];
+						}
+					}
+				} catch {
+					// 用量拉不到不影响主体展示
+				}
+
+				let tasks = [];
+				for (const res of taskResList) {
+					try {
+						const tasksData = await res.json();
+						if (tasksData.ok) tasks = tasks.concat(tasksData.accounts || []);
+					} catch {
+						// 任务状态拉不到（无账号/网络不通）不影响账号视图
+					}
+				}
+
+				setState({ loading: false, regions: regions_, usage, tasks, error: null });
+			} catch (error) {
+				setState({ loading: false, regions: {}, usage: {}, tasks: [], error: error.message });
+			}
+		}, [regionKey]);
+
+		useEffect(() => { void load(); }, [load]);
+
+		// 定时刷新：不加的话冷却倒计时会冻结在「打开页面那一刻」的值，
+		// 用户看到数字一直不动，会以为坏了。
+		// 10 秒一次足够看出倒计时在走；只在页面可见时拉，避免后台白耗。
+		useEffect(() => {
+			const timer = setInterval(() => {
+				if (typeof document !== "undefined" && document.hidden) return;
+				void load();
+			}, 10_000);
+			return () => clearInterval(timer);
+		}, [load]);
+
+		return { state, reload: load };
+	}
+
+	// ---------------------------------------------------------------------
+	// 主组件
+	// ---------------------------------------------------------------------
+
+	/**
+	 * 每个上游菜单的配置。
+	 *
+	 * 两个菜单共用同一份组件代码——只在「说明文案」「区域列表」
+	 * 「每日任务视图」上不同。这样风格天然一致，改一处两边都变。
+	 */
+	const PROFILES = {
+		workbuddy: {
+			id: "account-pool",
+			label: () => "WorkBuddy",
+			order: 35,
+			// 本菜单只管 cn；global 未启用时接口不会返回它，会被过滤掉
+			regions: ["cn", "global"],
+			intro: "把多个 WorkBuddy 账号接入 DSH。请求会在账号之间自动切换："
+				+ "某个账号限流或积分耗尽时，自动换下一个继续，无需手动干预。",
+			tasksView: "full",
+		},
+		trae: {
+			id: "trae-pool",
+			label: () => "Trae",
+			order: 36,
+			regions: ["trae"],
+			intro: "把 Trae（TRAE SOLO）账号接入 DSH。与 WorkBuddy 共用选号、"
+				+ "自动换号与用量统计。凭证来自 Trae 桌面端的 storage.json——"
+				+ "在已登录 Trae 的电脑上复制那个文件的内容，粘到「导入凭证」里即可。",
+			tasksView: "simple",
+		},
+	};
+
+	function PoolSection({ profile }) {
+		const { state, reload } = usePoolState(profile.regions);
+		const [busy, setBusy] = useState(false);
+		const [notices, setNotices] = useState({});
+		const [login, setLogin] = useState(null); // {region, authUrl, status}
+		const [importing, setImporting] = useState(null); // {region, result}
+		// Trae 登录：{loginUrl, machineId, deviceId, result}
+		const [traeImport, setTraeImport] = useState(null); // {result}
+		const [tab, setTab] = useState("accounts"); // accounts | tasks
+		// 每秒推进一次，让倒计时实时走动（数据本身 10 秒才刷一次）
+		const [, setTick] = useState(0);
+		useEffect(() => {
+			const timer = setInterval(() => setTick(t => t + 1), 1000);
+			return () => clearInterval(timer);
+		}, []);
+		// 上次每日任务的执行结果：签到没有只读接口，靠它显示完成情况。
+		const [lastRun, setLastRun] = useState(null);
+		const pollTimer = useRef(null);
+
+		/** 给某个区域设一条提示信息。 */
+		const setNotice = useCallback((region, kind, text) => {
+			setNotices(prev => Object.assign({}, prev, { [region]: { kind, text } }));
+		}, []);
+
+		/** 统一包装一次 POST 调用的 busy 与错误处理。 */
+		const post = useCallback(async (path, body, region) => {
+			setBusy(true);
+			try {
+				const res = await fetch(path, {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify(body),
+				});
+				const data = await res.json();
+				if (!data.ok) throw new Error(data.error || "操作失败");
+				return data;
+			} catch (error) {
+				if (region) setNotice(region, "error", error.message);
+				return null;
+			} finally {
+				setBusy(false);
+			}
+		}, [setNotice]);
+
+		const onRefresh = useCallback(async (region) => {
+			const data = await post("/account-pool/refresh", { region }, region);
+			if (data) setNotice(region, "ok", "已刷新，共 " + data.models + " 个模型");
+			await reload();
+		}, [post, reload, setNotice]);
+
+		/** 打开导入对话框。 */
+		const onImport = useCallback((region) => {
+			setImporting({ region, result: null });
+		}, []);
+
+		/** 提交导入：content（粘贴）或 path（服务器路径）。 */
+		const onImportSubmit = useCallback(async (payload) => {
+			const region = importing?.region ?? "cn";
+			setBusy(true);
+			try {
+				const res = await fetch("/account-pool/login/import", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ region, ...payload }),
+				});
+				const data = await res.json();
+				if (!data.ok) throw new Error(data.error || "导入失败");
+				setImporting({ region, result: data });
+				if (data.imported.length > 0) {
+					setNotice(region, "ok", "已导入 " + data.imported.length + " 个账号");
+					await reload();
+				}
+			} catch (error) {
+				setImporting({ region, result: { imported: [], failed: [{ source: "导入", error: error.message }] } });
+			} finally {
+				setBusy(false);
+			}
+		}, [importing, reload, setNotice]);
+
+		/** 打开 Trae 凭证导入对话框。 */
+		const onTraeLogin = useCallback(() => {
+			setTraeImport({ result: null });
+		}, []);
+
+		/** 提交导入：粘贴内容或给服务器路径。 */
+		const onTraeImportSubmit = useCallback(async (payload) => {
+			setBusy(true);
+			try {
+				const res = await fetch("/account-pool/trae/import", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify(payload),
+				});
+				const data = await res.json();
+				if (data.ok) {
+					// 成功就直接关：账号出现在列表里、区域提示条有确认信息，
+					// 对话框继续开着反而让人以为还有下一步没做完。
+					setTraeImport(null);
+					setNotice("trae", "ok", "已导入账号：" + (data.account?.nickname ?? "")
+						+ "（区域 " + (data.region ?? "cn") + "）");
+					await reload();
+				} else {
+					// 失败留在对话框里，用户能看到原因并改
+					setTraeImport({ result: data });
+				}
+			} catch (error) {
+				setTraeImport({ result: { ok: false, error: error.message } });
+			} finally {
+				setBusy(false);
+			}
+		}, [reload, setNotice]);
+
+		const onRefreshUsage = useCallback(async () => {
+			const data = await post("/account-pool/usage", {});
+			if (data !== null) {
+				const first = Object.keys(data.regions || {})[0] || "cn";
+				setNotice(first, "ok", "已刷新用量");
+			}
+			await reload();
+		}, [post, reload, setNotice]);
+
+		const onRefreshCredits = useCallback(async (region) => {
+			const data = await post("/account-pool/credits", { region }, region);
+			if (data) setNotice(region, "ok", "已刷新积分");
+			await reload();
+		}, [post, reload, setNotice]);
+
+		const onRevive = useCallback(async (region, accountId) => {
+			const data = await post("/account-pool/revive", { region, accountId }, region);
+			if (data) setNotice(region, "ok", "已解冻该账号");
+			await reload();
+		}, [post, reload, setNotice]);
+
+		const onRemove = useCallback(async (region, accountId) => {
+			if (!window.confirm("确定移除这个账号？凭证会从本机删除。")) return;
+			const data = await post("/account-pool/remove", { region, accountId }, region);
+			if (data) setNotice(region, "ok", "已移除账号");
+			await reload();
+		}, [post, reload, setNotice]);
+
+
+		/** 取消登录：停轮询、关弹窗。 */
+		const cancelLogin = useCallback(() => {
+			if (pollTimer.current) { clearInterval(pollTimer.current); pollTimer.current = null; }
+			setLogin(null);
+		}, []);
+
+		/** 添加账号：取授权链接 → 开始轮询。 */
+		const onAddAccount = useCallback(async (region) => {
+			setBusy(true);
+			try {
+				const res = await fetch("/account-pool/login/start", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ region }),
+				});
+				const data = await res.json();
+				if (!data.ok) throw new Error(data.error || "申请授权失败");
+				setLogin({ region: data.region, authUrl: data.authUrl, status: "等待浏览器完成登录…" });
+
+				const startedAt = Date.now();
+				if (pollTimer.current) clearInterval(pollTimer.current);
+				pollTimer.current = setInterval(async () => {
+					if (Date.now() - startedAt > POLL_TIMEOUT_MS) {
+						cancelLogin();
+						setNotice(region, "error", "登录超时，请重新添加");
+						return;
+					}
+					try {
+						const pollRes = await fetch(
+							"/account-pool/login/poll?region=" + encodeURIComponent(data.region)
+							+ "&state=" + encodeURIComponent(data.state),
+							{ cache: "no-store" },
+						);
+						const pollData = await pollRes.json();
+						if (!pollData.ok) throw new Error(pollData.error || "轮询失败");
+						if (pollData.pending) return;
+						cancelLogin();
+						setNotice(region, "ok", "已添加账号：" + (pollData.account.nickname || pollData.account.id.slice(0, 8)));
+						await reload();
+					} catch (error) {
+						cancelLogin();
+						setNotice(region, "error", error.message);
+					}
+				}, POLL_INTERVAL_MS);
+			} catch (error) {
+				setNotice(region, "error", error.message);
+			} finally {
+				setBusy(false);
+			}
+		}, [cancelLogin, reload, setNotice]);
+
+		// 组件卸载时停掉轮询，避免定时器泄漏。
+		useEffect(() => () => {
+			if (pollTimer.current) clearInterval(pollTimer.current);
+		}, []);
+
+		/**
+		 * 本菜单实际渲染的区域。
+		 *
+		 * usePoolState 已经按 profile 过滤过，这里**再挡一道**：
+		 * 接口返回全部区域，任何一处过滤失效都会让 Trae 菜单漏出
+		 * WorkBuddy 的账号卡（反之亦然）。多这一层成本极低，
+		 * 却能防止「串区」这类静默错误。
+		 */
+		const regions = Object.keys(state.regions || {}).filter(r => profile.regions.includes(r));
+
+		return h("div", { style: { maxWidth: "900px" } },
+			h("p", { style: { marginTop: 0, fontSize: "13px", opacity: 0.75 } }, profile.intro),
+
+			state.error
+				? h("div", { style: Object.assign({}, CARD_STYLE, { color: "var(--dsw-alias-state-error-primary)" }) },
+					"读取状态失败：" + state.error)
+				: null,
+
+			h(TabBar, {
+				tabs: [
+					{ id: "accounts", label: "账号" },
+					{ id: "tasks", label: "每日任务" },
+				],
+				active: tab,
+				onChange: setTab,
+			}),
+
+			state.loading
+				? h("p", { style: { opacity: 0.6, fontSize: "13px" } }, "加载中…")
+				: null,
+
+			// ---- 每日任务视图 ----
+			// Trae 的任务体系不同（只有签到 + 积分），用另一个视图，
+			// 避免显示它根本没有的「猫猫旅行 / 连登兑换 / 抽奖」。
+			!state.loading && tab === "tasks" && regions.length > 0 && profile.tasksView === "simple"
+				? h(TraeTasksView, {
+					region: regions[0],
+					data: { accounts: state.tasks || [] },
+					lastRun,
+					busy,
+					setBusy,
+					setNotice,
+					notice: notices[regions[0]],
+					reload,
+					onRunDone: setLastRun,
+				})
+				: null,
+
+			!state.loading && tab === "tasks" && regions.length > 0 && profile.tasksView === "full"
+				? h(DailyTasksView, {
+					region: regions[0],
+					data: { accounts: state.tasks || [] },
+					lastRun,
+					busy,
+					setBusy,
+					setNotice,
+					notice: notices[regions[0]],
+					reload,
+					onRunDone: setLastRun,
+				})
+				: null,
+
+			// ---- 账号视图 ----
+			!state.loading && tab === "accounts"
+				? regions.map(region => h(RegionPanel, {
+					key: region,
+					region,
+					data: state.regions[region],
+					busy,
+					notice: notices[region],
+					onRefresh,
+					onRefreshCredits,
+					onAddAccount,
+					onImport,
+					onTraeLogin,
+					onRevive,
+					onRemove,
+				}))
+				: null,
+
+			tab === "accounts" && regions.length > 0 && !state.loading
+				? h(UsageCard, {
+					usage: state.usage[regions[0]],
+					busy,
+					onRefresh: onRefreshUsage,
+				})
+				: null,
+
+			traeImport
+				? h(TraeImportDialog, {
+					busy,
+					result: traeImport.result,
+					onClose: () => setTraeImport(null),
+					onSubmit: onTraeImportSubmit,
+				})
+				: null,
+
+			importing
+				? h(ImportDialog, {
+					region: importing.region,
+					busy,
+					result: importing.result,
+					onClose: () => setImporting(null),
+					onSubmit: onImportSubmit,
+				})
+				: null,
+
+			login
+				? h(LoginDialog, {
+					region: login.region,
+					authUrl: login.authUrl,
+					status: login.status,
+					onCancel: cancelLogin,
+				})
+				: null,
+		);
+	}
+
+	/**
+	 * 响应式规则用真正的 CSS 媒体查询。
+	 *
+	 * 内联样式写不了 @media，而 KPI 网格在窄面板里需要降级列数
+	 * （4 列挤不下时改 2 列）。styles.insert 是 Client 提供的样式表
+	 * 注入能力，随插件运行一起清理，不留残留。
+	 */
+	const RESPONSIVE_CSS = [
+		// 图表填充色。
+		//
+		// 不能用 --dsw-alias-brand-primary：它是「反色块上的前景色」，
+		// 浅色模式是 #f9fafb（近白）、深色模式是 #0f1115（近黑）。
+		// 拿它当柱身，浅色下白底看不见、深色下黑红搭配难看（实测踩过）。
+		//
+		// 改用固定的中间调蓝：两种模式下都与背景有足够对比，
+		// 也是设计数据库推荐的图表主色（Blue data）。
+		":root {",
+		"  --wb-chart-bar: #3b82f6;",   /* blue-500 */
+		"  --wb-chart-error: #f25a5a;", /* red-400，比 red-600 柔和 */
+		"}",
+		// 深色标记是 body[data-ds-dark-theme]——由主题 presenter 设置，
+		// 与主题 id 无关（见 dsh-client-ui-theme 的 ThemeDefinition 注释）。
+		// 用属性选择器猜 [data-theme='dark'] 是不生效的（实测踩过）。
+		"body[data-ds-dark-theme] {",
+		"  --wb-chart-bar: #60a5fa;",   /* blue-400，深色下提亮 */
+		"  --wb-chart-error: #f87171;", /* 深色下用更亮的红，避免暗沉 */
+		"}",
+		// 窄屏：4 列降为 2 列，3 列降为 2 列
+		"@media (max-width: 560px) {",
+		"  .wb-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }",
+		"  .wb-kpi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }",
+		"}",
+		// 极窄：全部单列
+		"@media (max-width: 380px) {",
+		"  .wb-kpi-grid-4, .wb-kpi-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }",
+		"}",
+	].join("\n");
+
+	function apply(ctx) {
+		// styles 是 Client 内置注入器；拿不到就跳过（不影响功能，只是少了响应式）
+		const styleInjector = typeof styles !== "undefined" ? styles : undefined;
+		if (styleInjector !== undefined) {
+			ctx.effect(() => styleInjector.insert(RESPONSIVE_CSS));
+		}
+
+		// 两个独立菜单：WorkBuddy 与 Trae 各占一个设置分区。
+		// 它们共用 PoolSection 组件，只传不同的 profile——风格天然一致，
+		// 也不必维护两份几乎相同的界面代码。
+		for (const profile of Object.values(PROFILES)) {
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: profile.id,
+				order: profile.order,
+				label: profile.label,
+			}, () => h(PoolSection, { profile })));
+		}
+	}
+
+	exports.name = name;
+	exports.inject = inject;
+	exports.apply = apply;
+	return module.exports;
+}
+});