dsh-modellix 0.1.0 → 0.2.0

package/lib/client.js

@@ -342,6 +342,8 @@ function parseModel(value) {
 			"audio",
 			"unknown"
 		], "model.kind"),
+		...model.taskType === void 0 ? {} : { taskType: readable(model.taskType, "model.taskType", 64) },
+		...model.description === void 0 ? {} : { description: readable(model.description, "model.description", MAX_SHORT_TEXT) },
 		featured: boolean(model.featured, "model.featured"),
 		available: boolean(model.available, "model.available"),
 		unavailableReason: model.unavailableReason === null ? null : oneOf(model.unavailableReason, DESIGN_MODEL_UNAVAILABLE_CODES, "model.unavailableReason")
@@ -440,7 +442,7 @@ function parseJob(value) {
 		createdAt: isoTimestamp(job.createdAt, "job.createdAt"),
 		updatedAt: isoTimestamp(job.updatedAt, "job.updatedAt"),
 		resources: array(job.resources, "job.resources", MAX_RESOURCES).map(parseResource),
-		diagnostic: job.diagnostic === null ? null : parseDiagnostic(job.diagnostic)
+		diagnostic: job.diagnostic === null ? null : parseDiagnostic$1(job.diagnostic)
 	};
 }
 function parseResource(value) {
@@ -457,7 +459,7 @@ function parseResource(value) {
 		expiresAt: resource.expiresAt === null ? null : isoTimestamp(resource.expiresAt, "resource.expiresAt")
 	};
 }
-function parseDiagnostic(value) {
+function parseDiagnostic$1(value) {
 	const diagnostic = object(value, "diagnostic");
 	if (Object.hasOwn(diagnostic, "message")) throw new ModellixClientContractError("diagnostic must use a stable code instead of Host prose");
 	return {
@@ -911,7 +913,7 @@ const MODAL_DIALOG_SELECTOR = "[role=\"dialog\"][aria-modal=\"true\"]";
 * therefore uses only the ARIA modal contract and a marker owned by this
 * plugin; it does not depend on host classes or DOM structure.
 */
-function useExternalDialogGate(requestedOpen) {
+function useExternalDialogGate(requestedOpen, externalDialogOwner) {
 	const [decision, setDecision] = (0, react.useState)({
 		requestedOpen: false,
 		allowed: false
@@ -931,7 +933,7 @@ function useExternalDialogGate(requestedOpen) {
 		const reconcile = () => {
 			reconciliationQueued = false;
 			if (disposed) return;
-			const allowed = !hasVisibleExternalDialog(ownerDocument);
+			const allowed = !hasVisibleExternalDialog(ownerDocument, resolveExternalDialogOwner(externalDialogOwner));
 			setDecision((current) => current.requestedOpen && current.allowed === allowed ? current : {
 				requestedOpen: true,
 				allowed
@@ -962,12 +964,12 @@ function useExternalDialogGate(requestedOpen) {
 			disposed = true;
 			observer?.disconnect();
 		};
-	}, [requestedOpen]);
+	}, [externalDialogOwner, requestedOpen]);
 	return requestedOpen && decision.requestedOpen && decision.allowed;
 }
 /** Adds the focus behavior intentionally absent from the public Modal primitive. */
 function useDialogA11y(options) {
-	const { open, container, initialFocusSelector, mandatory, onEscape } = options;
+	const { open, container, externalDialogOwner, initialFocusSelector, mandatory, onEscape } = options;
 	const onEscapeRef = (0, react.useRef)(onEscape);
 	const restoreTargetRef = (0, react.useRef)(null);
 	onEscapeRef.current = onEscape;
@@ -1019,13 +1021,14 @@ function useDialogA11y(options) {
 			document.removeEventListener("keydown", onKeyDown, true);
 			unlockInert();
 			unlockScroll();
-			if (!hasVisibleExternalDialog(document)) {
+			if (!hasVisibleExternalDialog(document, resolveExternalDialogOwner(externalDialogOwner))) {
 				restoreFocus(restoreTargetRef.current, dialogRoot, appRoot);
 				restoreTargetRef.current = null;
 			}
 		};
 	}, [
 		container,
+		externalDialogOwner,
 		initialFocusSelector,
 		mandatory,
 		open
@@ -1111,8 +1114,11 @@ function restoreFocus(previous, dialog, appRoot) {
 		if (fallback !== void 0 && focus(fallback)) return;
 	}
 }
-function hasVisibleExternalDialog(ownerDocument) {
-	return [...ownerDocument.querySelectorAll(MODAL_DIALOG_SELECTOR)].some((candidate) => candidate.querySelector(MODELLIX_DIALOG_SENTINEL) === null && isVisibleDialog(candidate));
+function hasVisibleExternalDialog(ownerDocument, allowedOwner = null) {
+	return [...ownerDocument.querySelectorAll(MODAL_DIALOG_SELECTOR)].some((candidate) => candidate !== allowedOwner && candidate.querySelector(MODELLIX_DIALOG_SENTINEL) === null && isVisibleDialog(candidate));
+}
+function resolveExternalDialogOwner(owner) {
+	return owner?.current?.closest(MODAL_DIALOG_SELECTOR) ?? null;
 }
 function isVisibleDialog(candidate) {
 	if (candidate.tagName === "DIALOG" && !candidate.hasAttribute("open")) return false;
@@ -1276,7 +1282,7 @@ function CredentialStatus({ configured, source, verification, t }) {
 	});
 }
 function CredentialModal(props) {
-	const { open, mandatory, title, description, services, onServicesChange, busy, errorCode, onSave, onSaved, onCancel, laterLabel = "cancel", t } = props;
+	const { open, mandatory, title, description, services, onServicesChange, busy, errorCode, onSave, onSaved, onCancel, laterLabel = "cancel", t, externalDialogOwner } = props;
 	const [draft, setDraft] = (0, react.useState)("");
 	const [visible, setVisible] = (0, react.useState)(false);
 	const [displayedErrorCode, setDisplayedErrorCode] = (0, react.useState)(errorCode);
@@ -1286,7 +1292,7 @@ function CredentialModal(props) {
 	const helpId = `${keyId}-help`;
 	const errorId = `${keyId}-error`;
 	const errorPresentation = displayedErrorCode === null ? null : presentClientError(displayedErrorCode);
-	const surfaceOpen = useExternalDialogGate(open);
+	const surfaceOpen = useExternalDialogGate(open, externalDialogOwner);
 	const clear = (0, react.useCallback)(() => {
 		draftRef.current = "";
 		setDraft("");
@@ -1301,6 +1307,7 @@ function CredentialModal(props) {
 	useDialogA11y({
 		open: surfaceOpen,
 		container: contentRef,
+		externalDialogOwner,
 		initialFocusSelector: "[data-mdlx-initial-focus]",
 		mandatory,
 		onEscape: close
@@ -1686,6 +1693,11 @@ var CredentialDialogCoordinator = class {
 		if (this.#snapshot.activeOwner !== null) return;
 		this.#publish({ activeOwner: owner });
 	}
+	/** Lets an explicit Credential editor adopt a queued shell recovery prompt. */
+	openCredential(owner) {
+		if (this.#snapshot.activeOwner !== null && this.#snapshot.activeOwner !== "shell:credential-recovery") return;
+		this.#publish({ activeOwner: owner });
+	}
 	presentRecovery(token) {
 		if (token === this.#snapshot.dismissedRecoveryToken) return;
 		if (token === this.#snapshot.recoveryToken) {
@@ -1916,8 +1928,28 @@ function DesignResultPreview({ resource, t }) {
 	});
 }
 //#endregion
+//#region src/client/result-tabs.ts
+/** Implements the WAI-ARIA Tabs arrow/Home/End keyboard pattern. */
+function handleResultTabKeyDown(event) {
+	if (![
+		"ArrowLeft",
+		"ArrowRight",
+		"Home",
+		"End"
+	].includes(event.key)) return;
+	const tabs = [...event.currentTarget.querySelectorAll("[role=\"tab\"]:not([disabled])")];
+	if (tabs.length === 0) return;
+	const active = tabs.findIndex((tab) => tab === event.target);
+	if (active < 0) return;
+	const next = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : tabs[(active + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length];
+	if (next === void 0) return;
+	event.preventDefault();
+	next.focus();
+	next.click();
+}
+//#endregion
 //#region src/client/DesignView.tsx
-function ModellixDesignView({ controller, settingsController, t }) {
+function ModellixDesignView({ advancedEditorOpen = true, controller, settingsController, onAddUrl, t }) {
 	const state = useResourceState(controller.store);
 	const settingsState = useResourceState(settingsController.store);
 	const snapshot = state.data;
@@ -1989,6 +2021,9 @@ function ModellixDesignView({ controller, settingsController, t }) {
 	(0, react.useEffect)(() => {
 		if (state.pending !== null) setOutcomeAnnouncement("");
 	}, [state.pending]);
+	(0, react.useEffect)(() => {
+		setOutcomeAnnouncement("");
+	}, [t]);
 	(0, react.useEffect)(() => {
 		if (snapshot === null) return;
 		const transition = designOutcomeTransition(previousOutcome.current, snapshot);
@@ -2056,307 +2091,294 @@ function ModellixDesignView({ controller, settingsController, t }) {
 		className: "mdlx-design",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mdlx-design-shell",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "mdlx-design-pane",
-				"aria-labelledby": "mdlx-design-title",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-						className: "mdlx-heading",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							id: "mdlx-design-title",
-							children: t("designTitle")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mdlx-muted",
-							children: t("designDescription")
-						})]
-					}),
-					!snapshot.enabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mdlx-info",
-						children: t("designDisabled")
-					}),
-					!snapshot.credentialReady && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mdlx-info",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("keyRequired") }),
-							settings?.credential.writable === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								type: "button",
-								variant: "primary",
-								onClick: () => credentialDialogs.open(credentialDialogOwner),
-								children: t("configureToContinue")
-							}),
-							settings?.credential.source === "env" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mdlx-muted",
-								children: t("envReadonly")
-							})
-						]
-					}),
-					snapshot.notice !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mdlx-info",
-						role: "status",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [t("notice"), ": "] }), t(designNoticeMessageKey(snapshot.notice))]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mdlx-field",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-								className: "mdlx-label",
-								htmlFor: "mdlx-design-model",
-								children: t("modelLabel")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mdlx-model-tools",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
-										className: "mdlx-input",
-										value: modelQuery,
-										maxLength: 512,
-										placeholder: t("modelSearchPlaceholder"),
-										"aria-label": t("modelSearchLabel"),
-										disabled: interactionBusy || !snapshot.enabled,
-										onChange: (event) => setModelQuery(event.currentTarget.value)
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-										className: "mdlx-select",
-										value: modelKind,
-										"aria-label": t("modelCategoryLabel"),
-										disabled: interactionBusy || !snapshot.enabled,
-										onChange: (event) => {
-											setModelKind(event.currentTarget.value);
-										},
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "all",
-												children: t("modelCategoryAll")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "image",
-												children: t("modelCategoryImage")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "video",
-												children: t("modelCategoryVideo")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "audio",
-												children: t("modelCategoryAudio")
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: "mdlx-design-editor",
+				className: "mdlx-design-editor",
+				hidden: !advancedEditorOpen,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "mdlx-design-pane",
+					"aria-label": t("advancedEditor"),
+					children: [
+						!snapshot.enabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mdlx-info",
+							children: t("designDisabled")
+						}),
+						!snapshot.credentialReady && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mdlx-info",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("keyRequired") }),
+								settings?.credential.writable === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									type: "button",
+									variant: "primary",
+									onClick: () => credentialDialogs.openCredential(credentialDialogOwner),
+									children: t("configureToContinue")
+								}),
+								settings?.credential.source === "env" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "mdlx-muted",
+									children: t("envReadonly")
+								})
+							]
+						}),
+						snapshot.notice !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mdlx-info",
+							role: "status",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [t("notice"), ": "] }), t(designNoticeMessageKey(snapshot.notice))]
+						}),
+						draft !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "mdlx-card",
+							"aria-labelledby": "mdlx-assistant-title",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "mdlx-heading",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										id: "mdlx-assistant-title",
+										children: t("assistantTitle")
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+									id: "mdlx-assistant-instruction",
+									className: "mdlx-textarea mdlx-textarea-small",
+									value: instruction,
+									maxLength: 8e3,
+									placeholder: t("assistantPlaceholder"),
+									"aria-labelledby": "mdlx-assistant-title",
+									disabled: interactionBusy,
+									onChange: (event) => setInstruction(event.currentTarget.value)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "mdlx-actions",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 										type: "button",
 										variant: "outline",
