@mars-sea/dsh-commandcode-provider 0.8.4 → 0.10.0-alpha.1

package/lib/client.js

@@ -4,17 +4,146 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
 		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/snapshot-store.ts
+		/** Notify every subscriber without letting one faulty UI consumer suppress the rest. */
+		function notifyListeners(listeners) {
+			for (const listener of listeners) try {
+				listener();
+			} catch (error) {
+				console.error("[dsh-commandcode-provider] snapshot subscriber failed:", error);
+			}
+		}
+		/** Create one observable snapshot store. */
+		function createSnapshotStore(initial) {
+			let snapshot = initial;
+			const listeners = /* @__PURE__ */ new Set();
+			return {
+				getSnapshot: () => snapshot,
+				subscribe(listener) {
+					listeners.add(listener);
+					return () => {
+						listeners.delete(listener);
+					};
+				},
+				set(value) {
+					if (Object.is(value, snapshot)) return;
+					snapshot = value;
+					notifyListeners(listeners);
+				}
+			};
+		}
+		//#endregion
+		//#region src/command-locales.ts
+		const commandcodeCommand = {
+			zh: {
+				title: "📊 Command Code 用量{account}",
+				accountTitle: "📊 {label}{badges}",
+				accountSeparator: "────────────────────",
+				activeBadge: "  ✅ 当前使用",
+				invalidCredentialBadge: "  ⛔ 密钥无效",
+				cooldownBadge: "  ⏳ 限额冷却中，重置 {when}",
+				rateLimitBadge: "  ⏳ 已达限额（等待窗口探测）",
+				unconfigured: "  (未配置 API 密钥)",
+				blockedInvalidKey: "⛔ API 密钥无效或已过期 — 服务端拒绝了全部请求（401），请检查该账户的密钥配置",
+				blockedServiceUnavailable: "⚠️ Command Code 服务暂时不可用（5xx），稍后重试",
+				blockedNetwork: "⚠️ 无法连接 Command Code 服务 — 请检查网络或 API 地址",
+				planLine: "  📦 套餐    {name}{status}{period}",
+				planPeriodSuffix: " · 账期截止 {date}",
+				usageHeader: "── 请求 ──────────────────────────────",
+				requestsLine: "  💬 请求    {n} 次 / 失败 {f}  成功率 {r}%",
+				costLine: "  💰 花费    {money}  ({credits} credits)",
+				tokensLine: "  🔤 Token   {in} 入 / {out} 出",
+				creditsHeader: "── 信用 ──────────────────────────────",
+				monthlyLine: "  💳 月额度  {monthly}   (已购 {purchased} / 赠送 {free})",
+				barLine: "     └ {bar}  {pct}%",
+				windowsHeader: "── 窗口用量 ──────────────────────────",
+				fiveHourLine: "  ⏱ 5 小时  {used} / {cap}{warn}",
+				weeklyLine: "  📅 每周    {used} / {cap}{warn}",
+				windowBarLine: "     └ {bar}  重置 {when}",
+				exceededWarning: "  ⚠️ 超限!",
+				resetSuffix: "重置 {when}",
+				partialFailures: "⚠️  部分端点失败: {list}",
+				noData: "(no data — check your API key)",
+				errorText: "Could not fetch Command Code usage: {message}",
+				imageGate: "当前会话已包含图片，而模型 {model} 不支持图片输入；请选择支持图片的模型，或先移除会话中的图片。"
+			},
+			en: {
+				title: "📊 Command Code usage{account}",
+				accountTitle: "📊 {label}{badges}",
+				accountSeparator: "────────────────────",
+				activeBadge: "  ✅ active",
+				invalidCredentialBadge: "  ⛔ invalid key",
+				cooldownBadge: "  ⏳ cooling down, resets {when}",
+				rateLimitBadge: "  ⏳ rate-limited (waiting for window probe)",
+				unconfigured: "  (no API key configured)",
+				blockedInvalidKey: "⛔ API key invalid or expired — the server rejected every request (401); check the key configured for this account",
+				blockedServiceUnavailable: "⚠️ Command Code service temporarily unavailable (5xx); try again later",
+				blockedNetwork: "⚠️ could not reach the Command Code service — check your network or the API base setting",
+				planLine: "  📦 Plan     {name}{status}{period}",
+				planPeriodSuffix: " · period ends {date}",
+				usageHeader: "── Requests ──────────────────────────",
+				requestsLine: "  💬 Requests {n} / failed {f}  success rate {r}%",
+				costLine: "  💰 Spend    {money}  ({credits} credits)",
+				tokensLine: "  🔤 Tokens   {in} in / {out} out",
+				creditsHeader: "── Credits ───────────────────────────",
+				monthlyLine: "  💳 Monthly  {monthly}   (purchased {purchased} / free {free})",
+				barLine: "     └ {bar}  {pct}%",
+				windowsHeader: "── Window usage ──────────────────────",
+				fiveHourLine: "  ⏱ 5-hour   {used} / {cap}{warn}",
+				weeklyLine: "  📅 Weekly   {used} / {cap}{warn}",
+				windowBarLine: "     └ {bar}  resets {when}",
+				exceededWarning: "  ⚠️ exceeded!",
+				resetSuffix: "resets {when}",
+				partialFailures: "⚠️  some endpoints failed: {list}",
+				noData: "(no data — check your API key)",
+				errorText: "Could not fetch Command Code usage: {message}",
+				imageGate: "This session already contains images, and model {model} does not accept image input; please select an image-capable model, or remove the images from the session first."
+			}
+		};
+		//#endregion
 		//#region src/client/sessions.ts
