dsh-dock 0.4.1 → 0.6.0

package/features/balance/view.js

@@ -90,8 +90,11 @@ function BalanceView(props) {
 	} else if (providers.length === 0) {
 		body.push(react.createElement("div", { key: "empty", className: "dkb-note" }, "没有找到已配置的模型 Provider"));
 	} else {
+		// Provider 分组：可查余额的排前面（不可查/需登录的往后）
+		const rank = (p) => (p.balance && p.balance.status === "ok" ? 0 : p.balance && p.balance.status === "login-required" ? 1 : 2);
+		const sorted = providers.slice().sort((a, b) => rank(a) - rank(b));
 		body.push(react.createElement("div", { key: "rows", className: "dkb-rows" },
-			providers.map((p) => {
+			sorted.map((p) => {
 				const accent = accentOf(p.id);
 				const b = p.balance;
 				let badge = ["未知", ""];
@@ -102,51 +105,57 @@ function BalanceView(props) {
 					else if (b.status === "login-required") badge = ["需登录", "warn"];
 					else badge = ["查询失败", "err"];
 				}
-				const sub = ["ID: " + p.id, p.api ? "api: " + p.api : null, p.baseURL ? p.baseURL : null].filter(Boolean).join(" · ");
-				const cells = [];
+				// 主体内容按状态分三型：余额（数字大卡）/ 登录跳转 / 说明
 				let balBody = null;
 				if (b && b.status === "ok" && b.kind === "quota") {
-					cells.push(react.createElement("div", { key: "q", className: "dkb-bal" },
-						react.createElement("span", { className: "dkb-cur", style: { color: accent } }, "总额度"),
-						react.createElement("span", { className: "dkb-total", style: { color: C_TOTAL } }, "剩余 " + fmt(b.remaining) + (b.unit ? " " + b.unit : "")),
-						react.createElement("span", { className: "dkb-part" }, "已用 " + fmt(b.used) + " / 总 " + fmt(b.limit)),
-						b.resetTime
-							? react.createElement("span", { className: "dkb-part" }, "重置 " + String(b.resetTime).slice(0, 16))
-							: null));
-					(Array.isArray(b.dims) ? b.dims : []).forEach((d, i) => {
-						cells.push(react.createElement("div", { key: "d" + i, className: "dkb-bal" },
-							react.createElement("span", { className: "dkb-cur", style: { color: accent } }, d.window === "weekly" ? "周额度" : "小时额度"),
-							react.createElement("span", { className: "dkb-total", style: { color: C_TOTAL } }, "剩余 " + fmt(d.remaining)),
-							react.createElement("span", { className: "dkb-part" }, "已用 " + fmt(d.used) + " / " + fmt(d.limit)),
-							d.resetTime
-								? react.createElement("span", { className: "dkb-part" }, "重置 " + String(d.resetTime).slice(0, 16))
-								: null));
-					});
+					const dims = Array.isArray(b.dims) ? b.dims : [];
+					balBody = react.createElement(react.Fragment, null,
+						react.createElement("div", { className: "dkb-main" },
+							react.createElement("span", { className: "dkb-main-label" }, "剩余额度"),
+							react.createElement("span", { className: "dkb-main-value" }, fmt(b.remaining) + (b.unit ? " " + b.unit : "")),
+							react.createElement("span", { className: "dkb-main-part" }, "已用 " + fmt(b.used) + " / 总 " + fmt(b.limit),
+								b.resetTime ? react.createElement("span", null, " · 重置 " + String(b.resetTime).slice(0, 10)) : null)),
+						dims.map((d, i) => react.createElement("div", { key: "d" + i, className: "dkb-dim" },
+							react.createElement("span", { className: "dkb-dim-label" }, d.window === "weekly" ? "周额度" : "小时额度"),
+							react.createElement("span", { className: "dkb-dim-bar" },
+								react.createElement("span", { className: "dkb-dim-fill", style: { width: (d.limit > 0 ? Math.min(100, Math.round((d.remaining / d.limit) * 100)) : 0) + "%" } })),
+							react.createElement("span", { className: "dkb-dim-text" }, "剩 " + fmt(d.remaining) + " / " + fmt(d.limit)))));
 				} else if (b && b.status === "ok") {
 					const infos = Array.isArray(b.infos) ? b.infos : [];
-					cells.push(infos.map((i, idx) =>
-						react.createElement("div", { key: idx, className: "dkb-bal" },
-							react.createElement("span", { className: "dkb-cur", style: { color: accent } }, i.currency),
-							react.createElement("span", { className: "dkb-total", style: { color: C_TOTAL } }, "总额 " + fmt(i.totalBalance)),
-							i.grantedBalance != null
-								? react.createElement("span", { className: "dkb-part", style: { color: C_GRANTED } }, "赠送 " + fmt(i.grantedBalance))
-								: null,
-							i.toppedUpBalance != null
-								? react.createElement("span", { className: "dkb-part", style: { color: C_TOPUP } }, "充值 " + fmt(i.toppedUpBalance))
-								: null)));
+					balBody = react.createElement("div", { className: "dkb-mains" },
+						infos.map((i, idx) => react.createElement("div", { key: idx, className: "dkb-main" },
+							react.createElement("span", { className: "dkb-main-label", style: { color: accent } }, i.currency),
+							react.createElement("span", { className: "dkb-main-value" }, fmt(i.totalBalance)),
+							react.createElement("span", { className: "dkb-main-parts" },
+								i.grantedBalance != null ? react.createElement("span", { className: "dkb-main-part", style: { color: C_GRANTED } }, "赠送 " + fmt(i.grantedBalance)) : null,
+								i.toppedUpBalance != null ? react.createElement("span", { className: "dkb-main-part", style: { color: C_TOPUP } }, "充值 " + fmt(i.toppedUpBalance)) : null))));
 				} else if (b && b.status === "login-required" && b.consoleUrl) {
-					balBody = react.createElement("div", { className: "dkb-bal" },
+					balBody = react.createElement("div", { className: "dkb-main" },
 						react.createElement("a", { href: b.consoleUrl, target: "_blank", rel: "noreferrer", className: "dkb-link", style: { color: accent } }, "去控制台查看余额 →"));
 				} else {
-					balBody = react.createElement("div", { className: "dkb-note" }, (b && b.message) || "未知状态");
+					balBody = b && b.message
+						? react.createElement("div", { className: "dkb-note" }, b.message)
+						: react.createElement("div", { className: "dkb-note" }, "该 Provider 没有已知的余额查询接口");
 				}
-				if (cells.length > 0) balBody = react.createElement("div", { className: "dkb-rows" }, cells);
+				// 长连接信息弱化成单行小字（ID · api · baseURL），模型 chips 收敛到折叠区
+				const sub = ["ID " + p.id, p.api, p.baseURL ? p.baseURL.replace(/^https?:\/\//, "") : null].filter(Boolean).join(" · ");
 				return react.createElement("div", { key: p.id, className: "dkb-row", "data-dock-provider": p.id },
 					react.createElement("div", { className: "dkb-row-head" },
 						react.createElement("span", { className: "dkb-dot", style: { background: accent } }),
 						react.createElement("span", { className: "dkb-name", style: { color: accent } }, p.displayName),
 						def === p.id ? react.createElement("span", { className: "dkb-default" }, "默认") : null,
-						react.createElement("span", { className: "dkb-badge" + (badge[1] ? " " + badge[1] : ""), style: badge[1] === "err" ? { color: C_ERR, borderColor: C_ERR } : null }, badge[0])),
+						react.createElement("span", { className: "dkb-badge" + (badge[1] ? " " + badge[1] : ""), style: badge[1] === "err" ? { color: C_ERR, borderColor: C_ERR } : null }, badge[0]),
+						// 模型数折叠提示（点开展开 chips）
+						p.models && p.models.length > 0
+							? react.createElement("button", {
+								type: "button", className: "dkb-models-toggle",
+								title: p.models.join(", "),
+								onClick: (e) => {
+									const row = e.currentTarget.closest(".dkb-row");
+									if (row) row.classList.toggle("dkb-models-open");
+								}
+							}, p.models.length + " 个模型 ▾")
+							: null),
 					sub ? react.createElement("div", { className: "dkb-sub" }, sub) : null,
 					p.apiKeyEnv
 						? react.createElement("div", { className: "dkb-sub" }, "密钥: " + p.apiKeyEnv + (p.credentialConfigured ? " ✓" : " ✗"))
@@ -165,7 +174,7 @@ function BalanceView(props) {
 	return react.createElement("div", { className: "dkb-rows" },
 		react.createElement("div", { className: "dkb-note" },
 			data && !snap.error && providers.length > 0
-				? okCount + "/" + providers.length + " 个 Provider 可查余额"
+				? okCount + "/" + providers.length + " 个 Provider 可查余额（可查的排前面）"
 				: "模型余额 · Host 半部实时拉取"),
 		body,
 		react.createElement("div", { className: "dkb-foot" },
@@ -271,8 +280,9 @@ export const feature = {
 	css: [
 		".dkb-note{color:var(--dsw-alias-label-secondary);font-size:12px;}",
 		".dkb-error{color:var(--dsw-alias-state-error-primary);}",
-		".dkb-rows{display:flex;flex-direction:column;gap:8px;}",
-		".dkb-row{border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;}",
+		".dkb-rows{display:flex;flex-direction:column;gap:10px;}",
+		// Provider 卡片：行距收窄、留白分层
+		".dkb-row{border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px;}",
 		".dkb-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}",
 		".dkb-dot{width:8px;height:8px;border-radius:50%;flex:none;}",
 		".dkb-name{font-weight:600;font-size:13px;color:var(--dsw-alias-label-primary);}",
@@ -281,13 +291,28 @@ export const feature = {
 		".dkb-badge.ok{color:var(--dsw-alias-state-success-primary);border-color:currentColor;}",
 		".dkb-badge.warn{color:var(--dsw-alias-state-warning-primary);border-color:currentColor;}",
 		".dkb-badge.err{color:var(--dsw-alias-state-error-primary);border-color:currentColor;}",
+		// 模型数折叠开关（点行头右侧"N 个模型 ▾"展开/收起 chips）
+		".dkb-models-toggle{margin-left:auto;cursor:pointer;border:none;background:transparent;color:var(--dsw-alias-label-tertiary);font-family:inherit;font-size:11px;padding:1px 6px;border-radius:6px;white-space:nowrap;}",
+		".dkb-models-toggle:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);}",
+		".dkb-row:not(.dkb-models-open) .dkb-chips{display:none;}",
+		".dkb-row.dkb-models-open .dkb-models-toggle::after{content:\"\";}",
+		// 连接信息弱化单行（省略 URL 协议头、超出省略号）
 		".dkb-sub{color:var(--dsw-alias-label-tertiary);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
-		".dkb-chips{display:flex;flex-wrap:wrap;gap:4px;}",
+		".dkb-chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 4px;}",
 		".dkb-chip{font-size:10px;border-radius:6px;padding:1px 6px;}",
-		".dkb-bal{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--dsw-alias-label-primary);align-items:baseline;}",
-		".dkb-cur{font-weight:600;min-width:48px;}",
-		".dkb-total{font-weight:600;}",
-		".dkb-part{font-size:11px;color:var(--dsw-alias-label-tertiary);}",
+		// 余额主数字卡（大号数字 + 小字辅助信息；多币种横排多卡）
+		".dkb-mains{display:flex;gap:12px;flex-wrap:wrap;}",
+		".dkb-main{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);min-width:150px;}",
+		".dkb-main-label{font-size:11px;color:var(--dsw-alias-label-tertiary);}",
+		".dkb-main-value{font-size:20px;font-weight:700;color:var(--dsw-alias-state-success-primary);font-variant-numeric:tabular-nums;line-height:1.2;}",
+		".dkb-main-parts{display:flex;gap:10px;flex-wrap:wrap;}",
+		".dkb-main-part{font-size:11px;color:var(--dsw-alias-label-tertiary);}",
+		// 配额维度条（周/小时额度：进度条 + 剩余/总量）
+		".dkb-dim{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--dsw-alias-label-secondary);}",
+		".dkb-dim-label{flex:none;min-width:44px;color:var(--dsw-alias-label-tertiary);}",
+		".dkb-dim-bar{flex:1;max-width:220px;height:5px;border-radius:3px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);overflow:hidden;}",
+		".dkb-dim-fill{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--dsw-alias-state-success-primary),color-mix(in srgb,var(--dsw-alias-state-success-primary) 60%,#fff));}",
+		".dkb-dim-text{flex:none;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;}",
 		".dkb-link{font-size:12px;text-decoration:none;}",
 		".dkb-link:hover{text-decoration:underline;}",
 		".dkb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--dsw-alias-label-tertiary);font-size:12px;}",

package/features/modelconfig/view.js

@@ -12,8 +12,10 @@ const modelsStore = {
 	set(patch) { this.snap = Object.assign({}, this.snap, patch); for (const fn of this.listeners) fn(); },
 	load() {
 		if (this.snap.loading) return;
-		this.set({ loading: true });
-		fetch("/dsh-dock/models", { signal: AbortSignal.timeout(20000) })
+		this.set({ loading: true, error: null });
+		// Provider 可在 DSH 原生模型设置中随时增删；不要复用浏览器缓存，
+		// 否则返回本页时仍可能看到旧的共享快照。
+		fetch("/dsh-dock/models", { cache: "no-store", signal: AbortSignal.timeout(20000) })
 			.then((res) => (res.ok ? res.json() : Promise.reject(new Error("模型目录接口 HTTP " + res.status))))
 			.then((data) => this.set({ data: data, loading: false, error: null }))
 			.catch((e) => this.set({ loading: false, error: (e && e.message) || String(e) }));
@@ -81,6 +83,15 @@ function ModelsView() {
 	const [vpDirty, setVpDirty] = react.useState(false);
 	const [vpSaving, setVpSaving] = react.useState(false);
 	const [vpMsg, setVpMsg] = react.useState(null);
+	const [vpDirectExpanded, setVpDirectExpanded] = react.useState(false);
+
+	// 每次进入模型设置都重新读取官方目录。modelsStore 是跨页面共享快照，
+	// 原生设置刚新增 Provider 时不能要求用户再滚到页面底部手动刷新。
+	react.useEffect(() => { modelsStore.load(); }, []);
+	const refreshModels = () => {
+		setBuiltKey(null);
+		modelsStore.load();
+	};
 
 	const cur = providers.length > 0 ? (providers.find((p) => p.id === selId) || providers[0]) : null;
 	// 选中 Provider 或目录刷新时重建草稿（render 期受控重置；msg 只在切 Provider/编辑时清）
@@ -199,7 +210,7 @@ function ModelsView() {
 			DKM_MODALITIES.map(([v, label]) => react.createElement("label", {
 				key: v,
 				className: "dkm-check",
-				title: v === "image" ? "勾选=端点原生支持图片（原图直发，图片理解代理跳过）；纯文本模型勿勾——收图会自动交给图片理解代理识别" : null
+				title: v === "image" ? "由你声明该端点支持图片：保存后原图直发，并可作为视觉模型候选。系统不会替你猜测；端点实际不支持时取消勾选即可恢复走图片理解代理" : null
 			},
 				react.createElement("input", {
 					type: "checkbox",
@@ -251,6 +262,11 @@ function ModelsView() {
 					react.createElement("button", { type: "button", className: "dkm-mini", title: "一键取消全部强度档", onClick: () => patchModel(i, allLevels(false)) }, "取消全选"))));
 
 	const body = [];
+	if (data) {
+		body.push(react.createElement("div", { key: "refresh", className: "dkm-topbar" },
+			react.createElement("span", { className: "dkm-sub" }, "已载入 " + providers.length + " 个 Provider；在 DSH 原生模型设置中新增后，返回本页会自动更新"),
+			react.createElement("button", { type: "button", className: "dkb-refresh", disabled: snap.loading || saving, onClick: refreshModels }, snap.loading ? "刷新中…" : "刷新模型目录")));
+	}
 	if (snap.error) {
 		body.push(react.createElement("div", { key: "err", className: "dkm-error" },
 			"模型目录拉取失败：" + snap.error + " ",
@@ -266,24 +282,38 @@ function ModelsView() {
 			"图片理解代理需要新版宿主进程：当前 dsh web 较旧，重启后此面板可用。"));
 	}
 	if (data && data.visionProxy !== undefined && vpDraft) {
-		// 图片能力以运行时视角（runtimeInput，与官方投影同源）为准，无则回退条目 input
-		const effInput = (m) => (m.runtimeInput && m.runtimeInput.length > 0 ? m.runtimeInput : m.input) || [];
+		// 用户在模型设置里勾选「图片」即可决定原图直发和视觉候选；
+		// 运行时目录仅作自动提示，不能排除用户明确声明的模型。
+		// 无论哪种来源都不等同于联网实测，凭据、额度和上游状态仍以真实调用为准。
+		const runtimeImage = (m) => Array.isArray(m.runtimeInput) && m.runtimeInput.indexOf("image") >= 0;
+		const declaredImage = (m) => Array.isArray(m.input) && m.input.indexOf("image") >= 0;
 		const vpDirect = [];
 		const vpProxied = [];
 		for (const p of providers) {
 			for (const m of (p.models || [])) {
-				const item = { key: p.id + "/" + m.id, label: (p.displayName || p.id) + " / " + (m.name || m.id), model: m.name || m.id };
-				(effInput(m).indexOf("image") >= 0 ? vpDirect : vpProxied).push(item);
+				const declared = declaredImage(m);
+				const runtime = runtimeImage(m);
+				const source = declared ? "你已标记图片" : (runtime ? "运行时识别" : "未标记图片");
+				const item = {
+					key: p.id + "/" + m.id,
+					label: (p.displayName || p.id) + " / " + (m.name || m.id) + "（" + source + "）",
+					model: m.name || m.id,
+					source: source,
+					declared: declared,
+				};
+				((declared || runtime) ? vpDirect : vpProxied).push(item);
 			}
 		}
 		const vpCandidates = vpDirect.slice();
 		const vpKey = vpDraft.provider + "/" + vpDraft.model;
 		const vpKnown = vpCandidates.some((c) => c.key === vpKey);
 		body.push(react.createElement("div", { key: "visionproxy", className: "dkm-prov" },
-			react.createElement("div", { className: "dkm-prov-head" },
-				react.createElement("span", { className: "dkm-name" }, "图片理解代理"),
-				react.createElement("span", { className: "dkm-badge" }, vpDraft.enabled ? "已启用" : "已停用"),
-				react.createElement("span", { className: "dkm-sub" }, "纯文本模型收到图片时自动调用所选视觉模型识别，识别文本替换图片；多模态模型原样自识别")),
+				react.createElement("div", { className: "dkm-prov-head" },
+					react.createElement("span", { className: "dkm-name" }, "图片理解代理"),
+					react.createElement("span", { className: "dkm-badge" }, vpDraft.enabled ? "已启用" : "已停用"),
+					react.createElement("span", { className: "dkm-sub" }, "纯文本模型收到图片时自动调用所选视觉模型识别，识别文本替换图片；多模态模型原样自识别")),
+				react.createElement("div", { className: "dkm-note dkm-warn" },
+					"⚠ 本功能会调用视觉模型识别图片，消耗 token（每次识图按视觉模型计费）。默认关闭；不开启则插件其余功能均不消耗任何 token。"),
 			react.createElement("div", { className: "dkm-checks" },
 				react.createElement("label", { className: "dkm-check" },
 					react.createElement("input", {
@@ -307,18 +337,28 @@ function ModelsView() {
 					!vpKnown && vpDraft.provider ? react.createElement("option", { value: vpKey }, vpDraft.provider + " / " + vpDraft.model + "（当前）") : null,
 					vpCandidates.map((c) => react.createElement("option", { key: c.key, value: c.key }, c.label))),
 				vpCandidates.length === 0
-					? react.createElement("span", { className: "dkm-sub" }, "目录里暂无多模态模型——先在下方给真·多模态模型勾选「图片」输入类型")
+					? react.createElement("span", { className: "dkm-sub" }, "还没有标记图片能力的模型——在下方给你确认支持图片的模型勾选「图片」并保存")
 					: null),
 			react.createElement("div", { className: "dkm-sub" },
-				"判定与官方运行时同源：「图片」勾选（或目录默认）= 端点原生支持、原图直发；其余模型收图自动走视觉模型。注意：若端点实际不认图却勾了「图片」，模型会看不见图片、转而用工具瞎折腾——不确定就不要勾，交给代理。"),
+				"以你在下方勾选的「图片」为准；运行时识别只是辅助提示。它不代表已联网实测可调用，实际可用性仍取决于 Provider 凭据、额度与上游服务。若端点实际不认图，取消该模型的「图片」勾选即可恢复走图片理解代理。"),
 			vpDirect.length > 0
-				? react.createElement("div", { className: "dkm-checks" },
-					react.createElement("span", { className: "dkm-label" }, "原图直发（多模态，" + vpDirect.length + "）："),
-					vpDirect.map((c) => react.createElement("span", { key: c.key, className: "dkm-chip", title: c.key }, c.model)))
+				? react.createElement("div", { className: "dkm-capabilities" },
+					react.createElement("div", { className: "dkm-checks" },
+						react.createElement("span", { className: "dkm-label" }, "原图直发候选（你的标记优先，" + vpDirect.length + "）："),
+						react.createElement("button", {
+							type: "button",
+							className: "dkm-mini",
+							"aria-expanded": vpDirectExpanded,
+							onClick: () => setVpDirectExpanded(!vpDirectExpanded)
+						}, vpDirectExpanded ? "收起列表" : "展开列表")),
+					vpDirectExpanded
+						? react.createElement("div", { className: "dkm-checks dkm-capability-list" },
+							vpDirect.map((c) => react.createElement("span", { key: c.key, className: "dkm-chip", title: c.key + " · " + c.source }, c.model)))
+						: null)
 				: null,
 			vpProxied.length > 0
 				? react.createElement("div", { className: "dkm-checks" },
-					react.createElement("span", { className: "dkm-label" }, "走视觉代理（纯文本，" + vpProxied.length + "）："),
+						react.createElement("span", { className: "dkm-label" }, "走视觉代理（未标记图片，" + vpProxied.length + "）："),
 					react.createElement("span", { className: "dkm-sub" }, vpProxied.map((c) => c.model).join("、")))
 				: null,
 			react.createElement("div", { className: "dkm-savebar" },
@@ -377,7 +417,7 @@ function ModelsView() {
 			react.createElement("div", { className: "dkm-savebar" },
 				react.createElement("span", { className: "dkm-msg" }, dirty ? "有未保存的修改" : "无未保存修改"),
 				react.createElement("button", { type: "button", className: "dkm-save", disabled: !dirty || saving, onClick: save }, saving ? "保存中…" : "保存写回官方配置"),
-				react.createElement("button", { type: "button", className: "dkb-refresh", disabled: saving, onClick: () => { setBuiltKey(null); modelsStore.load(); } }, "重新拉取"),
+				react.createElement("button", { type: "button", className: "dkb-refresh", disabled: saving || snap.loading, onClick: refreshModels }, snap.loading ? "刷新中…" : "重新拉取"),
 				msg ? react.createElement("span", { className: "dkm-msg " + (msg.ok ? "ok" : "err") }, msg.text) : null)));
 	}
 	return react.createElement("div", { className: "dkm-list" }, body);
@@ -401,6 +441,7 @@ export const feature = {
 	description: "编辑各 Provider 模型目录：输入类型（文本/图片 + 标注）与思考强度档位；写回官方配置热生效，会话模型选择器即时可选",
 	css: [
 		".dkm-note{color:var(--dsw-alias-label-secondary);font-size:12px;}",
+		".dkm-warn{color:var(--dsw-alias-state-warning-primary);}",
 		".dkm-error{color:var(--dsw-alias-state-error-primary);font-size:12px;}",
 		".dkm-chips{display:flex;flex-wrap:wrap;gap:6px;}",
 		".dkm-chip{cursor:pointer;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-secondary);border-radius:999px;padding:3px 12px;font-family:inherit;font-size:12px;}",
@@ -435,6 +476,9 @@ export const feature = {
 		".dkm-msg.ok{color:var(--dsw-alias-state-success-primary);}",
 		".dkm-msg.err{color:var(--dsw-alias-state-error-primary);}",
 		".dkm-list{display:flex;flex-direction:column;gap:8px;}",
+		".dkm-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}",
+		".dkm-capabilities{display:flex;flex-direction:column;gap:6px;}",
+		".dkm-capability-list{max-height:168px;overflow:auto;padding:2px 0 2px 2px;}",
 		".dkm-ro{color:var(--dsw-alias-label-secondary);font-size:12px;}",
 		".dkm-mini{cursor:pointer;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-tertiary);border-radius:999px;padding:1px 8px;font-family:inherit;font-size:11px;flex:none;}",
 		".dkm-mini:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-secondary);}",

package/features/theme/view.js

@@ -1,27 +1,52 @@
 // dsh-dock · 功能模块【主题信息】· 客户端视图（纯 Client 功能，无宿主半部）
 import react from "react";
+import { useEffect, useState } from "react";
 
-function readThemeLabel(ctx) {
+// dsh 客户端主题服务（@deepseek-ai/dsh-client-ui-theme 的 ctx.provide("theme", ...)）快照结构：
+//   { preference: 'light'|'dark'|'system', active: { id, colorScheme, tokens }, themes, revision }
+// preference 是用户偏好；active.id 是解析后的实际生效主题（preference 为 system 时落到 light/dark）。
+// 注意：快照顶层没有 id/name 字段——直接读 snap.id 只会得到 undefined（曾导致本页显示"未知"）。
+const PREFERENCE_LABELS = { light: "亮色", dark: "暗色", system: "跟随系统" };
+const THEME_LABELS = { light: "亮色", dark: "暗色" };
+
+function readThemeInfo(ctx) {
 	const theme = ctx && ctx.get ? ctx.get("theme") : undefined;
-	if (theme === undefined) return { err: "theme 服务不可用" };
+	if (!theme || typeof theme.getTheme !== "function") return { err: "theme 服务不可用" };
 	let snap = null;
-	try { snap = theme.getTheme(); }
-	catch (err) { return { err: "读取失败：" + String((err && err.message) || err) }; }
-	const label = snap && typeof snap.id === "string" ? snap.id
-		: snap && typeof snap.name === "string" ? snap.name : "未知";
+	try { snap = theme.getTheme(); } catch (err) { return { err: "读取失败：" + String((err && err.message) || err) }; }
+	const preference = snap && typeof snap.preference === "string" ? snap.preference : "";
+	const activeId = snap && snap.active && typeof snap.active.id === "string" ? snap.active.id : "";
+	// 偏好 → 中文；system 且实际主题与偏好不同名时补注实际生效值（跟随系统 = 亮色/暗色）
+	const label = (PREFERENCE_LABELS[preference] || preference || "未知")
+		+ (activeId && activeId !== preference && THEME_LABELS[activeId] ? "（实际" + THEME_LABELS[activeId] + "）" : "");
 	return { label };
 }
 
+function useThemeInfo(ctx) {
+	const [info, setInfo] = useState(() => readThemeInfo(ctx));
+	useEffect(() => {
+		// 设置页「外观」行切换主题时实时刷新（快照 revision 递增，theme/change 事件广播）
+		let off = null;
+		try {
+			if (ctx && typeof ctx.on === "function") {
+				off = ctx.on("theme/change", () => setInfo(readThemeInfo(ctx)));
+			}
+		} catch { /* 无订阅能力时降级为静态显示 */ }
+		return () => { try { if (typeof off === "function") off(); } catch { /* 清理失败静默 */ } };
+	}, [ctx]);
+	return info;
+}
+
 function ThemeView(props) {
-	const r = readThemeLabel(props && props.ctx);
+	const r = useThemeInfo(props && props.ctx);
 	if (r.err) return react.createElement("div", null, r.err);
 	return react.createElement("div", null, "当前主题：" + r.label);
 }
 
 function ThemeStat(props) {
-	const r = readThemeLabel(props && props.ctx);
+	const r = useThemeInfo(props && props.ctx);
 	if (r.err) return react.createElement("span", null, r.err);
-	return react.createElement("span", null, "当前主题：" + r.label);
+	return react.createElement("span", null, "主题：" + r.label);
 }
 
 export const feature = {
@@ -29,7 +54,7 @@ export const feature = {
 	name: "主题信息",
 	order: 150,
 	accent: "#a78bfa",
-	description: "示例功能：读取当前主题快照（纯 Client）",
+	description: "读取当前主题快照：偏好与实际生效主题（纯 Client，主题切换实时刷新）",
 	View: ThemeView,
 	HomeStat: ThemeStat,
 };

package/features/tokenlog/view.jsx

@@ -540,9 +540,11 @@ export function TokenLogChip(props) {
 	}, [sid]);
 	if (!sid) return null;
 	const t = snap.totals;
+	// chip 文案用紧凑金额（2 位小数）：fmtCost 对小金额输出 6 位小数，chip 里太长会撑爆输入卡工具行；
+	// 完整金额在 title 悬浮提示里。
 	const label = snap.err && !t
 		? (snap.err.includes("重启") ? "用量·需重启宿主" : "用量·失败")
-		: (t ? "⛁ " + fmtCompact(t.totalTokens) + (t.cost > 0 ? " · " + fmtCost(t.cost) : "") : "⛁ …");
+		: (t ? "⛁ " + fmtCompact(t.totalTokens) + (t.cost > 0 ? " · $" + t.cost.toFixed(2) : "") : "⛁ …");
 	const title = t
 		? "本会话 " + fmtNum(t.calls) + " 次调用 · " + fmtNum(t.totalTokens) + " Token · " + fmtCost(t.cost) + "（估算）\n点击在功能坞查看用量记录"
 		: (snap.err ? snap.err + "\n" : "") + "点击在功能坞查看用量记录";

package/features/visionproxy/host.js

@@ -20,6 +20,17 @@ function contentHasImageDeep(content) {
   return false
 }
 
+/**
+ * 用户在 dsh-dock 模型设置里勾选「图片」后的声明。
+ * 这不是联网探测结果，而是明确让用户决定端点能力：声明后原图直发，
+ * 未声明时才继续参考运行时目录或走图片理解代理。
+ */
+function hasUserDeclaredImage(directory, provider, model) {
+  const p = (directory.providers || []).find((x) => x && x.id === provider)
+  const m = p && Array.isArray(p.models) ? p.models.find((x) => x && x.id === model) : undefined
+  return !!(m && Array.isArray(m.input) && m.input.includes('image'))
+}
+
 /** 让视觉模型描述一张图片，返回识别文本（失败抛错）。 */
 async function describeImage(deps, cfg, block, signal) {
   const prompt = '请用中文详细描述这张图片的内容：主体、文字（若有则逐字转写）、数据/图表要点、与编码任务相关的细节。控制在 300 字以内，直接输出描述，不要客套。'
@@ -127,10 +138,19 @@ async function transformForVisionProxy(deps, options) {
     if (!options.messages.some((m) => m && contentHasImageDeep(m.content))) return options
     log(`带图请求 ${options.provider}/${options.model}`)
 
-    // 目标模型是否支持图片：优先问运行时（llm.resolveModelInfo，与官方投影同源：
-    // entry.input → 内置目录 → 路由默认），避免插件目录误判"靠内置目录继承多模态"的
-    // 模型（如 kimi-k2.7，条目未写 input 但目录里是 [text,image]）；
-    // 旧宿主无此方法或单次解析失败时，退回插件目录视图兜底。
+    // 图片能力判定的优先级：用户在模型设置里勾选「图片」优先。
+    // 运行时目录只是自动提示，无法识别或识别错误时不能覆盖用户的明确决定。
+    // 这让 kimi-k2.7-code 等端点可由用户声明多模态并原图直发；若端点实际不支持，
+    // 上游会返回错误，用户取消勾选即可恢复走图片理解代理。
+    const directory = deps.directory()
+    if (hasUserDeclaredImage(directory, options.provider, options.model)) {
+      log(`跳过 ${options.provider}/${options.model}：用户已声明图片能力（原图直发）`)
+      return options
+    }
+
+    // 未声明时再问运行时（llm.resolveModelInfo，与官方投影同源：
+    // entry.input → 内置目录 → 路由默认）；旧宿主无此方法或单次解析失败时，
+    // 保守走图片理解代理，避免猜错端点能力。
     let imageCapable
     try {
       const info = deps.resolveModelInfo ? await deps.resolveModelInfo(options.provider, options.model) : undefined
@@ -138,12 +158,6 @@ async function transformForVisionProxy(deps, options) {
     } catch {
       // 落到目录回退
     }
-    if (imageCapable === undefined) {
-      const dir = deps.directory()
-      const p = (dir.providers || []).find((x) => x.id === options.provider)
-      const m = p && Array.isArray(p.models) ? p.models.find((x) => x.id === options.model) : undefined
-      imageCapable = !!(m && Array.isArray(m.input) && m.input.includes('image'))
-    }
     if (imageCapable) {
       log(`跳过 ${options.provider}/${options.model}：运行时判定多模态（原图直发）`)
       return options

package/index.js

@@ -12,12 +12,13 @@
 //   - visionproxy 图片理解代理（v0.3.1）：纯文本模型收图自动走视觉模型识别
 //   - balance     模型余额（v0.2.0）：各 Provider 账户余额/配额
 //   - tokenlog    用量记录（v0.4.0）：LLM 调用记账与统计（移植自 @wycto/dsh-token-usage）
-//   - animation   任务动画（路线图 0.5.0 占位）
+//   - animation   任务动画（v0.5.0）：会话任务追踪 + 动效/通知配置持久化（参照 @wycto/dsh-task-pulse）
 import { DOCK_NS, DockConfig } from './src/host-core.js'
 import { feature as fModels } from './features/modelconfig/host.js'
 import { feature as fVisionProxy } from './features/visionproxy/host.js'
 import { feature as fBalance } from './features/balance/host.js'
 import { feature as fTokenlog } from './features/tokenlog/host.js'
+import { feature as fAnimation } from './features/animation/host.js'
 
 export const name = 'dsh-dock'
 
@@ -36,12 +37,7 @@ export function apply(ctx) {
     fVisionProxy,
     fBalance,
     fTokenlog,
-    {
-      id: 'animation',
-      name: '任务动画',
-      roadmap: '0.5.0',
-      description: '任务进度动画与通知',
-    },
+    fAnimation,
   ]
 
   const state = new Map()
@@ -80,8 +76,8 @@ export function apply(ctx) {
   }
 
   // 默认启用已实现的功能（与 Client 半部 defaultEnabled 对齐）。
-  // 目前 Host↔Client 的开关同步在 0.5.0（持久化 + 双侧注册表打通）落地，
-  // 在此之前 Host 侧开关以本处 defaultEnabled 为准。
+  // Client 侧功能开关已 localStorage 持久化（v0.5.0）；Host↔Client 的开关双向同步仍未打通，
+  // 在此之前 Host 侧开关以本处 defaultEnabled 为准（面板停用某功能只影响浏览器侧 UI）。
   for (const f of FEATURES) {
     if (f.defaultEnabled) setEnabled(f.id, true)
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-dock",
-  "version": "0.4.1",
-  "description": "DeepSeek Harness 功能坞插件（dsh-dock）：模块化功能中枢——每个功能一个 features/ 模块（可单独提取成包发布，又可经 dockBridge 装回面板）。含用量记录（LLM 调用记账/费用统计）、模型设置、图片理解代理、模型余额；侧栏入口 + 可拖拽弹窗（最大化/最小化/缩放）。",
+  "version": "0.6.0",
+  "description": "DeepSeek Harness 功能坞插件（dsh-dock）：模块化功能中枢——每个功能一个 features/ 模块（可单独提取成包发布，又可经 dockBridge 装回面板）。含用量记录（LLM 调用记账/费用统计）、模型设置、图片理解代理、模型余额、任务动画（8 种氛围动效 + 桌面伙伴 3D 场景、完成通知与提示音、钉钉/飞书推送，开关独立、配置持久化）；侧栏入口 + 可拖拽弹窗（最大化/最小化/缩放）。",
   "type": "module",
   "main": "index.js",
   "files": [