-										disabled: interactionBusy || !snapshot.enabled || !snapshot.credentialReady,
-										"aria-busy": state.pending === "refresh-design",
+										disabled: interactionBusy || instruction.trim().length === 0,
+										"aria-busy": state.pending === "propose",
 										onClick: () => {
-											controller.refreshCatalog();
+											const request = instruction.trim();
+											if (request === "") return;
+											controller.propose(request, parameters).then((accepted) => {
+												if (accepted) setInstruction("");
+											});
 										},
-										children: state.pending === "refresh-design" ? t("modelRefreshing") : t("modelRefresh")
+										children: state.pending === "propose" ? t("proposing") : t("propose")
 									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-								id: "mdlx-design-model",
-								className: "mdlx-select",
-								value: snapshot.selectedModelId ?? "",
-								"aria-describedby": selectedModel?.available === false ? "mdlx-design-model-status" : void 0,
-								disabled: interactionBusy || !snapshot.enabled || snapshot.models.length === 0,
-								onChange: (event) => {
-									const modelId = event.currentTarget.value;
-									if (modelId !== "") controller.selectModel(modelId);
-								},
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: "",
-										disabled: true,
-										children: t("chooseModel")
-									}),
-									snapshot.selectedModelId !== null && !visibleModels.some((model) => model.id === snapshot.selectedModelId) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: snapshot.selectedModelId,
-										disabled: selectedModel?.available === false,
-										children: snapshot.models.find((model) => model.id === snapshot.selectedModelId)?.label ?? snapshot.selectedModelId
-									}),
-									visibleModels.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
-										value: model.id,
-										disabled: !model.available,
-										children: [model.label, model.featured ? " ★" : ""]
-									}, model.id))
-								]
-							}),
-							selectedModel?.available === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								id: "mdlx-design-model-status",
-								className: "mdlx-error",
-								role: "status",
-								children: selectedModel.unavailableReason === null ? t("modelUnavailable") : t(designModelUnavailableMessageKey(selectedModel.unavailableReason))
-							}),
-							snapshot.models.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "mdlx-help",
-								children: t("noModels")
-							}) : visibleModels.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "mdlx-help",
-								children: t("noMatchingModels")
-							})
-						]
-					}),
-					draft !== null && promptPath !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mdlx-field",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: "mdlx-label",
-							htmlFor: "mdlx-design-prompt",
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mdlx-field",
 							children: [
-								t("promptLabel"),
-								" ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mdlx-required",
-									children: t("required")
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: "mdlx-label",
+									htmlFor: "mdlx-design-model",
+									children: t("modelLabel")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mdlx-model-tools",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+											className: "mdlx-input",
+											value: modelQuery,
+											maxLength: 512,
+											placeholder: t("modelSearchPlaceholder"),
+											"aria-label": t("modelSearchLabel"),
+											disabled: interactionBusy || !snapshot.enabled,
+											onChange: (event) => setModelQuery(event.currentTarget.value)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+											className: "mdlx-select",
+											value: modelKind,
+											"aria-label": t("modelCategoryLabel"),
+											disabled: interactionBusy || !snapshot.enabled,
+											onChange: (event) => {
+												setModelKind(event.currentTarget.value);
+											},
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+													value: "all",
+													children: t("modelCategoryAll")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+													value: "image",
+													children: t("modelCategoryImage")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+													value: "video",
+													children: t("modelCategoryVideo")
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+													value: "audio",
+													children: t("modelCategoryAudio")
+												})
+											]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+											type: "button",
+											variant: "outline",
+											disabled: interactionBusy || !snapshot.enabled || !snapshot.credentialReady,
+											"aria-busy": state.pending === "refresh-design",
+											onClick: () => {
+												controller.refreshCatalog();
+											},
+											children: state.pending === "refresh-design" ? t("modelRefreshing") : t("modelRefresh")
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+									id: "mdlx-design-model",
+									className: "mdlx-select",
+									value: snapshot.selectedModelId ?? "",
+									"aria-describedby": selectedModel?.available === false ? "mdlx-design-model-status" : void 0,
+									disabled: interactionBusy || !snapshot.enabled || snapshot.models.length === 0,
+									onChange: (event) => {
+										const modelId = event.currentTarget.value;
+										if (modelId !== "") controller.selectModel(modelId);
+									},
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "",
+											disabled: true,
+											children: t("chooseModel")
+										}),
+										snapshot.selectedModelId !== null && !visibleModels.some((model) => model.id === snapshot.selectedModelId) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: snapshot.selectedModelId,
+											disabled: selectedModel?.available === false,
+											children: snapshot.models.find((model) => model.id === snapshot.selectedModelId)?.label ?? snapshot.selectedModelId
+										}),
+										visibleModels.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+											value: model.id,
+											disabled: !model.available,
+											children: [model.label, model.featured ? " ★" : ""]
+										}, model.id))
+									]
+								}),
+								selectedModel?.available === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									id: "mdlx-design-model-status",
+									className: "mdlx-error",
+									role: "status",
+									children: selectedModel.unavailableReason === null ? t("modelUnavailable") : t(designModelUnavailableMessageKey(selectedModel.unavailableReason))
+								}),
+								snapshot.models.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "mdlx-help",
+									children: t("noModels")
+								}) : visibleModels.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "mdlx-help",
+									children: t("noMatchingModels")
 								})
 							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-							id: "mdlx-design-prompt",
-							className: "mdlx-textarea",
-							value: promptValue,
-							maxLength: fieldAtPath(draft.fields, promptPath)?.maxLength ?? void 0,
-							placeholder: t("promptPlaceholder"),
-							disabled: interactionBusy,
-							onChange: (event) => updateParameter(promptPath, event.currentTarget.value)
-						})]
-					}),
-					draft !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "mdlx-design-scroll",
-						"aria-labelledby": "mdlx-parameters-title",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mdlx-heading",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								id: "mdlx-parameters-title",
-								children: t("parametersTitle")
-							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mdlx-parameter-list",
-							children: [requiredFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignParameterField, {
-								field,
-								value: parameters[field.path],
-								invalid: invalidFields.has(field.path),
+						}),
+						draft !== null && promptPath !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mdlx-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "mdlx-label",
+								htmlFor: "mdlx-design-prompt",
+								children: [
+									t("promptLabel"),
+									" ",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "mdlx-required",
+										children: t("required")
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+								id: "mdlx-design-prompt",
+								className: "mdlx-textarea",
+								value: promptValue,
+								maxLength: fieldAtPath(draft.fields, promptPath)?.maxLength ?? void 0,
+								placeholder: t("promptPlaceholder"),
 								disabled: interactionBusy,
-								onChange: (value) => updateParameter(field.path, value),
-								onValidityChange: (valid) => setFieldValidity(field.path, valid),
-								t
-							}, field.path)), optionalFields.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-								className: "mdlx-advanced",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("advancedParameters", { count: optionalFields.length }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "mdlx-parameter-list",
-									children: optionalFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignParameterField, {
-										field,
-										value: parameters[field.path],
-										invalid: invalidFields.has(field.path),
-										disabled: interactionBusy,
-										onChange: (value) => updateParameter(field.path, value),
-										onValidityChange: (valid) => setFieldValidity(field.path, valid),
-										t
-									}, field.path))
-								})]
+								onChange: (event) => updateParameter(promptPath, event.currentTarget.value)
 							})]
-						})]
-					}),
-					draft !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "mdlx-card",
-						"aria-labelledby": "mdlx-assistant-title",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						}),
+						draft !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "mdlx-design-scroll",
+							"aria-labelledby": "mdlx-parameters-title",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "mdlx-heading",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-									id: "mdlx-assistant-title",
-									children: t("assistantTitle")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									id: "mdlx-assistant-paid-notice",
-									className: "mdlx-help",
-									children: t("assistantPaidNotice")
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-								id: "mdlx-assistant-instruction",
-								className: "mdlx-textarea mdlx-textarea-small",
-								value: instruction,
-								maxLength: 8e3,
-								placeholder: t("assistantPlaceholder"),
-								"aria-labelledby": "mdlx-assistant-title",
-								"aria-describedby": "mdlx-assistant-paid-notice",
-								disabled: interactionBusy,
-								onChange: (event) => setInstruction(event.currentTarget.value)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "mdlx-actions",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-									type: "button",
-									variant: "outline",
-									disabled: interactionBusy || instruction.trim().length === 0,
-									"aria-busy": state.pending === "propose",
-									onClick: () => {
-										const request = instruction.trim();
-										if (request === "") return;
-										controller.propose(request, parameters).then((accepted) => {
-											if (accepted) setInstruction("");
-										});
-									},
-									children: state.pending === "propose" ? t("proposing") : t("propose")
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+									id: "mdlx-parameters-title",
+									children: t("parametersTitle")
 								})
-							})
-						]
-					}),
-					snapshot.proposal !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProposalCard, {
-						snapshot,
-						parameters,
-						controller,
-						t
-					}),
-					draft !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mdlx-generate-block",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mdlx-help",
-								children: t("paidNotice")
-							}),
-							missingRequired && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mdlx-error",
-								children: t("requiredMissing")
-							}),
-							invalidFields.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mdlx-error",
-								children: t("parametersInvalid")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "mdlx-actions",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-									type: "button",
-									variant: snapshot.credentialReady && snapshot.proposal === null ? "primary" : "outline",
-									disabled: !canGenerate,
-									"aria-busy": submitting,
-									onClick: () => {
-										controller.submit(parameters);
-									},
-									children: submitting ? t("generating") : t("generate")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mdlx-parameter-list",
+								children: [requiredFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignParameterField, {
+									field,
+									value: parameters[field.path],
+									invalid: invalidFields.has(field.path),
+									disabled: interactionBusy,
+									onChange: (value) => updateParameter(field.path, value),
+									onValidityChange: (valid) => setFieldValidity(field.path, valid),
+									t
+								}, field.path)), optionalFields.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+									className: "mdlx-advanced",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("advancedParameters", { count: optionalFields.length }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "mdlx-parameter-list",
+										children: optionalFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignParameterField, {
+											field,
+											value: parameters[field.path],
+											invalid: invalidFields.has(field.path),
+											disabled: interactionBusy,
+											onChange: (value) => updateParameter(field.path, value),
+											onValidityChange: (valid) => setFieldValidity(field.path, valid),
+											t
+										}, field.path))
+									})]
+								})]
+							})]
+						}),
+						snapshot.proposal !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProposalCard, {
+							snapshot,
+							parameters,
+							controller,
+							t
+						}),
+						draft !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mdlx-generate-block",
+							children: [
+								missingRequired && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "mdlx-error",
+									children: t("requiredMissing")
+								}),
+								invalidFields.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "mdlx-error",
+									children: t("parametersInvalid")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "mdlx-actions",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+										type: "button",
+										variant: snapshot.credentialReady && snapshot.proposal === null ? "primary" : "outline",
+										disabled: !canGenerate,
+										"aria-busy": submitting,
+										onClick: () => {
+											controller.submit(parameters);
+										},
+										children: submitting ? t("generating") : t("generate")
+									})
 								})
-							})
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorNotice, {
-						code: state.errorCode,
-						t
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BusyStatus, {
-						busy: interactionBusy,
-						text: operationText(state.pending, t)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mdlx-live",
-						role: "status",
-						"aria-live": "polite",
-						children: outcomeAnnouncement
-					})
-				]
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorNotice, {
+							code: state.errorCode,
+							t
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BusyStatus, {
+							busy: interactionBusy,
+							text: operationText(state.pending, t)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mdlx-live",
+							role: "status",
+							"aria-live": "polite",
+							children: outcomeAnnouncement
+						})
+					]
+				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignResults, {
 				snapshot,
 				dateLocale: t("dateLocale"),
 				dialogCoordinator: credentialDialogs,
 				dialog: credentialDialog,
+				...onAddUrl === void 0 ? {} : { onAddUrl },
 				t
 			})]
 		}), settings !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CredentialModal, {
@@ -2599,125 +2621,167 @@ function ProposalCard({ snapshot, parameters, controller, t }) {
 		]
 	});
 }