+		/**
+		* Friendly-error wrapper for the harness's image-session gate.
+		*
+		* The host rejects switching to a text-only model while the session already
+		* contains images with a `model-unavailable` error
+		* (`dsh-host-apiproxy`'s `session.selectModel` handler). That rejection is
+		* intentional and cannot be relaxed from the plugin side — the adapter's
+		* `inputModalities` is exactly what makes the guard work. What we CAN do is
+		* make the error message friendlier: wrap the shared
+		* `connection.api.sessions.selectModel` face so a `model-unavailable`
+		* rejection shows a clear, actionable hint (with the requested model name)
+		* instead of the raw English harness message.
+		*
+		* The wrapper is deliberately narrow: only the `model-unavailable` code is
+		* rewritten, only when the message matches the image-session gate, and only
+		* the message text changes — the error code and details pass through
+		* untouched so any caller that switches on `error.code` keeps working.
+		*
+		* The wire types are spelled structurally here (not imported from
+		* `@deepseek-ai/dsh-host-apiproxy`) so this client bundle does not drag an
+		* extra peer dependency into the package; the shapes are stable and the
+		* client build inlines them anyway.
+		*
+		* The wrapper takes a `getLocale` thunk because it is reached from a
+		* non-React path that has no `t` in scope; the supplied thunk reads the
+		* active locale at call time (typically `() => ctx.locale.getLocale().active`
+		* in the client entry), and the message template lives in the shared
+		* `commandcodeCommand` dictionary used by the Host-side `/commandcode`
+		* command — the same bilingual surface serves both.
+		*
+		* This module is deliberately free of React and other client-platform
+		* imports so the node test runner can exercise it directly.
+		*/
 		/** Whether a selectModel rejection is the harness's image-session gate. */
 		function isImageSessionRejection(result) {
 			return !result.result.ok && result.result.error.code === "model-unavailable" && result.result.error.message.includes("does not accept image input");
 		}
 		/** Wrap the shared sessions API so selectModel failures read friendlier. */
