dsh-image-gen 0.4.0 → 0.5.0

package/lib/client.js

@@ -17,20 +17,52 @@ window.__ModuleLoader__.load({
 		const INSPIRATION_ROUTE = "/plugins/dsh-image-gen/inspiration";
 		/** Browser route used for saving generated images to workspace on demand. */
 		const SAVE_WORKSPACE_ROUTE = "/plugins/dsh-image-gen/save-workspace";
+		/** Browser route the settings card probes provider connectivity through. */
+		const TEST_CONNECTION_ROUTE = "/plugins/dsh-image-gen/test";
 		/** Namespace persisted through DSH Settings. */
 		const IMAGE_GENERATION_NAMESPACE = "image-generation";
+		/** Supported providers. */
+		const IMAGE_PROVIDERS = [
+			"google",
+			"openai",
+			"openai-compat",
+			"seedream",
+			"dashscope",
+			"xai",
+			"zhipu",
+			"comfyui"
+		];
 		/** Providers supported by the first browser workbench release. */
 		const CLOUD_IMAGE_PROVIDERS = [
 			"google",
 			"openai",
+			"openai-compat",
 			"seedream",
-			"dashscope"
+			"dashscope",
+			"xai",
+			"zhipu"
 		];
+		/** The credential reference each cloud provider's API key is stored under. */
+		const CLOUD_CREDENTIAL_REFS = {
+			google: "GEMINI_API_KEY",
+			openai: "OPENAI_API_KEY",
+			"openai-compat": "DSH_IMAGE_GEN_OPENAI_COMPAT_KEY",
+			seedream: "ARK_API_KEY",
+			dashscope: "DASHSCOPE_API_KEY",
+			xai: "XAI_API_KEY",
+			zhipu: "ZHIPUAI_API_KEY"
+		};
+		/** The credential reference storing this provider's API key, when it uses one. */
+		function cloudCredentialRef(provider) {
+			return CLOUD_IMAGE_PROVIDERS.includes(provider) ? CLOUD_CREDENTIAL_REFS[provider] : void 0;
+		}
 		/** Default endpoints and base URLs. */
 		const DEFAULT_GOOGLE_ENDPOINT = "https://generativelanguage.googleapis.com/v1beta/interactions";
 		const DEFAULT_OPENAI_BASE_URL = "https://api.openai.com/v1";
 		const DEFAULT_SEEDREAM_BASE_URL = "https://ark.cn-beijing.volces.com/api/v3";
 		const DEFAULT_DASHSCOPE_ENDPOINT = "https://dashscope.aliyuncs.com/api/v1";
+		const DEFAULT_XAI_BASE_URL = "https://api.x.ai/v1";
+		const DEFAULT_ZHIPU_BASE_URL = "https://open.bigmodel.cn/api/paas/v4";
 		const DEFAULT_COMFYUI_BASE_URL = "http://127.0.0.1:8188";
 		const DEFAULT_COMFYUI_TIMEOUT_MS = 3e5;
 		const DEFAULT_COMFYUI_WORKFLOW_LABEL = "API workflow";
@@ -39,6 +71,8 @@ window.__ModuleLoader__.load({
 		const DEFAULT_OPENAI_MODEL = "gpt-image-2";
 		const DEFAULT_SEEDREAM_MODEL = "doubao-seedream-5-0-260128";
 		const DEFAULT_DASHSCOPE_MODEL = "qwen-image-3.0";
+		const DEFAULT_XAI_MODEL = "grok-imagine-image";
+		const DEFAULT_ZHIPU_MODEL = "glm-image";
 		/** Named workflows, falling back to the legacy single-workflow fields when the list is empty. */
 		function resolveComfyUIWorkflows(source) {
 			const named = [];
@@ -85,15 +119,21 @@ window.__ModuleLoader__.load({
 		const DEFAULT_MODELS = {
 			google: DEFAULT_GOOGLE_MODEL,
 			openai: DEFAULT_OPENAI_MODEL,
+			"openai-compat": "",
 			seedream: DEFAULT_SEEDREAM_MODEL,
 			dashscope: DEFAULT_DASHSCOPE_MODEL,
+			xai: DEFAULT_XAI_MODEL,
+			zhipu: DEFAULT_ZHIPU_MODEL,
 			comfyui: DEFAULT_COMFYUI_WORKFLOW_LABEL
 		};
 		const DEFAULT_BASE_URLS = {
 			google: DEFAULT_GOOGLE_ENDPOINT,
 			openai: DEFAULT_OPENAI_BASE_URL,
+			"openai-compat": "",
 			seedream: DEFAULT_SEEDREAM_BASE_URL,
 			dashscope: DEFAULT_DASHSCOPE_ENDPOINT,
+			xai: DEFAULT_XAI_BASE_URL,
+			zhipu: DEFAULT_ZHIPU_BASE_URL,
 			comfyui: DEFAULT_COMFYUI_BASE_URL
 		};
 		//#endregion
@@ -1360,12 +1400,12 @@ window.__ModuleLoader__.load({
 				comparePartial: "{success} 个模型生成成功，{failed} 个失败",
 				comparing: "正在对比（共 {count} 个模型）…",
 				compareStart: "开始对比",
-				saveToGallery: "收藏进画廊",
-				saveSelected: "收藏选中（{count}）",
-				savedToGallery: "已收藏进画廊",
-				savedSelected: "已收藏 {count} 张图片",
-				inGallery: "已在画廊",
-				needSelectResult: "请先勾选要收藏的图片",
+				saveToGallery: "保存",
+				saveSelected: "保存({count})",
+				savedToGallery: "已保存到画廊",
+				savedSelected: "已保存 {count} 张图片",
+				inGallery: "已保存",
+				needSelectResult: "请先勾选要保存的图片",
 				retry: "重新加载",
 				configLoadFailed: "工作台配置加载失败，请检查服务后重试。",
 				noProvider: "请先在设置中配置至少一个云端图像 Provider 的 API Key。",
@@ -4267,7 +4307,7 @@ window.__ModuleLoader__.load({
 				ratio: "auto",
 				quality: normalized === "1K" || normalized === "4K" ? normalized : "2K"
 			};
-			if (provider === "openai") return {
+			if (provider === "openai" || provider === "openai-compat" || provider === "xai" || provider === "zhipu") return {
 				ratio: ratioFromSize(normalized, "x"),
 				quality: "standard"
 			};
@@ -4309,9 +4349,12 @@ window.__ModuleLoader__.load({
 				tabTasks: "任务",
 				filterAllProviders: "全部提供商",
 				filterGoogle: "Google Gemini",
-				filterOpenAI: "OpenAI / 中转站",
+				filterOpenAI: "OpenAI",
+				filterOpenAICompat: "OpenAI 兼容",
 				filterSeedream: "字节 Seedream",
 				filterDashScope: "阿里 DashScope",
+				filterXAI: "xAI Grok",
+				filterZhipu: "智谱 GLM",
 				filterComfyUI: "本地 ComfyUI",
 				filterAllModels: "全部模型",
 				filterAllRatios: "全部比例",
@@ -4391,9 +4434,12 @@ window.__ModuleLoader__.load({
 				tabTasks: "Tasks",
 				filterAllProviders: "All Providers",
 				filterGoogle: "Google Gemini",
-				filterOpenAI: "OpenAI / Relay",
+				filterOpenAI: "OpenAI",
+				filterOpenAICompat: "OpenAI-compatible",
 				filterSeedream: "ByteDance Seedream",
 				filterDashScope: "Aliyun DashScope",
+				filterXAI: "xAI Grok",
+				filterZhipu: "Zhipu GLM",
 				filterComfyUI: "Local ComfyUI",
 				filterAllModels: "All Models",
 				filterAllRatios: "All Ratios",
@@ -5079,6 +5125,10 @@ window.__ModuleLoader__.load({
 											value: "openai",
 											children: t("filterOpenAI")
 										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "openai-compat",
+											children: t("filterOpenAICompat")
+										}),
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "seedream",
 											children: t("filterSeedream")
@@ -5087,6 +5137,14 @@ window.__ModuleLoader__.load({
 											value: "dashscope",
 											children: t("filterDashScope")
 										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "xai",
+											children: t("filterXAI")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "zhipu",
+											children: t("filterZhipu")
+										}),
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "comfyui",
 											children: t("filterComfyUI")
@@ -5872,7 +5930,7 @@ window.__ModuleLoader__.load({
 @keyframes dshIgPulse{50%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(47,100,245,.025)}}
 .dsh-ig-workbench-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:8px 18px;border-radius:10px;font-size:12.5px;font-weight:500;box-shadow:0 12px 32px rgba(0,0,0,0.3);z-index:99999;animation:dshIgFade .15s ease-out;pointer-events:none}
 @keyframes dshIgFade{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
-@media(max-width:1120px){.dsh-ig-workbench-grid{grid-template-columns:190px minmax(360px,1fr) 300px}.dsh-ig-result-actions button span{display:none}}
+@media(max-width:1120px){.dsh-ig-workbench-grid{grid-template-columns:190px minmax(360px,1fr) 300px}.dsh-ig-result-actions button,.dsh-ig-result-strip button{padding:0 7px;font-size:10px;gap:4px}.dsh-ig-result-actions>div,.dsh-ig-result-strip>div{gap:5px}}
 @media(max-width:900px){.dsh-ig-gallery-page-body.is-workbench{height:auto;overflow:auto}.dsh-ig-workbench{height:auto;min-height:100%;overflow:visible;padding:12px}.dsh-ig-workbench-heading{height:auto;padding-bottom:12px;align-items:center}.dsh-ig-provider-quick>span{display:none}.dsh-ig-workbench-grid{height:auto;display:flex;flex:none;flex-direction:column;overflow:visible}.dsh-ig-recent-panel{height:auto;overflow:hidden;border-right:0;border-bottom:1px solid var(--ig-line)}.dsh-ig-recent-scroll{height:auto;display:flex;overflow-x:auto;overflow-y:hidden;padding:8px}.dsh-ig-recent-item{min-width:220px}.dsh-ig-canvas-column{height:auto;min-height:560px}.dsh-ig-generate-panel{height:auto;border-left:0;border-top:1px solid var(--ig-line);min-height:560px}.dsh-ig-generator-form{height:auto;overflow:visible}.dsh-ig-canvas{height:auto;min-height:360px}}
 @media(max-width:560px){.dsh-ig-workbench-heading>div{display:block}.dsh-ig-workbench-heading h1{font-size:15px}.dsh-ig-provider-quick select{min-width:128px;max-width:150px}.dsh-ig-canvas{padding:12px;min-height:300px}.dsh-ig-result-strip,.dsh-ig-result-actions{align-items:flex-start;flex-direction:column}.dsh-ig-result-strip>div,.dsh-ig-result-actions>div{width:100%}.dsh-ig-result-strip button,.dsh-ig-result-actions button{flex:1;justify-content:center}.dsh-ig-result-actions button span{display:inline}.dsh-ig-field-grid{grid-template-columns:1fr}.dsh-ig-result-meta span+span:before{display:none}}
 @media(prefers-reduced-motion:reduce){.dsh-ig-workbench *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@@ -6137,7 +6195,7 @@ window.__ModuleLoader__.load({
 		function isRevision(value) {
 			if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
 			const candidate = value;
-			return isAttachment(candidate.attachment) && (candidate.provider === "google" || candidate.provider === "openai" || candidate.provider === "seedream" || candidate.provider === "dashscope") && typeof candidate.prompt === "string" && typeof candidate.model === "string" && typeof candidate.output === "string" && typeof candidate.createdAt === "number" && Number.isFinite(candidate.createdAt) && typeof candidate.ratio === "string" && typeof candidate.quality === "string";
+			return isAttachment(candidate.attachment) && typeof candidate.provider === "string" && CLOUD_IMAGE_PROVIDERS.includes(candidate.provider) && typeof candidate.prompt === "string" && typeof candidate.model === "string" && typeof candidate.output === "string" && typeof candidate.createdAt === "number" && Number.isFinite(candidate.createdAt) && typeof candidate.ratio === "string" && typeof candidate.quality === "string";
 		}
 		function isAttachment(value) {
 			if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
@@ -6145,33 +6203,388 @@ window.__ModuleLoader__.load({
 			return typeof candidate.attachmentId === "string" && (candidate.mediaType === "image/png" || candidate.mediaType === "image/jpeg" || candidate.mediaType === "image/webp" || candidate.mediaType === "image/gif") && typeof candidate.bytes === "number" && typeof candidate.width === "number" && typeof candidate.height === "number";
 		}
 		//#endregion
-		//#region lib/types/client/index.js
-		const KEY_REF = {
-			google: "GEMINI_API_KEY",
-			openai: "OPENAI_API_KEY",
-			seedream: "ARK_API_KEY",
-			dashscope: "DASHSCOPE_API_KEY"
+		//#region lib/types/client/provider-pill.js
+		/**
+		* Composer tool-row pill: switch the default image provider without leaving
+		* the chat. Registered into the official 'conversation.input.right' slot; the
+		* write path is the same `provider` settings field the settings card uses, so
+		* the two views can never disagree.
+		*/
+		const PILL_DICT = {
+			zh: {
+				pillLabel: "生图",
+				menuTitle: "生图模型",
+				keyConfigured: "Key 已配置",
+				keyMissing: "未配置 Key",
+				noKeyNeeded: "无需 Key",
+				noWorkflow: "未导入工作流",
+				readOnly: "图像设置为只读，无法在此切换",
+				switchFailed: "切换失败"
+			},
+			en: {
+				pillLabel: "Image",
+				menuTitle: "Image model",
+				keyConfigured: "Key configured",
+				keyMissing: "No key",
+				noKeyNeeded: "No key needed",
+				noWorkflow: "No workflow",
+				readOnly: "Image settings are read-only; switch them in the config source",
+				switchFailed: "Switch failed"
+			}
+		};
+		/** Short row labels; the settings card keeps the longer descriptive names. */
+		const PILL_PROVIDER_LABELS = {
+			google: "Gemini",
+			openai: "OpenAI",
+			"openai-compat": "OpenAI 兼容",
+			seedream: "Seedream",
+			dashscope: "DashScope",
+			xai: "Grok",
+			zhipu: "智谱 GLM",
+			comfyui: "ComfyUI"
 		};
+		/** Whether the user opted into the composer pill; hidden (not merely inert) when off. */
+		function pillVisible(value) {
+			return value?.showProviderPill === true;
+		}
+		/** Model (or ComfyUI workflow) a provider row will use with the persisted settings. */
+		function pillModelOf(provider, value) {
+			if (provider === "comfyui") {
+				const workflow = activeComfyUIWorkflow(value ?? {});
+				return workflow === void 0 ? "" : workflow.name;
+			}
+			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : provider === "openai-compat" ? value?.openaiCompatModel : provider === "seedream" ? value?.seedreamModel : provider === "dashscope" ? value?.dashscopeModel : provider === "xai" ? value?.xaiModel : value?.zhipuModel;
+			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_MODELS[provider];
+		}
+		/** One fixed-position provider menu anchored to the pill button. */
+		function ImageProviderPill(props) {
+			const [snapshot, setSnapshot] = (0, react.useState)(() => props.scope.getSnapshot());
+			const [lang, setLang] = (0, react.useState)(() => props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
+			const [open, setOpen] = (0, react.useState)(false);
+			const [pending, setPending] = (0, react.useState)(void 0);
+			const [error, setError] = (0, react.useState)("");
+			const [dots, setDots] = (0, react.useState)({
+				google: "unknown",
+				openai: "unknown",
+				"openai-compat": "unknown",
+				seedream: "unknown",
+				dashscope: "unknown",
+				xai: "unknown",
+				zhipu: "unknown"
+			});
+			const [keyTick, setKeyTick] = (0, react.useState)(0);
+			const buttonRef = (0, react.useRef)(null);
+			const [menuStyle, setMenuStyle] = (0, react.useState)(null);
+			(0, react.useEffect)(() => props.scope.subscribe(() => {
+				setSnapshot(props.scope.getSnapshot());
+			}), [props.scope]);
+			(0, react.useEffect)(() => props.locale?.subscribe?.(() => {
+				setLang(props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
+			}), [props.locale]);
+			(0, react.useEffect)(() => props.credentialEvents?.listen(() => {
+				setKeyTick((tick) => tick + 1);
+			}), [props.credentialEvents]);
+			(0, react.useEffect)(() => {
+				let active = true;
+				const refs = [];
+				for (const provider of CLOUD_IMAGE_PROVIDERS) {
+					const ref = cloudCredentialRef(provider);
+					if (ref !== void 0) refs.push(ref);
+				}
+				props.credentials.describe(refs).then((response) => {
+					if (!active) return;
+					const next = {};
+					for (const provider of CLOUD_IMAGE_PROVIDERS) {
+						const info = response.ok ? response.value?.[cloudCredentialRef(provider)] : void 0;
+						next[provider] = response.ok ? info?.configured ? "configured" : "missing" : "unknown";
+					}
+					setDots(next);
+				}).catch(() => {
+					if (!active) return;
+					setDots({
+						google: "unknown",
+						openai: "unknown",
+						"openai-compat": "unknown",
+						seedream: "unknown",
+						dashscope: "unknown",
+						xai: "unknown",
+						zhipu: "unknown"
+					});
+				});
+				return () => {
+					active = false;
+				};
+			}, [props.credentials, keyTick]);
+			const t = (keyName) => (lang === "en" ? PILL_DICT.en : PILL_DICT.zh)[keyName];
+			const current = snapshot.value?.provider ?? "google";
+			const writable = snapshot.writable;
+			(0, react.useEffect)(() => {
+				if (!open) {
+					setMenuStyle(null);
+					return;
+				}
+				const rect = buttonRef.current?.getBoundingClientRect();
+				if (rect !== void 0) setMenuStyle({
+					left: rect.left,
+					bottom: window.innerHeight - rect.top + 6
+				});
+			}, [open]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onPointerDown = (event) => {
+					const target = event.target;
+					if (target instanceof Node && buttonRef.current !== null && !buttonRef.current.contains(target) && !(target instanceof Element && target.closest(".dsh-ig-pill-menu") !== null)) setOpen(false);
+				};
+				const onKeyDown = (event) => {
+					if (event.key === "Escape") setOpen(false);
+				};
+				const onReflow = () => {
+					setOpen(false);
+				};
+				document.addEventListener("mousedown", onPointerDown, true);
+				document.addEventListener("keydown", onKeyDown, true);
+				window.addEventListener("resize", onReflow);
+				window.addEventListener("scroll", onReflow, true);
+				return () => {
+					document.removeEventListener("mousedown", onPointerDown, true);
+					document.removeEventListener("keydown", onKeyDown, true);
+					window.removeEventListener("resize", onReflow);
+					window.removeEventListener("scroll", onReflow, true);
+				};
+			}, [open]);
+			if (!pillVisible(snapshot.value)) return null;
+			/** Same write path as the settings card: one field, one disposer, no implicit side effects. */
+			const select = (provider) => {
+				if (pending !== void 0 || provider === current) {
+					setOpen(false);
+					return;
+				}
+				setError("");
+				setPending(provider);
+				props.scope.set("provider", provider).then(() => {
+					setOpen(false);
+				}).catch((cause) => {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}).finally(() => {
+					setPending(void 0);
+				});
+			};
+			const dotClassOf = (provider) => {
+				if (provider === "comfyui") return "dsh-ig-pill-dot-neutral";
+				const dot = dots[provider];
+				return dot === "configured" ? "dsh-ig-pill-dot-ok" : dot === "missing" ? "dsh-ig-pill-dot-missing" : "dsh-ig-pill-dot-neutral";
+			};
+			const subtitleOf = (provider) => {
+				if (provider === "comfyui") {
+					const workflow = pillModelOf(provider, snapshot.value);
+					return workflow.length > 0 ? `${t("noKeyNeeded")} · ${workflow}` : `${t("noKeyNeeded")} · ${t("noWorkflow")}`;
+				}
+				const dot = dots[provider];
+				const model = pillModelOf(provider, snapshot.value);
+				if (dot === "configured") return `${t("keyConfigured")} · ${model}`;
+				if (dot === "missing") return `${t("keyMissing")} · ${model}`;
+				return model;
+			};
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ig-pill-root",
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					ref: buttonRef,
+					className: `dsh-ig-pill-button${open ? " dsh-ig-pill-button-open" : ""}`,
+					"aria-haspopup": "menu",
+					"aria-expanded": open,
+					title: writable ? t("menuTitle") : t("readOnly"),
+					disabled: !writable,
+					onClick: () => {
+						setOpen((value) => !value);
+					},
+					children: [
+						(0, react_jsx_runtime.jsxs)("svg", {
+							className: "dsh-ig-pill-icon",
+							width: "13",
+							height: "13",
+							viewBox: "0 0 16 16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.6",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							children: [
+								(0, react_jsx_runtime.jsx)("rect", {
+									x: "1.5",
+									y: "2.5",
+									width: "13",
+									height: "11",
+									rx: "2"
+								}),
+								(0, react_jsx_runtime.jsx)("circle", {
+									cx: "5.5",
+									cy: "6.5",
+									r: "1.3"
+								}),
+								(0, react_jsx_runtime.jsx)("path", { d: "M14.5 10.5l-3.2-3.2-6.3 6.2" })
+							]
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-pill-provider",
+							children: PILL_PROVIDER_LABELS[current]
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: `dsh-ig-pill-caret${open ? " dsh-ig-pill-caret-open" : ""}`,
+							"aria-hidden": "true",
+							children: (0, react_jsx_runtime.jsx)("svg", {
+								width: "10",
+								height: "10",
+								viewBox: "0 0 16 16",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: (0, react_jsx_runtime.jsx)("path", { d: "M4 10l4-4 4 4" })
+							})
+						})
+					]
+				}), open && menuStyle !== null ? (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-ig-pill-menu",
+					role: "menu",
+					"aria-label": t("menuTitle"),
+					style: menuStyle,
+					children: [
+						(0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-pill-menu-title",
+							children: t("menuTitle")
+						}),
+						IMAGE_PROVIDERS.map((provider) => (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							role: "menuitemradio",
+							"aria-checked": provider === current,
+							className: `dsh-ig-pill-option${provider === current ? " dsh-ig-pill-option-active" : ""}`,
+							disabled: pending !== void 0,
+							onClick: () => {
+								select(provider);
+							},
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: `dsh-ig-pill-dot ${dotClassOf(provider)}`,
+									"aria-hidden": "true"
+								}),
+								(0, react_jsx_runtime.jsxs)("span", {
+									className: "dsh-ig-pill-option-text",
+									children: [(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-pill-option-name",
+										children: PILL_PROVIDER_LABELS[provider]
+									}), (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-pill-option-sub",
+										children: subtitleOf(provider)
+									})]
+								}),
+								provider === current ? (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-pill-check",
+									"aria-hidden": "true",
+									children: (0, react_jsx_runtime.jsx)("svg", {
+										width: "13",
+										height: "13",
+										viewBox: "0 0 16 16",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2.2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: (0, react_jsx_runtime.jsx)("path", { d: "M2.5 8.5l3.5 3.5 7-8" })
+									})
+								}) : null
+							]
+						}, provider)),
+						error.length > 0 ? (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-pill-error",
+							role: "alert",
+							children: [
+								t("switchFailed"),
+								"：",
+								error
+							]
+						}) : null
+					]
+				}) : null]
+			});
+		}
+		/** Styles for the pill and its fixed-position menu; injected by the client entry. */
+		const PROVIDER_PILL_STYLE = `
+.dsh-ig-pill-root{position:relative;display:inline-flex;align-items:center;height:26px}
+.dsh-ig-pill-button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px 0 7px;border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:13px;background:var(--dsw-alias-bg-layer-3,#fff);color:var(--dsw-alias-label-secondary,#4b5563);font:inherit;font-size:12px;line-height:1;cursor:pointer;transition:border-color .15s,background .15s,color .15s;-webkit-user-select:none;user-select:none}
+.dsh-ig-pill-button:hover:not(:disabled){border-color:var(--dsw-alias-label-dimmed,#9ca3af);color:var(--dsw-alias-label-primary,#111827)}
+.dsh-ig-pill-button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4c78ff);outline-offset:1px}
+.dsh-ig-pill-button:disabled{opacity:.5;cursor:not-allowed}
+.dsh-ig-pill-button-open{border-color:var(--dsw-alias-brand-primary,#4c78ff);color:var(--dsw-alias-label-primary,#111827)}
+.dsh-ig-pill-icon{flex:none;color:var(--dsw-alias-brand-primary,#4c78ff)}
+.dsh-ig-pill-provider{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsh-ig-pill-caret{display:inline-flex;flex:none;transition:transform .15s}
+.dsh-ig-pill-caret-open{transform:rotate(180deg)}
+.dsh-ig-pill-menu{position:fixed;z-index:1000;min-width:264px;max-width:min(320px,calc(100vw - 24px));padding:6px;border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:12px;background:var(--dsw-alias-bg-layer-3,#fff);box-shadow:0 12px 32px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);max-height:min(320px,calc(100vh - 48px));overflow-y:auto}
+.dsh-ig-pill-menu-title{padding:6px 8px 4px;font-size:11px;font-weight:600;color:var(--dsw-alias-label-tertiary,#6b7280)}
+.dsh-ig-pill-option{display:flex;width:100%;align-items:center;gap:9px;padding:7px 8px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
+.dsh-ig-pill-option:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2,#f3f4f6)}
+.dsh-ig-pill-option:disabled{opacity:.6;cursor:default}
+.dsh-ig-pill-option:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4c78ff);outline-offset:-2px}
+.dsh-ig-pill-option-active{background:var(--dsw-alias-brand-primary-soft,rgba(76,120,255,.10))}
+.dsh-ig-pill-dot{flex:none;width:7px;height:7px;border-radius:50%}
+.dsh-ig-pill-dot-ok{background:#22c55e}
+.dsh-ig-pill-dot-missing{background:var(--dsw-alias-border-l2,#d1d5db)}
+.dsh-ig-pill-dot-neutral{background:var(--dsw-alias-brand-primary,#4c78ff)}
+.dsh-ig-pill-option-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.dsh-ig-pill-option-name{font-size:12.5px;font-weight:500;color:var(--dsw-alias-label-primary,#111827);line-height:1.2}
+.dsh-ig-pill-option-sub{font-size:11px;color:var(--dsw-alias-label-tertiary,#6b7280);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsh-ig-pill-check{flex:none;color:var(--dsw-alias-brand-primary,#4c78ff)}
+.dsh-ig-pill-error{margin-top:4px;padding:6px 8px;border-radius:8px;background:rgba(239,68,68,.08);color:#ef4444;font-size:11.5px;line-height:1.4;word-break:break-all}
+`;
+		//#endregion
+		//#region lib/types/client/index.js
 		const DICT = {
 			zh: {
 				title: "图像生成",
-				description: "选择厂商并配置生图模型。",
-				provider: "Provider",
+				description: "配置各 Provider 的 Key 与模型，并选择默认 Provider。",
+				defaultProvider: "默认 Provider",
+				defaultProviderHint: "Agent 生图默认使用；Studio 与工具调用可临时指定其他 Provider。",
+				settingsReadOnly: "设置由配置文件提供，只读；如需修改请编辑对应的配置来源。",
 				providerGoogle: "Google Gemini",
-				providerOpenAI: "OpenAI / 中转站",
+				providerOpenAI: "OpenAI",
+				providerOpenAICompat: "OpenAI 兼容（中转站）",
 				providerSeedream: "字节 Seedream",
 				providerDashScope: "阿里 DashScope (通义万相 / Qwen)",
+				providerXAI: "xAI Grok Imagine",
+				providerZhipu: "智谱 GLM-Image",
 				providerComfyUI: "本地 ComfyUI",
 				apiKeyLabel: "{provider} API Key",
 				apiKeyPlaceholder: "留空即可保留已配置的 Key",
 				apiKeyHint: "安全保存为 {key}；页面不会读回明文。",
+				keyReadOnly: "Key 由 {source} 提供且只读；请在该来源中修改。",
+				badgeChecking: "检查中…",
+				badgeConfigured: "Key 已配置",
+				badgeMissing: "Key 未配置",
+				badgeUnknown: "状态未知",
+				comfyuiNoKey: "无需 API Key",
+				testConnection: "测试连接",
+				testing: "正在测试…",
+				testOk: "连接成功",
+				testFailed: "连接失败",
+				testUnauthorized: "Key 无效或无权限",
+				clearKey: "清除 Key",
+				keyCleared: "已清除 Key",
+				clearKeyFailed: "清除 Key 失败",
+				saveKeyFailed: "保存 Key 失败",
+				clearKeyUnsupported: "当前版本 DSH 不支持在此清除 Key，请到凭据管理中删除。",
 				endpoint: "接口地址",
 				reset: "重置",
 				resetTitle: "重置为默认官方地址",
 				endpointHintGoogle: "Google 官方地址或反代端点（全路径）。",
-				endpointHintOpenAI: "中转站请填其 OpenAI 兼容的 /v1 地址。",
+				endpointHintOpenAI: "官方 api.openai.com 的 /v1 地址；中转站请使用下方「OpenAI 兼容」行。",
+				endpointHintOpenAICompat: "中转站/自建服务的 OpenAI 兼容 /v1 地址（必填），例如 https://your-relay.example.com/v1。",
 				endpointHintSeedream: "火山方舟兼容的 /api/v3 地址。",
 				endpointHintDashScope: "阿里云百炼 DashScope 官方接口地址。",
+				endpointHintXAI: "xAI 官方 api.x.ai 的 /v1 地址。",
+				endpointHintZhipu: "智谱开放平台 open.bigmodel.cn 的 /api/paas/v4 地址。",
 				endpointHintComfyUI: "正在运行且 DSH Host 可以访问的 ComfyUI 地址，默认使用本机 8188 端口。",
 				model: "模型",
 				workflow: "API Workflow 工作流",
@@ -6188,17 +6601,23 @@ window.__ModuleLoader__.load({
 				workflowDuplicateName: "工作流名称不能重复。",
 				timeout: "生成超时（秒）",
 				timeoutHint: "包括提交、等待和下载图片；默认 300 秒。",
+				workspaceSection: "工作区",
 				saveToWorkspace: "保存到工作区",
 				saveToWorkspaceHint: "每次生成后，把图片文件保存到当前会话工作区。",
 				folder: "工作区文件夹",
 				folderHint: "相对当前会话工作区的子目录；留空表示工作区根目录。",
+				uiSection: "界面",
+				showPill: "在对话输入栏显示生图切换胶囊",
+				showPillHint: "开启后，输入框工具行会显示一枚胶囊，随手切换默认生图 Provider，无需进入设置；默认关闭。",
+				fetchModels: "拉取模型",
+				fetchingModels: "拉取中…",
+				fetchModelsHint: "点击「拉取模型」用当前 Key 获取可用生图模型列表；也可手动输入。",
+				modelsFound: "找到 {n} 个生图模型，点击模型框选择",
+				modelsNone: "未筛出生图模型，可手动输入模型名",
 				saving: "保存中…",
 				save: "保存",
 				saved: "已保存",
 				savedToPath: "已保存到",
-				checkingKey: "正在检查 API Key…",
-				keyConfigured: "已配置 API Key",
-				keyNotConfigured: "尚未配置 API Key",
 				generating: "正在生成图片…",
 				loading: "正在加载图片…",
 				loadFailed: "图片读取失败 ({status})",
@@ -6223,23 +6642,47 @@ window.__ModuleLoader__.load({
 			},
 			en: {
 				title: "Image Generation",
-				description: "Select provider and configure image generation models.",
-				provider: "Provider",
+				description: "Configure each provider key and model, then pick the default provider.",
+				defaultProvider: "Default provider",
+				defaultProviderHint: "Used by the Agent by default; the Studio and tool calls can switch per call.",
+				settingsReadOnly: "Settings come from a profile file and are read-only; edit that source to change them.",
 				providerGoogle: "Google Gemini",
-				providerOpenAI: "OpenAI / Relay",
+				providerOpenAI: "OpenAI",
+				providerOpenAICompat: "OpenAI-compatible (relay)",
 				providerSeedream: "ByteDance Seedream",
 				providerDashScope: "Aliyun DashScope (Wanx / Qwen)",
+				providerXAI: "xAI Grok Imagine",
+				providerZhipu: "Zhipu GLM-Image",
 				providerComfyUI: "Local ComfyUI",
 				apiKeyLabel: "{provider} API Key",
 				apiKeyPlaceholder: "Leave empty to keep configured key",
 				apiKeyHint: "Securely saved as {key}; never read back in plaintext.",
+				keyReadOnly: "Key is supplied read-only by {source}; update it there.",
+				badgeChecking: "Checking…",
+				badgeConfigured: "Key set",
+				badgeMissing: "Key missing",
+				badgeUnknown: "Unknown",
+				comfyuiNoKey: "No API key needed",
+				testConnection: "Test connection",
+				testing: "Testing…",
+				testOk: "Connection OK",
+				testFailed: "Connection failed",
+				testUnauthorized: "API key rejected",
+				clearKey: "Clear key",
+				keyCleared: "Key cleared",
+				clearKeyFailed: "Failed to clear key",
+				saveKeyFailed: "Failed to save the key",
+				clearKeyUnsupported: "This DSH build cannot clear keys here; remove it from credential management instead.",
 				endpoint: "Endpoint / Base URL",
 				reset: "Reset",
 				resetTitle: "Reset to official default URL",
 				endpointHintGoogle: "Official Google endpoint or reverse proxy (full path).",
-				endpointHintOpenAI: "OpenAI-compatible /v1 base URL for relays.",
+				endpointHintOpenAI: "Official api.openai.com /v1 base URL; for relays use the \"OpenAI-compatible\" row below.",
+				endpointHintOpenAICompat: "OpenAI-compatible /v1 base URL of your relay or self-hosted service (required), e.g. https://your-relay.example.com/v1.",
 				endpointHintSeedream: "Volcengine Ark compatible /api/v3 base URL.",
 				endpointHintDashScope: "Official Aliyun DashScope endpoint.",
+				endpointHintXAI: "Official xAI api.x.ai /v1 base URL.",
+				endpointHintZhipu: "Zhipu open.bigmodel.cn /api/paas/v4 base URL.",
 				endpointHintComfyUI: "A running ComfyUI server reachable by the DSH Host; the default points to port 8188 on this computer.",
 				model: "Model",
 				workflow: "API Workflows",
@@ -6256,17 +6699,23 @@ window.__ModuleLoader__.load({
 				workflowDuplicateName: "Workflow names must be unique.",
 				timeout: "Generation timeout (seconds)",
 				timeoutHint: "Covers submission, waiting, and image download; defaults to 300 seconds.",
+				workspaceSection: "Workspace",
 				saveToWorkspace: "Save to workspace",
 				saveToWorkspaceHint: "Write each generated image as a file into the session workspace.",
 				folder: "Workspace folder",
 				folderHint: "Subdirectory of the session workspace; empty means the workspace root.",
+				uiSection: "Interface",
+				showPill: "Show the image provider pill in the chat input bar",
+				showPillHint: "Adds a small pill to the composer tool row for switching the default image provider without opening settings; off by default.",
+				fetchModels: "Fetch models",
+				fetchingModels: "Fetching…",
+				fetchModelsHint: "Click \"Fetch models\" to list image-capable models with the stored key; manual input still works.",
+				modelsFound: "{n} image models found; open the model field to pick one",
+				modelsNone: "No image models found; type the model name manually",
 				saving: "Saving…",
 				save: "Save",
 				saved: "Saved",
 				savedToPath: "Saved to",
-				checkingKey: "Checking API Key…",
-				keyConfigured: "API Key configured",
-				keyNotConfigured: "API Key not configured",
 				generating: "Generating image…",
 				loading: "Loading image…",
 				loadFailed: "Failed to load image ({status})",
@@ -6322,6 +6771,7 @@ window.__ModuleLoader__.load({
 .dsh-ig-btn-reset{appearance:none;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;padding:7px 12px;background:var(--dsw-alias-bg-layer-3,#f9fafb);color:var(--dsw-alias-label-secondary,inherit);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
 .dsh-ig-btn-reset:hover{background:var(--dsw-alias-bg-layer-2,#edf0f3);border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
 .dsh-ig-hint,.dsh-ig-status{margin:0;color:var(--dsw-alias-label-tertiary,#7b818b);font-size:12px;line-height:1.4}
+.dsh-ig-hint-error{color:var(--dsw-alias-label-error,#d33)}
 .dsh-ig-status-error{color:var(--dsw-alias-label-error,#d33);font-weight:500}
 .dsh-ig-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--dsw-alias-border-l2,#eee)}
 .dsh-ig-check-row{display:flex;align-items:center;gap:8px;cursor:pointer}
@@ -6330,6 +6780,45 @@ window.__ModuleLoader__.load({
 .dsh-ig-save{appearance:none;border:0;border-radius:8px;padding:6px 16px;background:var(--dsw-alias-label-primary,#111827);color:var(--dsw-alias-bg-layer-3,#fff);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s}
 .dsh-ig-save:disabled{opacity:.4;cursor:default}
 
+/* Provider list: one expandable row per provider, each saving independently. */
+.dsh-ig-providers{display:grid;gap:10px;margin-top:14px}
+.dsh-ig-provider-row{border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:10px;background:var(--dsw-alias-bg-layer-3,transparent);overflow:hidden;transition:border-color .16s}
+.dsh-ig-provider-row-open{border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-provider-head{width:100%;appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 12px}
+.dsh-ig-provider-head:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4c78ff);outline-offset:-2px}
+.dsh-ig-provider-name{flex:1;min-width:0;font-size:13.5px;font-weight:550;color:var(--dsw-alias-label-primary,inherit)}
+.dsh-ig-provider-chevron{flex:none;color:var(--dsw-alias-label-tertiary,#7b818b);transition:transform .16s;display:inline-flex;align-items:center}
+.dsh-ig-provider-chevron-open{transform:rotate(180deg)}
+.dsh-ig-provider-body{border-top:1px solid var(--dsw-alias-border-l2,#eee);padding:2px 12px 14px}
+.dsh-ig-badge{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.6;padding:2px 9px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);color:var(--dsw-alias-label-secondary,inherit);white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
+.dsh-ig-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
+.dsh-ig-badge-ok{border-color:rgba(34,197,94,.45);color:#15803d;background:rgba(34,197,94,.08)}
+.dsh-ig-badge-missing{border-color:rgba(239,68,68,.4);color:#b91c1c;background:rgba(239,68,68,.06)}
+.dsh-ig-badge-neutral{color:var(--dsw-alias-label-tertiary,#7b818b)}
+.dsh-ig-badge-checking .dsh-ig-badge-dot{animation:dsh-ig-pulse 1s ease-in-out infinite}
+@keyframes dsh-ig-pulse{50%{opacity:.25}}
+
+/* Default provider radio pills. */
+.dsh-ig-radios{display:flex;flex-wrap:wrap;gap:8px}
+.dsh-ig-radio{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:12.5px;color:var(--dsw-alias-label-secondary,inherit);transition:border-color .15s,background .15s}
+.dsh-ig-radio:hover{border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-radio-checked{border-color:var(--dsw-alias-brand-primary,#4c78ff);background:rgba(76,120,255,.08);color:var(--dsw-alias-label-primary,inherit)}
+.dsh-ig-radio input[type=radio]{width:14px;height:14px;accent-color:var(--dsw-alias-brand-primary,#4c78ff);margin:0;cursor:pointer}
+
+/* Row-level actions: test connection, clear key, save. */
+.dsh-ig-row-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
+.dsh-ig-row-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dsh-ig-btn-secondary{appearance:none;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;padding:6px 14px;background:var(--dsw-alias-bg-layer-3,#f9fafb);color:var(--dsw-alias-label-secondary,inherit);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s}
+.dsh-ig-btn-secondary:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2,#edf0f3);border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-btn-secondary:disabled{opacity:.45;cursor:default}
+.dsh-ig-btn-danger{color:#b91c1c;border-color:rgba(239,68,68,.4)}
+.dsh-ig-btn-danger:hover:not(:disabled){background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.6)}
+
+/* Workspace section within the settings card. */
+.dsh-ig-section{display:grid;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--dsw-alias-border-l2,#eee)}
+.dsh-ig-section-title{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--dsw-alias-label-tertiary,#7b818b);text-transform:uppercase}
+.dsh-ig-status-readonly{color:var(--dsw-alias-label-tertiary,#7b818b);font-style:italic}
+
 .dsh-ig-result{display:grid;gap:10px;max-width:520px}
 .dsh-ig-promoted-results{display:grid;gap:16px}
 .dsh-ig-result-title{font-size:14px;font-weight:600}
@@ -6551,7 +7040,7 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => {
 				const style = document.createElement("style");
 				style.dataset.plugin = "dsh-image-gen";
-				style.textContent = `${STYLE}\n${STUDIO_STYLE}\n${INSPIRATION_STYLE}`;
+				style.textContent = `${STYLE}\n${STUDIO_STYLE}\n${INSPIRATION_STYLE}\n${PROVIDER_PILL_STYLE}`;
 				document.head.appendChild(style);
 				return () => {
 					style.remove();
@@ -6570,6 +7059,21 @@ window.__ModuleLoader__.load({
 					inject: () => ({ locale })
 				}, PromotedImageResultNode));
 			});
+			const credentialListeners = /* @__PURE__ */ new Set();
+			const notifyCredentialsUpdated = () => {
+				for (const listener of credentialListeners) listener();
+			};
+			ctx.effect(() => {
+				const remote = ctx.get("remote");
+				if (typeof remote?.$on !== "function") return () => {};
+				return remote.$on("credentials/reference-updated", notifyCredentialsUpdated);
+			}, "dsh-image-gen: credential events");
+			const credentialEvents = { listen(callback) {
+				credentialListeners.add(callback);
+				return () => {
+					credentialListeners.delete(callback);
+				};
+			} };
 			const injectSettingsItem = (owner, credentials) => {
 				const ownerRegister = owner.slots.register.bind(owner.slots);
 				owner.slots.inject("settings.plugin.item", () => ownerRegister({
@@ -6578,18 +7082,38 @@ window.__ModuleLoader__.load({
 					inject: () => ({
 						scope,
 						credentials,
-						locale
+						locale,
+						credentialEvents
 					})
 				}, ImageGenerationSettingsCard));
 			};
+			const injectComposerPill = (owner, credentials) => {
+				const ownerRegister = owner.slots.register.bind(owner.slots);
+				owner.slots.inject("conversation.input.right", () => ownerRegister({
+					name: "conversation.input.right",
+					id: "image-provider",
+					order: 10,
+					inject: () => ({
+						scope,
+						credentials,
+						locale,
+						credentialEvents
+					})
+				}, ImageProviderPill));
+			};
 			const remoteCredentials = asCredentialsRemote(ctx.get("remote.credentials"));
 			const legacyCredentials = credentialsFromLegacyConnection(ctx.get("connection"));
-			if (remoteCredentials !== void 0) injectSettingsItem(ctx, remoteCredentials);
-			else if (legacyCredentials !== void 0) injectSettingsItem(ctx, legacyCredentials);
-			else ctx.inject(["remote.credentials"], (remoteCtx) => {
+			if (remoteCredentials !== void 0) {
+				injectSettingsItem(ctx, remoteCredentials);
+				injectComposerPill(ctx, remoteCredentials);
+			} else if (legacyCredentials !== void 0) {
+				injectSettingsItem(ctx, legacyCredentials);
+				injectComposerPill(ctx, legacyCredentials);
+			} else ctx.inject(["remote.credentials"], (remoteCtx) => {
 				const credentials = asCredentialsRemote(remoteCtx.get("remote.credentials"));
 				if (credentials === void 0) throw new Error("dsh-image-gen: remote.credentials has an incompatible interface");
 				injectSettingsItem(remoteCtx, credentials);
+				injectComposerPill(remoteCtx, credentials);
 			});
 			ctx.slots.inject("tool.call.toolview", () => register({
 				name: "tool.call.toolview",
@@ -6653,32 +7177,102 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
-		/** Edit provider settings and its write-only API credential. */
+		function emptyProviderRow() {
+			return {
+				expanded: false,
+				model: "",
+				baseURL: "",
+				keyInput: "",
+				keyStatus: "checking",
+				keyInfo: void 0,
+				testing: false,
+				testResult: void 0,
+				fetchingModels: false,
+				modelOptions: [],
+				modelFetchMessage: "",
+				modelFetchIsError: false,
+				saving: false,
+				message: "",
+				messageIsError: false,
+				workflows: [],
+				activeWorkflow: "",
+				timeoutSeconds: DEFAULT_COMFYUI_TIMEOUT_MS / 1e3
+			};
+		}
+		/** Settings field each cloud provider persists its model under. */
+		const CLOUD_MODEL_FIELDS = {
+			google: "googleModel",
+			openai: "openaiModel",
+			"openai-compat": "openaiCompatModel",
+			seedream: "seedreamModel",
+			dashscope: "dashscopeModel",
+			xai: "xaiModel",
+			zhipu: "zhipuModel"
+		};
+		/** Settings field each cloud provider persists its endpoint or base URL under. */
+		const CLOUD_URL_FIELDS = {
+			google: "googleEndpoint",
+			openai: "openaiBaseURL",
+			"openai-compat": "openaiCompatBaseURL",
+			seedream: "seedreamBaseURL",
+			dashscope: "dashscopeEndpoint",
+			xai: "xaiBaseURL",
+			zhipu: "zhipuBaseURL"
+		};
+		/** Dictionary key of each cloud provider's endpoint hint. */
+		const CLOUD_HINT_KEYS = {
+			google: "endpointHintGoogle",
+			openai: "endpointHintOpenAI",
+			"openai-compat": "endpointHintOpenAICompat",
+			seedream: "endpointHintSeedream",
+			dashscope: "endpointHintDashScope",
+			xai: "endpointHintXAI",
+			zhipu: "endpointHintZhipu"
+		};
+		/** Config field a cloud provider persists its model under. */
+		function modelFieldOf(provider) {
+			return CLOUD_MODEL_FIELDS[provider];
+		}
+		/** Config field a cloud provider persists its endpoint or base URL under. */
+		function baseURLFieldOf(provider) {
+			return CLOUD_URL_FIELDS[provider];
+		}
+		/** Providers whose settings row offers the "pull models" button. */
+		function modelPullSupported(_provider) {
+			return true;
+		}
+		/** Build one row per provider from persisted settings, including ComfyUI extras. */
+		function rowsFromSettings(value) {
+			const rows = {};
+			for (const provider of IMAGE_PROVIDERS) rows[provider] = {
+				...emptyProviderRow(),
+				model: modelOf(provider, value),
+				baseURL: baseURLOf(provider, value),
+				...provider === "comfyui" ? {
+					workflows: resolveComfyUIWorkflows(value ?? {}),
+					activeWorkflow: activeComfyUIWorkflow(value ?? {})?.name ?? "",
+					timeoutSeconds: Math.max(1, Math.round((value?.comfyuiTimeoutMs ?? 3e5) / 1e3))
+				} : {}
+			};
+			return rows;
+		}
+		/** Edit each provider independently, pick an explicit default, and verify keys inline. */
 		function ImageGenerationSettingsCard(props) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const [snapshot, setSnapshot] = (0, react.useState)(() => props.scope.getSnapshot());
 			const [lang, setLang] = (0, react.useState)(() => props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
-			const [provider, setProvider] = (0, react.useState)("google");
-			const [model, setModel] = (0, react.useState)("");
-			const [baseURL, setBaseURL] = (0, react.useState)("");
-			const [workflows, setWorkflows] = (0, react.useState)([]);
-			const [activeWorkflow, setActiveWorkflow] = (0, react.useState)("");
-			const [timeoutSeconds, setTimeoutSeconds] = (0, react.useState)(DEFAULT_COMFYUI_TIMEOUT_MS / 1e3);
-			const [saveToWorkspace, setSaveToWorkspace] = (0, react.useState)(true);
-			const [workspaceFolder, setWorkspaceFolder] = (0, react.useState)("dsh-image-gen");
-			const [key, setKey] = (0, react.useState)("");
-			const [configured, setConfigured] = (0, react.useState)();
-			const [saving, setSaving] = (0, react.useState)(false);
-			const [message, setMessage] = (0, react.useState)("");
-			const [messageIsError, setMessageIsError] = (0, react.useState)(false);
-			const reportMessage = (text) => {
-				setMessage(text);
-				setMessageIsError(false);
-			};
-			const reportError = (text) => {
-				setMessage(text);
-				setMessageIsError(true);
-			};
+			const [defaultProvider, setDefaultProvider] = (0, react.useState)(() => props.scope.getSnapshot().value?.provider ?? "google");
+			const [providerMessage, setProviderMessage] = (0, react.useState)("");
+			const [providerMessageIsError, setProviderMessageIsError] = (0, react.useState)(false);
+			const [saveToWorkspace, setSaveToWorkspace] = (0, react.useState)(() => props.scope.getSnapshot().value?.saveToWorkspace ?? true);
+			const [workspaceFolder, setWorkspaceFolder] = (0, react.useState)(() => props.scope.getSnapshot().value?.workspaceFolder ?? "dsh-image-gen");
+			const [showPill, setShowPill] = (0, react.useState)(() => props.scope.getSnapshot().value?.showProviderPill === true);
+			const [uiMessage, setUiMessage] = (0, react.useState)("");
+			const [uiMessageIsError, setUiMessageIsError] = (0, react.useState)(false);
+			const [workspaceMessage, setWorkspaceMessage] = (0, react.useState)("");
+			const [workspaceMessageIsError, setWorkspaceMessageIsError] = (0, react.useState)(false);
+			const [rows, setRows] = (0, react.useState)(() => rowsFromSettings(props.scope.getSnapshot().value));
+			const [keyTick, setKeyTick] = (0, react.useState)(0);
 			(0, react.useEffect)(() => props.scope.subscribe(() => {
 				setSnapshot(props.scope.getSnapshot());
 			}), [props.scope]);
@@ -6687,6 +7281,10 @@ window.__ModuleLoader__.load({
 					setLang(props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
 				});
 			}, [props.locale]);
+			const credentialEvents = props.credentialEvents;
+			(0, react.useEffect)(() => credentialEvents?.listen(() => {
+				setKeyTick((tick) => tick + 1);
+			}), [credentialEvents]);
 			const t = (keyName, params) => {
 				let text = (lang === "en" ? DICT.en : DICT.zh)[keyName] || DICT.zh[keyName] || keyName;
 				if (params) for (const [k, v] of Object.entries(params)) text = text.replace(`{${k}}`, v);
@@ -6695,46 +7293,103 @@ window.__ModuleLoader__.load({
 			const providerLabels = {
 				google: t("providerGoogle"),
 				openai: t("providerOpenAI"),
+				"openai-compat": t("providerOpenAICompat"),
 				seedream: t("providerSeedream"),
 				dashscope: t("providerDashScope"),
+				xai: t("providerXAI"),
+				zhipu: t("providerZhipu"),
 				comfyui: t("providerComfyUI")
 			};
 			(0, react.useEffect)(() => {
 				const value = snapshot.value;
-				const next = value?.provider ?? "google";
-				setProvider(next);
-				setModel(modelOf(next, value));
-				setBaseURL(baseURLOf(next, value));
-				setWorkflows(resolveComfyUIWorkflows(value ?? {}));
-				setActiveWorkflow(activeComfyUIWorkflow(value ?? {})?.name ?? "");
-				setTimeoutSeconds(Math.max(1, Math.round((value?.comfyuiTimeoutMs ?? 3e5) / 1e3)));
+				setDefaultProvider(value?.provider ?? "google");
 				setSaveToWorkspace(value?.saveToWorkspace ?? true);
 				setWorkspaceFolder(value?.workspaceFolder ?? "dsh-image-gen");
+				setShowPill(value?.showProviderPill === true);
+				setRows((current) => {
+					const next = {};
+					for (const provider of IMAGE_PROVIDERS) next[provider] = {
+						...current[provider],
+						model: modelOf(provider, value),
+						baseURL: baseURLOf(provider, value),
+						...provider === "comfyui" ? {
+							workflows: resolveComfyUIWorkflows(value ?? {}),
+							activeWorkflow: activeComfyUIWorkflow(value ?? {})?.name ?? "",
+							timeoutSeconds: Math.max(1, Math.round((value?.comfyuiTimeoutMs ?? 3e5) / 1e3))
+						} : {}
+					};
+					return next;
+				});
 			}, [snapshot]);
+			const credentials = props.credentials;
 			(0, react.useEffect)(() => {
-				const keyRef = KEY_REF[provider];
-				if (keyRef === void 0) {
-					setConfigured(void 0);
-					return;
-				}
 				let active = true;
-				props.credentials.describe([keyRef]).then((response) => {
-					if (active) setConfigured(response.ok ? response.value?.[keyRef]?.configured ?? false : void 0);
-				}).catch(() => {
-					if (active) setConfigured(void 0);
-				});
+				for (const provider of CLOUD_IMAGE_PROVIDERS) {
+					const keyRef = cloudCredentialRef(provider);
+					if (keyRef === void 0) continue;
+					setRows((current) => ({
+						...current,
+						[provider]: {
+							...current[provider],
+							keyStatus: "checking"
+						}
+					}));
+					credentials.describe([keyRef]).then((response) => {
+						if (!active) return;
+						const info = response.ok ? response.value?.[keyRef] : void 0;
+						setRows((current) => ({
+							...current,
+							[provider]: {
+								...current[provider],
+								keyStatus: response.ok ? info?.configured ? "configured" : "missing" : "unknown",
+								keyInfo: info
+							}
+						}));
+					}).catch(() => {
+						if (!active) return;
+						setRows((current) => ({
+							...current,
+							[provider]: {
+								...current[provider],
+								keyStatus: "unknown"
+							}
+						}));
+					});
+				}
 				return () => {
 					active = false;
 				};
-			}, [props.credentials, provider]);
-			const save = async (event) => {
-				event.preventDefault();
-				setSaving(true);
-				setMessage("");
+			}, [credentials, keyTick]);
+			const updateRow = (provider, patch) => {
+				setRows((current) => ({
+					...current,
+					[provider]: {
+						...current[provider],
+						...patch
+					}
+				}));
+			};
+			/** The only action that ever changes the default provider; saving a key never does. */
+			const selectDefaultProvider = (provider) => {
+				setDefaultProvider(provider);
+				setProviderMessage("");
+				setProviderMessageIsError(false);
+				props.scope.set("provider", provider).catch((cause) => {
+					setDefaultProvider(snapshot.value?.provider ?? "google");
+					setProviderMessage(cause instanceof Error ? cause.message : String(cause));
+					setProviderMessageIsError(true);
+				});
+			};
+			const saveProviderRow = async (provider) => {
+				const row = rows[provider];
+				updateRow(provider, {
+					saving: true,
+					message: "",
+					messageIsError: false
+				});
 				try {
-					await props.scope.set("provider", provider);
 					if (provider === "comfyui") {
-						const entries = workflows.map((entry) => ({
+						const entries = row.workflows.map((entry) => ({
 							name: entry.name.trim(),
 							json: entry.json,
 							presetPrompt: (entry.presetPrompt ?? "").trim()
@@ -6744,98 +7399,702 @@ window.__ModuleLoader__.load({
 							validateComfyUIWorkflowJson(entry.json);
 						}
 						if (new Set(entries.map((entry) => entry.name)).size !== entries.length) throw new Error(t("workflowDuplicateName"));
-						const activeEntry = entries.find((entry) => entry.name === activeWorkflow) ?? entries[0];
-						await props.scope.set("comfyuiBaseURL", baseURL);
+						const activeEntry = entries.find((entry) => entry.name === row.activeWorkflow) ?? entries[0];
+						await props.scope.set("comfyuiBaseURL", row.baseURL);
 						await props.scope.set("comfyuiWorkflows", entries);
 						await props.scope.set("comfyuiActiveWorkflow", activeEntry === void 0 ? "" : activeEntry.name);
 						await props.scope.set("comfyuiWorkflowJson", activeEntry === void 0 ? "" : activeEntry.json);
 						await props.scope.set("comfyuiWorkflowName", activeEntry === void 0 ? "" : activeEntry.name);
-						await props.scope.set("comfyuiTimeoutMs", Math.max(1, Math.round(timeoutSeconds)) * 1e3);
+						await props.scope.set("comfyuiTimeoutMs", Math.max(1, Math.round(row.timeoutSeconds)) * 1e3);
 					} else {
-						await props.scope.set(provider === "google" ? "googleModel" : provider === "openai" ? "openaiModel" : provider === "seedream" ? "seedreamModel" : "dashscopeModel", model);
-						await props.scope.set(provider === "google" ? "googleEndpoint" : provider === "openai" ? "openaiBaseURL" : provider === "seedream" ? "seedreamBaseURL" : "dashscopeEndpoint", baseURL);
-					}
-					await props.scope.set("saveToWorkspace", saveToWorkspace);
-					await props.scope.set("workspaceFolder", workspaceFolder.trim());
-					if (key.trim().length > 0) {
-						const keyRef = KEY_REF[provider];
-						if (keyRef === void 0) throw new Error("ComfyUI does not use an API key in this version");
-						const response = await props.credentials.set(keyRef, key.trim());
-						if (!response.ok) throw new Error(response.error?.message ?? "Failed to save API key");
-						setKey("");
-						setConfigured(true);
+						await props.scope.set(modelFieldOf(provider), row.model);
+						await props.scope.set(baseURLFieldOf(provider), row.baseURL);
+						if (row.keyInput.trim().length > 0) {
+							const keyRef = cloudCredentialRef(provider);
+							if (keyRef === void 0) throw new Error(t("comfyuiNoKey"));
+							const response = await props.credentials.set(keyRef, row.keyInput.trim());
+							if (!response.ok) throw new Error(response.error?.message ?? t("saveKeyFailed"));
+							updateRow(provider, {
+								keyInput: "",
+								keyStatus: "configured"
+							});
+						}
 					}
-					reportMessage(t("saved"));
+					updateRow(provider, {
+						message: t("saved"),
+						messageIsError: false
+					});
+				} catch (cause) {
+					updateRow(provider, {
+						message: cause instanceof Error ? cause.message : String(cause),
+						messageIsError: true
+					});
+				} finally {
+					updateRow(provider, { saving: false });
+				}
+			};
+			/** Probe through the host route so the browser side never touches credential values. */
+			const testConnection = async (provider) => {
+				updateRow(provider, {
+					testing: true,
+					testResult: void 0,
+					message: "",
+					messageIsError: false
+				});
+				try {
+					const response = await fetch(TEST_CONNECTION_ROUTE, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({ provider })
+					});
+					if (!response.ok) throw new Error(`HTTP ${String(response.status)}`);
+					updateRow(provider, { testResult: await response.json() });
+				} catch (cause) {
+					updateRow(provider, { testResult: {
+						ok: false,
+						reason: "error",
+						message: cause instanceof Error ? cause.message : String(cause)
+					} });
+				} finally {
+					updateRow(provider, { testing: false });
+				}
+			};
+			/** Pull the provider's image-capable model ids through the host route (Google and the OpenAI family). */
+			const fetchProviderModels = async (provider) => {
+				updateRow(provider, {
+					fetchingModels: true,
+					modelFetchMessage: "",
+					modelFetchIsError: false
+				});
+				try {
+					const response = await fetch(TEST_CONNECTION_ROUTE, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({
+							provider,
+							action: "models"
+						})
+					});
+					if (!response.ok) throw new Error(`HTTP ${String(response.status)}`);
+					const payload = await response.json();
+					if (payload.ok && Array.isArray(payload.models)) {
+						const models = payload.models.filter((id) => typeof id === "string");
+						updateRow(provider, {
+							modelOptions: models,
+							modelFetchMessage: models.length > 0 ? t("modelsFound", { n: String(models.length) }) : t("modelsNone"),
+							modelFetchIsError: models.length === 0
+						});
+					} else if (payload.reason === "missing-key") updateRow(provider, {
+						modelFetchMessage: t("badgeMissing"),
+						modelFetchIsError: true
+					});
+					else if (payload.reason === "unauthorized") updateRow(provider, {
+						modelFetchMessage: t("testUnauthorized"),
+						modelFetchIsError: true
+					});
+					else updateRow(provider, {
+						modelFetchMessage: payload.message ?? t("testFailed"),
+						modelFetchIsError: true
+					});
+				} catch (cause) {
+					updateRow(provider, {
+						modelFetchMessage: cause instanceof Error ? cause.message : String(cause),
+						modelFetchIsError: true
+					});
+				} finally {
+					updateRow(provider, { fetchingModels: false });
+				}
+			};
+			const clearProviderKey = async (provider) => {
+				const keyRef = cloudCredentialRef(provider);
+				if (keyRef === void 0) return;
+				if (typeof props.credentials.unset !== "function") {
+					updateRow(provider, {
+						message: t("clearKeyUnsupported"),
+						messageIsError: true
+					});
+					return;
+				}
+				updateRow(provider, {
+					saving: true,
+					message: "",
+					messageIsError: false
+				});
+				try {
+					const response = await props.credentials.unset(keyRef);
+					if (!response.ok) throw new Error(response.error?.message ?? t("clearKeyFailed"));
+					updateRow(provider, {
+						keyStatus: "missing",
+						keyInput: "",
+						testResult: void 0,
+						message: t("keyCleared"),
+						messageIsError: false
+					});
 				} catch (cause) {
-					reportError(cause instanceof Error ? cause.message : String(cause));
+					updateRow(provider, {
+						message: cause instanceof Error ? cause.message : String(cause),
+						messageIsError: true
+					});
 				} finally {
-					setSaving(false);
+					updateRow(provider, { saving: false });
 				}
 			};
-			const keyStatus = configured === void 0 ? t("checkingKey") : configured ? t("keyConfigured") : t("keyNotConfigured");
-			const workflowStatus = activeWorkflow.length > 0 ? t("workflowImported", { name: activeWorkflow }) : t("workflowMissing");
+			const testResultText = (result) => {
+				if (result === void 0) return "";
+				if (result.ok) return t("testOk");
+				if (result.reason === "missing-key") return t("badgeMissing");
+				if (result.reason === "unauthorized") return t("testUnauthorized");
+				return `${t("testFailed")}${result.message !== void 0 && result.message.length > 0 ? `: ${result.message}` : ""}`;
+			};
+			const badgeOf = (provider) => {
+				if (provider === "comfyui") return {
+					text: t("comfyuiNoKey"),
+					className: "dsh-ig-badge dsh-ig-badge-neutral"
+				};
+				const status = rows[provider].keyStatus;
+				if (status === "checking") return {
+					text: t("badgeChecking"),
+					className: "dsh-ig-badge dsh-ig-badge-neutral dsh-ig-badge-checking"
+				};
+				if (status === "configured") return {
+					text: t("badgeConfigured"),
+					className: "dsh-ig-badge dsh-ig-badge-ok"
+				};
+				if (status === "missing") return {
+					text: t("badgeMissing"),
+					className: "dsh-ig-badge dsh-ig-badge-missing"
+				};
+				return {
+					text: t("badgeUnknown"),
+					className: "dsh-ig-badge dsh-ig-badge-neutral"
+				};
+			};
 			const importWorkflow = async (event) => {
 				const file = event.target.files?.[0];
 				event.target.value = "";
 				if (file === void 0) return;
-				reportMessage("");
+				updateRow("comfyui", {
+					message: "",
+					messageIsError: false
+				});
 				try {
 					if (file.size > 5242880) throw new Error(t("workflowTooLarge"));
 					const json = await file.text();
 					validateComfyUIWorkflowJson(json);
-					const name = uniqueComfyUIWorkflowName(file.name, workflows.map((entry) => entry.name));
-					setWorkflows((current) => [...current, {
-						name,
-						json
-					}]);
-					setActiveWorkflow((current) => current.length > 0 ? current : name);
-					reportMessage(t("workflowImported", { name }));
+					const name = uniqueComfyUIWorkflowName(file.name, rows.comfyui.workflows.map((entry) => entry.name));
+					setRows((current) => ({
+						...current,
+						comfyui: {
+							...current.comfyui,
+							workflows: [...current.comfyui.workflows, {
+								name,
+								json
+							}],
+							activeWorkflow: current.comfyui.activeWorkflow.length > 0 ? current.comfyui.activeWorkflow : name
+						}
+					}));
+					updateRow("comfyui", {
+						message: t("workflowImported", { name }),
+						messageIsError: false
+					});
 				} catch (cause) {
-					reportError(cause instanceof Error ? cause.message : String(cause));
+					updateRow("comfyui", {
+						message: cause instanceof Error ? cause.message : String(cause),
+						messageIsError: true
+					});
 				}
 			};
 			/** Renaming the active entry keeps the active selection following its new name. */
 			const renameWorkflow = (index, name) => {
-				const previous = workflows[index];
-				setWorkflows((current) => current.map((entry, position) => position === index ? {
-					...entry,
-					name
-				} : entry));
-				if (previous !== void 0 && previous.name === activeWorkflow) setActiveWorkflow(name);
+				setRows((current) => {
+					const previous = current.comfyui.workflows[index];
+					const workflows = current.comfyui.workflows.map((entry, position) => position === index ? {
+						...entry,
+						name
+					} : entry);
+					const activeWorkflow = previous !== void 0 && previous.name === current.comfyui.activeWorkflow ? name : current.comfyui.activeWorkflow;
+					return {
+						...current,
+						comfyui: {
+							...current.comfyui,
+							workflows,
+							activeWorkflow
+						}
+					};
+				});
 			};
 			/** Removing the active entry moves the selection to the first remaining workflow. */
 			const removeWorkflow = (index) => {
-				const previous = workflows[index];
-				const next = workflows.filter((_entry, position) => position !== index);
-				setWorkflows(next);
-				if (previous !== void 0 && previous.name === activeWorkflow) setActiveWorkflow(next[0]?.name ?? "");
+				setRows((current) => {
+					const previous = current.comfyui.workflows[index];
+					const workflows = current.comfyui.workflows.filter((_entry, position) => position !== index);
+					const activeWorkflow = previous !== void 0 && previous.name === current.comfyui.activeWorkflow ? workflows[0]?.name ?? "" : current.comfyui.activeWorkflow;
+					return {
+						...current,
+						comfyui: {
+							...current.comfyui,
+							workflows,
+							activeWorkflow
+						}
+					};
+				});
 			};
 			/** Editing one entry's preset leaves the rest of the entry untouched. */
 			const setWorkflowPreset = (index, presetPrompt) => {
-				setWorkflows((current) => current.map((entry, position) => position === index ? {
-					...entry,
-					presetPrompt
-				} : entry));
+				setRows((current) => {
+					const workflows = current.comfyui.workflows.map((entry, position) => position === index ? {
+						...entry,
+						presetPrompt
+					} : entry);
+					return {
+						...current,
+						comfyui: {
+							...current.comfyui,
+							workflows
+						}
+					};
+				});
 			};
-			return (0, react_jsx_runtime.jsxs)("li", {
-				className: `dsh-ig-card ${open ? "dsh-ig-card-open" : ""}`,
-				children: [(0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: "dsh-ig-head",
-					"aria-expanded": open,
-					onClick: () => {
-						setOpen((value) => !value);
-					},
-					children: [(0, react_jsx_runtime.jsxs)("span", {
-						className: "dsh-ig-head-text",
-						children: [(0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-ig-title",
-							children: t("title")
-						}), (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-ig-desc",
-							children: t("description")
-						})]
-					}), (0, react_jsx_runtime.jsx)("span", {
+			/** Workspace checkbox persists immediately, like every other toggle on this card. */
+			const toggleSaveToWorkspace = (next) => {
+				setSaveToWorkspace(next);
+				setWorkspaceMessage("");
+				setWorkspaceMessageIsError(false);
+				props.scope.set("saveToWorkspace", next).catch((cause) => {
+					setSaveToWorkspace(snapshot.value?.saveToWorkspace ?? true);
+					setWorkspaceMessage(cause instanceof Error ? cause.message : String(cause));
+					setWorkspaceMessageIsError(true);
+				});
+			};
+			/** Folder input persists on Enter or blur; no save button needed. */
+			const commitWorkspaceFolder = () => {
+				const next = workspaceFolder.trim();
+				if (next === (snapshot.value?.workspaceFolder ?? "dsh-image-gen")) return;
+				setWorkspaceMessage("");
+				setWorkspaceMessageIsError(false);
+				props.scope.set("workspaceFolder", next).then(() => {
+					setWorkspaceMessage(t("saved"));
+				}).catch((cause) => {
+					setWorkspaceFolder(snapshot.value?.workspaceFolder ?? "dsh-image-gen");
+					setWorkspaceMessage(cause instanceof Error ? cause.message : String(cause));
+					setWorkspaceMessageIsError(true);
+				});
+			};
+			/** The pill toggle saves immediately, like the default-provider radio. */
+			const toggleShowPill = (next) => {
+				setShowPill(next);
+				setUiMessage("");
+				setUiMessageIsError(false);
+				props.scope.set("showProviderPill", next).catch((cause) => {
+					setShowPill(snapshot.value?.showProviderPill === true);
+					setUiMessage(cause instanceof Error ? cause.message : String(cause));
+					setUiMessageIsError(true);
+				});
+			};
+			const renderCloudBody = (provider) => {
+				const row = rows[provider];
+				const keyRef = cloudCredentialRef(provider) ?? "";
+				const keyReadOnly = row.keyInfo?.writable === false;
+				return (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-ig-provider-body",
+					children: (0, react_jsx_runtime.jsxs)("form", {
+						onSubmit: (event) => {
+							event.preventDefault();
+							saveProviderRow(provider);
+						},
+						children: [
+							(0, react_jsx_runtime.jsxs)("label", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-label",
+										children: t("apiKeyLabel", { provider: providerLabels[provider] })
+									}),
+									(0, react_jsx_runtime.jsx)("input", {
+										className: "dsh-ig-input",
+										type: "password",
+										autoComplete: "off",
+										value: row.keyInput,
+										onChange: (event) => {
+											updateRow(provider, { keyInput: event.target.value });
+										},
+										placeholder: row.keyStatus === "configured" ? t("apiKeyPlaceholder") : "",
+										disabled: !snapshot.writable || keyReadOnly
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: keyReadOnly ? t("keyReadOnly", { source: row.keyInfo?.source ?? "" }) : t("apiKeyHint", { key: keyRef })
+									})
+								]
+							}),
+							(0, react_jsx_runtime.jsxs)("label", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-label",
+										children: t("endpoint")
+									}),
+									(0, react_jsx_runtime.jsxs)("div", {
+										className: "dsh-ig-input-group",
+										children: [(0, react_jsx_runtime.jsx)("input", {
+											className: "dsh-ig-input",
+											type: "url",
+											value: row.baseURL,
+											onChange: (event) => {
+												updateRow(provider, { baseURL: event.target.value });
+											},
+											required: true,
+											disabled: !snapshot.writable
+										}), provider !== "openai-compat" ? (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-ig-btn-reset",
+											title: t("resetTitle"),
+											onClick: () => {
+												updateRow(provider, { baseURL: DEFAULT_BASE_URLS[provider] });
+											},
+											disabled: !snapshot.writable,
+											children: t("reset")
+										}) : null]
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t(CLOUD_HINT_KEYS[provider])
+									})
+								]
+							}),
+							(0, react_jsx_runtime.jsxs)("label", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-label",
+										children: t("model")
+									}),
+									modelPullSupported(provider) ? (0, react_jsx_runtime.jsxs)("div", {
+										className: "dsh-ig-input-group",
+										children: [
+											(0, react_jsx_runtime.jsx)("input", {
+												className: "dsh-ig-input",
+												value: row.model,
+												onChange: (event) => {
+													updateRow(provider, { model: event.target.value });
+												},
+												list: `dsh-ig-${provider}-model-options`,
+												required: provider !== "openai-compat",
+												disabled: !snapshot.writable
+											}),
+											(0, react_jsx_runtime.jsx)("datalist", {
+												id: `dsh-ig-${provider}-model-options`,
+												children: row.modelOptions.map((id) => (0, react_jsx_runtime.jsx)("option", { value: id }, id))
+											}),
+											(0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsh-ig-btn-secondary",
+												disabled: row.fetchingModels || !snapshot.writable,
+												onClick: () => {
+													fetchProviderModels(provider);
+												},
+												children: row.fetchingModels ? t("fetchingModels") : t("fetchModels")
+											})
+										]
+									}) : (0, react_jsx_runtime.jsx)("input", {
+										className: "dsh-ig-input",
+										value: row.model,
+										onChange: (event) => {
+											updateRow(provider, { model: event.target.value });
+										},
+										required: true,
+										disabled: !snapshot.writable
+									}),
+									modelPullSupported(provider) ? row.modelFetchMessage.length > 0 ? (0, react_jsx_runtime.jsx)("span", {
+										className: `dsh-ig-hint${row.modelFetchIsError ? " dsh-ig-hint-error" : ""}`,
+										role: "status",
+										children: row.modelFetchMessage
+									}) : (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t("fetchModelsHint")
+									}) : null
+								]
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-row-actions",
+								children: [(0, react_jsx_runtime.jsx)("p", {
+									className: `dsh-ig-status${row.messageIsError ? " dsh-ig-status-error" : ""}`,
+									role: "status",
+									children: row.message || testResultText(row.testResult)
+								}), (0, react_jsx_runtime.jsxs)("span", {
+									className: "dsh-ig-row-buttons",
+									children: [
+										(0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-ig-btn-secondary",
+											disabled: row.testing,
+											onClick: () => {
+												testConnection(provider);
+											},
+											children: row.testing ? t("testing") : t("testConnection")
+										}),
+										row.keyStatus === "configured" && !keyReadOnly ? (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-ig-btn-secondary dsh-ig-btn-danger",
+											disabled: row.saving,
+											onClick: () => {
+												clearProviderKey(provider);
+											},
+											children: t("clearKey")
+										}) : null,
+										(0, react_jsx_runtime.jsx)("button", {
+											className: "dsh-ig-save",
+											type: "submit",
+											disabled: row.saving || !snapshot.writable,
+											children: row.saving ? t("saving") : t("save")
+										})
+									]
+								})]
+							})
+						]
+					})
+				});
+			};
+			const renderComfyUIBody = () => {
+				const row = rows.comfyui;
+				return (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-ig-provider-body",
+					children: (0, react_jsx_runtime.jsxs)("form", {
+						onSubmit: (event) => {
+							event.preventDefault();
+							saveProviderRow("comfyui");
+						},
+						children: [
+							(0, react_jsx_runtime.jsxs)("label", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-label",
+										children: t("endpoint")
+									}),
+									(0, react_jsx_runtime.jsxs)("div", {
+										className: "dsh-ig-input-group",
+										children: [(0, react_jsx_runtime.jsx)("input", {
+											className: "dsh-ig-input",
+											type: "url",
+											value: row.baseURL,
+											onChange: (event) => {
+												updateRow("comfyui", { baseURL: event.target.value });
+											},
+											required: true,
+											disabled: !snapshot.writable
+										}), (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-ig-btn-reset",
+											title: t("resetTitle"),
+											onClick: () => {
+												updateRow("comfyui", { baseURL: DEFAULT_BASE_URLS.comfyui });
+											},
+											disabled: !snapshot.writable,
+											children: t("reset")
+										})]
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t("endpointHintComfyUI")
+									})
+								]
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-label",
+										children: t("workflow")
+									}),
+									(0, react_jsx_runtime.jsxs)("div", {
+										className: "dsh-ig-file-row",
+										children: [(0, react_jsx_runtime.jsxs)("label", {
+											className: "dsh-ig-file-button",
+											children: [(0, react_jsx_runtime.jsx)("input", {
+												className: "dsh-ig-file-input",
+												type: "file",
+												accept: ".json,application/json",
+												onChange: (event) => {
+													importWorkflow(event);
+												}
+											}), t("workflowImport")]
+										}), row.workflows.length === 0 ? (0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-file-name",
+											children: t("workflowMissing")
+										}) : null]
+									}),
+									row.workflows.length > 0 ? (0, react_jsx_runtime.jsx)("ul", {
+										className: "dsh-ig-workflow-list",
+										children: row.workflows.map((entry, index) => (0, react_jsx_runtime.jsxs)("li", {
+											className: "dsh-ig-workflow-row",
+											children: [(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-workflow-main",
+												children: [
+													(0, react_jsx_runtime.jsx)("label", {
+														className: "dsh-ig-workflow-active",
+														title: t("workflowActiveTitle"),
+														children: (0, react_jsx_runtime.jsx)("input", {
+															type: "radio",
+															name: "dsh-ig-active-workflow",
+															"aria-label": t("workflowActiveTitle"),
+															checked: entry.name === row.activeWorkflow,
+															onChange: () => {
+																updateRow("comfyui", { activeWorkflow: entry.name });
+															}
+														})
+													}),
+													(0, react_jsx_runtime.jsx)("input", {
+														className: "dsh-ig-input dsh-ig-workflow-name",
+														value: entry.name,
+														title: entry.name,
+														onChange: (event) => {
+															renameWorkflow(index, event.target.value);
+														}
+													}),
+													(0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: "dsh-ig-btn-reset",
+														onClick: () => {
+															removeWorkflow(index);
+														},
+														children: t("workflowRemove")
+													})
+												]
+											}), (0, react_jsx_runtime.jsx)("input", {
+												className: "dsh-ig-input dsh-ig-workflow-preset",
+												value: entry.presetPrompt ?? "",
+												placeholder: t("workflowPresetPlaceholder"),
+												title: t("workflowPresetTitle"),
+												onChange: (event) => {
+													setWorkflowPreset(index, event.target.value);
+												}
+											})]
+										}, String(index)))
+									}) : null,
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t("workflowHint")
+									})
+								]
+							}),
+							(0, react_jsx_runtime.jsxs)("label", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-label",
+										children: t("timeout")
+									}),
+									(0, react_jsx_runtime.jsx)("input", {
+										className: "dsh-ig-input",
+										type: "number",
+										min: "1",
+										max: "3600",
+										step: "1",
+										value: row.timeoutSeconds,
+										onChange: (event) => {
+											updateRow("comfyui", { timeoutSeconds: Number(event.target.value) });
+										},
+										required: true,
+										disabled: !snapshot.writable
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t("timeoutHint")
+									})
+								]
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-row-actions",
+								children: [(0, react_jsx_runtime.jsx)("p", {
+									className: `dsh-ig-status${row.messageIsError ? " dsh-ig-status-error" : ""}`,
+									role: "status",
+									children: row.message || testResultText(row.testResult)
+								}), (0, react_jsx_runtime.jsxs)("span", {
+									className: "dsh-ig-row-buttons",
+									children: [(0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dsh-ig-btn-secondary",
+										disabled: row.testing,
+										onClick: () => {
+											testConnection("comfyui");
+										},
+										children: row.testing ? t("testing") : t("testConnection")
+									}), (0, react_jsx_runtime.jsx)("button", {
+										className: "dsh-ig-save",
+										type: "submit",
+										disabled: row.saving || !snapshot.writable || row.workflows.length === 0,
+										children: row.saving ? t("saving") : t("save")
+									})]
+								})]
+							})
+						]
+					})
+				});
+			};
+			const renderProviderRow = (provider) => {
+				const row = rows[provider];
+				const badge = badgeOf(provider);
+				return (0, react_jsx_runtime.jsxs)("div", {
+					className: `dsh-ig-provider-row ${row.expanded ? "dsh-ig-provider-row-open" : ""}`,
+					children: [(0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "dsh-ig-provider-head",
+						"aria-expanded": row.expanded,
+						onClick: () => {
+							updateRow(provider, { expanded: !row.expanded });
+						},
+						children: [
+							(0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ig-provider-name",
+								children: providerLabels[provider]
+							}),
+							(0, react_jsx_runtime.jsxs)("span", {
+								className: badge.className,
+								title: badge.text,
+								children: [(0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-badge-dot",
+									"aria-hidden": "true"
+								}), badge.text]
+							}),
+							(0, react_jsx_runtime.jsx)("span", {
+								className: `dsh-ig-provider-chevron ${row.expanded ? "dsh-ig-provider-chevron-open" : ""}`,
+								"aria-hidden": "true",
+								children: (0, react_jsx_runtime.jsx)("svg", {
+									width: "12",
+									height: "12",
+									viewBox: "0 0 16 16",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: (0, react_jsx_runtime.jsx)("path", { d: "M4 6l4 4 4-4" })
+								})
+							})
+						]
+					}), row.expanded ? provider === "comfyui" ? renderComfyUIBody() : renderCloudBody(provider) : null]
+				}, provider);
+			};
+			return (0, react_jsx_runtime.jsxs)("li", {
+				className: `dsh-ig-card ${open ? "dsh-ig-card-open" : ""}`,
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsh-ig-head",
+					"aria-expanded": open,
+					onClick: () => {
+						setOpen((value) => !value);
+					},
+					children: [(0, react_jsx_runtime.jsxs)("span", {
+						className: "dsh-ig-head-text",
+						children: [(0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-title",
+							children: t("title")
+						}), (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-desc",
+							children: t("description")
+						})]
+					}), (0, react_jsx_runtime.jsx)("span", {
 						className: `dsh-ig-chevron ${open ? "dsh-ig-chevron-open" : ""}`,
 						"aria-hidden": "true",
 						children: (0, react_jsx_runtime.jsx)("svg", {
@@ -6850,280 +8109,147 @@ window.__ModuleLoader__.load({
 							children: (0, react_jsx_runtime.jsx)("path", { d: "M4 6l4 4 4-4" })
 						})
 					})]
-				}), open ? (0, react_jsx_runtime.jsxs)("form", {
+				}), open ? (0, react_jsx_runtime.jsxs)("div", {
 					className: "dsh-ig-body",
-					onSubmit: (event) => {
-						save(event);
-					},
 					children: [
-						(0, react_jsx_runtime.jsxs)("label", {
-							className: "dsh-ig-field",
-							children: [
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-label",
-									children: t("provider")
-								}),
-								(0, react_jsx_runtime.jsxs)("select", {
-									className: "dsh-ig-input",
-									value: provider,
-									onChange: (event) => {
-										const next = event.target.value;
-										setProvider(next);
-										setModel(modelOf(next, snapshot.value));
-										setBaseURL(baseURLOf(next, snapshot.value));
-										setKey("");
-									},
-									children: [
-										(0, react_jsx_runtime.jsx)("option", {
-											value: "google",
-											children: t("providerGoogle")
-										}),
-										(0, react_jsx_runtime.jsx)("option", {
-											value: "openai",
-											children: t("providerOpenAI")
-										}),
-										(0, react_jsx_runtime.jsx)("option", {
-											value: "seedream",
-											children: t("providerSeedream")
-										}),
-										(0, react_jsx_runtime.jsx)("option", {
-											value: "dashscope",
-											children: t("providerDashScope")
-										}),
-										(0, react_jsx_runtime.jsx)("option", {
-											value: "comfyui",
-											children: t("providerComfyUI")
-										})
-									]
-								}),
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-hint",
-									children: providerLabels[provider]
-								})
-							]
-						}),
-						provider !== "comfyui" ? (0, react_jsx_runtime.jsxs)("label", {
-							className: "dsh-ig-field",
-							children: [
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-label",
-									children: t("apiKeyLabel", { provider: providerLabels[provider] })
-								}),
-								(0, react_jsx_runtime.jsx)("input", {
-									className: "dsh-ig-input",
-									type: "password",
-									autoComplete: "off",
-									value: key,
-									onChange: (event) => {
-										setKey(event.target.value);
-									},
-									placeholder: configured ? t("apiKeyPlaceholder") : ""
-								}),
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-hint",
-									children: t("apiKeyHint", { key: KEY_REF[provider] ?? "" })
-								})
-							]
+						!snapshot.writable ? (0, react_jsx_runtime.jsx)("p", {
+							className: "dsh-ig-status dsh-ig-status-readonly",
+							role: "note",
+							children: t("settingsReadOnly")
 						}) : null,
-						(0, react_jsx_runtime.jsxs)("label", {
+						(0, react_jsx_runtime.jsxs)("div", {
 							className: "dsh-ig-field",
 							children: [
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-label",
-									children: t("endpoint")
+									children: t("defaultProvider")
 								}),
-								(0, react_jsx_runtime.jsxs)("div", {
-									className: "dsh-ig-input-group",
-									children: [(0, react_jsx_runtime.jsx)("input", {
-										className: "dsh-ig-input",
-										type: "url",
-										value: baseURL,
-										onChange: (event) => {
-											setBaseURL(event.target.value);
-										},
-										required: true
-									}), (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-ig-btn-reset",
-										title: t("resetTitle"),
-										onClick: () => {
-											setBaseURL(DEFAULT_BASE_URLS[provider]);
-										},
-										children: t("reset")
-									})]
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-radios",
+									role: "radiogroup",
+									"aria-label": t("defaultProvider"),
+									children: IMAGE_PROVIDERS.map((provider) => (0, react_jsx_runtime.jsxs)("label", {
+										className: `dsh-ig-radio${defaultProvider === provider ? " dsh-ig-radio-checked" : ""}`,
+										children: [(0, react_jsx_runtime.jsx)("input", {
+											type: "radio",
+											name: "dsh-ig-default-provider",
+											checked: defaultProvider === provider,
+											onChange: () => {
+												selectDefaultProvider(provider);
+											},
+											disabled: !snapshot.writable
+										}), providerLabels[provider]]
+									}, provider))
 								}),
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: provider === "google" ? t("endpointHintGoogle") : provider === "openai" ? t("endpointHintOpenAI") : provider === "seedream" ? t("endpointHintSeedream") : provider === "dashscope" ? t("endpointHintDashScope") : t("endpointHintComfyUI")
-								})
+									children: t("defaultProviderHint")
+								}),
+								providerMessage.length > 0 ? (0, react_jsx_runtime.jsx)("span", {
+									className: `dsh-ig-status${providerMessageIsError ? " dsh-ig-status-error" : ""}`,
+									role: "status",
+									children: providerMessage
+								}) : null
 							]
 						}),
-						provider !== "comfyui" ? (0, react_jsx_runtime.jsxs)("label", {
-							className: "dsh-ig-field",
-							children: [(0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-ig-label",
-								children: t("model")
-							}), (0, react_jsx_runtime.jsx)("input", {
-								className: "dsh-ig-input",
-								value: model,
-								onChange: (event) => {
-									setModel(event.target.value);
-								},
-								required: true
-							})]
-						}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-ig-field",
+						(0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-providers",
+							children: IMAGE_PROVIDERS.map((provider) => renderProviderRow(provider))
+						}),
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-section",
 							children: [
 								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-label",
-									children: t("workflow")
+									className: "dsh-ig-section-title",
+									children: t("workspaceSection")
 								}),
 								(0, react_jsx_runtime.jsxs)("div", {
-									className: "dsh-ig-file-row",
+									className: "dsh-ig-field",
 									children: [(0, react_jsx_runtime.jsxs)("label", {
-										className: "dsh-ig-file-button",
+										className: "dsh-ig-check-row",
 										children: [(0, react_jsx_runtime.jsx)("input", {
-											className: "dsh-ig-file-input",
-											type: "file",
-											accept: ".json,application/json",
+											type: "checkbox",
+											checked: saveToWorkspace,
 											onChange: (event) => {
-												importWorkflow(event);
-											}
-										}), t("workflowImport")]
-									}), workflows.length === 0 ? (0, react_jsx_runtime.jsx)("span", {
-										className: "dsh-ig-file-name",
-										children: t("workflowMissing")
-									}) : null]
+												toggleSaveToWorkspace(event.target.checked);
+											},
+											disabled: !snapshot.writable
+										}), (0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-label",
+											children: t("saveToWorkspace")
+										})]
+									}), (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t("saveToWorkspaceHint")
+									})]
 								}),
-								workflows.length > 0 ? (0, react_jsx_runtime.jsx)("ul", {
-									className: "dsh-ig-workflow-list",
-									children: workflows.map((entry, index) => (0, react_jsx_runtime.jsxs)("li", {
-										className: "dsh-ig-workflow-row",
-										children: [(0, react_jsx_runtime.jsxs)("div", {
-											className: "dsh-ig-workflow-main",
-											children: [
-												(0, react_jsx_runtime.jsx)("label", {
-													className: "dsh-ig-workflow-active",
-													title: t("workflowActiveTitle"),
-													children: (0, react_jsx_runtime.jsx)("input", {
-														type: "radio",
-														name: "dsh-ig-active-workflow",
-														"aria-label": t("workflowActiveTitle"),
-														checked: entry.name === activeWorkflow,
-														onChange: () => {
-															setActiveWorkflow(entry.name);
-														}
-													})
-												}),
-												(0, react_jsx_runtime.jsx)("input", {
-													className: "dsh-ig-input dsh-ig-workflow-name",
-													value: entry.name,
-													title: entry.name,
-													onChange: (event) => {
-														renameWorkflow(index, event.target.value);
-													}
-												}),
-												(0, react_jsx_runtime.jsx)("button", {
-													type: "button",
-													className: "dsh-ig-btn-reset",
-													onClick: () => {
-														removeWorkflow(index);
-													},
-													children: t("workflowRemove")
-												})
-											]
-										}), (0, react_jsx_runtime.jsx)("input", {
-											className: "dsh-ig-input dsh-ig-workflow-preset",
-											value: entry.presetPrompt ?? "",
-											placeholder: t("workflowPresetPlaceholder"),
-											title: t("workflowPresetTitle"),
+								saveToWorkspace ? (0, react_jsx_runtime.jsxs)("label", {
+									className: "dsh-ig-field",
+									children: [
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-label",
+											children: t("folder")
+										}),
+										(0, react_jsx_runtime.jsx)("input", {
+											className: "dsh-ig-input",
+											value: workspaceFolder,
 											onChange: (event) => {
-												setWorkflowPreset(index, event.target.value);
-											}
-										})]
-									}, String(index)))
+												setWorkspaceFolder(event.target.value);
+											},
+											onBlur: () => {
+												commitWorkspaceFolder();
+											},
+											onKeyDown: (event) => {
+												if (event.key === "Enter") commitWorkspaceFolder();
+											},
+											placeholder: "dsh-image-gen",
+											disabled: !snapshot.writable
+										}),
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-hint",
+											children: t("folderHint")
+										})
+									]
 								}) : null,
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-hint",
-									children: t("workflowHint")
-								})
-							]
-						}), (0, react_jsx_runtime.jsxs)("label", {
-							className: "dsh-ig-field",
-							children: [
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-label",
-									children: t("timeout")
-								}),
-								(0, react_jsx_runtime.jsx)("input", {
-									className: "dsh-ig-input",
-									type: "number",
-									min: "1",
-									max: "3600",
-									step: "1",
-									value: timeoutSeconds,
-									onChange: (event) => {
-										setTimeoutSeconds(Number(event.target.value));
-									},
-									required: true
-								}),
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-hint",
-									children: t("timeoutHint")
-								})
+								workspaceMessage.length > 0 ? (0, react_jsx_runtime.jsx)("p", {
+									className: `dsh-ig-status${workspaceMessageIsError ? " dsh-ig-status-error" : ""}`,
+									role: "status",
+									children: workspaceMessage
+								}) : null
 							]