-function DesignResults({ snapshot, dateLocale, dialogCoordinator, dialog, t }) {
-	const groups = (0, react.useMemo)(() => {
-		const running = [];
-		const succeeded = [];
-		const diagnostics = [];
-		for (const job of snapshot.jobs) if (job.status === "running") running.push(job);
-		else if (job.status === "succeeded") succeeded.push(job);
-		else diagnostics.push(job);
-		return {
-			running,
-			succeeded,
-			diagnostics
-		};
-	}, [snapshot.jobs]);
+function DesignResults({ snapshot, dateLocale, dialogCoordinator, dialog, onAddUrl, t }) {
+	const [open, setOpen] = (0, react.useState)(true);
+	const jobs = (0, react.useMemo)(() => [...snapshot.jobs].sort((left, right) => Date.parse(right.createdAt) - Date.parse(left.createdAt)), [snapshot.jobs]);
 	const empty = snapshot.jobs.length === 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "mdlx-design-pane",
-		"aria-labelledby": "mdlx-results-title",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-			className: "mdlx-heading",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+		className: "mdlx-design-pane mdlx-results-disclosure",
+		open,
+		onToggle: (event) => setOpen(event.currentTarget.open),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+			className: "mdlx-results-summary",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				id: "mdlx-results-title",
 				children: t("resultsTitle")
-			})
-		}), empty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mdlx-empty",
-			children: t("noResults")
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mdlx-design-scroll",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultSection, {
-					title: t("runningTitle"),
-					jobs: groups.running,
-					dateLocale,
-					dialogCoordinator,
-					dialog,
-					t
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultSection, {
-					title: t("succeededTitle"),
-					jobs: groups.succeeded,
-					dateLocale,
-					dialogCoordinator,
-					dialog,
-					t
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultSection, {
-					title: t("diagnosticsTitle"),
-					jobs: groups.diagnostics,
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "mdlx-muted",
+				children: t("resultsCount", { count: jobs.length })
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mdlx-results-body",
+			children: empty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mdlx-empty",
+				children: t("noResults")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "mdlx-result-list",
+				children: jobs.map((job) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultCard, {
+					job,
 					dateLocale,
 					dialogCoordinator,
 					dialog,
+					...onAddUrl === void 0 ? {} : { onAddUrl },
 					t
-				})
-			]
-		})]
-	});
-}
-function ResultSection({ title, jobs, dateLocale, dialogCoordinator, dialog, t }) {
-	if (jobs.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "mdlx-result-section",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "mdlx-result-list",
-			children: jobs.map((job) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultCard, {
-				job,
-				dateLocale,
-				dialogCoordinator,
-				dialog,
-				t
-			}, job.jobId))
+				}, job.jobId))
+			})
 		})]
 	});
 }
-function ResultCard({ job, dateLocale, dialogCoordinator, dialog, t }) {
+function ResultCard({ job, dateLocale, dialogCoordinator, dialog, onAddUrl, t }) {
+	const [open, setOpen] = (0, react.useState)(true);
+	const [tab, setTab] = (0, react.useState)("preview");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const tabId = (0, react.useId)();
 	const status = jobStatus(job.status, t);
 	const created = formatTime(job.createdAt, dateLocale);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+	const dot = job.status === "succeeded" ? "done" : job.status === "running" ? "ongoing" : job.status === "failed" ? "error" : "warning";
+	const resources = job.status === "expired" ? [] : job.resources;
+	const succeeded = job.status === "succeeded";
+	const resourceIndex = resources.length === 0 ? 0 : activeIndex % resources.length;
+	const currentResource = resources[resourceIndex];
+	const activeTabId = `${tabId}-${tab}-tab`;
+	const activePanelId = `${tabId}-${tab}-panel`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 		className: "mdlx-result-card",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mdlx-result-head",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+			className: "mdlx-result-disclosure",
+			open,
+			onToggle: (event) => setOpen(event.currentTarget.open),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+				className: "mdlx-result-card-summary",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mdlx-status-copy",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: job.status === "succeeded" ? "done" : job.status === "running" ? "ongoing" : job.status === "failed" ? "error" : "warning" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: status })]
+					className: "mdlx-result-head",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mdlx-status-copy",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: dot }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: status })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "mdlx-muted",
+						children: t("jobCreated", { time: created })
+					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "mdlx-muted",
-					children: t("jobCreated", { time: created })
+					children: t("jobModel", { model: job.modelId })
 				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "mdlx-muted",
-				children: t("jobModel", { model: job.modelId })
-			}),
-			job.resources.length > 0 && job.status !== "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mdlx-resource-list",
-				children: job.resources.map((resource) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultResource, {
-					resource,
-					dateLocale,
-					dialogCoordinator,
-					dialog,
-					t
-				}, resource.id))
-			}),
-			job.diagnostic !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mdlx-error",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-						className: "mdlx-code",
-						children: job.diagnostic.code
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(designDiagnosticMessageKey(job.diagnostic.code)) }),
-					job.diagnostic.retryable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("diagnosticRetryable") })
-				]
-			})
-		]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mdlx-result-card-body",
+				children: [succeeded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mdlx-result-tabs",
+					role: "tablist",
+					"aria-label": t("resultViewLabel"),
+					onKeyDown: handleResultTabKeyDown,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						id: `${tabId}-preview-tab`,
+						type: "button",
+						role: "tab",
+						"aria-controls": `${tabId}-preview-panel`,
+						"aria-selected": tab === "preview",
+						tabIndex: tab === "preview" ? 0 : -1,
+						className: "mdlx-result-tab",
+						onClick: () => setTab("preview"),
+						children: t("previewTab")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						id: `${tabId}-json-tab`,
+						type: "button",
+						role: "tab",
+						"aria-controls": `${tabId}-json-panel`,
+						"aria-selected": tab === "json",
+						tabIndex: tab === "json" ? 0 : -1,
+						className: "mdlx-result-tab",
+						onClick: () => setTab("json"),
+						children: t("jsonTab")
+					})]
+				}), tab === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					id: activePanelId,
+					role: "tabpanel",
+					"aria-labelledby": activeTabId,
+					className: "mdlx-result-panel",
+					children: currentResource === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mdlx-empty mdlx-empty-compact",
+						children: t("noPreview")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultResource, {
+						resource: currentResource,
+						dateLocale,
+						dialogCoordinator,
+						dialog,
+						...onAddUrl === void 0 ? {} : { onAddUrl },
+						t
+					}), resources.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mdlx-resource-nav",
+						"aria-label": t("resourceNavigation"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								type: "button",
+								variant: "outline",
+								onClick: () => setActiveIndex((resourceIndex - 1 + resources.length) % resources.length),
+								children: t("previousResource")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "mdlx-muted",
+								children: t("resourcePosition", {
+									current: resourceIndex + 1,
+									total: resources.length
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								type: "button",
+								variant: "outline",
+								onClick: () => setActiveIndex((resourceIndex + 1) % resources.length),
+								children: t("nextResource")
+							})
+						]
+					})] })
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+					id: activePanelId,
+					role: "tabpanel",
+					"aria-labelledby": activeTabId,
+					className: "mdlx-result-json",
+					children: JSON.stringify(job, null, 2)
+				})] }), job.diagnostic !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mdlx-error",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+							className: "mdlx-code",
+							children: job.diagnostic.code
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(designDiagnosticMessageKey(job.diagnostic.code)) }),
+						job.diagnostic.retryable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("diagnosticRetryable") })
+					]
+				})]
+			})]
+		})
 	});
 }
-function ResultResource({ resource, dateLocale, dialogCoordinator, dialog, t }) {
+function ResultResource({ resource, dateLocale, dialogCoordinator, dialog, onAddUrl, t }) {
 	const imageDialogOwner = `design-image:${(0, react.useId)()}`;
 	const imageSurfaceOpen = useExternalDialogGate(dialog.activeOwner === imageDialogOwner);
 	const imageDialogRef = (0, react.useRef)(null);
@@ -2733,29 +2797,34 @@ function ResultResource({ resource, dateLocale, dialogCoordinator, dialog, t })
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 		className: "mdlx-resource",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignResultPreview, {
+			resource.kind === "image" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "mdlx-image-preview-button",
+				"aria-label": t("openImage"),
+				onClick: () => dialogCoordinator.open(imageDialogOwner),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignResultPreview, {
+					resource,
+					t
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignResultPreview, {
 				resource,
 				t
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "mdlx-actions mdlx-actions-start",
-				children: [resource.kind === "image" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				children: [onAddUrl !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 					type: "button",
-					className: "mdlx-safe-link mdlx-link-button",
-					onClick: () => dialogCoordinator.open(imageDialogOwner),
-					children: t("openImage")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+					variant: "outline",
+					onClick: () => onAddUrl(resource.url),
+					children: t("addUrlToChat")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 					className: "mdlx-safe-link",
 					href: resource.downloadUrl,
 					target: "_blank",
 					rel: "noopener noreferrer",
 					referrerPolicy: "no-referrer",
 					download: true,
-					children: [
-						t("download"),
-						" ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRightUpOutline14, { size: 14 })
-					]
+					children: t("download")
 				})]
 			}),
 			resource.expiresAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2797,18 +2866,14 @@ function ResultResource({ resource, dateLocale, dialogCoordinator, dialog, t })
 						"data-mdlx-initial-focus": "",
 						onClick: closeImage,
 						children: t("close")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 						className: "mdlx-safe-link",
 						href: resource.downloadUrl,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						referrerPolicy: "no-referrer",
 						download: true,
-						children: [
-							t("download"),
-							" ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRightUpOutline14, { size: 14 })
-						]
+						children: t("download")
 					})]
 				})
 			]
@@ -2849,12 +2914,727 @@ function formatTime(value, locale) {
 	}).format(new Date(value));
 }
 //#endregion