-		function withFriendlyImageError(sessions) {
+		function withFriendlyImageError(sessions, getLocale) {
 			const selectModel = sessions.selectModel.bind(sessions);
 			return {
 				...sessions,
@@ -22,25 +151,63 @@ window.__ModuleLoader__.load({
 					const result = await selectModel(payload, signal);
 					if (!isImageSessionRejection(result)) return result;
 					const model = result.result.error.details?.model ?? payload.model;
+					const template = commandcodeCommand[getLocale()].imageGate ?? commandcodeCommand.en.imageGate;
 					return {
 						...result,
 						result: {
 							...result.result,
 							error: {
 								...result.result.error,
-								message: `当前会话已包含图片，而模型 ${model} 不支持图片输入；请选择支持图片的模型，或先移除会话中的图片。`
+								message: template.replace("{model}", model)
 							}
 						}
 					};
 				}
 			};
 		}
-		/** Install the wrapper on a connection's shared sessions face. */
-		function installFriendlyImageError(connection) {
-			connection.api.sessions = withFriendlyImageError(connection.api.sessions);
+		/**
+		* Install the friendly-error wrapper when a legacy sessions face is present.
+		*
+		* @returns whether the wrapper was installed. The rewrite is only UX polish;
+		* a 0.1.2 connection has no `api.sessions`, and its absence must never block
+		* the plugin from mounting its settings, credential, or usage surfaces.
+		*/
+		function installFriendlyImageError(connection, getLocale) {
+			const api = connection.api;
+			const sessions = api?.sessions;
+			if (api === void 0 || sessions === void 0 || typeof sessions.selectModel !== "function") return false;
+			api.sessions = withFriendlyImageError(sessions, getLocale);
+			return true;
 		}
 		//#endregion
 		//#region src/client/settings.ts
+		/**
+		* Browser controller for the "Command Code" settings page.
+		*
+		* The page lives at the same settings-nav level as General / Models / Plugins
+		* (a `settings.section` entry, id `commandcode`). It exists because the
+		* Models page renders an unknown-adapter-family card for the `commandcode`
+		* provider and deliberately disables its submit — the API key cannot be
+		* configured there. This page owns the connection facts the plugin resolves
+		* per request:
+		*
+		*   - API key   -> written through the credentials domain under the reference
+		*                  the plugin resolves (`apiKeyEnv`, default
+		*                  `COMMANDCODE_API_KEY`). The literal never rides a response,
+		*                  so the control only reports whether one is configured.
+		*   - API base  -> the `llm-commandcode` settings namespace (`apiBase`), same
+		*                  namespace the Models page card addresses.
+		*   - Working dir, request/stream timeouts -> the same namespace.
+		*
+		* The controller mirrors the plugin-card pattern from the harness's own
+		* settings UI: it binds the `llm-commandcode` namespace through the
+		* `settingsScope` service, keeps a staged draft of edits, and writes them on
+		* save through `scope.set` / the credentials domain. The Host stays the
+		* single fact source; the snapshot is republished after each accepted write.
+		*
+		* This module is deliberately free of JSX — it only produces the state face
+		* the React component renders.
+		*/
 		/** The settings namespace the plugin registers (host half, src/index.ts). */
 		const COMMANDCODE_NS = "llm-commandcode";
 		/** Default credential reference the plugin resolves when none is named. */
@@ -505,10 +672,7 @@ window.__ModuleLoader__.load({
 			/** Write one account's key, then re-read the Host's credential states. */
 			async writeKeyTo(ref, value) {
 				try {
-					if (!(await this.api.credentials.set({
-						ref,
-						value
-					})).result.ok) return false;
+					if (!(await this.api.credentials.set(ref, value)).ok) return false;
 				} catch {
 					return false;
 				}
@@ -524,14 +688,14 @@ window.__ModuleLoader__.load({
 				];
 				let response;
 				try {
-					response = await this.api.credentials.describe({ refs });
+					response = await this.api.credentials.describe(refs);
 				} catch {
 					return;
 				}
-				if (!response.result.ok) return;
+				if (!response.ok) return;
 				let changed = false;
 				for (const ref of refs) {
-					const view = response.result.value.credentials[ref];
+					const view = response.value?.[ref];
 					const next = {
 						configured: view?.configured ?? false,
 						writable: view?.writable ?? true
@@ -609,7 +773,7 @@ window.__ModuleLoader__.load({
 			/** Unset one stored credential, then re-read the Host's credential states. */
 			async unsetKey(ref) {
 				try {
-					if (!(await this.api.credentials.unset({ ref })).result.ok) return false;
+					if (!(await this.api.credentials.unset(ref)).ok) return false;
 				} catch {
 					return false;
 				}
@@ -649,6 +813,47 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
+		//#region src/client/legacy-credentials.ts
+		/** Convert a legacy credentials ApiProxy into the current settings-page face. */
+		function adaptLegacyCredentials(legacy) {
+			if (legacy === void 0) return void 0;
+			return { credentials: {
+				describe: async (refs) => {
+					const response = await legacy.describe({ refs });
+					return response.result.ok ? {
+						ok: true,
+						value: response.result.value.credentials
+					} : {
+						ok: false,
+						error: response.result.error
+					};
+				},
+				set: async (ref, value) => {
+					const response = await legacy.set({
+						ref,
+						value
+					});
+					return response.result.ok ? {
+						ok: true,
+						value: void 0
+					} : {
+						ok: false,
+						error: response.result.error
+					};
+				},
+				unset: async (ref) => {
+					const response = await legacy.unset({ ref });
+					return response.result.ok ? {
+						ok: true,
+						value: void 0
+					} : {
+						ok: false,
+						error: response.result.error
+					};
+				}
+			} };
+		}
+		//#endregion
 		//#region src/client/usage.ts
 		const IDLE = {
 			status: "idle",
@@ -1197,7 +1402,7 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region package.json
-		var version = "0.8.4";
+		var version = "0.10.0-alpha.1";
 		var repository = {
 			"type": "git",
 			"url": "git+https://github.com/Mars-Sea/dsh-commandcode-provider.git"
@@ -1377,9 +1582,19 @@ window.__ModuleLoader__.load({
 		*
 		* The layout mirrors the harness's settings pages: a max-width content
 		* column, labelled fields with hints, a reset affordance, and a
-		* save/discard footer. Styles are injected once by the client entry
+		* save/discard footer. Rarely touched connection facts (API base, working
+		* directory, timeouts, plan filter) fold into a collapsed Advanced card
+		* (`AdvancedSection`) so the page leads with the key and the usage facts.
+		* Styles are injected once by the client entry
 		* (see src/client/index.ts) and class-prefixed `cc-` to stay local.
 		*/
+		const ADVANCED_FIELDS = [
+			"apiBase",
+			"workingDir",
+			"requestTimeoutMs",
+			"streamIdleTimeoutMs",
+			"filterModelsByPlan"
+		];
 		/** One labelled field row in the page body. */
 		function Field({ id, label, hint, state, disabled, numeric, placeholder, onEdit, onReset, t }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1429,6 +1644,114 @@ window.__ModuleLoader__.load({
 			return t("invalidNumber");
 		}
 		/**
+		* The collapsed "Advanced" card: API base, working dir, both timeouts, and
+		* the plan filter live here so the page leads with the facts a user actually
+		* touches. Starts collapsed on every visit; expands on demand. While
+		* collapsed, a badge names the customized count so a nonzero override stays
+		* visible (a number field's error blocks save and must be reachable).
+		*/
+		function AdvancedSection({ state, disabled, t, onEdit, onReset }) {
+			const [expanded, setExpanded] = (0, react.useState)(false);
+			const overridden = ADVANCED_FIELDS.filter((field) => state[field].overridden).length;
+			const invalid = ADVANCED_FIELDS.some((field) => state[field].invalid);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-card",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "cc-advancedHead",
+						"aria-expanded": expanded,
+						"aria-controls": "cc-advanced-body",
+						onClick: () => setExpanded((value) => !value),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-advancedTitle",
+								children: t("advancedSettings")
+							}),
+							overridden > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-badge",
+								children: overridden === 1 ? t("advancedOverriddenOne") : t("advancedOverriddenMany").replace("{count}", String(overridden))
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-advancedSpacer" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: expanded ? "cc-chevron cc-chevronUp" : "cc-chevron",
+								"aria-hidden": "true"
+							})
+						]
+					}),
+					expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						id: "cc-advanced-body",
+						className: "cc-advancedBody",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-hint",
+								children: t("advancedSettingsHint")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-api-base",
+								label: t("apiBase"),
+								hint: t("apiBaseHint"),
+								state: state.apiBase,
+								disabled,
+								onEdit: (text) => onEdit("apiBase", text),
+								onReset: () => onReset("apiBase"),
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-working-dir",
+								label: t("workingDir"),
+								hint: t("workingDirHint"),
+								state: state.workingDir,
+								disabled,
+								placeholder: state.defaultWorkingDir,
+								onEdit: (text) => onEdit("workingDir", text),
+								onReset: () => onReset("workingDir"),
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-request-timeout",
+								label: t("requestTimeoutMs"),
+								hint: t("requestTimeoutMsHint"),
+								state: state.requestTimeoutMs,
+								disabled,
+								numeric: true,
+								onEdit: (text) => onEdit("requestTimeoutMs", text),
+								onReset: () => onReset("requestTimeoutMs"),
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+								id: "cc-stream-idle-timeout",
+								label: t("streamIdleTimeoutMs"),
+								hint: t("streamIdleTimeoutMsHint"),
+								state: state.streamIdleTimeoutMs,
+								disabled,
+								numeric: true,
+								onEdit: (text) => onEdit("streamIdleTimeoutMs", text),
+								onReset: () => onReset("streamIdleTimeoutMs"),
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
+								id: "cc-filter-models-by-plan",
+								label: t("filterModelsByPlan"),
+								hint: t("filterModelsByPlanHint"),
+								state: state.filterModelsByPlan,
+								disabled,
+								defaultChecked: true,
+								onEdit: (text) => onEdit("filterModelsByPlan", text),
+								onReset: () => onReset("filterModelsByPlan"),
+								t
+							})
+						]
+					}) : null,
+					expanded && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-invalid",
+						role: "status",
+						children: t("advancedInvalid")
+					}) : null
+				]
+			});
+		}
+		/**
 		* One boolean field row rendered as a toggle. The staged text is `'true'` /
 		* `'false'` / `''` (unset → `defaultChecked`); toggling stages the string the
 		* boolean field spec parses back into a real boolean on save.
@@ -1536,7 +1859,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/** The per-reason copy for a failed login attempt. */
-		function loginFailureCopy(reason, t) {
+		function loginFailureCopy$1(reason, t) {
 			if (reason === "denied") return t("loginDenied");
 			if (reason === "timeout") return t("loginTimeout");
 			if (reason === "invalid-key") return t("loginInvalidKey");
@@ -1562,7 +1885,7 @@ window.__ModuleLoader__.load({
 				hint = `${t("loginSuccess")} ${state.userName ?? ""}${keyName}`.trim();
 				hintClass = "cc-loginDone";
 			} else if (state.phase === "failed") {
-				hint = loginFailureCopy(state.reason, t);
+				hint = loginFailureCopy$1(state.reason, t);
 				hintClass = "cc-loginError";
 				if (state.message !== void 0) hintTitle = state.message;
 			} else if (state.phase === "unavailable") {
@@ -2230,86 +2553,36 @@ window.__ModuleLoader__.load({
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-card",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecretKeyField, {
-								label: t("apiKey"),
-								hint: keyLocked ? t("apiKeyLocked") : t("apiKeyHint"),
-								state: state.apiKey,
-								disabled: disabled || keyLocked,
-								configured: state.apiKeyConfigured,
-								configuredLabel: t("apiKeySet"),
-								unconfiguredLabel: t("apiKeyUnset"),
-								clearStaged: state.apiKeyClearStaged,
-								showLabel: t("show"),
-								hideLabel: t("hide"),
-								clearLabel: t("usageKeyClear"),
-								clearStagedLabel: t("usageKeyClearStaged"),
-								undoClearLabel: t("usageUndoKeyClear"),
-								onEdit: (text) => props.edit("apiKey", text),
-								onToggleClear: () => props.toggleKeyClear("default")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoginPanel, {
-								state: login,
-								disabled: disabled || keyLocked,
-								t,
-								onBegin: props.beginLogin,
-								onCancel: props.cancelLogin
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-api-base",
-								label: t("apiBase"),
-								hint: t("apiBaseHint"),
-								state: state.apiBase,
-								disabled,
-								onEdit: (text) => props.edit("apiBase", text),
-								onReset: () => props.resetField("apiBase"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-working-dir",
-								label: t("workingDir"),
-								hint: t("workingDirHint"),
-								state: state.workingDir,
-								disabled,
-								placeholder: state.defaultWorkingDir,
-								onEdit: (text) => props.edit("workingDir", text),
-								onReset: () => props.resetField("workingDir"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-request-timeout",
-								label: t("requestTimeoutMs"),
-								hint: t("requestTimeoutMsHint"),
-								state: state.requestTimeoutMs,
-								disabled,
-								numeric: true,
-								onEdit: (text) => props.edit("requestTimeoutMs", text),
-								onReset: () => props.resetField("requestTimeoutMs"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-								id: "cc-stream-idle-timeout",
-								label: t("streamIdleTimeoutMs"),
-								hint: t("streamIdleTimeoutMsHint"),
-								state: state.streamIdleTimeoutMs,
-								disabled,
-								numeric: true,
-								onEdit: (text) => props.edit("streamIdleTimeoutMs", text),
-								onReset: () => props.resetField("streamIdleTimeoutMs"),
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleField, {
-								id: "cc-filter-models-by-plan",
-								label: t("filterModelsByPlan"),
-								hint: t("filterModelsByPlanHint"),
-								state: state.filterModelsByPlan,
-								disabled,
-								defaultChecked: true,
-								onEdit: (text) => props.edit("filterModelsByPlan", text),
-								onReset: () => props.resetField("filterModelsByPlan"),
-								t
-							})
-						]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecretKeyField, {
+							label: t("apiKey"),
+							hint: keyLocked ? t("apiKeyLocked") : t("apiKeyHint"),
+							state: state.apiKey,
+							disabled: disabled || keyLocked,
+							configured: state.apiKeyConfigured,
+							configuredLabel: t("apiKeySet"),
+							unconfiguredLabel: t("apiKeyUnset"),
+							clearStaged: state.apiKeyClearStaged,
+							showLabel: t("show"),
+							hideLabel: t("hide"),
+							clearLabel: t("usageKeyClear"),
+							clearStagedLabel: t("usageKeyClearStaged"),
+							undoClearLabel: t("usageUndoKeyClear"),
+							onEdit: (text) => props.edit("apiKey", text),
+							onToggleClear: () => props.toggleKeyClear("default")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoginPanel, {
+							state: login,
+							disabled: disabled || keyLocked,
+							t,
+							onBegin: props.beginLogin,
+							onCancel: props.cancelLogin
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedSection, {
+						state,
+						disabled,
+						t,
+						onEdit: props.edit,
+						onReset: props.resetField
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-footer",
@@ -2364,6 +2637,260 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/card.tsx
+		/**
+		* The Command Code provider card inside the harness Models settings page
+		* (browser half). Rendered through the `settings.models.provider-card` keyed
+		* slot available in dsh 0.1.2-alpha.2, registered with
+		* `entryKey = 'llm-commandcode'` (the plugin's settings namespace, the key the
+		* Models page dispatches for every Command Code provider row).
+		*
+		* The slot's owner props (`configured`, `keyConfigured`) mirror what the
+		* Models page already knows; the authoritative credential facts still come
+		* from this plugin's `CommandCodeSettingsController` shared with the dedicated
+		* settings page, so the two surfaces can never disagree about whether a key
+		* is stored.
+		*
+		* Not configured: an "Unconfigured" badge, a paste-a-key field, and the
+		* official sign-in button — the whole flow a first-run user needs, inline.
+		* Configured: a green "Configured" badge plus a pointer to the full
+		* Command Code settings page for rotation, usage, and connection facts.
+		*
+		* The card renders nothing until the shared controller's first snapshot is
+		* ready (`available`), which also keeps the stale-facts window of the older
+		* join from ever being visible. A controller-less render (card mounted before
+		* the section registered its inject face — the composition runs one apply)
+		* degrades to the stateless registration-notice form.
+		*
+		* Styles ride the page stylesheet the client entry injects once (`cc-`
+		* prefixed classes); the card adds no CSS of its own.
+		*/
+		/** Decide the card's posture from the injected face and the owner facts. */
+		function cardMode(props) {
+			if (props.useCommandCodeSettings === void 0) return { kind: "registration" };
+			const snapshot = props.useCommandCodeSettings((state) => state);
+			return {
+				kind: "live",
+				ready: snapshot.available,
+				controllerConfigured: snapshot.apiKeyConfigured,
+				writable: snapshot.writable,
+				apiKeyWritable: snapshot.apiKeyWritable
+			};
+		}
+		/** Status badge for the credential state (green when configured). */
+		function StatusBadge({ ok, okLabel, pendingLabel }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: ok ? "cc-badge" : "cc-badgeMuted",
+				children: ok ? okLabel : pendingLabel
+			});
+		}
+		/**
+		* The per-reason copy for a failed login attempt (mirrors the settings
+		* page's LoginPanel; the same reasons can surface from this card).
+		*/
+		function loginFailureCopy(reason, t) {
+			if (reason === "denied") return t("loginDenied");
+			if (reason === "timeout") return t("loginTimeout");
+			if (reason === "invalid-key") return t("loginInvalidKey");
+			if (reason === "network") return t("loginNetwork");
+			if (reason === "unavailable") return t("loginStoreFailed");
+			if (reason === "cancelled") return t("loginCancelled");
+			return t("loginFailedGeneric");
+		}
+		/** The sign-in affordance row for the not-configured card (see LoginPanel). */
+		function CardLoginRow({ state, disabled, t, onBegin, onCancel }) {
+			const busy = state.phase === "starting" || state.phase === "waiting";
+			let hint = t("loginHintIdle");
+			let hintClass = "cc-hint";
+			if (state.phase === "starting" || state.phase === "waiting") hint = t(state.phase === "starting" ? "loginStarting" : "loginWaiting");
+			else if (state.phase === "success") {
+				const keyName = state.keyName !== void 0 && state.keyName !== "" ? ` · ${state.keyName}` : "";
+				hint = `${t("loginSuccess")} ${state.userName ?? ""}${keyName}`.trim();
+				hintClass = "cc-loginDone";
+			} else if (state.phase === "failed") {
+				hint = loginFailureCopy(state.reason, t);
+				hintClass = "cc-loginError";
+			} else if (state.phase === "unavailable") {
+				hint = `${t("loginUnavailable")} ${state.message ?? ""}`.trim();
+				hintClass = "cc-loginError";
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-fieldHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-label",
+							children: t("loginTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-badges",
+							children: busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-reset",
+								onClick: onCancel,
+								children: t("loginCancel")
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-reset",
+								disabled,
+								onClick: onBegin,
+								children: t("loginButton")
+							})
+						})]
+					}),
+					state.authUrl !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-hint",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "cc-loginLink",
+							href: state.authUrl,
+							target: "_blank",
+							rel: "noreferrer",
+							children: t("loginOpenLink")
+						})
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: hintClass,
+						children: hint
+					})
+				]
+			});
+		}
+		/** Compact key field for the not-configured card. */
+		function CardKeyField({ state, disabled, t, onEdit }) {
+			const [visible, setVisible] = (0, react.useState)(false);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-fieldHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							className: "cc-label",
+							htmlFor: "cc-card-api-key",
+							children: t("apiKey")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cc-badges",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-reset",
+								disabled,
+								onClick: () => setVisible((value) => !value),
+								children: visible ? t("hide") : t("show")
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: "cc-card-api-key",
+						className: "cc-input",
+						type: visible ? "text" : "password",
+						autoComplete: "off",
+						spellCheck: false,
+						value: state.text,
+						disabled,
+						onChange: (event) => onEdit(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-hint",
+						children: t("apiKeyHint")
+					})
+				]
+			});
+		}
+		/** One "Configured" badge + pointer to the full settings page (footer area). */
+		function CardConfiguredBody({ t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cc-field",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "cc-hint",
+					children: t("cardConfiguredHint")
+				})
+			});
+		}
+		/**
+		* The slot component body. Dispatched on every Command Code provider card of
+		* the Models page (saved row, first-run setup posture, and add-provider
+		* draft).
+		*/
+		function CommandCodeProviderCard(props) {
+			const { t } = props;
+			const mode = cardMode(props);
+			const state = props.useCommandCodeSettings !== void 0 ? props.useCommandCodeSettings((snapshot) => snapshot) : void 0;
+			const login = props.useCommandCodeLogin !== void 0 ? props.useCommandCodeLogin((snapshot) => snapshot) : void 0;
+			const dirty = state?.dirty ?? false;
+			const saving = state?.saving ?? false;
+			const invalid = state?.invalid ?? false;
+			const failed = state?.failed ?? false;
+			const savingBlocked = !dirty || invalid;
+			const configured = mode.kind === "live" && mode.ready ? mode.controllerConfigured : props.keyConfigured;
+			const disabled = mode.kind === "live" && (!mode.writable || state !== void 0 && !mode.apiKeyWritable);
+			const showBody = mode.kind === "live" && mode.ready && state !== void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-providerCard",
+				"data-cc-models-card": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-field",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "cc-fieldHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-label",
+									children: t("cardTitle")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "cc-badges",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+										ok: configured,
+										okLabel: t("apiKeySet"),
+										pendingLabel: t("apiKeyUnset")
+									}), props.provider.active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cc-badge",
+										children: t("cardRouteActive")
+									}) : null]
+								})]
+							}),
+							mode.kind === "registration" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-hint",
+								children: t("cardRegistrationHint")
+							}) : null,
+							mode.kind === "live" && !mode.ready ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-hint",
+								children: t("cardLoadingHint")
+							}) : null
+						]
+					}),
+					showBody && !configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardKeyField, {
+							state: state.apiKey,
+							disabled,
+							t,
+							onEdit: (text) => props.edit("apiKey", text)
+						}),
+						login !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoginRow, {
+							state: login,
+							disabled,
+							t,
+							onBegin: props.beginLogin,
+							onCancel: props.cancelLogin
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "cc-footer",
+							children: [failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "cc-failed",
+								role: "status",
+								children: t("saveFailed")
+							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "cc-reset",
+								disabled: savingBlocked || saving,
+								onClick: props.save,
+								children: t(saving ? "saving" : "save")
+							})]
+						})
+					] }) : null,
+					showBody && configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardConfiguredBody, { t }) : null
+				]
+			});
+		}
+		//#endregion
 		//#region src/client/locales.ts
 		const zh = {
 			nav: "Command Code",
@@ -2382,6 +2909,11 @@ window.__ModuleLoader__.load({
 			requestTimeoutMsHint: "等待响应首个字节的超时；默认 60000。",
 			streamIdleTimeoutMs: "流空闲超时（毫秒）",
 			streamIdleTimeoutMsHint: "生成流停滞多久视为断连；默认 300000（长思考模型可静默数分钟，默认值刻意放宽）。",
+			advancedSettings: "高级设置",
+			advancedSettingsHint: "API 地址、工作目录、超时与模型过滤等不常修改的选项。",
+			advancedOverriddenOne: "已自定义 1 项",
+			advancedOverriddenMany: "已自定义 {count} 项",
+			advancedInvalid: "高级设置中有未填好的数字，请展开修正后再保存。",
 			filterModelsByPlan: "隐藏套餐外模型",
 			filterModelsByPlanHint: "开启后，模型选择器只列出当前套餐可用的模型；账户持有按需余额时会显示全部。",
 			accountsTitle: "多账户轮换",
@@ -2463,7 +2995,12 @@ window.__ModuleLoader__.load({
 			loginNetwork: "无法连接 Command Code 服务校验密钥，请检查网络后重试。",
 			loginStoreFailed: "密钥无法写入本机凭据服务，请手动粘贴。",
 			loginCancelled: "登录已取消。",
-			loginFailedGeneric: "登录失败，请重试或手动粘贴密钥。"
+			loginFailedGeneric: "登录失败，请重试或手动粘贴密钥。",
+			cardTitle: "Command Code 连接",
+			cardRouteActive: "已启用",
+			cardLoadingHint: "正在读取 Command Code 配置…",
+			cardRegistrationHint: "此卡片随 Command Code 插件注册，需要较新版本的 DeepSeek Harness 才会显示完整内容。",
+			cardConfiguredHint: "API 密钥已就绪。如需更换密钥、添加多账户轮换、查看用量或修改 API 地址，请前往设置中的「Command Code」页。"
 		};
 		const en = {
 			nav: "Command Code",
@@ -2482,6 +3019,11 @@ window.__ModuleLoader__.load({
 			requestTimeoutMsHint: "Time to wait for the first response byte; default 60000.",
 			streamIdleTimeoutMs: "Stream idle timeout (ms)",
 			streamIdleTimeoutMsHint: "How long a stalled stream is treated as dead; default 300000 (deliberately generous — long-thinking models can stay silent for minutes).",
+			advancedSettings: "Advanced",
+			advancedSettingsHint: "Rarely touched options: API base URL, working directory, timeouts, and model filtering.",
+			advancedOverriddenOne: "1 customized",
+			advancedOverriddenMany: "{count} customized",
+			advancedInvalid: "A number in Advanced settings is not ready to save; expand to fix it.",
 			filterModelsByPlan: "Hide out-of-plan models",
 			filterModelsByPlanHint: "When on, the model picker lists only models your subscription includes; any on-demand credit balance shows the full catalog.",
 			accountsTitle: "Account rotation",
@@ -2563,7 +3105,12 @@ window.__ModuleLoader__.load({
 			loginNetwork: "Could not reach the Command Code service to validate the key; check your network and retry.",
 			loginStoreFailed: "The key could not be stored in the local credential service; paste it manually.",
 			loginCancelled: "Sign-in cancelled.",
-			loginFailedGeneric: "Sign-in failed; try again or paste the key manually."
+			loginFailedGeneric: "Sign-in failed; try again or paste the key manually.",
+			cardTitle: "Command Code connection",
+			cardRouteActive: "Active",
+			cardLoadingHint: "Loading the Command Code configuration…",
+			cardRegistrationHint: "This card is contributed by the Command Code plugin; a newer DeepSeek Harness is needed to show the full controls.",
+			cardConfiguredHint: "The API key is ready. To replace it, add account rotation, review usage, or change the API base, open the \"Command Code\" page in Settings."
 		};
 		//#endregion
 		//#region src/client/index.ts
@@ -2596,6 +3143,16 @@ window.__ModuleLoader__.load({
 select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:content-box;padding-right:32px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
 .cc-inputInvalid{border-color:var(--dsw-alias-label-error)}
 .cc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
+/* The Advanced card: its header row is one full-width toggle button; the
+ * chevron is two borders on a rotated square (no icon dependency). */
+.cc-advancedHead{align-items:center;gap:8px;display:flex;width:100%;padding:12px 0;background:0 0;border:none;cursor:pointer;font:inherit;text-align:left}
+.cc-advancedHead:hover .cc-advancedTitle{color:var(--dsw-alias-label-primary)}
+.cc-advancedTitle{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500;line-height:1.5}
+.cc-advancedSpacer{flex:1}
+.cc-chevron{flex-shrink:0;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);width:8px;height:8px;margin-right:4px;margin-bottom:2px;transform:rotate(45deg);transition:transform .15s ease}
+.cc-chevronUp{transform:rotate(-135deg);margin-bottom:-3px}
+.cc-advancedBody{flex-direction:column;display:flex}
+.cc-advancedBody>.cc-field:first-of-type{border-top:1px solid var(--dsw-alias-border-l2)}
 .cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
 .cc-footer{justify-content:flex-end;align-items:center;gap:8px;display:flex}
 .cc-toggleRow{align-items:center;gap:8px;cursor:pointer;display:flex}
@@ -2674,25 +3231,38 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			document.head.appendChild(tag);
 		}
 		/**
-		* Client plugin body. Gates on the services the settings page needs
-		* (`slots`, `locale`, `connection`, `remote`, `settingsScope`) plus the
-		* `connection` used by the friendly-error wrapper — the same inject list the
-		* harness's own settings-surface plugins declare.
+		* Client plugin body. Gates on the services shared by both client generations
+		* (`slots`, `locale`, `connection`, `remote`, `settingsScope`). Current clients
+		* mount the page after `remote.credentials` appears; legacy clients mount it
+		* from the connection ApiProxy credential face.
 		*/
 		function apply(ctx) {
 			injectPageCss();
 			const connection = ctx.get("connection");
-			if (connection !== void 0) installFriendlyImageError(connection);
+			if (connection !== void 0) installFriendlyImageError(connection, () => ctx.locale.getLocale().active === "zh" ? "zh" : "en");
 			ctx.effect(() => ctx.locale.register("settings.commandcode", {
 				zh,
 				en
 			}), "dsh-commandcode-provider: page copy");
-			const api = ctx.get("connection").api;
-			const hostDescription = ctx.get("connection").hostDescription;
-			const controller = new CommandCodeSettingsController(ctx.settingsScope.bind({ namespace: COMMANDCODE_NS }), { credentials: api.credentials }, hostDescription);
+			const legacyApi = adaptLegacyCredentials(connection?.api?.credentials);
+			if (legacyApi !== void 0) {
+				applyClientSurfaces(ctx, legacyApi, connection?.hostDescription);
+				return;
+			}
+			ctx.inject(["remote.credentials"], (remoteCtx) => {
+				const credentials = remoteCtx.remote.credentials;
+				applyClientSurfaces(remoteCtx, { credentials });
+			});
+		}
+		/** Mount the one shared UI implementation over either credential transport. */
+		function applyClientSurfaces(ctx, api, hostDescription) {
+			const controller = new CommandCodeSettingsController(ctx.settingsScope.bind({ namespace: COMMANDCODE_NS }), api, hostDescription);
 			ctx.effect(() => () => controller.dispose(), "dsh-commandcode-provider: settings controller");
-			const store = (0, _deepseek_ai_dsh_client_runtime_client.createSnapshotStore)(controller.state());
+			const store = createSnapshotStore(controller.state());
 			controller.subscribe(() => store.set(controller.state()));
+			ctx.effect(() => ctx.remote.$on("credentials/reference-updated", () => {
+				controller.refreshCredentials();
+			}), "dsh-commandcode-provider: credential invalidations");
 			let usageNamespace;
 			let usageMountError;
 			const contribution = {
@@ -2732,7 +3302,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 				return namespace.report();
 			} });
 			ctx.effect(() => () => usageController.dispose(), "dsh-commandcode-provider: usage controller");
-			const usageStore = (0, _deepseek_ai_dsh_client_runtime_client.createSnapshotStore)(usageController.state());
+			const usageStore = createSnapshotStore(usageController.state());
 			usageController.subscribe(() => usageStore.set(usageController.state()));
 			const loginRemote = {
 				loginBegin: async () => {
@@ -2759,7 +3329,7 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 			};
 			const loginController = new CommandCodeLoginController(() => loginRemote);
 			ctx.effect(() => () => loginController.dispose(), "dsh-commandcode-provider: login controller");
-			const loginStore = (0, _deepseek_ai_dsh_client_runtime_client.createSnapshotStore)(loginController.state());
+			const loginStore = createSnapshotStore(loginController.state());
 			let lastLoginPhase = loginController.state().phase;
 			loginController.subscribe(() => {
 				const phase = loginController.state().phase;
@@ -2800,6 +3370,24 @@ select.cc-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box
 				locale: "settings.commandcode",
 				inject: injected
 			}, CommandCodeSettingsPage));
+			ctx.slots.inject("settings.models.provider-card", () => ctx.slots.register({
+				name: "settings.models.provider-card",
+				key: "llm-commandcode",
+				locale: "settings.commandcode",
+				inject: () => ({
+					hooks: {
+						commandCodeSettings: store,
+						commandCodeLogin: loginStore
+					},
+					edit: (field, text) => controller.edit(field, text),
+					save: () => void controller.save().then(() => {
+						const settled = controller.state();
+						if (!settled.failed && settled.anyAccountConfigured) usageController.refresh();
+					}),
+					beginLogin: () => void loginController.begin(),
+					cancelLogin: () => void loginController.cancel()
+				})
+			}, CommandCodeProviderCard));
 		}
 		const inject = [
 			"slots",