dsh-codearts 1.1.4 → 1.2.1

package/lib/client/index.js

@@ -33,70 +33,70 @@ if (typeof document !== "undefined" && document.querySelector("style[data-plugin
 	document.head.appendChild(tag);
 }
 var CodeArtsPluginCard_module_css_default = {
-	"card": "xoziZG_card",
+	"modelChart": "xoziZG_modelChart",
+	"accountRowActions": "xoziZG_accountRowActions",
+	"field": "xoziZG_field",
 	"statusLine": "xoziZG_statusLine",
+	"meta": "xoziZG_meta",
+	"manualForm": "xoziZG_manualForm",
+	"usageBar": "xoziZG_usageBar",
+	"check": "xoziZG_check",
 	"tabs": "xoziZG_tabs",
+	"modelTrack": "xoziZG_modelTrack",
+	"modelFill": "xoziZG_modelFill",
+	"balance": "xoziZG_balance",
+	"creditLink": "xoziZG_creditLink",
 	"actions": "xoziZG_actions",
-	"choiceRow": "xoziZG_choiceRow",
-	"modelShare": "xoziZG_modelShare",
-	"accountRowActions": "xoziZG_accountRowActions",
+	"accountName": "xoziZG_accountName",
+	"area": "xoziZG_area",
 	"sectionHead": "xoziZG_sectionHead",
-	"creditFooter": "xoziZG_creditFooter",
-	"danger": "xoziZG_danger",
-	"modelRequests": "xoziZG_modelRequests",
+	"accountHint": "xoziZG_accountHint",
+	"expiryRow": "xoziZG_expiryRow",
+	"bar": "xoziZG_bar",
+	"accountCard": "xoziZG_accountCard",
+	"accountRow": "xoziZG_accountRow",
+	"balanceMeta": "xoziZG_balanceMeta",
+	"sectionLabel": "xoziZG_sectionLabel",
+	"barFill": "xoziZG_barFill",
+	"link": "xoziZG_link",
 	"manual": "xoziZG_manual",
+	"accountNameRow": "xoziZG_accountNameRow",
 	"fieldLabel": "xoziZG_fieldLabel",
-	"count": "xoziZG_count",
-	"modelName": "xoziZG_modelName",
+	"creditFooter": "xoziZG_creditFooter",
+	"creditBlock": "xoziZG_creditBlock",
+	"error": "xoziZG_error",
+	"creditRow": "xoziZG_creditRow",
+	"modelRow": "xoziZG_modelRow",
+	"updated": "xoziZG_updated",
+	"creditHint": "xoziZG_creditHint",
+	"balanceRow": "xoziZG_balanceRow",
 	"expiryLabel": "xoziZG_expiryLabel",
-	"name": "xoziZG_name",
-	"barFill": "xoziZG_barFill",
-	"balanceUnit": "xoziZG_balanceUnit",
-	"section": "xoziZG_section",
-	"usageBar": "xoziZG_usageBar",
-	"accountHint": "xoziZG_accountHint",
-	"modelTrack": "xoziZG_modelTrack",
+	"count": "xoziZG_count",
 	"accountInfo": "xoziZG_accountInfo",
-	"balanceRow": "xoziZG_balanceRow",
-	"modelTokens": "xoziZG_modelTokens",
-	"accountNameRow": "xoziZG_accountNameRow",
+	"balanceUnit": "xoziZG_balanceUnit",
+	"danger": "xoziZG_danger",
+	"choiceRow": "xoziZG_choiceRow",
+	"body": "xoziZG_body",
 	"claimAllRow": "xoziZG_claimAllRow",
-	"modelRow": "xoziZG_modelRow",
-	"manualSummary": "xoziZG_manualSummary",
-	"accountName": "xoziZG_accountName",
-	"avatar": "xoziZG_avatar",
-	"choices": "xoziZG_choices",
-	"creditHint": "xoziZG_creditHint",
-	"creditRow": "xoziZG_creditRow",
-	"field": "xoziZG_field",
 	"usageFill": "xoziZG_usageFill",
-	"updated": "xoziZG_updated",
-	"expiryRow": "xoziZG_expiryRow",
-	"accountRow": "xoziZG_accountRow",
-	"error": "xoziZG_error",
-	"bar": "xoziZG_bar",
 	"header": "xoziZG_header",
 	"tabPanel": "xoziZG_tabPanel",
-	"meta": "xoziZG_meta",
 	"desc": "xoziZG_desc",
-	"balance": "xoziZG_balance",
-	"modelFill": "xoziZG_modelFill",
-	"creditRows": "xoziZG_creditRows",
-	"modelChart": "xoziZG_modelChart",
-	"headText": "xoziZG_headText",
-	"accountToolbar": "xoziZG_accountToolbar",
-	"creditBlock": "xoziZG_creditBlock",
-	"sectionLabel": "xoziZG_sectionLabel",
-	"manualForm": "xoziZG_manualForm",
-	"area": "xoziZG_area",
-	"balanceMeta": "xoziZG_balanceMeta",
-	"accountCard": "xoziZG_accountCard",
-	"check": "xoziZG_check",
-	"creditLink": "xoziZG_creditLink",
-	"link": "xoziZG_link",
+	"card": "xoziZG_card",
 	"accountEntry": "xoziZG_accountEntry",
-	"body": "xoziZG_body",
-	"hint": "xoziZG_hint"
+	"hint": "xoziZG_hint",
+	"accountToolbar": "xoziZG_accountToolbar",
+	"headText": "xoziZG_headText",
+	"section": "xoziZG_section",
+	"modelName": "xoziZG_modelName",
+	"name": "xoziZG_name",
+	"creditRows": "xoziZG_creditRows",
+	"modelShare": "xoziZG_modelShare",
+	"modelRequests": "xoziZG_modelRequests",
+	"choices": "xoziZG_choices",
+	"manualSummary": "xoziZG_manualSummary",
+	"avatar": "xoziZG_avatar",
+	"modelTokens": "xoziZG_modelTokens"
 };
 //#endregion
 //#region src/client/CodeArtsPluginCard.tsx
@@ -142,6 +142,11 @@ function claimMessagesOf(data, accountIds, t) {
 	for (const id of accountIds) out[id] = claimText(data, t);
 	return out;
 }
+/** 开关的兜底值：后端没这条路由（老版本）时按「都显示」渲染，与原有行为一致。 */
+const DOCK_DEFAULT = {
+	credits: true,
+	queue: true
+};
 /** 一个 Tab 面板；未选中的用 hidden 留在 DOM 里，草稿和滚动位置都别丢。 */
 function TabPanel({ id, labelledBy, active, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -166,7 +171,7 @@ function claimText(data, t) {
 	if (data?.state === "unavailable") return t("claimUnavailable");
 	return t("claimFailed", { message: typeof data?.message === "string" && data.message !== "" ? data.message : "request failed" });
 }
-function formatClock(ts) {
+function formatClock$1(ts) {
 	if (ts === void 0 || !Number.isFinite(ts)) return "";
 	try {
 		return new Date(ts).toLocaleTimeString([], {
@@ -204,7 +209,7 @@ function CreditBlock({ credits, error, t, onClaim, claiming, claimResult, justCl
 		used: formatCredits(c.total.used),
 		total: formatCredits(c.total.total)
 	});
-	const updated = formatClock(c?.fetchedAt);
+	const updated = formatClock$1(c?.fetchedAt);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: CodeArtsPluginCard_module_css_default.creditBlock,
 		children: [
@@ -552,6 +557,56 @@ function CodeArtsPluginCard({ t }) {
 	const [manualOpen, setManualOpen] = (0, react.useState)(false);
 	const [tab, setTab] = (0, react.useState)("accounts");
 	const tabIdBase = (0, react.useId)();
+	/** 对话底部那一行的两个显隐开关（后端 = 插件 settings 里的两个布尔）。 */
+	const [dock, setDock] = (0, react.useState)(DOCK_DEFAULT);
+	const [dockWritable, setDockWritable] = (0, react.useState)(false);
+	const [dockSaving, setDockSaving] = (0, react.useState)(false);
+	const [dockError, setDockError] = (0, react.useState)(null);
+	async function refreshDock() {
+		try {
+			const res = await fetch("/api/codearts/dock", { headers: { Accept: "application/json" } });
+			if (!res.ok) return;
+			const data = await res.json();
+			if (data.dock !== void 0) setDock(data.dock);
+			setDockWritable(data.writable === true);
+		} catch {}
+	}
+	/**
+	* 改一个开关：先按新值渲染，写失败再退回去。
+	*
+	* 这里不像模型勾选那样攒草稿再点保存 —— 只有两个布尔，攒草稿反而让用户猜
+	* 「我刚才那一下到底生效没有」。
+	*/
+	async function toggleDock(key, on) {
+		const previous = dock;
+		setDock({
+			...dock,
+			[key]: on
+		});
+		setDockSaving(true);
+		setDockError(null);
+		try {
+			const res = await fetch("/api/codearts/dock", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					Accept: "application/json"
+				},
+				body: JSON.stringify({ [key]: on })
+			});
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({}));
+				throw new Error(typeof data.error === "string" ? data.error : `HTTP ${res.status}`);
+			}
+			const data = await res.json();
+			if (data.dock !== void 0) setDock(data.dock);
+		} catch (error) {
+			setDock(previous);
+			setDockError(error instanceof Error ? error.message : String(error));
+		} finally {
+			setDockSaving(false);
+		}
+	}
 	/**
 	* 领每日签到积分。给 id 就只领那个号，不给就逐个号都领一遍。
 	*
@@ -620,6 +675,9 @@ function CodeArtsPluginCard({ t }) {
 	(0, react.useEffect)(() => {
 		refreshSelection();
 	}, []);
+	(0, react.useEffect)(() => {
+		refreshDock();
+	}, []);
 	(0, react.useEffect)(() => {
 		if (status?.status === "signed-in") refreshSelection();
 	}, [status?.status]);
@@ -838,12 +896,19 @@ function CodeArtsPluginCard({ t }) {
 			label: t("tabUsage"),
 			id: tabId("usage"),
 			panelId: panelId("usage")
+		},
+		display: {
+			value: "display",
+			label: t("tabDisplay"),
+			id: tabId("display"),
+			panelId: panelId("display")
 		}
 	};
 	const tabs = [
 		tabItems.accounts,
 		tabItems.models,
-		...usageAvailable ? [tabItems.usage] : []
+		...usageAvailable ? [tabItems.usage] : [],
+		tabItems.display
 	];
 	const activeTab = tabs.some((item) => item.value === tab) ? tab : "accounts";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1095,6 +1160,10 @@ function CodeArtsPluginCard({ t }) {
 											choice.ratio !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
 												tone: "quiet",
 												children: choice.ratio
+											}),
+											choice.supportsImages === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+												tone: "quiet",
+												children: t("modelImages")
 											})
 										]
 									}, choice.id))
@@ -1138,6 +1207,57 @@ function CodeArtsPluginCard({ t }) {
 							accounts,
 							t
 						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabPanel, {
+						id: panelId("display"),
+						labelledBy: tabId("display"),
+						active: activeTab === "display",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: CodeArtsPluginCard_module_css_default.section,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: CodeArtsPluginCard_module_css_default.sectionHead,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: CodeArtsPluginCard_module_css_default.sectionLabel,
+										children: t("displayTitle")
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: CodeArtsPluginCard_module_css_default.hint,
+									children: t("displayHint")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: CodeArtsPluginCard_module_css_default.choices,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: CodeArtsPluginCard_module_css_default.choiceRow,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Checkbox, {
+											className: CodeArtsPluginCard_module_css_default.check,
+											checked: dock.credits,
+											disabled: !dockWritable || dockSaving,
+											onChange: (on) => void toggleDock("credits", on),
+											label: t("displayCreditsToggle")
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: CodeArtsPluginCard_module_css_default.choiceRow,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Checkbox, {
+											className: CodeArtsPluginCard_module_css_default.check,
+											checked: dock.queue,
+											disabled: !dockWritable || dockSaving,
+											onChange: (on) => void toggleDock("queue", on),
+											label: t("displayQueueToggle")
+										})
+									})]
+								}),
+								!dockWritable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: CodeArtsPluginCard_module_css_default.hint,
+									children: t("displayNotWritable")
+								}),
+								dockError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: CodeArtsPluginCard_module_css_default.error,
+									children: t("displayFailed", { message: dockError })
+								})
+							]
+						})
 					})
 				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: CodeArtsPluginCard_module_css_default.section,
@@ -1195,17 +1315,102 @@ function CodeArtsPluginCard({ t }) {
 	});
 }
 //#endregion
+//#region src/client/dock-line.ts
+/** 段分隔符 —— 与邻居插件一致，改这里等于改整行的样子。 */
+const DOCK_SEGMENT_SEPARATOR = " · ";
+function buildDockLine(parts, t) {
+	const rest = [];
+	rest.push(t("dockProvider", { provider: parts.provider }));
+	rest.push(parts.model === void 0 ? t("dockNoModel") : t("dockModel", { model: parts.model }));
+	if (parts.ratio !== void 0) rest.push(parts.ratio);
+	if (parts.queue !== void 0) rest.push(parts.queue);
+	return {
+		...parts.credits === void 0 ? {} : { credits: parts.credits },
+		rest: rest.join(DOCK_SEGMENT_SEPARATOR)
+	};
+}
+//#endregion
+//#region src/client/dock-suppress.ts
+/**
+* 选中我们的模型时，把对话底部那一行里**别人**的条目暂时压掉。
+*
+* 别人注册什么我们管不了 —— `conversation.composer.dock` 是 list 槽位，每条注册由
+* 宿主平铺成同一个 `[data-composer-dock]` 行里的一个直接子节点。所以我们能做的是：
+* 在自己这条的 effect 里认出兄弟节点、给它们打个属性，再用一条我们注入的 CSS 隐藏。
+* 切走或卸载时逐个摘掉属性，绝不留下别人的行永久消失。
+*
+* 不碰的：宿主自己的轮次/token 统计 pill（带 `data-composer-stat`），以及上下文占用
+* 那一格 —— 那些不是「别人的 provider 行」，压掉就是抢宿主的 UI。
+*
+* 这里刻意不写 `instanceof HTMLElement`：结构够了就能用，逻辑也就能在没装 jsdom 的
+* 测试环境里用假节点跑（见 test/dock-suppress.spec.ts）。
+*/
+/** 标记属性：带上它的节点被我们隐藏。 */
+const SUPPRESS_ATTR = "data-codearts-dock-suppressed";
+/** 注入的那条样式表 id。 */
+const SUPPRESS_STYLE_ID = "dsh-codearts-dock-suppress";
+/**
+* 这个兄弟节点该不该被压掉。
+*
+* 该压：别人的一条注册（既不是我们自己，也不包含我们，也不是宿主统计 pill）。
+* 不该压：我们自己、我们自己的子孙（有些宿主会包一层）、宿主的统计 pill。
+*/
+function isForeignDockEntry(node, self) {
+	if (node === self) return false;
+	if (node.contains?.(self) === true) return false;
+	if (node.hasAttribute("data-composer-stat")) return false;
+	if (node.querySelector("[data-composer-stat]") !== null) return false;
+	return true;
+}
+/**
+* 扫一遍并给新发现的「别人」打标记。返回**这次**新标记的节点，调用方负责在清理时
+* 逐个摘掉（只摘自己打的那批，别动别人的状态）。
+*/
+function markForeignDockEntries(parent, self) {
+	const marked = [];
+	for (const child of Array.from(parent.children)) {
+		if (!isForeignDockEntry(child, self)) continue;
+		if (child.getAttribute("data-codearts-dock-suppressed") === "") continue;
+		child.setAttribute(SUPPRESS_ATTR, "");
+		marked.push(child);
+	}
+	return marked;
+}
+/** 摘掉标记 —— 切走 provider 或组件卸载时调用。 */
+function releaseDockEntries(nodes) {
+	for (const node of nodes) node.removeAttribute(SUPPRESS_ATTR);
+}
+/** 注入一次隐藏规则；重复调用无副作用。没有 document 的环境（SSR/测试）直接跳过。 */
+function ensureSuppressStyle() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById("dsh-codearts-dock-suppress") !== null) return;
+	const style = document.createElement("style");
+	style.id = SUPPRESS_STYLE_ID;
+	style.textContent = `[${SUPPRESS_ATTR}]{display:none!important}`;
+	document.head.appendChild(style);
+}
+//#endregion
 //#region src/client/CodeArtsCreditDock.tsx
 /**
-* 对话底部的积分条。
+* 对话底部的「模型 + 积分」条，以及点开后的积分弹层。
 *
-* 用户最初的诉求就是「对话底部要显示积分」—— 这一条挂在
-* `conversation.composer.dock` 槽位上（与宿主 session-stats strip 同位）。
-* 只在当前 provider 是 codearts 时才拉取并显示一行「积分 N」，别的 provider 下
-* 完全不渲染，不抢别人的行。
+* 这一条挂在 `conversation.composer.dock` 槽位上（与宿主 session-stats strip 同位）。
+* 只在当前 provider 是 codearts 时才渲染，别的 provider 下完全不出现，不抢别人的行。
+*
+* 第一段是 `Provider CodeArts · <模型名>`，模型名直接用目录里的 `name`
+* （`catalog.ts` 的 `modelDisplayName` 已经把倍率写进去了，如
+* `DeepSeek-V4.1-Flash-1017 · x0.18`），所以这一行自带倍率、不必另算。
+* 这段是**我们自己的**身份行：邻居插件（如 dsh-codebuddy-cli）对任何 provider
+* 都会画一行 `Provider <id> · Model <id>`，在 codearts 下那行只有模型 id、没有
+* 倍率；两边都开就会重复，所以优先我们这条，邻居那条应在它自己的设置里关掉。
+*
+* 那一行是个按钮：点开就是逐号明细（多账号下聚合数字本身没意义，得能看出是哪个号）。
+* 显隐由设置卡片「显示」页那两个开关管着，开关值随 `/status` 一起下发 —— 底部条本来
+* 就在轮询它，不必为两个布尔开一条新链路。代价是关掉开关最多要等一个轮询周期（60 秒）
+* 才看得见效果，这个延迟在设置卡片上写明了。
 *
 * 积分数据走插件自己的 `/api/codearts/status`（带 TTL 缓存，见 src/credits.ts），
-* 不会因为这条 dock 让上游多挨一次请求。
+* 不会因为这条 dock 让上游多挨一次请求；弹层上那个「刷新积分」是唯一绕缓存的出口。
 */
 /** 与 src/adapter.ts 的 CODEARTS_PROVIDER 对齐 —— client 不能 import host 模块。 */
 const CODEARTS_PROVIDER = "codearts";
@@ -1215,6 +1420,12 @@ const QUEUE_PATH = "/api/codearts/queue";
 const REFRESH_INTERVAL_MS = 6e4;
 /** 排队位置变得快：官方客户端也是 5 秒一次；这是本机路由，打不疼上游。 */
 const QUEUE_INTERVAL_MS = 5e3;
+/** 弹层宽度固定，好算它会不会顶出屏幕右边。 */
+const PANEL_WIDTH = 280;
+/** 弹层与那一行之间的缝隙。 */
+const PANEL_GAP = 8;
+/** 那一行在输入框下方，往上开才够空间；给弹层留的最小高度，不够就翻到下面。 */
+const PANEL_MIN_ABOVE = 260;
 function readSelection(useProjection) {
 	if (useProjection === void 0) return void 0;
 	try {
@@ -1223,51 +1434,138 @@ function readSelection(useProjection) {
 		return;
 	}
 }
+function currentOf(selection) {
+	return selection?.next ?? selection?.lastUsed;
+}
 function isCodeArts(selection) {
-	return (selection?.next ?? selection?.lastUsed)?.provider === CODEARTS_PROVIDER;
+	return currentOf(selection)?.provider === CODEARTS_PROVIDER;
+}
+function formatNumber(value) {
+	return new Intl.NumberFormat().format(Math.round(value));
+}
+function formatClock(ts) {
+	if (ts === void 0 || !Number.isFinite(ts)) return "";
+	try {
+		return new Date(ts).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	} catch {
+		return "";
+	}
+}
+/** 账号名与设置卡片同一套取法：备注 > 用户名 > id。 */
+function accountName(account) {
+	return account.label?.trim() || account.userName?.trim() || account.id;
+}
+/**
+* 逐号明细。
+*
+* 老后端只有聚合的一份 `credits`，那时单账号就退回它 —— 别因为后端没升级就把
+* 弹层弹成一句「没有数据」。
+*/
+function rowsOf(data) {
+	const byId = new Map((data.creditsByAccount ?? []).map((entry) => [entry.id, entry]));
+	return (data.accounts ?? []).map((account) => {
+		const entry = byId.get(account.id) ?? (byId.size === 0 && (data.accounts?.length ?? 0) === 1 ? {
+			id: account.id,
+			credits: data.credits,
+			creditsError: data.creditsError
+		} : void 0);
+		const snapshot = entry?.credits;
+		return {
+			id: account.id,
+			name: accountName(account),
+			remain: snapshot?.credits.total.remain ?? null,
+			expiring: snapshot?.credits.total.expiring ?? 0,
+			...snapshot?.credits.fetchedAt === void 0 ? {} : { fetchedAt: snapshot.credits.fetchedAt },
+			...entry?.creditsError === void 0 ? {} : { error: entry.creditsError }
+		};
+	});
+}
+/** 把弹层钉在按钮边上：优先往上开（那一行本来就在输入框下面），放不下就翻到下面。 */
+function anchorOf(rect) {
+	const above = rect.top > PANEL_MIN_ABOVE;
+	const width = Math.min(PANEL_WIDTH, window.innerWidth - 16);
+	return {
+		left: Math.max(8, Math.min(rect.left, window.innerWidth - width - 8)),
+		top: above ? rect.top - PANEL_GAP : rect.bottom + PANEL_GAP,
+		above
+	};
 }
 function CodeArtsCreditDock({ useProjection, t }) {
-	const active = isCodeArts(readSelection(useProjection));
+	const selection = readSelection(useProjection);
+	const active = isCodeArts(selection);
 	const [remain, setRemain] = (0, react.useState)(null);
 	const [total, setTotal] = (0, react.useState)(0);
+	const [rows, setRows] = (0, react.useState)([]);
+	/**
+	* 模型 id -> 目录条目（显示名 + 已格式化的倍率）。
+	*
+	* 显示名自带 ` · x0.18` 尾巴，倍率单独放一段，所以两个都要拿：
+	* 名字用 `stripModelSuffixes` 剥掉尾巴，倍率直接用服务端算好的 `ratio`。
+	*/
+	const [modelInfo, setModelInfo] = (0, react.useState)({});
+	const [flags, setFlags] = (0, react.useState)({
+		credits: true,
+		queue: true
+	});
 	const [queued, setQueued] = (0, react.useState)(null);
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const [refreshing, setRefreshing] = (0, react.useState)(false);
 	const mounted = (0, react.useRef)(true);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	/** 这一行的根节点 —— 它的 parentElement 就是宿主那条共享 flex 行。 */
+	const rootRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		mounted.current = true;
 		return () => {
 			mounted.current = false;
 		};
 	}, []);
+	const loadStatus = (0, react.useCallback)(async (force) => {
+		try {
+			const res = await fetch(force ? `${STATUS_PATH}?force=1` : STATUS_PATH, {
+				headers: { Accept: "application/json" },
+				credentials: "same-origin"
+			});
+			if (!res.ok) return;
+			const data = await res.json().catch(() => void 0);
+			if (data === void 0 || !mounted.current) return;
+			setFlags(data.dock ?? {
+				credits: true,
+				queue: true
+			});
+			setRows(rowsOf(data));
+			setModelInfo(Object.fromEntries((data.models ?? []).map((model) => [model.id, {
+				name: model.name,
+				...model.ratio === void 0 ? {} : { ratio: model.ratio }
+			}])));
+			const snapshots = (data.creditsByAccount ?? []).map((entry) => entry.credits).filter((value) => value !== void 0);
+			const pool = snapshots.length > 0 ? snapshots : data.credits === void 0 ? [] : [data.credits];
+			if (pool.length === 0) {
+				setRemain(null);
+				return;
+			}
+			setRemain(Math.round(pool.reduce((sum, item) => sum + item.credits.total.remain, 0)));
+			setTotal(Math.round(pool.reduce((sum, item) => sum + item.credits.total.total, 0)));
+		} catch {}
+	}, []);
 	(0, react.useEffect)(() => {
 		if (!active) {
 			setRemain(null);
+			setRows([]);
+			setAnchor(null);
 			return;
 		}
 		let timer;
-		const refresh = async () => {
-			try {
-				const res = await fetch(STATUS_PATH, {
-					headers: { Accept: "application/json" },
-					credentials: "same-origin"
-				});
-				if (!res.ok) return;
-				const data = await res.json().catch(() => void 0);
-				if (data === void 0) return;
-				const snapshots = (data.creditsByAccount ?? []).map((entry) => entry.credits).filter((value) => value !== void 0);
-				const pool = snapshots.length > 0 ? snapshots : data.credits === void 0 ? [] : [data.credits];
-				if (pool.length === 0) return;
-				if (mounted.current) {
-					setRemain(Math.round(pool.reduce((sum, item) => sum + item.credits.total.remain, 0)));
-					setTotal(Math.round(pool.reduce((sum, item) => sum + item.credits.total.total, 0)));
-				}
-			} catch {}
-		};
-		refresh();
-		timer = window.setInterval(refresh, REFRESH_INTERVAL_MS);
+		loadStatus(false);
+		timer = window.setInterval(() => void loadStatus(false), REFRESH_INTERVAL_MS);
 		return () => {
 			if (timer !== void 0) window.clearInterval(timer);
 		};
-	}, [active]);
+	}, [active, loadStatus]);
 	(0, react.useEffect)(() => {
 		if (!active) {
 			setQueued(null);
@@ -1291,21 +1589,96 @@ function CodeArtsCreditDock({ useProjection, t }) {
 			if (timer !== void 0) window.clearInterval(timer);
 		};
 	}, [active]);
-	if (!active || remain === null && queued === null) return null;
-	const text = remain === null ? void 0 : t("creditsDock", { remain: new Intl.NumberFormat().format(remain) });
-	const title = queued !== null ? t("queueDockTitle", {
+	const close = (0, react.useCallback)(() => setAnchor(null), []);
+	(0, react.useEffect)(() => {
+		if (anchor === null) return;
+		const onPointerDown = (event) => {
+			const target = event.target;
+			if (target === null) return;
+			if (panelRef.current?.contains(target) === true || triggerRef.current?.contains(target) === true) return;
+			close();
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") close();
+		};
+		window.addEventListener("pointerdown", onPointerDown, true);
+		window.addEventListener("keydown", onKeyDown);
+		window.addEventListener("resize", close);
+		window.addEventListener("scroll", close, true);
+		return () => {
+			window.removeEventListener("pointerdown", onPointerDown, true);
+			window.removeEventListener("keydown", onKeyDown);
+			window.removeEventListener("resize", close);
+			window.removeEventListener("scroll", close, true);
+		};
+	}, [anchor, close]);
+	(0, react.useEffect)(() => {
+		if (!active) return;
+		const self = rootRef.current;
+		const slot = self?.closest("[data-slot=\"conversation.composer.dock\"]") ?? null;
+		if (self === null || slot === null) return;
+		const node = slot;
+		const me = self;
+		const marked = /* @__PURE__ */ new Set();
+		const sweep = () => {
+			for (const found of markForeignDockEntries(node, me)) marked.add(found);
+		};
+		ensureSuppressStyle();
+		sweep();
+		const observer = new MutationObserver(sweep);
+		observer.observe(slot, { childList: true });
+		return () => {
+			observer.disconnect();
+			releaseDockEntries(marked);
+			marked.clear();
+		};
+	}, [active]);
+	if (!active) return null;
+	const showCredits = flags.credits && remain !== null;
+	const showQueue = flags.queue && queued !== null;
+	const modelId = currentOf(selection)?.model;
+	const entry = modelId === void 0 ? void 0 : modelInfo[modelId];
+	const modelLabel = entry === void 0 ? modelId ?? "" : stripModelSuffixes(entry.name);
+	const ratio = entry?.ratio;
+	const line = buildDockLine({
+		...showCredits ? { credits: t("creditsDock", { remain: formatNumber(remain ?? 0) }) } : {},
+		provider: "CodeArts",
+		...modelLabel === "" ? {} : { model: modelLabel },
+		...ratio === void 0 ? {} : { ratio },
+		...showQueue && queued !== null ? { queue: t("queueDock", { position: queued.position }) } : {}
+	}, t);
+	const queueTitle = queued === null ? void 0 : t("queueDockTitle", {
 		model: queued.model,
 		position: queued.position,
 		length: queued.length
-	}) : t("creditsDockTitle", {
+	});
+	const creditsTitle = showCredits ? t("creditsDockTitle", {
 		remain: remain ?? 0,
 		total
-	});
+	}) : void 0;
+	const fetchedAt = rows.reduce((latest, row) => Math.max(latest, row.fetchedAt ?? 0), 0);
+	const lastUpdated = fetchedAt > 0 ? formatClock(fetchedAt) : "";
+	const toggle = (event) => {
+		if (anchor !== null) {
+			close();
+			return;
+		}
+		setAnchor(anchorOf(event.currentTarget.getBoundingClientRect()));
+	};
+	const forceRefresh = async () => {
+		setRefreshing(true);
+		try {
+			await loadStatus(true);
+		} finally {
+			setRefreshing(false);
+		}
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
 		style: {
 			display: "inline-flex",
 			alignItems: "center",
-			gap: 6,
+			gap: 0,
 			color: "var(--dsw-alias-label-tertiary)",
 			fontSize: "var(--dsh-content-font-size-secondary, 13px)",
 			lineHeight: "18px",
@@ -1314,8 +1687,142 @@ function CodeArtsCreditDock({ useProjection, t }) {
 			flex: "0 0 auto",
 			minWidth: "max-content"
 		},
-		title,
-		children: [queued !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("queueDock", { position: queued.position }) }), text !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: text })]
+		title: queueTitle ?? creditsTitle,
+		children: [
+			line.credits !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: triggerRef,
+				type: "button",
+				"aria-haspopup": "dialog",
+				"aria-expanded": anchor !== null,
+				"aria-label": t("creditsDockPanelTitle"),
+				title: creditsTitle,
+				onClick: toggle,
+				style: {
+					all: "unset",
+					cursor: "pointer",
+					font: "inherit",
+					color: "inherit",
+					fontVariantNumeric: "inherit",
+					lineHeight: "inherit",
+					whiteSpace: "inherit"
+				},
+				children: line.credits
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				children: " · "
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: line.rest }),
+			anchor !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panelRef,
+				role: "dialog",
+				"aria-label": t("creditsDockPanelTitle"),
+				style: {
+					position: "fixed",
+					left: anchor.left,
+					top: anchor.top,
+					transform: anchor.above ? "translateY(-100%)" : void 0,
+					width: PANEL_WIDTH,
+					maxWidth: "calc(100vw - 16px)",
+					zIndex: 1e3,
+					display: "flex",
+					flexDirection: "column",
+					gap: 8,
+					padding: 12,
+					boxSizing: "border-box",
+					borderRadius: "var(--dsw-radius-lg, 10px)",
+					border: "0.5px solid var(--dsw-alias-settings-card-stroke, rgba(127, 127, 127, 0.28))",
+					background: "var(--dsw-alias-settings-card-fill, rgba(32, 32, 32, 0.96))",
+					boxShadow: "0 12px 32px rgba(0, 0, 0, 0.28)",
+					color: "var(--dsw-alias-label-primary)",
+					fontSize: "var(--dsh-content-font-size-secondary, 13px)",
+					lineHeight: "18px",
+					whiteSpace: "normal"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							gap: 8
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: { fontWeight: 600 },
+							children: t("creditsDockPanelTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							disabled: refreshing,
+							onClick: () => void forceRefresh(),
+							children: refreshing ? t("creditsDockRefreshing") : t("creditsDockRefresh")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "minmax(0, 1fr) auto",
+							gap: "4px 12px",
+							alignItems: "center",
+							borderTop: "0.5px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, 0.22))",
+							paddingTop: 8,
+							color: "var(--dsw-alias-label-tertiary)"
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("creditsDockColAccount") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { justifySelf: "end" },
+								children: t("creditsDockColBalance")
+							}),
+							rows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { gridColumn: "1 / -1" },
+								children: t("creditsDockEmpty")
+							}),
+							rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: { display: "contents" },
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: 6,
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: row.remain === null ? "warning" : "done" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: {
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+											color: "var(--dsw-alias-label-primary)"
+										},
+										title: row.error === void 0 ? row.name : row.error,
+										children: row.name
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										justifySelf: "end",
+										fontVariantNumeric: "tabular-nums"
+									},
+									children: row.remain === null ? "—" : formatNumber(row.remain)
+								})]
+							}, row.id))
+						]
+					}),
+					rows.filter((row) => row.expiring > 0).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: {
+							margin: 0,
+							color: "var(--dsw-alias-state-warn-label, var(--dsw-alias-label-secondary))"
+						},
+						children: t("creditsDockExpiring", {
+							account: row.name,
+							expiring: formatNumber(row.expiring)
+						})
+					}, `${row.id}-expiring`)),
+					lastUpdated !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: "var(--dsw-alias-label-tertiary)" },
+						children: t("creditsDockUpdated", { time: lastUpdated })
+					})
+				]
+			})
+		]
 	});
 }
 //#endregion