+//#region src/client/DesignDrawer.tsx
+const MODELLIX_DESIGN_SPLIT_MEDIA_QUERY = "(min-width: 1280px)";
+const MODELLIX_DRAWER_EXIT_MS = 180;
+const MODELLIX_ADVANCED_EDITOR_ENTRY_HIDDEN = true;
+function isSplitViewport() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(min-width: 1280px)").matches;
+}
+var DesignDrawerController = class {
+	#rpc;
+	#layout;
+	#isSplitViewport;
+	#listeners = /* @__PURE__ */ new Set();
+	#controllers = /* @__PURE__ */ new Map();
+	#watchedJobs = /* @__PURE__ */ new Map();
+	#mediaCardClaims = /* @__PURE__ */ new Map();
+	#mediaCardListeners = /* @__PURE__ */ new Set();
+	#sessionReferences = /* @__PURE__ */ new Map();
+	#sessionReleaseTimers = /* @__PURE__ */ new Map();
+	#mediaCardVersion = 0;
+	#mediaCardOrder = 0;
+	#snapshot = {
+		open: false,
+		sessionId: null,
+		controller: null,
+		draft: "",
+		inputActions: null
+	};
+	#trigger = null;
+	#splitActive = false;
+	constructor(rpc, layout, splitViewport = isSplitViewport) {
+		this.#rpc = rpc;
+		this.#layout = layout;
+		this.#isSplitViewport = splitViewport;
+	}
+	subscribe = (listener) => {
+		this.#listeners.add(listener);
+		return () => this.#listeners.delete(listener);
+	};
+	getSnapshot = () => this.#snapshot;
+	subscribeMediaCards = (listener) => {
+		this.#mediaCardListeners.add(listener);
+		return () => this.#mediaCardListeners.delete(listener);
+	};
+	getMediaCardVersion = () => this.#mediaCardVersion;
+	claimMediaCard(sessionId, jobId, callId, operation) {
+		const key = `${sessionId}\n${jobId}`;
+		const claims = this.#mediaCardClaims.get(key) ?? /* @__PURE__ */ new Map();
+		if (claims.has(callId)) return () => void 0;
+		claims.set(callId, {
+			operation,
+			order: this.#mediaCardOrder++
+		});
+		this.#mediaCardClaims.set(key, claims);
+		this.#publishMediaCards();
+		return () => {
+			const current = this.#mediaCardClaims.get(key);
+			if (current?.delete(callId) !== true) return;
+			if (current.size === 0) this.#mediaCardClaims.delete(key);
+			this.#publishMediaCards();
+		};
+	}
+	isMediaCardPrimary(sessionId, jobId, callId, operation) {
+		const claims = this.#mediaCardClaims.get(`${sessionId}\n${jobId}`);
+		if (claims === void 0 || claims.size === 0) return true;
+		let primaryCallId = callId;
+		let primary = {
+			operation,
+			order: Number.MAX_SAFE_INTEGER
+		};
+		for (const [candidateCallId, candidate] of claims) if (compareMediaCardClaims(candidate, primary) < 0) {
+			primaryCallId = candidateCallId;
+			primary = candidate;
+		}
+		return primaryCallId === callId;
+	}
+	controllerForSession(sessionId) {
+		const existing = this.#controllers.get(sessionId);
+		if (existing !== void 0) return existing;
+		const controller = new DesignController(this.#rpc, sessionId);
+		this.#controllers.set(sessionId, controller);
+		return controller;
+	}
+	retainSession(sessionId) {
+		const pendingRelease = this.#sessionReleaseTimers.get(sessionId);
+		if (pendingRelease !== void 0) {
+			window.clearTimeout(pendingRelease);
+			this.#sessionReleaseTimers.delete(sessionId);
+		}
+		this.#sessionReferences.set(sessionId, (this.#sessionReferences.get(sessionId) ?? 0) + 1);
+		let retained = true;
+		return () => {
+			if (!retained) return;
+			retained = false;
+			const remaining = Math.max(0, (this.#sessionReferences.get(sessionId) ?? 1) - 1);
+			if (remaining > 0) {
+				this.#sessionReferences.set(sessionId, remaining);
+				return;
+			}
+			this.#sessionReferences.delete(sessionId);
+			const timer = window.setTimeout(() => {
+				this.#sessionReleaseTimers.delete(sessionId);
+				if ((this.#sessionReferences.get(sessionId) ?? 0) === 0) this.releaseSession(sessionId);
+			}, 0);
+			this.#sessionReleaseTimers.set(sessionId, timer);
+		};
+	}
+	watchJob(sessionId, jobId, initialStatus) {
+		if (initialStatus !== "running") return () => void 0;
+		const key = `${sessionId}\n${jobId}`;
+		const existing = this.#watchedJobs.get(key);
+		if (existing !== void 0) {
+			existing.references += 1;
+			return () => this.#releaseJobWatch(key, existing);
+		}
+		const controller = this.controllerForSession(sessionId);
+		const watched = {
+			references: 1,
+			timer: null,
+			stopped: false,
+			unsubscribeStore: () => void 0
+		};
+		const liveStatus = () => controller.store.getSnapshot().data?.jobs.find((job) => job.jobId === jobId)?.status;
+		const stopWhenTerminal = () => {
+			const status = liveStatus();
+			if (status === void 0 || status === "running") return;
+			watched.stopped = true;
+			if (watched.timer !== null) window.clearTimeout(watched.timer);
+			watched.timer = null;
+		};
+		const poll = async () => {
+			watched.timer = null;
+			if (watched.stopped) return;
+			await controller.load();
+			stopWhenTerminal();
+			if (!watched.stopped && watched.references > 0) watched.timer = window.setTimeout(() => {
+				poll();
+			}, 5e3);
+		};
+		watched.unsubscribeStore = controller.store.subscribe(stopWhenTerminal);
+		this.#watchedJobs.set(key, watched);
+		watched.timer = window.setTimeout(() => {
+			poll();
+		}, 0);
+		return () => this.#releaseJobWatch(key, watched);
+	}
+	open(sessionId, inputActions, draft, trigger) {
+		const controller = this.controllerForSession(sessionId);
+		this.#trigger = trigger;
+		this.#syncSplit(this.#isSplitViewport());
+		this.#publish({
+			open: true,
+			sessionId,
+			controller,
+			draft,
+			inputActions
+		});
+	}
+	close(restoreFocus = true) {
+		if (!this.#snapshot.open) return;
+		this.#syncSplit(false);
+		this.#publish({
+			...this.#snapshot,
+			open: false
+		});
+		if (restoreFocus) queueMicrotask(() => this.#trigger?.focus());
+	}
+	setSplitMode(enabled) {
+		if (!this.#snapshot.open) return;
+		this.#syncSplit(enabled);
+	}
+	updateSession(sessionId, inputActions, draft) {
+		if (this.#snapshot.sessionId !== sessionId) return;
+		this.#publish({
+			...this.#snapshot,
+			inputActions,
+			draft
+		});
+	}
+	releaseSession(sessionId) {
+		if (this.#snapshot.sessionId !== sessionId) return;
+		this.#syncSplit(false);
+		this.#trigger = null;
+		this.#publish({
+			open: false,
+			sessionId: null,
+			controller: null,
+			draft: "",
+			inputActions: null
+		});
+	}
+	#releaseJobWatch(key, watched) {
+		if (this.#watchedJobs.get(key) !== watched) return;
+		watched.references -= 1;
+		if (watched.references > 0) return;
+		watched.stopped = true;
+		if (watched.timer !== null) window.clearTimeout(watched.timer);
+		watched.unsubscribeStore();
+		this.#watchedJobs.delete(key);
+	}
+	appendUrl(url) {
+		const actions = this.#snapshot.inputActions;
+		if (actions === null) return;
+		const current = this.#snapshot.draft;
+		const next = `${current}${current === "" || /\s$/u.test(current) ? "" : "\n"}${url}`;
+		actions.setDraft(next);
+		this.#publish({
+			...this.#snapshot,
+			draft: next
+		});
+	}
+	#publish(snapshot) {
+		this.#snapshot = snapshot;
+		for (const listener of this.#listeners) listener();
+	}
+	#publishMediaCards() {
+		this.#mediaCardVersion += 1;
+		for (const listener of this.#mediaCardListeners) listener();
+	}
+	#syncSplit(enabled) {
+		if (enabled === this.#splitActive) return;
+		if (enabled) {
+			this.#layout.closeDetails();
+			this.#layout.openDetails();
+		} else this.#layout.closeDetails();
+		this.#splitActive = enabled;
+	}
+};
+function compareMediaCardClaims(left, right) {
+	return (left.operation === "generate" ? 0 : 1) - (right.operation === "generate" ? 0 : 1) || left.order - right.order;
+}
+function ModellixDesignLauncher({ drawer, inputActions, sessionId, t, useInput }) {
+	const draft = useInput((state) => state.draft);
+	const snapshot = (0, react.useSyncExternalStore)(drawer.subscribe, drawer.getSnapshot, drawer.getSnapshot);
+	const active = snapshot.open && snapshot.sessionId === String(sessionId);
+	(0, react.useEffect)(() => {
+		drawer.updateSession(String(sessionId), inputActions, draft);
+	}, [
+		draft,
+		drawer,
+		inputActions,
+		sessionId
+	]);
+	(0, react.useEffect)(() => drawer.retainSession(String(sessionId)), [drawer, sessionId]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+		type: "button",
+		variant: "outline",
+		className: "mdlx-design-launcher",
+		"aria-label": t("designTitle"),
+		"aria-expanded": active,
+		"aria-controls": "mdlx-design-drawer",
+		onClick: (event) => {
+			if (active) drawer.close();
+			else drawer.open(String(sessionId), inputActions, draft, event.currentTarget);
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "mdlx-launcher-label",
+			children: t("designTitle")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "mdlx-launcher-compact",
+			"aria-hidden": "true",
+			children: "M"
+		})]
+	});
+}
+function ModellixDesignDrawer({ drawer, settingsController, t }) {
+	const snapshot = (0, react.useSyncExternalStore)(drawer.subscribe, drawer.getSnapshot, drawer.getSnapshot);
+	const [retainedSnapshot, setRetainedSnapshot] = (0, react.useState)(snapshot.open && snapshot.controller !== null ? snapshot : null);
+	const [advancedEditorOpen, setAdvancedEditorOpen] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (snapshot.open && snapshot.controller !== null) setRetainedSnapshot(snapshot);
+	}, [
+		snapshot.controller,
+		snapshot.open,
+		snapshot.sessionId
+	]);
+	(0, react.useEffect)(() => {
+		if (snapshot.open || retainedSnapshot === null) return;
+		const timer = window.setTimeout(() => setRetainedSnapshot(null), MODELLIX_DRAWER_EXIT_MS);
+		return () => window.clearTimeout(timer);
+	}, [retainedSnapshot, snapshot.open]);
+	(0, react.useEffect)(() => {
+		setAdvancedEditorOpen(false);
+	}, [snapshot.sessionId]);
+	(0, react.useEffect)(() => {
+		if (!snapshot.open || typeof window.matchMedia !== "function") return;
+		const media = window.matchMedia(MODELLIX_DESIGN_SPLIT_MEDIA_QUERY);
+		const sync = () => drawer.setSplitMode(media.matches);
+		sync();
+		media.addEventListener("change", sync);
+		return () => media.removeEventListener("change", sync);
+	}, [drawer, snapshot.open]);
+	const presentedSnapshot = snapshot.open && snapshot.controller !== null ? snapshot : retainedSnapshot;
+	if (presentedSnapshot === null || presentedSnapshot.controller === null) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mdlx-design-drawer-viewport",
+		"data-closing": !snapshot.open || void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+			id: "mdlx-design-drawer",
+			className: "mdlx-design-drawer",
+			"aria-labelledby": "mdlx-design-drawer-title",
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					drawer.close();
+				}
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "mdlx-drawer-header",
+				"data-editor-open": advancedEditorOpen || void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						className: "mdlx-drawer-close",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseOutline16, { size: 16 }),
+						"aria-label": `${t("close")} ${t("designTitle")}`,
+						onClick: () => drawer.close()
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mdlx-heading",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+							id: "mdlx-design-drawer-title",
+							children: t("designTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mdlx-muted",
+							children: t("designDescription")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mdlx-drawer-header-reveal",
+						hidden: MODELLIX_ADVANCED_EDITOR_ENTRY_HIDDEN,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							type: "button",
+							variant: "outline",
+							className: "mdlx-drawer-editor-toggle",
+							"aria-controls": "mdlx-design-editor",
+							"aria-expanded": advancedEditorOpen,
+							onClick: (event) => {
+								const next = !advancedEditorOpen;
+								setAdvancedEditorOpen(next);
+								if (!next && event.detail > 0) event.currentTarget.blur();
+							},
+							children: t("advancedEditor")
+						}) })
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mdlx-drawer-body",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModellixDesignView, {
+					advancedEditorOpen,
+					controller: presentedSnapshot.controller,
+					settingsController,
+					onAddUrl: (url) => drawer.appendUrl(url),
+					t
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/client/MediaToolView.tsx
+function ModellixMediaToolView({ block, drawer, inputActions, sessionId, t, useInput }) {
+	const draft = useInput((state) => state.draft);
+	const [tab, setTab] = (0, react.useState)("preview");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const [imageOpen, setImageOpen] = (0, react.useState)(false);
+	const tabId = (0, react.useId)();
+	const imageDialogRef = (0, react.useRef)(null);
+	const isResultBlock = "kind" in block && block.kind === "tool-result";
+	const parsedResult = isResultBlock ? parseMediaToolResult(block.meta) : null;
+	const liveState = useResourceState(drawer.controllerForSession(String(sessionId)).store);
+	const trackedJobId = mediaToolJobId(parsedResult);
+	const operation = parsedResult?.operation;
+	const callId = "callId" in block && typeof block.callId === "string" ? block.callId : `${String(sessionId)}:${trackedJobId ?? "pending"}`;
+	(0, react.useSyncExternalStore)(drawer.subscribeMediaCards, drawer.getMediaCardVersion, drawer.getMediaCardVersion);
+	const parsedStatus = mediaToolStatus(parsedResult);
+	const result = resolveLiveMediaToolResult(parsedResult, trackedJobId === void 0 ? void 0 : liveState.data?.jobs.find((job) => job.jobId === trackedJobId), t);
+	(0, react.useEffect)(() => trackedJobId === void 0 ? void 0 : drawer.watchJob(String(sessionId), trackedJobId, parsedStatus), [
+		drawer,
+		parsedStatus,
+		sessionId,
+		trackedJobId
+	]);
+	(0, react.useEffect)(() => trackedJobId === void 0 || operation === void 0 ? void 0 : drawer.claimMediaCard(String(sessionId), trackedJobId, callId, operation), [
+		callId,
+		drawer,
+		operation,
+		sessionId,
+		trackedJobId
+	]);
+	const resources = result?.operation === "get_result" ? result.job?.resources ?? [] : result?.resources ?? [];
+	const resourceIndex = resources.length === 0 ? 0 : activeIndex % resources.length;
+	const current = resources[resourceIndex];
+	const imageSurfaceOpen = useExternalDialogGate(imageOpen && current?.kind === "image");
+	const closeImage = (0, react.useCallback)(() => setImageOpen(false), []);
+	useDialogA11y({
+		open: imageSurfaceOpen,
+		container: imageDialogRef,
+		initialFocusSelector: "[data-mdlx-initial-focus]",
+		mandatory: false,
+		onEscape: closeImage
+	});
+	(0, react.useEffect)(() => setImageOpen(false), [current?.url]);
+	if (trackedJobId !== void 0 && operation !== void 0 && !drawer.isMediaCardPrimary(String(sessionId), trackedJobId, callId, operation)) return null;
+	if (!isResultBlock) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mdlx-tool-result mdlx-muted",
+		role: "status",
+		children: t("generating")
+	});
+	if (result === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mdlx-tool-result mdlx-muted",
+		role: "status",
+		children: t("noPreview")
+	});
+	const status = result.operation === "get_result" ? result.job?.status : result.status;
+	const modelId = result.operation === "get_result" ? result.job?.modelId : result.modelId;
+	const diagnostic = result.operation === "get_result" ? result.job?.diagnostic : result.diagnostic;
+	const succeeded = status === "succeeded";
+	const activeTabId = `${tabId}-${tab}-tab`;
+	const activePanelId = `${tabId}-${tab}-panel`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+		className: "mdlx-tool-result",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mdlx-result-head",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: result.found === false ? t("resultNotFound") : mediaStatusLabel(status, t) }), modelId !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mdlx-muted",
+					children: modelId
+				})]
+			}),
+			succeeded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mdlx-result-tabs",
+				role: "tablist",
+				"aria-label": t("resultViewLabel"),
+				onKeyDown: handleResultTabKeyDown,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					id: `${tabId}-preview-tab`,
+					type: "button",
+					role: "tab",
+					"aria-controls": `${tabId}-preview-panel`,
+					"aria-selected": tab === "preview",
+					tabIndex: tab === "preview" ? 0 : -1,
+					className: "mdlx-result-tab",
+					onClick: () => setTab("preview"),
+					children: t("previewTab")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					id: `${tabId}-json-tab`,
+					type: "button",
+					role: "tab",
+					"aria-controls": `${tabId}-json-panel`,
+					"aria-selected": tab === "json",
+					tabIndex: tab === "json" ? 0 : -1,
+					className: "mdlx-result-tab",
+					onClick: () => setTab("json"),
+					children: t("jsonTab")
+				})]
+			}), tab === "json" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				id: activePanelId,
+				role: "tabpanel",
+				"aria-labelledby": activeTabId,
+				className: "mdlx-result-json",
+				children: JSON.stringify(result, null, 2)
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: activePanelId,
+				role: "tabpanel",
+				"aria-labelledby": activeTabId,
+				className: "mdlx-result-panel",
+				children: current === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mdlx-empty mdlx-empty-compact",
+					children: t("noPreview")
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					current.kind === "image" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "mdlx-image-preview-button",
+						"aria-label": t("openImage"),
+						onClick: () => setImageOpen(true),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignResultPreview, {
+							resource: toWireResource(current, resourceIndex),
+							t
+						})
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignResultPreview, {
+						resource: toWireResource(current, resourceIndex),
+						t
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mdlx-actions mdlx-actions-start",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							type: "button",
+							variant: "outline",
+							onClick: () => {
+								const separator = draft === "" || /\s$/u.test(draft) ? "" : "\n";
+								inputActions.setDraft(`${draft}${separator}${current.url}`);
+							},
+							children: t("addUrlToChat")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "mdlx-safe-link",
+							href: current.url,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							referrerPolicy: "no-referrer",
+							download: true,
+							children: t("download")
+						})]
+					}),
+					resources.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mdlx-resource-nav",
+						"aria-label": t("resourceNavigation"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								type: "button",
+								variant: "outline",
+								onClick: () => setActiveIndex((resourceIndex - 1 + resources.length) % resources.length),
+								children: t("previousResource")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "mdlx-muted",
+								children: t("resourcePosition", {
+									current: resourceIndex + 1,
+									total: resources.length
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								type: "button",
+								variant: "outline",
+								onClick: () => setActiveIndex((resourceIndex + 1) % resources.length),
+								children: t("nextResource")
+							})
+						]
+					})
+				] })
+			})] }),
+			diagnostic !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mdlx-error",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+					className: "mdlx-code",
+					children: diagnostic.code
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: diagnostic.message })]
+			})
+		]
+	}), succeeded && current?.kind === "image" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+		open: imageSurfaceOpen,
+		title: t("imageViewerTitle"),
+		closeLabel: t("close"),
+		onClose: closeImage,
+		headless: true,
+		className: "mdlx-modal mdlx-image-modal",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: imageDialogRef,
+			className: "mdlx-modal-content",
+			"data-mdlx-dialog-surface": "",
+			tabIndex: -1,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mdlx-heading",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "mdlx-modal-title",
+						children: t("imageViewerTitle")
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					className: "mdlx-image-full",
+					src: current.url,
+					alt: t("generatedPreview"),
+					referrerPolicy: "no-referrer"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mdlx-actions",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						type: "button",
+						variant: "outline",
+						"data-mdlx-initial-focus": "",
+						onClick: closeImage,
+						children: t("close")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "mdlx-safe-link",
+						href: current.url,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						referrerPolicy: "no-referrer",
+						download: true,
+						children: t("download")
+					})]
+				})
+			]
+		})
+	})] });
+}
+function mediaToolJobId(result) {
+	return result?.operation === "get_result" ? result.job?.jobId : result?.jobId;
+}
+function mediaToolStatus(result) {
+	return result?.operation === "get_result" ? result.job?.status : result?.status;
+}
+function resolveLiveMediaToolResult(result, liveJob, t) {
+	if (result === null || liveJob === void 0) return result;
+	const resources = liveJob.resources.map((resource) => ({
+		kind: resource.kind,
+		url: resource.url,
+		...resource.expiresAt === null ? {} : { expiresAt: resource.expiresAt }
+	}));
+	const diagnostic = liveJob.diagnostic === null ? void 0 : {
+		code: liveJob.diagnostic.code,
+		message: t(designDiagnosticMessageKey(liveJob.diagnostic.code))
+	};
+	if (result.operation === "generate") {
+		const { diagnostic: _staleDiagnostic, ...withoutDiagnostic } = result;
+		return {
+			...withoutDiagnostic,
+			status: liveJob.status,
+			modelId: liveJob.modelId,
+			resources,
+			...diagnostic === void 0 ? {} : { diagnostic }
+		};
+	}
+	return {
+		...result,
+		found: true,
+		job: {
+			jobId: liveJob.jobId,
+			modelId: liveJob.modelId,
+			status: liveJob.status,
+			resources,
+			...diagnostic === void 0 ? {} : { diagnostic }
+		}
+	};
+}
+function parseMediaToolResult(value) {
+	const root = record(value);
+	if (root === null || root.service !== "media" || root.operation !== "generate" && root.operation !== "get_result") return null;
+	if (root.operation === "generate") {
+		const status = safeText(root.status, 64);
+		const modelId = safeText(root.modelId, 256);
+		const jobId = safeText(root.jobId, 256);
+		const diagnostic = parseDiagnostic(root.diagnostic);
+		return {
+			operation: "generate",
+			...status === void 0 ? {} : { status },
+			...modelId === void 0 ? {} : { modelId },
+			...jobId === void 0 ? {} : { jobId },
+			resources: parseResources(root.resources),
+			...diagnostic === void 0 ? {} : { diagnostic }
+		};
+	}
+	const job = record(root.job);
+	const diagnostic = job === null ? void 0 : parseDiagnostic(job.diagnostic);
+	return {
+		operation: "get_result",
+		found: root.found === true,
+		...job === null ? {} : { job: {
+			jobId: safeText(job.jobId, 256) ?? "",
+			modelId: safeText(job.modelId, 256) ?? "",
+			status: safeText(job.status, 64) ?? "",
+			resources: parseResources(job.resources),
+			...diagnostic === void 0 ? {} : { diagnostic }
+		} }
+	};
+}
+function parseResources(value) {
+	if (!Array.isArray(value)) return [];
+	const resources = [];
+	for (const candidate of value.slice(0, 32)) {
+		const resource = record(candidate);
+		if (resource === null || resource.kind !== "image" && resource.kind !== "video" && resource.kind !== "audio" || typeof resource.url !== "string") continue;
+		let url;
+		try {
+			url = safeResourceHref(resource.url);
+		} catch {
+			continue;
+		}
+		const expiresAt = safeText(resource.expiresAt, 128);
+		resources.push({
+			kind: resource.kind,
+			url,
+			...expiresAt === void 0 ? {} : { expiresAt }
+		});
+	}
+	return resources;
+}
+function parseDiagnostic(value) {
+	const diagnostic = record(value);
+	if (diagnostic === null) return void 0;
+	const code = safeText(diagnostic.code, 128);
+	const message = safeText(diagnostic.message, 1024);
+	return code === void 0 || message === void 0 ? void 0 : {
+		code,
+		message
+	};
+}
+function safeText(value, maximum) {
+	return typeof value === "string" && value.length > 0 && value.length <= maximum ? value : void 0;
+}
+function record(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
+}
+function mediaStatusLabel(status, t) {
+	switch (status) {
+		case "running": return t("running");
+		case "succeeded": return t("succeeded");
+		case "failed": return t("failed");
+		case "canceled": return t("canceled");
+		case "expired": return t("expired");
+		case "submit-unknown": return t("unknown");
+		default: return t("unknown");
+	}
+}
+function toWireResource(resource, index) {
+	return {
+		id: `tool-resource-${String(index)}`,
+		kind: resource.kind,
+		url: resource.url,
+		downloadUrl: resource.url,
+		expiresAt: resource.expiresAt ?? null
+	};
+}
+//#endregion
 //#region src/client/locales.ts
 const MODELLIX_LOCALE_NAMESPACE = "modellix";
 const zh = {
 	dateLocale: "zh-CN",
 	nav: "Modellix",
-	designTab: "Design",
 	onboardingTitle: "连接 Modellix",
 	onboardingDescription: "输入一个 Modellix API Key，即可启用 Design、LLM 模型和 Web Tools。",
 	keyLabel: "Modellix API Key",
@@ -2871,7 +3651,7 @@ const zh = {
 	serviceLlm: "LLM 模型",
 	serviceLlmDescription: "在 Harness 中快速切换 Modellix 支持的模型。",
 	serviceWeb: "Web Tools",
-	serviceWebDescription: "为原生 web_search 与 web_fetch 提供 Modellix Provider。",
+	serviceWebDescription: "提供可自动调用的 Modellix 网页搜索与读取工具。",
 	settingsTitle: "Modellix",
 	settingsDescription: "一个 API Key，统一使用 Design、LLM 与 Web Tools。",
 	credentialTitle: "API Key",
@@ -2914,13 +3694,13 @@ const zh = {
 	errorGeneric: "暂时无法完成操作，请重试。",
 	errorConflict: "配置已在其他位置更新，请刷新后重试。",
 	errorKeyInvalid: "这个 API Key 无效，请检查后重新输入。",
-	errorBilling: "账户当前无法计费，请检查 Modellix 余额或账单状态。",
+	errorBilling: "当前请求无法完成，请在 Modellix 控制台查看账户状态。",
 	errorRateLimited: "请求过于频繁，请稍后手动重试。",
 	errorOffline: "当前无法连接 Modellix，请检查网络后重试。",
 	errorTimeout: "Modellix 响应超时，请稍后手动重试。",
 	errorServer: "Modellix 服务暂时不可用，请稍后手动重试。",
 	errorPolicy: "当前账户或环境策略不允许此操作。",
-	errorSubmitUnknown: "提交结果未知。请先查看结果列表，避免重复计费。",
+	errorSubmitUnknown: "提交结果未知。请先查看结果列表，不要重复提交。",
 	errorAssetExpired: "结果资源已过期，无法继续访问。",
 	errorDesignSchema: "模型参数定义已变化或无法解析，请刷新模型后重试。",
 	designTitle: "Modellix Design",
@@ -2940,11 +3720,11 @@ const zh = {
 	promptPlaceholder: "描述画面、视频动作或要合成的声音…",
 	parametersTitle: "参数",
 	advancedParameters: "高级参数（{count}）",
+	advancedEditor: "高级参数编辑器",
 	required: "必填",
 	optional: "可选",
 	requiredMissing: "请填写所有必填参数后再生成。",
 	assistantTitle: "用对话调整参数",
-	assistantPaidNotice: "发送后会使用同一个 Modellix Key 调用固定 LLM 生成参数提议，可能产生费用；不会自动生成媒体。",
 	assistantPlaceholder: "例如：改成 16:9，生成 8 秒视频，风格更电影化",
 	propose: "生成参数提议",
 	proposing: "正在分析…",
@@ -2956,7 +3736,6 @@ const zh = {
 	conflicts: "需要先解决冲突",
 	generate: "确认并生成",
 	generating: "正在提交…",
-	paidNotice: "生成是计费操作；每次点击只提交一次，不会自动重试。",
 	designDisabled: "Design 已关闭，可在 Modellix 设置中重新开启。",
 	keyRequired: "请先在 Modellix 设置中配置 API Key。",
 	noModels: "当前没有可用模型，请稍后刷新。",
@@ -2970,9 +3749,17 @@ const zh = {
 	designNoticeCatalogUnavailable: "Modellix Design 模型目录暂时不可用，请稍后刷新。",
 	designNoticeCredentialReloaded: "API Key 已更改，Design 模型和参数已重新加载。",
 	resultsTitle: "结果",
-	runningTitle: "进行中",
-	succeededTitle: "已完成",
-	diagnosticsTitle: "诊断",
+	resultsCount: "{count} 条",
+	resultViewLabel: "结果视图",
+	previewTab: "预览",
+	jsonTab: "JSON",
+	noPreview: "当前还没有可预览的媒体结果。",
+	resultNotFound: "未找到对应的生成任务。",
+	resourceNavigation: "媒体结果导航",
+	previousResource: "上一项",
+	nextResource: "下一项",
+	resourcePosition: "第 {current} / {total} 项",
+	addUrlToChat: "添加 URL 到对话框",
 	noResults: "还没有生成记录。确认参数并生成后，结果会显示在这里。",
 	running: "生成中",
 	succeeded: "已完成",
@@ -2980,10 +3767,10 @@ const zh = {
 	canceled: "已取消",
 	unknown: "提交结果未知",
 	expired: "结果已过期",
-	openImage: "打开原图",
+	openImage: "放大图片",
 	imageViewerTitle: "生成图片",
 	close: "关闭",
-	download: "下载结果",
+	download: "下载",
 	expiresAt: "有效期至 {time}",
 	invalidJson: "请输入有效的 JSON。",
 	invalidParameter: "此参数不符合当前模型的约束。",
@@ -2994,9 +3781,9 @@ const zh = {
 	generatedAudioPreview: "生成音频结果预览",
 	jobModel: "模型：{model}",
 	jobCreated: "创建于 {time}",
-	diagnosticRetryable: "插件会继续尝试安全的只读状态查询，但绝不会自动重复计费生成提交。",
+	diagnosticRetryable: "插件会继续尝试安全的只读状态查询，但绝不会自动重复生成提交。",
 	diagnosticCredentialChanged: "此任务属于更早的 API Key，无法继续刷新。",
-	diagnosticSubmitUnknown: "生成提交结果未知，请先检查结果列表，避免重复计费。",
+	diagnosticSubmitUnknown: "生成提交结果未知，请先检查结果列表，不要重复提交。",
 	diagnosticGenerationFailed: "生成任务未完成。",
 	diagnosticResultUnavailable: "生成已完成，但没有可用的结果资源。",
 	diagnosticCredentialRejected: "刷新任务时 Modellix 拒绝了当前 API Key。",
@@ -3015,7 +3802,6 @@ const zh = {
 const en = {
 	dateLocale: "en-US",
 	nav: "Modellix",
-	designTab: "Design",
 	onboardingTitle: "Connect Modellix",
 	onboardingDescription: "Enter one Modellix API Key to enable Design, LLM models, and Web Tools.",
 	keyLabel: "Modellix API Key",
@@ -3032,7 +3818,7 @@ const en = {
 	serviceLlm: "LLM models",
 	serviceLlmDescription: "Quickly switch between Modellix models in Harness.",
 	serviceWeb: "Web Tools",
-	serviceWebDescription: "Provide Modellix for native web_search and web_fetch.",
+	serviceWebDescription: "Provide automatic Modellix Web Search and Web Fetch tools.",
 	settingsTitle: "Modellix",
 	settingsDescription: "One API Key for Design, LLM, and Web Tools.",
 	credentialTitle: "API Key",
@@ -3075,13 +3861,13 @@ const en = {
 	errorGeneric: "The operation could not be completed. Try again.",
 	errorConflict: "Settings changed elsewhere. Refresh and try again.",
 	errorKeyInvalid: "This API Key is invalid. Check it and enter it again.",
-	errorBilling: "Billing is unavailable. Check the Modellix balance or billing status.",
+	errorBilling: "This request cannot be completed. Check the account status in the Modellix console.",
 	errorRateLimited: "Too many requests. Wait before retrying manually.",
 	errorOffline: "Modellix cannot be reached. Check the network and try again.",
 	errorTimeout: "Modellix timed out. Retry manually later.",
 	errorServer: "Modellix is temporarily unavailable. Retry manually later.",
 	errorPolicy: "The current account or environment policy does not allow this operation.",
-	errorSubmitUnknown: "The submission outcome is unknown. Check Results before submitting another billed request.",
+	errorSubmitUnknown: "The submission outcome is unknown. Check Results before submitting again.",
 	errorAssetExpired: "This result resource has expired and is no longer available.",
 	errorDesignSchema: "The model parameter definition changed or could not be parsed. Refresh the model and try again.",
 	designTitle: "Modellix Design",
@@ -3101,11 +3887,11 @@ const en = {
 	promptPlaceholder: "Describe the image, video motion, or sound…",
 	parametersTitle: "Parameters",
 	advancedParameters: "Advanced parameters ({count})",
+	advancedEditor: "Advanced parameter editor",
 	required: "Required",
 	optional: "Optional",
 	requiredMissing: "Complete every required parameter before generating.",
 	assistantTitle: "Adjust parameters by chat",
-	assistantPaidNotice: "Sending calls a fixed LLM with the same Modellix Key to propose parameter changes and may incur a charge. It never starts media generation.",
 	assistantPlaceholder: "For example: make it 16:9, eight seconds, and more cinematic",
 	propose: "Propose parameter changes",
 	proposing: "Analyzing…",
@@ -3117,7 +3903,6 @@ const en = {
 	conflicts: "Resolve conflicts before applying",
 	generate: "Confirm and generate",
 	generating: "Submitting…",
-	paidNotice: "Generation is billed. Each click submits once and is never retried automatically.",
 	designDisabled: "Design is disabled. Enable it in Modellix settings.",
 	keyRequired: "Configure a Modellix API Key in settings first.",
 	noModels: "No model is currently available. Refresh and try again.",
@@ -3131,9 +3916,17 @@ const en = {
 	designNoticeCatalogUnavailable: "The Modellix Design model catalog is temporarily unavailable. Refresh it later.",
 	designNoticeCredentialReloaded: "The API Key changed, so the Design model and parameters were reloaded.",
 	resultsTitle: "Results",
-	runningTitle: "Running",
-	succeededTitle: "Succeeded",
-	diagnosticsTitle: "Diagnostics",
+	resultsCount: "{count} item(s)",
+	resultViewLabel: "Result view",
+	previewTab: "Preview",
+	jsonTab: "JSON",
+	noPreview: "No media preview is available yet.",
+	resultNotFound: "The requested generation task was not found.",
+	resourceNavigation: "Media result navigation",
+	previousResource: "Previous",
+	nextResource: "Next",
+	resourcePosition: "{current} of {total}",
+	addUrlToChat: "Add URL to chat",
 	noResults: "No generations yet. Confirm parameters and generate to see results here.",
 	running: "Running",
 	succeeded: "Succeeded",
@@ -3141,10 +3934,10 @@ const en = {
 	canceled: "Canceled",
 	unknown: "Submission outcome unknown",
 	expired: "Result expired",
-	openImage: "Open full image",
+	openImage: "Enlarge image",
 	imageViewerTitle: "Generated image",
 	close: "Close",
-	download: "Download result",
+	download: "Download",
 	expiresAt: "Available until {time}",
 	invalidJson: "Enter valid JSON.",
 	invalidParameter: "This value does not satisfy the current model constraints.",
@@ -3155,9 +3948,9 @@ const en = {
 	generatedAudioPreview: "Generated audio result preview",
 	jobModel: "Model: {model}",
 	jobCreated: "Created {time}",
-	diagnosticRetryable: "The plugin will continue safe read-only status checks, but it never repeats a billed generation submission automatically.",
+	diagnosticRetryable: "The plugin will continue safe read-only status checks, but it never repeats a generation submission automatically.",
 	diagnosticCredentialChanged: "This task belongs to an earlier API Key and cannot be refreshed.",
-	diagnosticSubmitUnknown: "The generation submission outcome is unknown. Check Results before submitting another billed request.",
+	diagnosticSubmitUnknown: "The generation submission outcome is unknown. Check Results before submitting again.",
 	diagnosticGenerationFailed: "The generation did not complete.",
 	diagnosticResultUnavailable: "The generation completed without a usable result resource.",
 	diagnosticCredentialRejected: "Modellix rejected the current API Key while refreshing this task.",
@@ -3177,6 +3970,7 @@ const en = {
 //#region src/client/SettingsSection.tsx
 function ModellixSettingsSection({ controller, t }) {
 	const state = useResourceState(controller.store);
+	const settingsSectionRef = (0, react.useRef)(null);
 	const snapshot = state.data;
 	const [services, setServices] = (0, react.useState)(null);
 	const [announcement, setAnnouncement] = (0, react.useState)("");
@@ -3204,6 +3998,9 @@ function ModellixSettingsSection({ controller, t }) {
 	(0, react.useEffect)(() => {
 		if (snapshot !== null) setServices(snapshot.services);
 	}, [snapshot?.settingsRevision]);
+	(0, react.useEffect)(() => {
+		setAnnouncement("");
+	}, [t]);
 	const busy = state.pending !== null;
 	const saveServices = (0, react.useCallback)(() => {
 		if (snapshot === null || services === null || busy) return;
@@ -3219,6 +4016,7 @@ function ModellixSettingsSection({ controller, t }) {
 		t
 	]);
 	if (snapshot === null || services === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: settingsSectionRef,
 		className: "mdlx-settings",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "mdlx-live",
@@ -3239,6 +4037,7 @@ function ModellixSettingsSection({ controller, t }) {
 	const canWriteCredential = credential.writable && credential.source !== "env";
 	const llmRefreshDisabled = busy || !snapshot.services.llm || !credential.configured;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: settingsSectionRef,
 		className: "mdlx-settings",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
@@ -3277,7 +4076,7 @@ function ModellixSettingsSection({ controller, t }) {
 							type: "button",
 							variant: !credential.configured || credential.verification === "invalid" ? "primary" : "outline",
 							disabled: busy,
-							onClick: () => credentialDialogs.open(credentialDialogOwner),
+							onClick: () => credentialDialogs.openCredential(credentialDialogOwner),
 							children: credential.configured ? t("replaceKey") : t("configureKey")
 						}), credential.configured && canWriteCredential && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 							type: "button",
@@ -3356,7 +4155,8 @@ function ModellixSettingsSection({ controller, t }) {
 				},
 				onCancel: () => credentialDialogs.dismissCredential(credentialDialogOwner),
 				laterLabel: credentialRecovery ? "later" : "cancel",
-				t
+				t,
+				externalDialogOwner: settingsSectionRef
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RemoveCredentialDialog, {
 				open: removeOpen,
@@ -3371,7 +4171,8 @@ function ModellixSettingsSection({ controller, t }) {
 						setAnnouncement(t("saved"));
 					});
 				},
-				t
+				t,
+				externalDialogOwner: settingsSectionRef
 			})
 		]
 	});
@@ -3426,12 +4227,13 @@ function LlmCatalogCard({ snapshot, dateLocale, busy, disabled, onRefresh, t })
 		]
 	});
 }
-function RemoveCredentialDialog({ open, busy, errorCode, onClose, onConfirm, t }) {
+function RemoveCredentialDialog({ open, busy, errorCode, onClose, onConfirm, t, externalDialogOwner }) {
 	const contentRef = (0, react.useRef)(null);
-	const surfaceOpen = useExternalDialogGate(open);
+	const surfaceOpen = useExternalDialogGate(open, externalDialogOwner);
 	useDialogA11y({
 		open: surfaceOpen,
 		container: contentRef,
+		externalDialogOwner,
 		initialFocusSelector: "[data-mdlx-initial-focus]",
 		mandatory: false,
 		onEscape: onClose
@@ -3505,7 +4307,7 @@ function llmHealthText(health, t) {
 //#endregion
 //#region src/client/styles.ts
 const MODELLIX_CLIENT_CSS = String.raw`
-.mdlx-settings,.mdlx-design,.mdlx-modal-content{font-family:var(--dsw-font-family,inherit);color:var(--dsw-alias-label-primary);box-sizing:border-box}.mdlx-settings *,.mdlx-design *,.mdlx-modal-content *{box-sizing:border-box}
+.mdlx-settings,.mdlx-design,.mdlx-design-drawer,.mdlx-tool-result,.mdlx-modal-content{font-family:var(--dsw-font-family,inherit);color:var(--dsw-alias-label-primary);box-sizing:border-box}.mdlx-settings *,.mdlx-design *,.mdlx-design-drawer *,.mdlx-tool-result *,.mdlx-modal-content *{box-sizing:border-box}
 .mdlx-settings{width:min(100%,760px);min-width:0;display:grid;gap:12px;padding:4px}
 .mdlx-heading{display:grid;gap:4px;min-width:0;margin:0 0 8px}.mdlx-heading h2,.mdlx-heading h3,.mdlx-heading p{margin:0;overflow-wrap:anywhere}
 .mdlx-heading h2{font-size:20px;line-height:28px;font-weight:500}.mdlx-heading h3{font-size:15px;line-height:22px;font-weight:600}
@@ -3514,7 +4316,7 @@ const MODELLIX_CLIENT_CSS = String.raw`
 .mdlx-card-head,.mdlx-status-row,.mdlx-actions,.mdlx-result-head{display:flex;align-items:center;gap:12px;min-width:0;justify-content:space-between;flex-wrap:wrap}
 .mdlx-card-head>.mdlx-heading{margin-bottom:0}
 .mdlx-status-copy{display:flex;align-items:center;gap:8px;min-width:0}.mdlx-status-copy span{overflow-wrap:anywhere}
-.mdlx-actions{justify-content:flex-end}.mdlx-actions>*{min-width:0;max-width:100%}.mdlx-actions-start{justify-content:flex-start}.mdlx-grow{flex:1 1 auto}.mdlx-settings button,.mdlx-design button,.mdlx-modal-content button{height:auto;min-height:36px}
+.mdlx-actions{justify-content:flex-end}.mdlx-actions>*{min-width:0;max-width:100%}.mdlx-actions-start{justify-content:flex-start}.mdlx-grow{flex:1 1 auto}.mdlx-settings button,.mdlx-design button,.mdlx-design-drawer button,.mdlx-tool-result button,.mdlx-modal-content button{height:auto;min-height:36px}
 .mdlx-service-list{display:grid;gap:8px}.mdlx-switch-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2)}
 .mdlx-switch-copy{display:grid;gap:2px;min-width:0}.mdlx-switch-copy strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}.mdlx-switch-copy span{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;overflow-wrap:anywhere}
 .mdlx-switch-target{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;justify-self:center}.mdlx-switch{width:24px;height:24px;accent-color:var(--dsw-alias-brand-primary);cursor:pointer}.mdlx-switch:disabled{cursor:not-allowed}
@@ -3531,25 +4333,28 @@ const MODELLIX_CLIENT_CSS = String.raw`
 .mdlx-link-button{appearance:none;border:0;padding:0;background:transparent;font:inherit;cursor:pointer}
 .mdlx-modal{box-sizing:border-box;width:min(600px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:0!important;gap:0!important;border-radius:24px!important;box-shadow:var(--dsw-shadow-lv3)!important;overflow:auto;overscroll-behavior:contain}.mdlx-modal-confirm{width:min(380px,calc(100vw - 48px))}.mdlx-modal-content{width:100%;min-width:0;padding:28px;display:grid;gap:20px;outline:none}.mdlx-modal-content>.mdlx-heading{margin-bottom:0}.mdlx-modal-title{font-size:20px;line-height:28px;font-weight:500;margin:0;overflow-wrap:anywhere}.mdlx-modal-description{font-size:14px;line-height:22px;color:var(--dsw-alias-label-secondary);margin:0;overflow-wrap:anywhere}
 .mdlx-design{container-type:inline-size;height:100%;min-height:0;box-sizing:border-box;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));scroll-padding-block-end:max(24px,env(safe-area-inset-bottom));overflow:auto;background:var(--dsw-alias-bg-base)}
-.mdlx-design-shell{width:100%;min-height:100%;display:grid;grid-template-columns:minmax(300px,42fr) minmax(360px,58fr);gap:16px}.mdlx-design-pane{min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-1);padding:16px;display:flex;flex-direction:column;gap:16px;overflow-wrap:anywhere}
+.mdlx-design-shell{width:100%;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px}.mdlx-design-pane{min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-1);padding:16px;display:flex;flex-direction:column;gap:16px;overflow-wrap:anywhere}
+.mdlx-design-launcher{height:32px!important;min-height:32px!important;padding:6px 12px!important;border-radius:18px!important;font-size:13px!important;font-weight:400!important;line-height:20px!important}.mdlx-design-launcher .mdlx-launcher-compact{display:none}.mdlx-design-drawer-viewport{position:fixed;inset:0 0 0 auto;width:360px;max-width:100vw;overflow:hidden;pointer-events:none}.mdlx-design-drawer{position:absolute;inset:0 0 0 auto;width:360px;min-width:360px;display:grid;grid-template-rows:auto minmax(0,1fr);border-inline-start:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base);box-shadow:var(--dsw-shadow-lv2);pointer-events:auto;transform:translateX(0);opacity:1;transition:transform 180ms ease-out,opacity 180ms ease-out}@starting-style{.mdlx-design-drawer{transform:translateX(100%);opacity:.72}}.mdlx-design-drawer-viewport[data-closing="true"] .mdlx-design-drawer{transform:translateX(100%);opacity:.72;pointer-events:none}.mdlx-drawer-header{position:relative;display:grid;gap:0;padding:16px 60px 16px 16px;border-bottom:1px solid var(--dsw-alias-border-l2)}.mdlx-drawer-header>.mdlx-heading{margin:0}.mdlx-drawer-close{position:absolute!important;inset-block-start:12px;inset-inline-end:12px;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:50%!important;justify-content:center}.mdlx-drawer-header-reveal{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows 160ms ease,opacity 120ms ease,margin-top 160ms ease}.mdlx-drawer-header-reveal[hidden]{display:none!important}.mdlx-drawer-header-reveal>div{min-height:0;overflow:hidden}.mdlx-drawer-header:hover .mdlx-drawer-header-reveal,.mdlx-drawer-header:focus-within .mdlx-drawer-header-reveal,.mdlx-drawer-header[data-editor-open="true"] .mdlx-drawer-header-reveal{grid-template-rows:1fr;opacity:1;margin-top:12px}.mdlx-drawer-editor-toggle{justify-self:start}.mdlx-drawer-body{min-height:0;overflow:hidden}.mdlx-drawer-body>.mdlx-design{padding:12px}.mdlx-design-editor{display:grid;gap:12px}.mdlx-design-editor[hidden]{display:none}.mdlx-results-summary{cursor:pointer;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;overflow-wrap:anywhere}.mdlx-results-disclosure{display:block}.mdlx-results-summary{margin:-4px 0;padding:4px 0}.mdlx-results-body{padding-top:12px}
 .mdlx-design-scroll{display:grid;gap:16px;min-height:0}.mdlx-parameter-list{display:grid;gap:12px}.mdlx-parameter{display:grid;gap:6px;border-top:1px solid var(--dsw-alias-border-l2);padding-top:12px}
 .mdlx-advanced{display:grid;gap:12px;border-top:1px solid var(--dsw-alias-border-l2);padding-top:12px}.mdlx-advanced>summary{cursor:pointer;font-size:14px;font-weight:500;min-height:24px;overflow-wrap:anywhere}
 .mdlx-proposal{display:grid;gap:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;padding:12px;background:var(--dsw-alias-bg-layer-2)}
 .mdlx-generate-block{display:grid;gap:8px;min-width:0}.mdlx-generate-block>p{margin:0}
 .mdlx-change-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.mdlx-change{display:grid;grid-template-columns:minmax(100px,.4fr) minmax(0,1fr);gap:8px;min-width:0;font-size:13px}.mdlx-change>*{min-width:0;overflow-wrap:anywhere}.mdlx-code{font-family:var(--ds-font-family-code,monospace);font-size:12px;overflow-wrap:anywhere}
 .mdlx-result-section{display:grid;gap:10px}.mdlx-result-section h3{margin:0;font-size:14px;font-weight:600}.mdlx-result-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
-.mdlx-result-card{display:grid;gap:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;padding:12px;background:var(--dsw-alias-bg-layer-2);overflow:hidden}
-.mdlx-resource-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.mdlx-resource{display:grid;gap:8px;min-width:0}.mdlx-media{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:12px;background:var(--dsw-alias-bg-layer-3)}
-.mdlx-media-audio{min-height:48px}.mdlx-empty{display:grid;place-items:center;min-height:160px;text-align:center;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px;padding:24px}
+.mdlx-result-card{display:block;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-2);overflow:hidden}.mdlx-result-disclosure{display:block}.mdlx-result-card-summary{position:relative;display:grid;gap:8px;min-height:72px;padding:12px 44px 12px 12px;cursor:pointer;list-style:none}.mdlx-result-card-summary::-webkit-details-marker{display:none}.mdlx-result-card-summary::after{content:"";position:absolute;inset-block-start:18px;inset-inline-end:18px;width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg);transition:transform 160ms ease}.mdlx-result-disclosure[open]>.mdlx-result-card-summary::after{transform:rotate(45deg)}.mdlx-result-card-body{display:grid;gap:12px;padding:0 12px 12px}
+.mdlx-result-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--dsw-alias-border-l2)}.mdlx-result-tab{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;padding:8px 12px;cursor:pointer}.mdlx-result-tab[aria-selected="true"]{border-bottom-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary);font-weight:600}.mdlx-result-panel{display:grid;gap:12px;min-width:0}.mdlx-result-json{max-height:320px;margin:0;padding:12px;border-radius:12px;background:var(--dsw-alias-markdown-code-block,var(--dsw-alias-bg-layer-3));font-family:var(--ds-font-family-code,monospace);font-size:12px;line-height:18px;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere}.mdlx-resource-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.mdlx-resource{display:grid;gap:8px;min-width:0}.mdlx-resource-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.mdlx-media{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:var(--dsw-alias-bg-layer-3)}.mdlx-image-preview-button{appearance:none;width:100%;padding:0;border:0;border-radius:12px;background:transparent;cursor:zoom-in}.mdlx-image-preview-button>.mdlx-media{pointer-events:none}
+.mdlx-media-audio{min-height:48px}.mdlx-empty{display:grid;place-items:center;min-height:160px;text-align:center;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px;padding:24px}.mdlx-empty-compact{min-height:96px}.mdlx-tool-result{display:grid;gap:12px;margin:4px 0 4px 4px;padding:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}
 .mdlx-image-modal{width:min(1000px,calc(100vw - 48px))}.mdlx-image-full{display:block;width:100%;max-height:calc(100dvh - 220px);object-fit:contain;border-radius:12px;background:var(--dsw-alias-bg-layer-3)}
 .mdlx-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
-.mdlx-input{height:auto;min-height:40px}.mdlx-input:focus-within,.mdlx-textarea:focus-visible,.mdlx-select:focus-visible,.mdlx-native-input:focus-visible,.mdlx-switch:focus-visible,.mdlx-safe-link:focus-visible,.mdlx-modal-content:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.mdlx-input{height:auto;min-height:40px}.mdlx-input:focus-within,.mdlx-textarea:focus-visible,.mdlx-select:focus-visible,.mdlx-native-input:focus-visible,.mdlx-switch:focus-visible,.mdlx-safe-link:focus-visible,.mdlx-modal-content:focus-visible,.mdlx-result-tab:focus-visible,.mdlx-image-preview-button:focus-visible,.mdlx-drawer-editor-toggle:focus-visible,.mdlx-results-summary:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.mdlx-result-card-summary:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+@media (min-width:1280px){.mdlx-design-drawer{box-shadow:none}}
 @media (max-width:768px){.mdlx-design{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.mdlx-design-shell{grid-template-columns:minmax(0,1fr)}.mdlx-design-pane{padding:12px}.mdlx-resource-list{grid-template-columns:minmax(0,1fr)}}
 @container (max-width:992px){.mdlx-design-shell{grid-template-columns:minmax(0,1fr)}.mdlx-design-pane{padding:12px}.mdlx-resource-list{grid-template-columns:minmax(0,1fr)}}
-@media (max-width:560px){.mdlx-modal{width:calc(100vw - 48px)}.mdlx-modal-content{padding:24px}.mdlx-input-row,.mdlx-model-tools{grid-template-columns:minmax(0,1fr)}.mdlx-input-row>button,.mdlx-model-tools button,.mdlx-actions button{width:100%;min-width:0;justify-self:stretch}.mdlx-actions{display:grid;grid-template-columns:minmax(0,1fr)}.mdlx-switch-row{grid-template-columns:minmax(0,1fr) 48px}.mdlx-change{grid-template-columns:minmax(0,1fr)}}
-@media (pointer:coarse){.mdlx-switch-row,.mdlx-switch-target,.mdlx-safe-link{min-width:48px;min-height:48px}.mdlx-settings button,.mdlx-design button,.mdlx-modal-content button{min-height:48px}.mdlx-input,.mdlx-select,.mdlx-native-input,.mdlx-advanced>summary{min-height:48px}}
-@media (prefers-reduced-motion:reduce){.mdlx-settings *,.mdlx-design *,.mdlx-modal-content *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
-@media (forced-colors:active){.mdlx-modal{border:1px solid CanvasText;box-shadow:none!important}.mdlx-card,.mdlx-switch-row,.mdlx-design-pane,.mdlx-result-card,.mdlx-proposal,.mdlx-error,.mdlx-info{forced-color-adjust:auto;border:1px solid CanvasText}.mdlx-input,.mdlx-textarea,.mdlx-select,.mdlx-native-input{border-color:CanvasText}.mdlx-safe-link{color:LinkText}.mdlx-input:focus-within,.mdlx-textarea:focus-visible,.mdlx-select:focus-visible,.mdlx-native-input:focus-visible,.mdlx-switch:focus-visible,.mdlx-safe-link:focus-visible,.mdlx-modal-content:focus-visible{outline-color:Highlight}}
+@media (max-width:560px){.mdlx-design-launcher{width:40px;min-width:40px;padding-inline:0!important}.mdlx-design-launcher .mdlx-launcher-label{display:none}.mdlx-design-launcher .mdlx-launcher-compact{display:inline}.mdlx-modal{width:calc(100vw - 48px)}.mdlx-modal-content{padding:24px}.mdlx-input-row,.mdlx-model-tools{grid-template-columns:minmax(0,1fr)}.mdlx-input-row>button,.mdlx-model-tools button,.mdlx-actions button{width:100%;min-width:0;justify-self:stretch}.mdlx-actions{display:grid;grid-template-columns:minmax(0,1fr)}.mdlx-switch-row{grid-template-columns:minmax(0,1fr) 48px}.mdlx-change{grid-template-columns:minmax(0,1fr)}.mdlx-design-drawer-viewport,.mdlx-design-drawer{width:100vw;min-width:0}.mdlx-drawer-header{padding:12px 56px 12px 12px}.mdlx-drawer-close{inset-block-start:8px;inset-inline-end:8px}.mdlx-resource-nav{display:grid;grid-template-columns:1fr}.mdlx-resource-nav>*{width:100%;text-align:center}}
+@media (max-width:360px){.mdlx-design-launcher{position:fixed!important;inset-block-start:92px;inset-inline-end:12px;z-index:10;width:48px;min-width:48px;height:48px;min-height:48px!important;padding:0!important;border-radius:50%!important}}
+@media (pointer:coarse){.mdlx-design-launcher{height:48px!important;min-height:48px!important}.mdlx-drawer-header-reveal{grid-template-rows:1fr;opacity:1;margin-top:12px}.mdlx-switch-row,.mdlx-switch-target,.mdlx-safe-link{min-width:48px;min-height:48px}.mdlx-settings button,.mdlx-design button,.mdlx-design-drawer button,.mdlx-tool-result button,.mdlx-modal-content button{min-height:48px}.mdlx-input,.mdlx-select,.mdlx-native-input,.mdlx-advanced>summary{min-height:48px}}
+@media (prefers-reduced-motion:reduce){.mdlx-design-drawer-viewport,.mdlx-design-drawer,.mdlx-settings *,.mdlx-design *,.mdlx-design-drawer *,.mdlx-tool-result *,.mdlx-modal-content *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
+@media (forced-colors:active){.mdlx-modal,.mdlx-design-drawer{border:1px solid CanvasText;box-shadow:none!important}.mdlx-card,.mdlx-switch-row,.mdlx-design-pane,.mdlx-result-card,.mdlx-tool-result,.mdlx-proposal,.mdlx-error,.mdlx-info{forced-color-adjust:auto;border:1px solid CanvasText}.mdlx-input,.mdlx-textarea,.mdlx-select,.mdlx-native-input{border-color:CanvasText}.mdlx-safe-link{color:LinkText}.mdlx-input:focus-within,.mdlx-textarea:focus-visible,.mdlx-select:focus-visible,.mdlx-native-input:focus-visible,.mdlx-switch:focus-visible,.mdlx-safe-link:focus-visible,.mdlx-modal-content:focus-visible,.mdlx-result-tab:focus-visible,.mdlx-image-preview-button:focus-visible,.mdlx-drawer-editor-toggle:focus-visible,.mdlx-results-summary:focus-visible,.mdlx-result-card-summary:focus-visible{outline-color:Highlight}}
 `;
 function installModellixClientStyles(target = typeof document === "undefined" ? void 0 : document) {
 	if (target === void 0) return () => void 0;
@@ -3567,6 +4372,11 @@ const MODELLIX_CLIENT_SLOTS = Object.freeze([
 		id: "modellix.credential-recovery",
 		order: 10
 	},
+	{
+		name: "shell.overlay",
+		id: "modellix.design-drawer",
+		order: 20
+	},
 	{
 		name: "settings.onboarding",
 		id: "modellix.onboarding",
@@ -3578,9 +4388,19 @@ const MODELLIX_CLIENT_SLOTS = Object.freeze([
 		order: 30
 	},
 	{
-		name: "conversation.view",
-		id: "modellix.design",
+		name: "conversation.session.header.utilities",
+		id: "modellix.design-launcher",
 		order: 20
+	},
+	{
+		name: "tool.call.toolview",
+		key: "modellix_media_generate",
+		priority: 20
+	},
+	{
+		name: "tool.call.toolview",
+		key: "modellix_media_get_result",
+		priority: 20
 	}
 ]);
 //#endregion
@@ -3588,7 +4408,8 @@ const MODELLIX_CLIENT_SLOTS = Object.freeze([
 const inject = [
 	"slots",
 	"locale",
-	"connection"
+	"connection",
+	"layout"
 ];
 function apply(ctx) {
 	ctx.effect(() => ctx.locale.register(MODELLIX_LOCALE_NAMESPACE, {
@@ -3599,6 +4420,7 @@ function apply(ctx) {
 	const t = ctx.locale.bind(MODELLIX_LOCALE_NAMESPACE);
 	const rpc = new ModellixRpcClient(ctx.connection.rpc);
 	const settingsController = new SettingsController(rpc);
+	const designDrawer = new DesignDrawerController(rpc, ctx.layout);
 	ctx.slots.inject("shell.overlay", () => ctx.slots.register({
 		name: "shell.overlay",
 		id: "modellix.credential-recovery",
@@ -3606,6 +4428,16 @@ function apply(ctx) {
 		locale: MODELLIX_LOCALE_NAMESPACE,
 		inject: () => ({ controller: settingsController })
 	}, CredentialRecoveryOverlay));
+	ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+		name: "shell.overlay",
+		id: "modellix.design-drawer",
+		order: 20,
+		locale: MODELLIX_LOCALE_NAMESPACE,
+		inject: () => ({
+			drawer: designDrawer,
+			settingsController
+		})
+	}, ModellixDesignDrawer));
 	ctx.slots.inject("settings.onboarding", () => ctx.slots.register({
 		name: "settings.onboarding",
 		id: "modellix.onboarding",
@@ -3621,17 +4453,27 @@ function apply(ctx) {
 		locale: MODELLIX_LOCALE_NAMESPACE,
 		inject: () => ({ controller: settingsController })
 	}, ModellixSettingsSection));
-	ctx.slots.inject("conversation.view", () => ctx.slots.register({
-		name: "conversation.view",
-		id: "modellix.design",
+	ctx.slots.inject("conversation.session.header.utilities", () => ctx.slots.register({
+		name: "conversation.session.header.utilities",
+		id: "modellix.design-launcher",
 		order: 20,
-		label: () => t("designTab"),
 		locale: MODELLIX_LOCALE_NAMESPACE,
-		inject: (sessionId) => ({
-			controller: new DesignController(rpc, sessionId),
-			settingsController
-		})
-	}, ModellixDesignView));
+		inject: () => ({ drawer: designDrawer })
+	}, ModellixDesignLauncher));
+	ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+		name: "tool.call.toolview",
+		key: "modellix_media_generate",
+		priority: 20,
+		locale: MODELLIX_LOCALE_NAMESPACE,
+		inject: () => ({ drawer: designDrawer })
+	}, ModellixMediaToolView));
+	ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+		name: "tool.call.toolview",
+		key: "modellix_media_get_result",
+		priority: 20,
+		locale: MODELLIX_LOCALE_NAMESPACE,
+		inject: () => ({ drawer: designDrawer })
+	}, ModellixMediaToolView));
 }
 //#endregion
 exports.MODELLIX_CLIENT_SLOTS = MODELLIX_CLIENT_SLOTS;