-						})] }),
-						(0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-ig-field",
-							children: [(0, react_jsx_runtime.jsxs)("label", {
-								className: "dsh-ig-check-row",
-								children: [(0, react_jsx_runtime.jsx)("input", {
-									type: "checkbox",
-									checked: saveToWorkspace,
-									onChange: (event) => {
-										setSaveToWorkspace(event.target.checked);
-									}
-								}), (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-label",
-									children: t("saveToWorkspace")
-								})]
-							}), (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-ig-hint",
-								children: t("saveToWorkspaceHint")
-							})]
 						}),
-						saveToWorkspace ? (0, react_jsx_runtime.jsxs)("label", {
-							className: "dsh-ig-field",
-							children: [
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-label",
-									children: t("folder")
-								}),
-								(0, react_jsx_runtime.jsx)("input", {
-									className: "dsh-ig-input",
-									value: workspaceFolder,
-									onChange: (event) => {
-										setWorkspaceFolder(event.target.value);
-									},
-									placeholder: "dsh-image-gen"
-								}),
-								(0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ig-hint",
-									children: t("folderHint")
-								})
-							]
-						}) : null,
 						(0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-ig-actions",
-							children: [(0, react_jsx_runtime.jsx)("p", {
-								className: `dsh-ig-status${messageIsError ? " dsh-ig-status-error" : ""}`,
-								role: "status",
-								children: message || (provider === "comfyui" ? workflowStatus : keyStatus)
-							}), (0, react_jsx_runtime.jsx)("button", {
-								className: "dsh-ig-save",
-								type: "submit",
-								disabled: saving || !snapshot.writable || provider === "comfyui" && workflows.length === 0,
-								children: saving ? t("saving") : t("save")
+							className: "dsh-ig-section",
+							children: [(0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ig-section-title",
+								children: t("uiSection")
+							}), (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-field",
+								children: [
+									(0, react_jsx_runtime.jsxs)("label", {
+										className: "dsh-ig-check-row",
+										children: [(0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: showPill,
+											onChange: (event) => {
+												toggleShowPill(event.target.checked);
+											},
+											disabled: !snapshot.writable
+										}), (0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-label",
+											children: t("showPill")
+										})]
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-hint",
+										children: t("showPillHint")
+									}),
+									uiMessage.length > 0 ? (0, react_jsx_runtime.jsx)("p", {
+										className: `dsh-ig-status${uiMessageIsError ? " dsh-ig-status-error" : ""}`,
+										role: "status",
+										children: uiMessage
+									}) : null
+								]
 							})]
 						})
 					]
@@ -7674,11 +8800,11 @@ window.__ModuleLoader__.load({
 			};
 		}
 		function modelOf(provider, value) {
-			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : provider === "seedream" ? value?.seedreamModel : provider === "dashscope" ? value?.dashscopeModel : activeComfyUIWorkflow(value ?? {})?.name;
+			const stored = provider === "comfyui" ? activeComfyUIWorkflow(value ?? {})?.name : value?.[CLOUD_MODEL_FIELDS[provider]];
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_MODELS[provider];
 		}
 		function baseURLOf(provider, value) {
-			const stored = provider === "google" ? value?.googleEndpoint : provider === "openai" ? value?.openaiBaseURL : provider === "seedream" ? value?.seedreamBaseURL : provider === "dashscope" ? value?.dashscopeEndpoint : value?.comfyuiBaseURL;
+			const stored = provider === "comfyui" ? value?.comfyuiBaseURL : value?.[CLOUD_URL_FIELDS[provider]];
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_BASE_URLS[provider];
 		}
 		//#endregion