@@ -1360,6 +1867,7 @@ const zh = {
 	benefit: "福利",
 	benefitBlocked: "福利今日不可用",
 	benefitBlockedHint: "{n} 个福利模型今天被上游判定没有权益（活动领完或渠道未开），发出去会直接报 benefit not found。",
+	modelImages: "识图",
 	refreshModels: "刷新模型列表",
 	refreshing: "刷新中…",
 	refreshed: "已刷新：{n} 个模型，其中 {benefit} 个走福利路由",
@@ -1405,6 +1913,24 @@ const zh = {
 	creditsNeedSignIn: "这个账号需要重新登录",
 	creditsDock: "积分 {remain}",
 	creditsDockTitle: "CodeArts 剩余积分 {remain} / {total}",
+	creditsDockPanelTitle: "CodeArts 积分",
+	creditsDockRefresh: "刷新积分",
+	creditsDockRefreshing: "刷新中…",
+	creditsDockColAccount: "账号",
+	creditsDockColBalance: "剩余积分",
+	creditsDockEmpty: "暂时没有积分数据",
+	creditsDockExpiring: "{account}：{expiring} 积分将在本周期结束时作废",
+	creditsDockUpdated: "最近刷新 {time}",
+	dockProvider: "Provider {provider}",
+	dockModel: "Model {model}",
+	dockNoModel: "未选择模型",
+	tabDisplay: "显示",
+	displayTitle: "对话底部显示",
+	displayHint: "这两项只管输入框下方那一行的积分与排队两段；中间那段「Provider CodeArts · Model 模型 · 倍率」一直显示，不受开关影响。底部那条每 60 秒读一次设置，所以关掉最多要等一分钟才见效。",
+	displayCreditsToggle: "显示剩余积分（点开可看各账号明细）",
+	displayQueueToggle: "显示上游排队位置",
+	displayNotWritable: "这个宿主没给插件开配置存储，开关只能看不能改。",
+	displayFailed: "保存失败：{message}",
 	queueDock: "排队第 {position} 位",
 	queueDockTitle: "上游排队：{model} · 第 {position} 位 / 共 {length} 条",
 	claimButton: "签到领积分",
@@ -1457,6 +1983,7 @@ const en = {
 	benefit: "Benefit",
 	benefitBlocked: "Benefit unavailable today",
 	benefitBlockedHint: "{n} benefit model(s) were told they have no entitlement today (campaign exhausted or channel not opened); sending to them fails with benefit not found.",
+	modelImages: "Images",
 	refreshModels: "Refresh models",
 	refreshing: "Refreshing…",
 	refreshed: "Refreshed: {n} models, {benefit} on the benefit route",
@@ -1502,6 +2029,24 @@ const en = {
 	creditsNeedSignIn: "This account needs signing in again",
 	creditsDock: "Credits {remain}",
 	creditsDockTitle: "CodeArts credits left {remain} / {total}",
+	creditsDockPanelTitle: "CodeArts credits",
+	creditsDockRefresh: "Refresh credits",
+	creditsDockRefreshing: "Refreshing…",
+	creditsDockColAccount: "Account",
+	creditsDockColBalance: "Credits left",
+	creditsDockEmpty: "No credit data yet",
+	creditsDockExpiring: "{account}: {expiring} credits expire when this cycle ends",
+	creditsDockUpdated: "Last updated {time}",
+	dockProvider: "Provider {provider}",
+	dockModel: "Model {model}",
+	dockNoModel: "No model selected",
+	tabDisplay: "Display",
+	displayTitle: "Under the chat input box",
+	displayHint: "These two only control the credits and queue segments of that line under the input box; the middle “Provider CodeArts · Model … · rate” segments always show. The bar re-reads settings every 60 seconds, so hiding the rest can take up to a minute.",
+	displayCreditsToggle: "Show remaining credits (click it for per-account details)",
+	displayQueueToggle: "Show the upstream queue position",
+	displayNotWritable: "This host gives the plugin nowhere to persist settings, so the switches are read-only.",
+	displayFailed: "Failed to save: {message}",
 	queueDock: "Queued #{position}",
 	queueDockTitle: "Upstream queue: {model} · position {position} of {length}",
 	claimButton: "Claim daily credits",