dsh-image-gen 0.2.5 → 0.2.6

package/lib/client.js

@@ -10,6 +10,8 @@ window.__ModuleLoader__.load({
 		/** Values shared by the Host and browser Bundle faces. */
 		/** Browser route used by the generated-image card. */
 		const IMAGE_ROUTE = "/plugins/dsh-image-gen/image";
+		/** Browser route used for deleting generated images and workspace files. */
+		const DELETE_ROUTE = "/plugins/dsh-image-gen/delete";
 		/** Namespace persisted through DSH Settings. */
 		const IMAGE_GENERATION_NAMESPACE = "image-generation";
 		/** Default endpoints and base URLs. */
@@ -210,19 +212,33 @@ window.__ModuleLoader__.load({
 		/**
 		* Save or update a gallery record by attachmentId.
 		* Skipped if the item was previously deleted (tombstoned).
+		* Preserves existing isFavorite, tags, and original createdAt on re-renders.
 		*/
 		async function saveGalleryItem(item) {
 			try {
 				const db = await getDB();
 				if ((await loadTombstones(db)).has(item.id)) return;
-				const record = {
-					...item,
-					createdAt: item.createdAt ?? Date.now()
-				};
 				await new Promise((resolve, reject) => {
-					const req = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).put(record);
-					req.onsuccess = () => resolve();
-					req.onerror = () => reject(req.error);
+					const store = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME);
+					const getReq = store.get(item.id);
+					getReq.onsuccess = () => {
+						const existing = getReq.result;
+						const fav = item.isFavorite !== void 0 ? item.isFavorite : existing?.isFavorite;
+						const userTags = item.tags !== void 0 ? item.tags : existing?.tags;
+						const savedPath = item.savedTo !== void 0 ? item.savedTo : existing?.savedTo;
+						const record = {
+							...existing,
+							...item,
+							createdAt: existing?.createdAt ?? item.createdAt ?? Date.now(),
+							...fav !== void 0 ? { isFavorite: fav } : {},
+							...userTags !== void 0 ? { tags: userTags } : {},
+							...savedPath !== void 0 ? { savedTo: savedPath } : {}
+						};
+						const putReq = store.put(record);
+						putReq.onsuccess = () => resolve();
+						putReq.onerror = () => reject(putReq.error);
+					};
+					getReq.onerror = () => reject(getReq.error);
 				});
 				notifyListeners();
 			} catch (err) {
@@ -253,52 +269,537 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/**
-		* Delete a single gallery record by ID and record a tombstone.
+		* Toggle favorite status of a gallery item.
+		* Returns the new favorite status (true if favorited, false if unfavorited).
 		*/
-		async function deleteGalleryItem(id) {
+		async function toggleFavoriteGalleryItem(id) {
 			try {
 				const db = await getDB();
-				(await loadTombstones(db)).add(id);
-				await new Promise((resolve, reject) => {
-					const tx = db.transaction([STORE_NAME, TOMBSTONE_STORE], "readwrite");
-					const store = tx.objectStore(STORE_NAME);
-					const tombstoneStore = tx.objectStore(TOMBSTONE_STORE);
-					store.delete(id);
-					tombstoneStore.put({
-						id,
-						deletedAt: Date.now()
-					});
-					tx.oncomplete = () => resolve();
-					tx.onerror = () => reject(tx.error);
+				const newStatus = await new Promise((resolve, reject) => {
+					const store = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME);
+					const getReq = store.get(id);
+					getReq.onsuccess = () => {
+						const item = getReq.result;
+						if (!item) {
+							resolve(false);
+							return;
+						}
+						const nextFavorite = !item.isFavorite;
+						item.isFavorite = nextFavorite;
+						const putReq = store.put(item);
+						putReq.onsuccess = () => resolve(nextFavorite);
+						putReq.onerror = () => reject(putReq.error);
+					};
+					getReq.onerror = () => reject(getReq.error);
 				});
 				notifyListeners();
+				return newStatus;
 			} catch (err) {
-				console.warn("[dsh-image-gen] Failed to delete gallery item from IndexedDB:", err);
+				console.warn("[dsh-image-gen] Failed to toggle favorite item in IndexedDB:", err);
+				return false;
 			}
 		}
+		/**
+		* Bulk delete multiple gallery records by IDs and record tombstones in a single transaction.
+		*/
+		async function bulkDeleteGalleryItems(ids) {
+			if (ids.length === 0) return;
+			const db = await getDB();
+			const tombstones = await loadTombstones(db);
+			const now = Date.now();
+			await new Promise((resolve, reject) => {
+				const tx = db.transaction([STORE_NAME, TOMBSTONE_STORE], "readwrite");
+				const store = tx.objectStore(STORE_NAME);
+				const tombstoneStore = tx.objectStore(TOMBSTONE_STORE);
+				for (const id of ids) {
+					store.delete(id);
+					tombstoneStore.put({
+						id,
+						deletedAt: now
+					});
+				}
+				tx.oncomplete = () => {
+					for (const id of ids) tombstones.add(id);
+					resolve();
+				};
+				tx.onerror = () => reject(tx.error ?? /* @__PURE__ */ new Error("IndexedDB transaction failed"));
+				tx.onabort = () => reject(tx.error ?? /* @__PURE__ */ new Error("IndexedDB transaction aborted"));
+			});
+			notifyListeners();
+		}
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+			return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+		}).join(" ").trim();
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const toCamelCase = (string) => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const toPascalCase = (string) => {
+			const camelCase = toCamelCase(string);
+			return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+		};
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		var defaultAttributes = {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: 24,
+			height: 24,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		};
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const hasA11yProp = (props) => {
+			for (const prop in props) if (prop.startsWith("aria-") || prop === "role" || prop === "title") return true;
+			return false;
+		};
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/context.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const LucideContext = (0, react.createContext)({});
+		const useLucideContext = () => (0, react.useContext)(LucideContext);
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Icon = (0, react.forwardRef)(({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
+			const { size: contextSize = 24, strokeWidth: contextStrokeWidth = 2, absoluteStrokeWidth: contextAbsoluteStrokeWidth = false, color: contextColor = "currentColor", className: contextClass = "" } = useLucideContext() ?? {};
+			const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
+			return (0, react.createElement)("svg", {
+				ref,
+				...defaultAttributes,
+				width: size ?? contextSize ?? defaultAttributes.width,
+				height: size ?? contextSize ?? defaultAttributes.height,
+				stroke: color ?? contextColor,
+				strokeWidth: calculatedStrokeWidth,
+				className: mergeClasses("lucide", contextClass, className),
+				...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+				...rest
+			}, [...iconNode.map(([tag, attrs]) => (0, react.createElement)(tag, attrs)), ...Array.isArray(children) ? children : [children]]);
+		});
+		//#endregion
+		//#region node_modules/.pnpm/lucide-react@1.38.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const createLucideIcon = (iconName, iconNode) => {
+			const Component = (0, react.forwardRef)(({ className, ...props }, ref) => (0, react.createElement)(Icon, {
+				ref,
+				iconNode,
+				className: mergeClasses(`lucide-${toKebabCase(toPascalCase(iconName))}`, `lucide-${iconName}`, className),
+				...props
+			}));
+			Component.displayName = toPascalCase(iconName);
+			return Component;
+		};
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Check = createLucideIcon("check", [["path", {
+			d: "M20 6 9 17l-5-5",
+			key: "1gmf2c"
+		}]]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const ChevronLeft = createLucideIcon("chevron-left", [["path", {
+			d: "m15 18-6-6 6-6",
+			key: "1wnfg3"
+		}]]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const ChevronRight = createLucideIcon("chevron-right", [["path", {
+			d: "m9 18 6-6-6-6",
+			key: "mthhwq"
+		}]]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Copy = createLucideIcon("copy", [["rect", {
+			width: "14",
+			height: "14",
+			x: "8",
+			y: "8",
+			rx: "2",
+			ry: "2",
+			key: "17jyea"
+		}], ["path", {
+			d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+			key: "zix9uf"
+		}]]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Download = createLucideIcon("download", [
+			["path", {
+				d: "M12 15V3",
+				key: "m9g1x1"
+			}],
+			["path", {
+				d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+				key: "ih7n3h"
+			}],
+			["path", {
+				d: "m7 10 5 5 5-5",
+				key: "brsn70"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const FileText = createLucideIcon("file-text", [
+			["path", {
+				d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+				key: "1oefj6"
+			}],
+			["path", {
+				d: "M14 2v5a1 1 0 0 0 1 1h5",
+				key: "wfsgrz"
+			}],
+			["path", {
+				d: "M10 9H8",
+				key: "b1mrlr"
+			}],
+			["path", {
+				d: "M16 13H8",
+				key: "t4e002"
+			}],
+			["path", {
+				d: "M16 17H8",
+				key: "z1uh3a"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const GitCompare = createLucideIcon("git-compare", [
+			["circle", {
+				cx: "18",
+				cy: "18",
+				r: "3",
+				key: "1xkwt0"
+			}],
+			["circle", {
+				cx: "6",
+				cy: "6",
+				r: "3",
+				key: "1lh9wr"
+			}],
+			["path", {
+				d: "M13 6h3a2 2 0 0 1 2 2v7",
+				key: "1yeb86"
+			}],
+			["path", {
+				d: "M11 18H8a2 2 0 0 1-2-2V9",
+				key: "19pyzm"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Heart = createLucideIcon("heart", [["path", {
+			d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5",
+			key: "mvr1a0"
+		}]]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Image$1 = createLucideIcon("image", [
+			["rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "3",
+				rx: "2",
+				ry: "2",
+				key: "1m3agn"
+			}],
+			["circle", {
+				cx: "9",
+				cy: "9",
+				r: "2",
+				key: "af1f0g"
+			}],
+			["path", {
+				d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",
+				key: "1xmnt7"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const ListTodo = createLucideIcon("list-todo", [
+			["path", {
+				d: "M13 5h8",
+				key: "a7qcls"
+			}],
+			["path", {
+				d: "M13 12h8",
+				key: "h98zly"
+			}],
+			["path", {
+				d: "M13 19h8",
+				key: "c3s6r1"
+			}],
+			["path", {
+				d: "m3 17 2 2 4-4",
+				key: "1jhpwq"
+			}],
+			["rect", {
+				x: "3",
+				y: "4",
+				width: "6",
+				height: "6",
+				rx: "1",
+				key: "cif1o7"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Search = createLucideIcon("search", [["path", {
+			d: "m21 21-4.34-4.34",
+			key: "14j7rj"
+		}], ["circle", {
+			cx: "11",
+			cy: "11",
+			r: "8",
+			key: "4ej97u"
+		}]]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const SlidersHorizontal = createLucideIcon("sliders-horizontal", [
+			["path", {
+				d: "M10 5H3",
+				key: "1qgfaw"
+			}],
+			["path", {
+				d: "M12 19H3",
+				key: "yhmn1j"
+			}],
+			["path", {
+				d: "M14 3v4",
+				key: "1sua03"
+			}],
+			["path", {
+				d: "M16 17v4",
+				key: "1q0r14"
+			}],
+			["path", {
+				d: "M21 12h-9",
+				key: "1o4lsq"
+			}],
+			["path", {
+				d: "M21 19h-5",
+				key: "1rlt1p"
+			}],
+			["path", {
+				d: "M21 5h-7",
+				key: "1oszz2"
+			}],
+			["path", {
+				d: "M8 10v4",
+				key: "tgpxqk"
+			}],
+			["path", {
+				d: "M8 12H3",
+				key: "a7s4jb"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Trash2 = createLucideIcon("trash-2", [
+			["path", {
+				d: "M10 11v6",
+				key: "nco0om"
+			}],
+			["path", {
+				d: "M14 11v6",
+				key: "outv1u"
+			}],
+			["path", {
+				d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+				key: "miytrc"
+			}],
+			["path", {
+				d: "M3 6h18",
+				key: "d0wm0j"
+			}],
+			["path", {
+				d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+				key: "e791ji"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const TriangleAlert = createLucideIcon("triangle-alert", [
+			["path", {
+				d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+				key: "wmoenq"
+			}],
+			["path", {
+				d: "M12 9v4",
+				key: "juzpu7"
+			}],
+			["path", {
+				d: "M12 17h.01",
+				key: "p32p05"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const X = createLucideIcon("x", [["path", {
+			d: "M18 6 6 18",
+			key: "1bl5f8"
+		}], ["path", {
+			d: "m6 6 12 12",
+			key: "d8bk6v"
+		}]]);
 		//#endregion
 		//#region lib/types/client/gallery-view.js
 		/**
-		* Native Workspace Gallery View Component for DSH `conversation.view` slot.
-		* Fully i18n-reactive (Chinese & English).
+		* Native Workspace Gallery & Studio View Component for DSH `conversation.view` slot.
+		* Fully i18n-reactive (Chinese & English) with modular tabs, multi-dimensional filters,
+		* responsive image grid, and placeholder routes.
 		*/
 		const DICT$1 = {
 			zh: {
-				totalCount: "共 {count} 张生成图片",
-				searchPlaceholder: "搜索 Prompt 关键词…",
-				filterAll: "全部厂商",
+				tabGallery: "图库",
+				tabStudio: "工作台",
+				tabFavorites: "收藏",
+				tabCompare: "对比",
+				tabTasks: "任务",
+				filterAllProviders: "全部提供商",
 				filterGoogle: "Google Gemini",
 				filterOpenAI: "OpenAI / 中转站",
 				filterSeedream: "字节 Seedream",
 				filterDashScope: "阿里 DashScope",
 				filterComfyUI: "本地 ComfyUI",
+				filterAllModels: "全部模型",
+				filterAllRatios: "全部比例",
+				searchPlaceholder: "搜索 Prompt、标签…",
+				sortNewest: "最新生成",
+				sortOldest: "最早生成",
+				totalCount: "共 {count} 张生成图片",
 				emptyTitle: "暂无生图记录",
 				emptyDesc: "在对话中让 Agent 生图后，生成的图片会自动收录到这里。",
+				favEmptyTitle: "暂无收藏图片",
+				favEmptyDesc: "在图库中点击卡片右下角的 ♡ 按钮，即可将喜爱的图片收录到这里。",
 				noMatchTitle: "未找到匹配结果",
-				noMatchDesc: "尝试更换搜索关键词或选择其他厂商。",
+				noMatchDesc: "尝试更换搜索关键词或调整筛选条件。",
 				copiedPrompt: "已复制 Prompt",
 				copiedImage: "已复制图片",
 				copyFailed: "复制失败",
+				favoriteAdded: "已添加到收藏",
+				favoriteRemoved: "已取消收藏",
 				preview: "查看大图",
 				download: "下载图片",
 				copyImg: "复制图片",
@@ -308,24 +809,69 @@ window.__ModuleLoader__.load({
 				deleted: "已从画廊删除",
 				model: "模型",
 				prompt: "Prompt",
-				close: "关闭 (Esc)"
+				close: "关闭 (Esc)",
+				prevImage: "上一张 (←)",
+				nextImage: "下一张 (→)",
+				manage: "批量删除",
+				exitManage: "退出选择",
+				selectedCount: "已选 {n} 项",
+				selectAll: "全选",
+				invertSelect: "反选",
+				clearSelect: "清空",
+				batchDelete: "批量删除",
+				batchDeleteTitle: "确认批量删除选中的 {count} 张图片？",
+				batchDeleteTitleSingle: "确认从画廊中删除这张图片？",
+				batchDeleteDesc: "将从画廊历史记录中移除所选图片。",
+				deleteWorkspaceFilesOpt: "同时清理工作区磁盘物理文件（不可恢复）",
+				cancel: "取消",
+				confirmBatchDelete: "确认删除 ({count})",
+				confirmDeleteSingle: "确认删除",
+				batchDeletedToast: "已删除 {count} 张图片",
+				batchDeletedWithFilesToast: "已删除 {count} 张图片，并清理了 {files} 个工作区文件",
+				deleteFailedFileLocked: "已删除 {count} 张图片，但有 {files} 个文件因被系统占用未能删除",
+				deleteFailedDatabase: "删除失败：本地数据库操作异常",
+				justNow: "刚刚",
+				minutesAgo: "{n} 分钟前",
+				hoursAgo: "{n} 小时前",
+				daysAgo: "{n} 天前",
+				studioTitle: "AI 图像工作台 (Studio)",
+				studioDesc: "工作台模块正在紧锣密鼓开发中。在此你将体验大图精修、变体生成 (Variations)、参数重调并一键将生成结果无缝插回 DSH 正在进行的对话。",
+				studioTip: "💡 提示：目前你可以在“图库”中点击任意图片，在弹窗中进行查看、复制与下载。",
+				compareTitle: "多模型横向对比 (Compare)",
+				compareDesc: "支持单个 Prompt 一键同时调度 Gemini、Seedream、DashScope 及本地 ComfyUI 模型并排生成，直观横评画质与细节。",
+				tasksTitle: "异步任务队列 (Tasks)",
+				tasksDesc: "集中管理后台批量生图、多模型并发生成与本地 ComfyUI 耗时任务。支持状态追踪、失败重试与执行耗时分析。",
+				comingSoonBadge: "即将推出"
 			},
 			en: {
-				totalCount: "{count} images total",
-				searchPlaceholder: "Search prompt keywords…",
-				filterAll: "All Providers",
+				tabGallery: "Gallery",
+				tabStudio: "Studio",
+				tabFavorites: "Favorites",
+				tabCompare: "Compare",
+				tabTasks: "Tasks",
+				filterAllProviders: "All Providers",
 				filterGoogle: "Google Gemini",
 				filterOpenAI: "OpenAI / Relay",
 				filterSeedream: "ByteDance Seedream",
 				filterDashScope: "Aliyun DashScope",
 				filterComfyUI: "Local ComfyUI",
+				filterAllModels: "All Models",
+				filterAllRatios: "All Ratios",
+				searchPlaceholder: "Search prompt, tags…",
+				sortNewest: "Newest first",
+				sortOldest: "Oldest first",
+				totalCount: "{count} images total",
 				emptyTitle: "No images generated yet",
 				emptyDesc: "Images generated during conversations will automatically appear here.",
+				favEmptyTitle: "No favorite images yet",
+				favEmptyDesc: "Click the ♡ button on any card in the gallery to collect your favorite images here.",
 				noMatchTitle: "No matching images",
-				noMatchDesc: "Try a different search keyword or provider filter.",
+				noMatchDesc: "Try a different search keyword or adjust filter criteria.",
 				copiedPrompt: "Prompt copied",
 				copiedImage: "Image copied",
 				copyFailed: "Copy failed",
+				favoriteAdded: "Added to favorites",
+				favoriteRemoved: "Removed from favorites",
 				preview: "Full Preview",
 				download: "Download",
 				copyImg: "Copy Image",
@@ -335,17 +881,123 @@ window.__ModuleLoader__.load({
 				deleted: "Deleted from gallery",
 				model: "Model",
 				prompt: "Prompt",
-				close: "Close (Esc)"
+				close: "Close (Esc)",
+				prevImage: "Previous (←)",
+				nextImage: "Next (→)",
+				manage: "Batch Delete",
+				exitManage: "Done",
+				selectedCount: "{n} selected",
+				selectAll: "Select All",
+				invertSelect: "Invert",
+				clearSelect: "Clear",
+				batchDelete: "Batch Delete",
+				batchDeleteTitle: "Delete {count} selected images?",
+				batchDeleteTitleSingle: "Delete this image from gallery?",
+				batchDeleteDesc: "These images will be removed from your gallery history.",
+				deleteWorkspaceFilesOpt: "Also delete files from workspace disk (cannot be undone)",
+				cancel: "Cancel",
+				confirmBatchDelete: "Delete ({count})",
+				confirmDeleteSingle: "Delete",
+				batchDeletedToast: "Deleted {count} images",
+				batchDeletedWithFilesToast: "Deleted {count} images and cleaned {files} workspace files",
+				deleteFailedFileLocked: "Deleted {count} images, but {files} files could not be deleted (busy/locked)",
+				deleteFailedDatabase: "Failed to delete: local database error",
+				justNow: "Just now",
+				minutesAgo: "{n}m ago",
+				hoursAgo: "{n}h ago",
+				daysAgo: "{n}d ago",
+				studioTitle: "AI Image Studio",
+				studioDesc: "Studio workbench is under active development. Fine-tune prompts, generate variations (2x/4x), and inject images directly into DSH chat.",
+				studioTip: "💡 Tip: You can currently click any image in the Gallery to preview, copy, or download it.",
+				compareTitle: "Model Comparison (Compare)",
+				compareDesc: "Side-by-side multi-model benchmarking coming soon. Test Gemini, Seedream, DashScope, and ComfyUI with a single prompt.",
+				tasksTitle: "Task Queue (Tasks)",
+				tasksDesc: "Centralized view for batch generation, asynchronous ComfyUI runs, live progress tracking, and retry controls.",
+				comingSoonBadge: "Coming Soon"
 			}
 		};
+		/** Format human-readable relative time */
+		function formatRelativeTime(timestamp, t) {
+			const diff = Date.now() - timestamp;
+			if (diff < 6e4) return t("justNow");
+			if (diff < 36e5) {
+				const mins = Math.max(1, Math.floor(diff / 6e4));
+				return t("minutesAgo", { n: String(mins) });
+			}
+			if (diff < 864e5) {
+				const hours = Math.floor(diff / 36e5);
+				return t("hoursAgo", { n: String(hours) });
+			}
+			if (diff < 2592e6) {
+				const days = Math.floor(diff / 864e5);
+				return t("daysAgo", { n: String(days) });
+			}
+			const d = new Date(timestamp);
+			return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
+		}
+		/** Extract standard aspect ratio for precise filtering */
+		function getItemRatio(item) {
+			if (item.aspectRatio && item.aspectRatio !== "custom") return item.aspectRatio;
+			if (item.output) {
+				const ratioMatch = item.output.match(/\b(1:1|16:9|9:16|4:3|3:4|3:2|2:3)\b/);
+				if (ratioMatch?.[1]) return ratioMatch[1];
+				const dimMatch = item.output.match(/(\d{3,4})\s*[×x*]\s*(\d{3,4})/);
+				if (dimMatch?.[1] && dimMatch[2]) {
+					const w = parseInt(dimMatch[1], 10);
+					const h = parseInt(dimMatch[2], 10);
+					if (w === h) return "1:1";
+					const approx = w / h;
+					if (Math.abs(approx - 16 / 9) < .05) return "16:9";
+					if (Math.abs(approx - 9 / 16) < .05) return "9:16";
+					if (Math.abs(approx - 4 / 3) < .05) return "4:3";
+					if (Math.abs(approx - 3 / 4) < .05) return "3:4";
+					if (Math.abs(approx - 3 / 2) < .05) return "3:2";
+					if (Math.abs(approx - 2 / 3) < .05) return "2:3";
+				}
+			}
+			return "1:1";
+		}
+		/** Format aspect ratio or dimensions for card metadata (e.g., 1024×1024 or 16:9) */
+		function formatCardMeta(item) {
+			if (item.output) {
+				const dimMatch = item.output.match(/(\d{3,4})\s*[×x*]\s*(\d{3,4})/);
+				if (dimMatch?.[1] && dimMatch[2]) return `${dimMatch[1]}×${dimMatch[2]}`;
+			}
+			if (item.aspectRatio && item.aspectRatio !== "custom") return item.aspectRatio;
+			if (item.output) {
+				const ratioMatch = item.output.match(/\b(1:1|16:9|9:16|4:3|3:4|3:2|2:3)\b/);
+				if (ratioMatch?.[1]) return ratioMatch[1];
+			}
+			if (item.imageSize) return item.imageSize;
+			return "1:1";
+		}
 		const GalleryViewTab = ({ locale }) => {
+			const [activeTab, setActiveTab] = (0, react.useState)("gallery");
 			const [items, setItems] = (0, react.useState)([]);
 			const [search, setSearch] = (0, react.useState)("");
 			const [selectedProvider, setSelectedProvider] = (0, react.useState)("all");
+			const [selectedRatio, setSelectedRatio] = (0, react.useState)("all");
+			const [sortBy, setSortBy] = (0, react.useState)("newest");
 			const [previewItem, setPreviewItem] = (0, react.useState)(null);
 			const [previewUrl, setPreviewUrl] = (0, react.useState)(null);
 			const [previewBlob, setPreviewBlob] = (0, react.useState)(null);
 			const [toast, setToast] = (0, react.useState)(null);
+			const [isManageMode, setIsManageMode] = (0, react.useState)(false);
+			const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
+			const lastSelectedIndexRef = (0, react.useRef)(null);
+			const [showDeleteModal, setShowDeleteModal] = (0, react.useState)(false);
+			const [deleteWorkspaceFiles, setDeleteWorkspaceFiles] = (0, react.useState)(true);
+			const [isDeleting, setIsDeleting] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				setSelectedIds(/* @__PURE__ */ new Set());
+				lastSelectedIndexRef.current = null;
+			}, [
+				activeTab,
+				search,
+				selectedProvider,
+				selectedRatio,
+				sortBy
+			]);
 			const [lang, setLang] = (0, react.useState)(() => {
 				return (locale?.getSnapshot?.()?.active)?.startsWith("en") ? "en" : "zh";
 			});
@@ -392,112 +1044,431 @@ window.__ModuleLoader__.load({
 					unsubscribe();
 				};
 			}, []);
-			(0, react.useEffect)(() => {
-				if (!previewItem) return;
-				const onKeyDown = (e) => {
-					if (e.key === "Escape") {
-						setPreviewItem(null);
-						setPreviewUrl(null);
-						setPreviewBlob(null);
-					}
-				};
-				window.addEventListener("keydown", onKeyDown);
-				return () => window.removeEventListener("keydown", onKeyDown);
-			}, [previewItem]);
+			const [previewLoading, setPreviewLoading] = (0, react.useState)(false);
+			const blobCache = (0, react.useMemo)(() => /* @__PURE__ */ new Map(), []);
+			const abortControllerRef = (0, react.useRef)(null);
 			const filteredItems = (0, react.useMemo)(() => {
 				return items.filter((item) => {
+					if (activeTab === "favorites" && !item.isFavorite) return false;
 					if (selectedProvider !== "all" && item.provider !== selectedProvider) return false;
+					if (selectedRatio !== "all") {
+						if (getItemRatio(item) !== selectedRatio) return false;
+					}
 					if (search.trim().length > 0) {
 						const q = search.trim().toLowerCase();
 						const matchPrompt = item.prompt?.toLowerCase().includes(q);
 						const matchModel = item.model?.toLowerCase().includes(q);
-						if (!matchPrompt && !matchModel) return false;
+						const matchProvider = item.provider?.toLowerCase().includes(q);
+						const matchTags = item.tags?.some((t) => t.toLowerCase().includes(q));
+						if (!matchPrompt && !matchModel && !matchProvider && !matchTags) return false;
 					}
 					return true;
+				}).sort((a, b) => {
+					if (sortBy === "oldest") return a.createdAt - b.createdAt;
+					return b.createdAt - a.createdAt;
 				});
 			}, [
 				items,
+				activeTab,
+				selectedProvider,
+				selectedRatio,
 				search,
-				selectedProvider
+				sortBy
+			]);
+			const currentPreviewIndex = (0, react.useMemo)(() => {
+				if (!previewItem) return -1;
+				return filteredItems.findIndex((i) => i.id === previewItem.id);
+			}, [previewItem, filteredItems]);
+			const hasPrev = currentPreviewIndex > 0;
+			const hasNext = currentPreviewIndex >= 0 && currentPreviewIndex < filteredItems.length - 1;
+			const openPreviewItem = (item, blob) => {
+				if (abortControllerRef.current) {
+					abortControllerRef.current.abort();
+					abortControllerRef.current = null;
+				}
+				if (previewUrl) URL.revokeObjectURL(previewUrl);
+				setPreviewItem(item);
+				if (blob) {
+					blobCache.set(item.id, blob);
+					const url = URL.createObjectURL(blob);
+					setPreviewBlob(blob);
+					setPreviewUrl(url);
+					setPreviewLoading(false);
+					return;
+				}
+				const cached = blobCache.get(item.id);
+				if (cached) {
+					const url = URL.createObjectURL(cached);
+					setPreviewBlob(cached);
+					setPreviewUrl(url);
+					setPreviewLoading(false);
+					return;
+				}
+				setPreviewLoading(true);
+				setPreviewBlob(null);
+				setPreviewUrl(null);
+				const controller = new AbortController();
+				abortControllerRef.current = controller;
+				fetch(IMAGE_ROUTE, {
+					method: "POST",
+					signal: controller.signal,
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ attachment: item.attachment })
+				}).then(async (res) => {
+					if (!res.ok) throw new Error(`HTTP ${res.status}`);
+					return res.blob();
+				}).then((fetchedBlob) => {
+					if (controller.signal.aborted) return;
+					blobCache.set(item.id, fetchedBlob);
+					const url = URL.createObjectURL(fetchedBlob);
+					setPreviewBlob(fetchedBlob);
+					setPreviewUrl(url);
+					setPreviewLoading(false);
+				}).catch((err) => {
+					if (controller.signal.aborted) return;
+					setPreviewLoading(false);
+					showToast(t("copyFailed"));
+				});
+			};
+			const handleClosePreview = () => {
+				if (abortControllerRef.current) {
+					abortControllerRef.current.abort();
+					abortControllerRef.current = null;
+				}
+				if (previewUrl) URL.revokeObjectURL(previewUrl);
+				setPreviewItem(null);
+				setPreviewUrl(null);
+				setPreviewBlob(null);
+				setPreviewLoading(false);
+			};
+			const goToPrev = () => {
+				if (currentPreviewIndex > 0) {
+					const prevItem = filteredItems[currentPreviewIndex - 1];
+					if (prevItem) openPreviewItem(prevItem);
+				}
+			};
+			const goToNext = () => {
+				if (currentPreviewIndex >= 0 && currentPreviewIndex < filteredItems.length - 1) {
+					const nextItem = filteredItems[currentPreviewIndex + 1];
+					if (nextItem) openPreviewItem(nextItem);
+				}
+			};
+			(0, react.useEffect)(() => {
+				return () => {
+					if (abortControllerRef.current) abortControllerRef.current.abort();
+					if (previewUrl) URL.revokeObjectURL(previewUrl);
+				};
+			}, [previewUrl]);
+			(0, react.useEffect)(() => {
+				const onKeyDown = (e) => {
+					if (["INPUT", "TEXTAREA"].includes(e.target?.tagName)) return;
+					if (showDeleteModal) {
+						if (e.key === "Escape" && !isDeleting) {
+							e.preventDefault();
+							setShowDeleteModal(false);
+							if (!isManageMode) setSelectedIds(/* @__PURE__ */ new Set());
+						}
+						return;
+					}
+					if (previewItem) {
+						if (e.key === "Escape") handleClosePreview();
+						else if (e.key === "ArrowLeft" || e.key === "Left") {
+							e.preventDefault();
+							goToPrev();
+						} else if (e.key === "ArrowRight" || e.key === "Right") {
+							e.preventDefault();
+							goToNext();
+						}
+					}
+				};
+				window.addEventListener("keydown", onKeyDown);
+				return () => window.removeEventListener("keydown", onKeyDown);
+			}, [
+				showDeleteModal,
+				isDeleting,
+				isManageMode,
+				previewItem,
+				currentPreviewIndex,
+				filteredItems
 			]);
+			const handleCardClick = (item, index, e, blob) => {
+				if (e.shiftKey || isManageMode) {
+					e.stopPropagation();
+					if (!isManageMode) setIsManageMode(true);
+					if (e.shiftKey && lastSelectedIndexRef.current !== null) {
+						const from = Math.min(lastSelectedIndexRef.current, index);
+						const to = Math.max(lastSelectedIndexRef.current, index);
+						const rangeItems = filteredItems.slice(from, to + 1);
+						setSelectedIds((prev) => {
+							const next = new Set(prev);
+							for (const r of rangeItems) next.add(r.id);
+							return next;
+						});
+					} else {
+						setSelectedIds((prev) => {
+							const next = new Set(prev);
+							if (next.has(item.id)) next.delete(item.id);
+							else next.add(item.id);
+							return next;
+						});
+						lastSelectedIndexRef.current = index;
+					}
+					return;
+				}
+				if (blob) openPreviewItem(item, blob);
+			};
+			const handleToggleSelect = (id, index, e) => {
+				e.stopPropagation();
+				if (!isManageMode) setIsManageMode(true);
+				if (e.shiftKey && lastSelectedIndexRef.current !== null) {
+					const from = Math.min(lastSelectedIndexRef.current, index);
+					const to = Math.max(lastSelectedIndexRef.current, index);
+					const rangeItems = filteredItems.slice(from, to + 1);
+					setSelectedIds((prev) => {
+						const next = new Set(prev);
+						for (const r of rangeItems) next.add(r.id);
+						return next;
+					});
+				} else {
+					setSelectedIds((prev) => {
+						const next = new Set(prev);
+						if (next.has(id)) next.delete(id);
+						else next.add(id);
+						return next;
+					});
+					lastSelectedIndexRef.current = index;
+				}
+			};
+			const handleSelectAll = () => {
+				setSelectedIds(new Set(filteredItems.map((i) => i.id)));
+			};
+			const handleInvertSelect = () => {
+				setSelectedIds((prev) => {
+					const next = /* @__PURE__ */ new Set();
+					for (const item of filteredItems) if (!prev.has(item.id)) next.add(item.id);
+					return next;
+				});
+			};
+			const handleClearSelect = () => {
+				setSelectedIds(/* @__PURE__ */ new Set());
+				lastSelectedIndexRef.current = null;
+			};
+			const handleExitManage = () => {
+				setIsManageMode(false);
+				setSelectedIds(/* @__PURE__ */ new Set());
+				lastSelectedIndexRef.current = null;
+			};
+			const requestSingleDelete = (item, e) => {
+				if (e) e.stopPropagation();
+				setSelectedIds(/* @__PURE__ */ new Set([item.id]));
+				setShowDeleteModal(true);
+			};
+			const handleConfirmBatchDelete = async () => {
+				if (selectedIds.size === 0 || isDeleting) return;
+				setIsDeleting(true);
+				const idsToDelete = Array.from(selectedIds);
+				const itemsToDelete = items.filter((i) => selectedIds.has(i.id));
+				const pathsToDelete = itemsToDelete.map((i) => i.savedTo).filter((p) => typeof p === "string" && p.trim().length > 0);
+				const fallbackAttachmentIds = itemsToDelete.filter((i) => !i.savedTo || !i.savedTo.trim()).map((i) => i.id);
+				let deletedFiles = 0;
+				let failedFilesCount = 0;
+				if (deleteWorkspaceFiles && (pathsToDelete.length > 0 || fallbackAttachmentIds.length > 0)) try {
+					const res = await fetch(DELETE_ROUTE, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({
+							paths: pathsToDelete,
+							attachmentIds: fallbackAttachmentIds
+						})
+					});
+					if (res.ok) {
+						const data = await res.json();
+						deletedFiles = data.deletedCount ?? 0;
+						if (Array.isArray(data.failedFiles)) failedFilesCount = data.failedFiles.length;
+					}
+				} catch (err) {
+					console.warn("[dsh-image-gen] Workspace file deletion failed:", err);
+				}
+				try {
+					await bulkDeleteGalleryItems(idsToDelete);
+				} catch (err) {
+					setIsDeleting(false);
+					showToast(t("deleteFailedDatabase"));
+					return;
+				}
+				if (previewItem && selectedIds.has(previewItem.id)) handleClosePreview();
+				setIsDeleting(false);
+				setShowDeleteModal(false);
+				if (isManageMode) handleExitManage();
+				else {
+					setSelectedIds(/* @__PURE__ */ new Set());
+					lastSelectedIndexRef.current = null;
+				}
+				if (failedFilesCount > 0) showToast(t("deleteFailedFileLocked", {
+					count: String(idsToDelete.length),
+					files: String(failedFilesCount)
+				}));
+				else if (deletedFiles > 0) showToast(t("batchDeletedWithFilesToast", {
+					count: String(idsToDelete.length),
+					files: String(deletedFiles)
+				}));
+				else showToast(t("batchDeletedToast", { count: String(idsToDelete.length) }));
+			};
 			return (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsh-ig-gallery-page",
 				children: [
 					(0, react_jsx_runtime.jsxs)("header", {
-						className: "dsh-ig-gallery-page-header",
-						children: [(0, react_jsx_runtime.jsx)("div", {
-							className: "dsh-ig-gallery-page-title-row",
-							children: (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-ig-gallery-page-count",
-								children: t("totalCount", { count: String(items.length) })
+						className: "dsh-ig-studio-tabs-bar",
+						children: [
+							(0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `dsh-ig-studio-tab-btn ${activeTab === "gallery" ? "is-active" : ""}`,
+								onClick: () => setActiveTab("gallery"),
+								children: [(0, react_jsx_runtime.jsx)(Image$1, { size: 15 }), (0, react_jsx_runtime.jsx)("span", { children: t("tabGallery") })]
+							}),
+							(0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `dsh-ig-studio-tab-btn ${activeTab === "studio" ? "is-active" : ""}`,
+								onClick: () => setActiveTab("studio"),
+								children: [(0, react_jsx_runtime.jsx)(SlidersHorizontal, { size: 15 }), (0, react_jsx_runtime.jsx)("span", { children: t("tabStudio") })]
+							}),
+							(0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `dsh-ig-studio-tab-btn ${activeTab === "favorites" ? "is-active" : ""}`,
+								onClick: () => setActiveTab("favorites"),
+								children: [(0, react_jsx_runtime.jsx)(Heart, { size: 15 }), (0, react_jsx_runtime.jsx)("span", { children: t("tabFavorites") })]
+							}),
+							(0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `dsh-ig-studio-tab-btn ${activeTab === "compare" ? "is-active" : ""}`,
+								onClick: () => setActiveTab("compare"),
+								children: [(0, react_jsx_runtime.jsx)(GitCompare, { size: 15 }), (0, react_jsx_runtime.jsx)("span", { children: t("tabCompare") })]
+							}),
+							(0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `dsh-ig-studio-tab-btn ${activeTab === "tasks" ? "is-active" : ""}`,
+								onClick: () => setActiveTab("tasks"),
+								children: [(0, react_jsx_runtime.jsx)(ListTodo, { size: 15 }), (0, react_jsx_runtime.jsx)("span", { children: t("tabTasks") })]
 							})
-						}), (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-ig-gallery-page-tools",
-							children: [(0, react_jsx_runtime.jsxs)("div", {
-								className: "dsh-ig-gallery-search-wrap",
-								children: [(0, react_jsx_runtime.jsxs)("svg", {
-									className: "dsh-ig-gallery-search-icon",
-									width: "14",
-									height: "14",
-									viewBox: "0 0 24 24",
-									fill: "none",
-									stroke: "currentColor",
-									strokeWidth: "2",
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									children: [(0, react_jsx_runtime.jsx)("circle", {
-										cx: "11",
-										cy: "11",
-										r: "8"
-									}), (0, react_jsx_runtime.jsx)("line", {
-										x1: "21",
-										y1: "21",
-										x2: "16.65",
-										y2: "16.65"
+						]
+					}),
+					(activeTab === "gallery" || activeTab === "favorites") && (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ig-studio-toolbar",
+						children: [(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-studio-toolbar-left",
+							children: [
+								(0, react_jsx_runtime.jsxs)("select", {
+									className: "dsh-ig-studio-select",
+									value: selectedProvider,
+									onChange: (e) => setSelectedProvider(e.target.value),
+									children: [
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "all",
+											children: t("filterAllProviders")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "google",
+											children: t("filterGoogle")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "openai",
+											children: t("filterOpenAI")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "seedream",
+											children: t("filterSeedream")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "dashscope",
+											children: t("filterDashScope")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "comfyui",
+											children: t("filterComfyUI")
+										})
+									]
+								}),
+								(0, react_jsx_runtime.jsxs)("select", {
+									className: "dsh-ig-studio-select",
+									value: selectedRatio,
+									onChange: (e) => setSelectedRatio(e.target.value),
+									children: [
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "all",
+											children: t("filterAllRatios")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "1:1",
+											children: "1:1"
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "16:9",
+											children: "16:9"
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "9:16",
+											children: "9:16"
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "4:3",
+											children: "4:3"
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "3:4",
+											children: "3:4"
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "3:2",
+											children: "3:2"
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "2:3",
+											children: "2:3"
+										})
+									]
+								}),
+								(0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-studio-search-wrap",
+									children: [(0, react_jsx_runtime.jsx)(Search, {
+										className: "dsh-ig-studio-search-icon",
+										size: 14
+									}), (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										className: "dsh-ig-studio-search-input",
+										placeholder: t("searchPlaceholder"),
+										value: search,
+										onChange: (e) => setSearch(e.target.value)
 									})]
-								}), (0, react_jsx_runtime.jsx)("input", {
-									type: "text",
-									className: "dsh-ig-gallery-search-input",
-									placeholder: t("searchPlaceholder"),
-									value: search,
-									onChange: (e) => setSearch(e.target.value)
+								})
+							]
+						}), (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-studio-toolbar-right",
+							children: [(0, react_jsx_runtime.jsxs)("select", {
+								className: "dsh-ig-studio-select dsh-ig-studio-select-sort",
+								value: sortBy,
+								onChange: (e) => setSortBy(e.target.value),
+								children: [(0, react_jsx_runtime.jsx)("option", {
+									value: "newest",
+									children: t("sortNewest")
+								}), (0, react_jsx_runtime.jsx)("option", {
+									value: "oldest",
+									children: t("sortOldest")
 								})]
-							}), (0, react_jsx_runtime.jsxs)("select", {
-								className: "dsh-ig-gallery-select",
-								value: selectedProvider,
-								onChange: (e) => setSelectedProvider(e.target.value),
-								children: [
-									(0, react_jsx_runtime.jsx)("option", {
-										value: "all",
-										children: t("filterAll")
-									}),
-									(0, react_jsx_runtime.jsx)("option", {
-										value: "google",
-										children: t("filterGoogle")
-									}),
-									(0, react_jsx_runtime.jsx)("option", {
-										value: "openai",
-										children: t("filterOpenAI")
-									}),
-									(0, react_jsx_runtime.jsx)("option", {
-										value: "seedream",
-										children: t("filterSeedream")
-									}),
-									(0, react_jsx_runtime.jsx)("option", {
-										value: "dashscope",
-										children: t("filterDashScope")
-									}),
-									(0, react_jsx_runtime.jsx)("option", {
-										value: "comfyui",
-										children: t("filterComfyUI")
-									})
-								]
+							}), (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `dsh-ig-studio-btn dsh-ig-studio-btn-danger ${isManageMode ? "is-active" : ""}`,
+								title: isManageMode ? t("exitManage") : t("manage"),
+								onClick: () => {
+									if (isManageMode) handleExitManage();
+									else setIsManageMode(true);
+								},
+								children: [(0, react_jsx_runtime.jsx)(Trash2, { size: 13 }), (0, react_jsx_runtime.jsx)("span", { children: isManageMode ? t("exitManage") : t("manage") })]
 							})]
 						})]
 					}),
 					(0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-ig-gallery-page-body",
-						children: items.length === 0 ? (0, react_jsx_runtime.jsxs)("div", {
+						children: activeTab === "gallery" || activeTab === "favorites" ? items.length === 0 ? (0, react_jsx_runtime.jsxs)("div", {
 							className: "dsh-ig-gallery-empty",
 							children: [
 								(0, react_jsx_runtime.jsx)("div", {
@@ -513,6 +1484,22 @@ window.__ModuleLoader__.load({
 									children: t("emptyDesc")
 								})
 							]
+						}) : activeTab === "favorites" && filteredItems.length === 0 && search === "" && selectedProvider === "all" && selectedRatio === "all" ? (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-gallery-empty",
+							children: [
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-icon",
+									children: "🤍"
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-title",
+									children: t("favEmptyTitle")
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-desc",
+									children: t("favEmptyDesc")
+								})
+							]
 						}) : filteredItems.length === 0 ? (0, react_jsx_runtime.jsxs)("div", {
 							className: "dsh-ig-gallery-empty",
 							children: [
@@ -531,82 +1518,212 @@ window.__ModuleLoader__.load({
 							]
 						}) : (0, react_jsx_runtime.jsx)("div", {
 							className: "dsh-ig-gallery-grid",
-							children: filteredItems.map((item) => (0, react_jsx_runtime.jsx)(GalleryCard, {
+							children: filteredItems.map((item, idx) => (0, react_jsx_runtime.jsx)(GalleryCard, {
 								item,
+								index: idx,
+								isManageMode,
+								isSelected: selectedIds.has(item.id),
 								t,
-								onPreview: (url, blob) => {
-									setPreviewItem(item);
-									setPreviewUrl(url);
-									setPreviewBlob(blob);
-								},
+								onClick: (e, blob) => handleCardClick(item, idx, e, blob),
+								onToggleSelect: (e) => handleToggleSelect(item.id, idx, e),
+								onRequestDelete: () => requestSingleDelete(item),
+								onPreview: (blob) => openPreviewItem(item, blob),
+								onBlobLoaded: (b) => blobCache.set(item.id, b),
 								onToast: showToast
 							}, item.id))
+						}) : activeTab === "studio" ? (0, react_jsx_runtime.jsx)(PlaceholderView, {
+							icon: "🎨",
+							title: t("studioTitle"),
+							description: t("studioDesc"),
+							tip: t("studioTip"),
+							badge: t("comingSoonBadge")
+						}) : activeTab === "compare" ? (0, react_jsx_runtime.jsx)(PlaceholderView, {
+							icon: "🔀",
+							title: t("compareTitle"),
+							description: t("compareDesc"),
+							badge: t("comingSoonBadge")
+						}) : (0, react_jsx_runtime.jsx)(PlaceholderView, {
+							icon: "📋",
+							title: t("tasksTitle"),
+							description: t("tasksDesc"),
+							badge: t("comingSoonBadge")
 						})
 					}),
 					toast && (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-ig-gallery-page-toast",
 						children: toast
 					}),
-					previewItem && previewUrl && (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-ig-lightbox-backdrop",
+					(isManageMode || selectedIds.size > 0) && (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ig-batch-bar",
+						children: [(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-batch-bar-left",
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-batch-counter",
+									children: t("selectedCount", { n: String(selectedIds.size) })
+								}),
+								(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-batch-btn",
+									onClick: handleSelectAll,
+									children: t("selectAll")
+								}),
+								(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-batch-btn",
+									onClick: handleInvertSelect,
+									children: t("invertSelect")
+								}),
+								selectedIds.size > 0 && (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-batch-btn",
+									onClick: handleClearSelect,
+									children: t("clearSelect")
+								})
+							]
+						}), (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-batch-bar-right",
+							children: [(0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "dsh-ig-batch-btn dsh-ig-batch-btn-danger",
+								disabled: selectedIds.size === 0,
+								onClick: () => setShowDeleteModal(true),
+								children: [(0, react_jsx_runtime.jsx)(Trash2, { size: 13 }), (0, react_jsx_runtime.jsxs)("span", { children: [t("batchDelete"), selectedIds.size > 0 ? ` (${selectedIds.size})` : ""] })]
+							}), (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-ig-batch-btn dsh-ig-batch-btn-exit",
+								onClick: handleExitManage,
+								children: t("exitManage")
+							})]
+						})]
+					}),
+					showDeleteModal && (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-ig-modal-backdrop",
 						onClick: () => {
-							setPreviewItem(null);
-							setPreviewUrl(null);
-							setPreviewBlob(null);
+							if (!isDeleting) {
+								setShowDeleteModal(false);
+								if (!isManageMode) setSelectedIds(/* @__PURE__ */ new Set());
+							}
 						},
+						children: (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-modal-box",
+							onClick: (e) => e.stopPropagation(),
+							children: [
+								(0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-modal-header",
+									children: [(0, react_jsx_runtime.jsx)("div", {
+										className: "dsh-ig-modal-icon-danger",
+										children: (0, react_jsx_runtime.jsx)(TriangleAlert, { size: 20 })
+									}), (0, react_jsx_runtime.jsx)("div", {
+										className: "dsh-ig-modal-title",
+										children: selectedIds.size === 1 ? t("batchDeleteTitleSingle") : t("batchDeleteTitle", { count: String(selectedIds.size) })
+									})]
+								}),
+								(0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-modal-body",
+									children: [(0, react_jsx_runtime.jsx)("p", {
+										className: "dsh-ig-modal-desc",
+										children: t("batchDeleteDesc")
+									}), (0, react_jsx_runtime.jsxs)("label", {
+										className: "dsh-ig-modal-checkbox-label",
+										children: [(0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: deleteWorkspaceFiles,
+											onChange: (e) => setDeleteWorkspaceFiles(e.target.checked),
+											disabled: isDeleting
+										}), (0, react_jsx_runtime.jsx)("span", { children: t("deleteWorkspaceFilesOpt") })]
+									})]
+								}),
+								(0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-modal-footer",
+									children: [(0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dsh-ig-modal-btn dsh-ig-modal-btn-cancel",
+										onClick: () => {
+											setShowDeleteModal(false);
+											if (!isManageMode) setSelectedIds(/* @__PURE__ */ new Set());
+										},
+										disabled: isDeleting,
+										children: t("cancel")
+									}), (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dsh-ig-modal-btn dsh-ig-modal-btn-danger",
+										onClick: handleConfirmBatchDelete,
+										disabled: isDeleting,
+										children: isDeleting ? "..." : selectedIds.size === 1 ? t("confirmDeleteSingle") : t("confirmBatchDelete", { count: String(selectedIds.size) })
+									})]
+								})
+							]
+						})
+					}),
+					previewItem && (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ig-lightbox-backdrop",
+						onClick: handleClosePreview,
 						children: [
 							(0, react_jsx_runtime.jsxs)("div", {
 								className: "dsh-ig-lightbox-topbar",
 								onClick: (e) => e.stopPropagation(),
 								children: [(0, react_jsx_runtime.jsxs)("div", {
 									className: "dsh-ig-lightbox-meta",
-									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: "dsh-ig-tag",
-										children: previewItem.provider
-									}), previewItem.model ? (0, react_jsx_runtime.jsx)("span", {
-										className: "dsh-ig-tag dsh-ig-tag-model",
-										children: previewItem.model
-									}) : null]
+									children: [
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-tag",
+											children: previewItem.provider
+										}),
+										previewItem.model ? (0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-tag dsh-ig-tag-model",
+											children: previewItem.model
+										}) : null,
+										currentPreviewIndex >= 0 && (0, react_jsx_runtime.jsxs)("span", {
+											className: "dsh-ig-lightbox-counter",
+											children: [
+												currentPreviewIndex + 1,
+												" / ",
+												filteredItems.length
+											]
+										})
+									]
 								}), (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "dsh-ig-lightbox-close-btn",
 									title: t("close"),
-									onClick: () => {
-										setPreviewItem(null);
-										setPreviewUrl(null);
-										setPreviewBlob(null);
-									},
-									children: (0, react_jsx_runtime.jsxs)("svg", {
-										width: "18",
-										height: "18",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [(0, react_jsx_runtime.jsx)("line", {
-											x1: "18",
-											y1: "6",
-											x2: "6",
-											y2: "18"
-										}), (0, react_jsx_runtime.jsx)("line", {
-											x1: "6",
-											y1: "6",
-											x2: "18",
-											y2: "18"
-										})]
-									})
+									onClick: handleClosePreview,
+									children: (0, react_jsx_runtime.jsx)(X, { size: 18 })
 								})]
 							}),
+							(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-ig-lightbox-nav-btn dsh-ig-lightbox-nav-prev",
+								title: t("prevImage"),
+								disabled: !hasPrev,
+								onClick: (e) => {
+									e.stopPropagation();
+									goToPrev();
+								},
+								children: (0, react_jsx_runtime.jsx)(ChevronLeft, { size: 24 })
+							}),
+							(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-ig-lightbox-nav-btn dsh-ig-lightbox-nav-next",
+								title: t("nextImage"),
+								disabled: !hasNext,
+								onClick: (e) => {
+									e.stopPropagation();
+									goToNext();
+								},
+								children: (0, react_jsx_runtime.jsx)(ChevronRight, { size: 24 })
+							}),
 							(0, react_jsx_runtime.jsx)("div", {
 								className: "dsh-ig-lightbox-img-wrap",
 								onClick: (e) => e.stopPropagation(),
-								children: (0, react_jsx_runtime.jsx)("img", {
+								children: previewLoading ? (0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-lightbox-loading",
+									children: (0, react_jsx_runtime.jsx)("div", { className: "dsh-ig-lightbox-spinner" })
+								}) : previewUrl ? (0, react_jsx_runtime.jsx)("img", {
 									className: "dsh-ig-lightbox-img",
 									src: previewUrl,
 									alt: previewItem.prompt
-								})
+								}) : null
 							}),
 							(0, react_jsx_runtime.jsxs)("div", {
 								className: "dsh-ig-lightbox-bottombar",
@@ -626,24 +1743,7 @@ window.__ModuleLoader__.load({
 												await navigator.clipboard.writeText(previewItem.prompt);
 												showToast(t("copiedPrompt"));
 											},
-											children: [(0, react_jsx_runtime.jsxs)("svg", {
-												width: "14",
-												height: "14",
-												viewBox: "0 0 24 24",
-												fill: "none",
-												stroke: "currentColor",
-												strokeWidth: "2",
-												strokeLinecap: "round",
-												strokeLinejoin: "round",
-												children: [(0, react_jsx_runtime.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, react_jsx_runtime.jsx)("rect", {
-													x: "8",
-													y: "2",
-													width: "8",
-													height: "4",
-													rx: "1",
-													ry: "1"
-												})]
-											}), (0, react_jsx_runtime.jsx)("span", { children: t("copyPpt") })]
+											children: [(0, react_jsx_runtime.jsx)(FileText, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("copyPpt") })]
 										}),
 										(0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
@@ -654,30 +1754,14 @@ window.__ModuleLoader__.load({
 												const ok = await copyImageBlob(previewBlob);
 												showToast(ok ? t("copiedImage") : t("copyFailed"));
 											},
-											children: [(0, react_jsx_runtime.jsxs)("svg", {
-												width: "14",
-												height: "14",
-												viewBox: "0 0 24 24",
-												fill: "none",
-												stroke: "currentColor",
-												strokeWidth: "2",
-												strokeLinecap: "round",
-												strokeLinejoin: "round",
-												children: [(0, react_jsx_runtime.jsx)("rect", {
-													x: "9",
-													y: "9",
-													width: "13",
-													height: "13",
-													rx: "2",
-													ry: "2"
-												}), (0, react_jsx_runtime.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
-											}), (0, react_jsx_runtime.jsx)("span", { children: t("copyImg") })]
+											children: [(0, react_jsx_runtime.jsx)(Copy, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("copyImg") })]
 										}),
 										(0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dsh-ig-lightbox-btn",
 											title: t("download"),
 											onClick: () => {
+												if (!previewUrl) return;
 												const a = document.createElement("a");
 												a.href = previewUrl;
 												a.download = `dsh-${previewItem.provider}-${previewItem.id}.png`;
@@ -685,65 +1769,16 @@ window.__ModuleLoader__.load({
 												a.click();
 												document.body.removeChild(a);
 											},
-											children: [(0, react_jsx_runtime.jsxs)("svg", {
-												width: "14",
-												height: "14",
-												viewBox: "0 0 24 24",
-												fill: "none",
-												stroke: "currentColor",
-												strokeWidth: "2",
-												strokeLinecap: "round",
-												strokeLinejoin: "round",
-												children: [
-													(0, react_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-													(0, react_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
-													(0, react_jsx_runtime.jsx)("line", {
-														x1: "12",
-														y1: "15",
-														x2: "12",
-														y2: "3"
-													})
-												]
-											}), (0, react_jsx_runtime.jsx)("span", { children: t("download") })]
+											children: [(0, react_jsx_runtime.jsx)(Download, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("download") })]
 										}),
 										(0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dsh-ig-lightbox-btn dsh-ig-lightbox-btn-danger",
 											title: t("delete"),
-											onClick: async () => {
-												if (!window.confirm(t("confirmDelete"))) return;
-												await deleteGalleryItem(previewItem.id);
-												setPreviewItem(null);
-												setPreviewUrl(null);
-												setPreviewBlob(null);
-												showToast(t("deleted"));
+											onClick: () => {
+												if (previewItem) requestSingleDelete(previewItem);
 											},
-											children: [(0, react_jsx_runtime.jsxs)("svg", {
-												width: "14",
-												height: "14",
-												viewBox: "0 0 24 24",
-												fill: "none",
-												stroke: "currentColor",
-												strokeWidth: "2",
-												strokeLinecap: "round",
-												strokeLinejoin: "round",
-												children: [
-													(0, react_jsx_runtime.jsx)("polyline", { points: "3 6 5 6 21 6" }),
-													(0, react_jsx_runtime.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
-													(0, react_jsx_runtime.jsx)("line", {
-														x1: "10",
-														y1: "11",
-														x2: "10",
-														y2: "17"
-													}),
-													(0, react_jsx_runtime.jsx)("line", {
-														x1: "14",
-														y1: "11",
-														x2: "14",
-														y2: "17"
-													})
-												]
-											}), (0, react_jsx_runtime.jsx)("span", { children: t("delete") })]
+											children: [(0, react_jsx_runtime.jsx)(Trash2, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("delete") })]
 										})
 									]
 								})]
@@ -753,7 +1788,7 @@ window.__ModuleLoader__.load({
 				]
 			});
 		};
-		const GalleryCard = ({ item, t, onPreview, onToast }) => {
+		const GalleryCard = ({ item, index: _index, isManageMode, isSelected, t, onClick, onToggleSelect, onRequestDelete, onPreview: _onPreview, onBlobLoaded, onToast }) => {
 			const [url, setUrl] = (0, react.useState)();
 			const [blob, setBlob] = (0, react.useState)();
 			const [loading, setLoading] = (0, react.useState)(true);
@@ -771,6 +1806,7 @@ window.__ModuleLoader__.load({
 					const resBlob = await response.blob();
 					if (controller.signal.aborted) return;
 					setBlob(resBlob);
+					onBlobLoaded?.(resBlob);
 					objectUrl = URL.createObjectURL(resBlob);
 					setUrl(objectUrl);
 					setLoading(false);
@@ -809,14 +1845,27 @@ window.__ModuleLoader__.load({
 				a.click();
 				document.body.removeChild(a);
 			};
+			const toggleFavorite = async (e) => {
+				e.stopPropagation();
+				onToast(await toggleFavoriteGalleryItem(item.id) ? t("favoriteAdded") : t("favoriteRemoved"));
+			};
+			const badgeLabel = item.model || item.provider;
 			return (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsh-ig-gallery-card",
-				onClick: () => {
-					if (url && blob) onPreview(url, blob);
-				},
+				className: `dsh-ig-gallery-card ${isSelected ? "is-selected" : ""} ${isManageMode ? "is-manage-mode" : ""}`,
+				onClick: (e) => onClick(e, blob),
 				children: [(0, react_jsx_runtime.jsxs)("div", {
 					className: "dsh-ig-gallery-card-media",
 					children: [
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: `dsh-ig-card-checkbox ${isSelected ? "is-checked" : ""}`,
+							title: isSelected ? t("clearSelect") : t("manage"),
+							onClick: onToggleSelect,
+							children: isSelected && (0, react_jsx_runtime.jsx)(Check, {
+								size: 11,
+								strokeWidth: 3
+							})
+						}),
 						loading && (0, react_jsx_runtime.jsx)("div", {
 							className: "dsh-ig-gallery-card-loading",
 							children: "..."
@@ -841,50 +1890,14 @@ window.__ModuleLoader__.load({
 									onClick: (e) => {
 										copyImage(e);
 									},
-									children: (0, react_jsx_runtime.jsxs)("svg", {
-										width: "14",
-										height: "14",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [(0, react_jsx_runtime.jsx)("rect", {
-											x: "9",
-											y: "9",
-											width: "13",
-											height: "13",
-											rx: "2",
-											ry: "2"
-										}), (0, react_jsx_runtime.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
-									})
+									children: (0, react_jsx_runtime.jsx)(Copy, { size: 13 })
 								}),
 								(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "dsh-ig-tool-btn",
 									title: t("download"),
 									onClick: downloadImage,
-									children: (0, react_jsx_runtime.jsxs)("svg", {
-										width: "14",
-										height: "14",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [
-											(0, react_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-											(0, react_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
-											(0, react_jsx_runtime.jsx)("line", {
-												x1: "12",
-												y1: "15",
-												x2: "12",
-												y2: "3"
-											})
-										]
-									})
+									children: (0, react_jsx_runtime.jsx)(Download, { size: 13 })
 								}),
 								(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
@@ -893,84 +1906,95 @@ window.__ModuleLoader__.load({
 									onClick: (e) => {
 										copyPrompt(e);
 									},
-									children: (0, react_jsx_runtime.jsxs)("svg", {
-										width: "14",
-										height: "14",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [(0, react_jsx_runtime.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, react_jsx_runtime.jsx)("rect", {
-											x: "8",
-											y: "2",
-											width: "8",
-											height: "4",
-											rx: "1",
-											ry: "1"
-										})]
-									})
+									children: (0, react_jsx_runtime.jsx)(FileText, { size: 13 })
 								}),
 								(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "dsh-ig-tool-btn dsh-ig-tool-btn-danger",
 									title: t("delete"),
-									onClick: async (e) => {
+									onClick: (e) => {
 										e.stopPropagation();
-										if (!window.confirm(t("confirmDelete"))) return;
-										await deleteGalleryItem(item.id);
-										onToast(t("deleted"));
+										onRequestDelete();
 									},
-									children: (0, react_jsx_runtime.jsxs)("svg", {
-										width: "14",
-										height: "14",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [
-											(0, react_jsx_runtime.jsx)("polyline", { points: "3 6 5 6 21 6" }),
-											(0, react_jsx_runtime.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
-											(0, react_jsx_runtime.jsx)("line", {
-												x1: "10",
-												y1: "11",
-												x2: "10",
-												y2: "17"
-											}),
-											(0, react_jsx_runtime.jsx)("line", {
-												x1: "14",
-												y1: "11",
-												x2: "14",
-												y2: "17"
-											})
-										]
-									})
+									children: (0, react_jsx_runtime.jsx)(Trash2, { size: 13 })
 								})
 							]
 						})
 					]
 				}), (0, react_jsx_runtime.jsxs)("div", {
 					className: "dsh-ig-gallery-card-meta",
-					children: [(0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-ig-gallery-card-header",
-						children: [(0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-ig-tag",
-							children: item.provider
-						}), item.model ? (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-ig-tag dsh-ig-tag-model",
-							children: item.model
-						}) : null]
-					}), (0, react_jsx_runtime.jsx)("p", {
-						className: "dsh-ig-gallery-card-prompt",
-						title: item.prompt,
-						children: item.prompt
-					})]
+					children: [
+						(0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-card-badge-row",
+							children: (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ig-card-badge",
+								title: badgeLabel,
+								children: badgeLabel
+							})
+						}),
+						(0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-gallery-card-prompt-line",
+							title: item.prompt,
+							children: item.prompt
+						}),
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-card-footer-row",
+							children: [(0, react_jsx_runtime.jsxs)("span", {
+								className: "dsh-ig-card-meta-text",
+								children: [
+									formatCardMeta(item),
+									" | ",
+									formatRelativeTime(item.createdAt, t)
+								]
+							}), (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dsh-ig-card-fav-btn ${item.isFavorite ? "is-favorited" : ""}`,
+								title: item.isFavorite ? t("favoriteRemoved") : t("favoriteAdded"),
+								onClick: (e) => {
+									toggleFavorite(e);
+								},
+								children: (0, react_jsx_runtime.jsx)(Heart, {
+									size: 15,
+									fill: item.isFavorite ? "currentColor" : "none"
+								})
+							})]
+						})
+					]
 				})]
 			});
 		};
+		const PlaceholderView = ({ icon, title, description, tip, badge }) => {
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ig-placeholder-view",
+				children: (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-ig-placeholder-card",
+					children: [
+						(0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-placeholder-icon",
+							children: icon
+						}),
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-placeholder-header",
+							children: [(0, react_jsx_runtime.jsx)("h2", {
+								className: "dsh-ig-placeholder-title",
+								children: title
+							}), badge && (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ig-placeholder-badge",
+								children: badge
+							})]
+						}),
+						(0, react_jsx_runtime.jsx)("p", {
+							className: "dsh-ig-placeholder-desc",
+							children: description
+						}),
+						tip && (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-placeholder-tip",
+							children: tip
+						})
+					]
+				})
+			});
+		};
 		async function copyImageBlob(blob) {
 			try {
 				if (blob.type === "image/png") {
@@ -1333,58 +2357,149 @@ window.__ModuleLoader__.load({
 .dsh-ig-error{color:var(--dsw-alias-label-error,#d33);font-size:13px}
 .dsh-ig-loading{color:var(--dsw-alias-label-tertiary,#7b818b);font-size:13px}
 
-/* Native Workspace Gallery View (Renders seamlessly inside DSH Session View) */
+/* Native Workspace Gallery & Studio View (Renders seamlessly inside DSH Session View) */
 .dsh-ig-gallery-page{width:100%;height:100%;background:var(--dsw-alias-bg-layer-1,#ffffff);display:flex;flex-direction:column;overflow:hidden;flex:1}
-.dsh-ig-gallery-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;border-bottom:1px solid var(--dsw-alias-border-l2,#e5e7eb);background:var(--dsw-alias-bg-layer-1,#ffffff);flex-shrink:0}
-.dsh-ig-gallery-page-title-row{display:flex;align-items:center;gap:12px}
-.dsh-ig-gallery-page-count{font-size:13px;font-weight:500;color:var(--dsw-alias-label-secondary,#4b5563);background:var(--dsw-alias-bg-layer-3,#f3f4f6);padding:3px 10px;border-radius:20px}
-.dsh-ig-gallery-page-tools{display:flex;align-items:center;gap:12px}
-.dsh-ig-gallery-search-wrap{position:relative;display:flex;align-items:center}
-.dsh-ig-gallery-search-icon{position:absolute;left:10px;color:var(--dsw-alias-label-tertiary,#9ca3af);pointer-events:none}
-.dsh-ig-gallery-search-input{padding:6px 12px 6px 32px;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;background:var(--dsw-alias-bg-layer-2,#fff);color:inherit;outline:none;width:200px;transition:border-color .15s,width .2s}
-.dsh-ig-gallery-search-input:focus{border-color:var(--dsw-alias-brand-primary,#4c78ff);width:240px}
-.dsh-ig-gallery-select{padding:6px 12px;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;background:var(--dsw-alias-bg-layer-2,#fff);color:inherit;outline:none;cursor:pointer}
-.dsh-ig-gallery-page-body{flex:1;overflow-y:auto;padding:24px 28px}
-.dsh-ig-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
-.dsh-ig-gallery-card{background:var(--dsw-alias-bg-layer-2,#fff);border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
-.dsh-ig-gallery-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06);border-color:var(--dsw-alias-border-l1,#cfd4dc)}
-.dsh-ig-gallery-card-media{position:relative;width:100%;aspect-ratio:1/1;background:#f3f4f6;overflow:hidden;display:flex;align-items:center;justify-content:center}
-.dsh-ig-gallery-card-img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
+
+/* 1. Top Navigation Tab Bar */
+.dsh-ig-studio-tabs-bar{display:flex;align-items:center;gap:6px;padding:6px 24px;border-bottom:1px solid var(--dsw-alias-border-l2,#e5e7eb);background:var(--dsw-alias-bg-layer-1,#ffffff);flex-shrink:0}
+.dsh-ig-studio-tab-btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-secondary,#64748b);cursor:pointer;border-radius:6px;transition:color .15s ease,background-color .15s ease}
+.dsh-ig-studio-tab-btn:hover{color:var(--dsw-alias-label-primary,#0f172a);background:var(--dsw-alias-bg-layer-2,#f1f5f9)}
+.dsh-ig-studio-tab-btn.is-active{color:var(--dsw-alias-brand-primary,#2563eb);font-weight:600;background:rgba(37,99,235,0.08)}
+
+/* 2. Secondary Filter & Search Toolbar */
+.dsh-ig-studio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px;background:var(--dsw-alias-bg-layer-1,#ffffff);border-bottom:1px solid var(--dsw-alias-border-l2,#f1f5f9);flex-shrink:0;flex-wrap:wrap}
+.dsh-ig-studio-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
+.dsh-ig-studio-toolbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
+
+/* Modern Custom Select (Removes OS default arrows & ugly borders) */
+.dsh-ig-studio-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:32px;line-height:30px;padding:0 28px 0 12px;font-size:12.5px;color:var(--dsw-alias-label-primary,#334155);background-color:var(--dsw-alias-bg-layer-2,#ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;border:1px solid var(--dsw-alias-border-l2,#e2e8f0);border-radius:6px;outline:none;cursor:pointer;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
+.dsh-ig-studio-select:hover{border-color:var(--dsw-alias-border-l1,#cbd5e1);background-color:var(--dsw-alias-bg-layer-1,#f8fafc)}
+.dsh-ig-studio-select:focus{border-color:var(--dsw-alias-brand-primary,#3b82f6);box-shadow:0 0 0 2px rgba(59,130,246,0.15)}
+.dsh-ig-studio-select-sort{font-weight:500}
+
+/* Unified Search Input */
+.dsh-ig-studio-search-wrap{position:relative;display:flex;align-items:center;min-width:190px;max-width:320px;flex:1}
+.dsh-ig-studio-search-icon{position:absolute;left:10px;color:var(--dsw-alias-label-tertiary,#94a3b8);pointer-events:none}
+.dsh-ig-studio-search-input{width:100%;height:32px;line-height:30px;padding:0 12px 0 32px;font-size:12.5px;border:1px solid var(--dsw-alias-border-l2,#e2e8f0);border-radius:6px;background-color:var(--dsw-alias-bg-layer-2,#ffffff);color:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
+.dsh-ig-studio-search-input:hover{border-color:var(--dsw-alias-border-l1,#cbd5e1)}
+.dsh-ig-studio-search-input:focus{border-color:var(--dsw-alias-brand-primary,#3b82f6);box-shadow:0 0 0 2px rgba(59,130,246,0.15)}
+.dsh-ig-studio-search-input::placeholder{color:var(--dsw-alias-label-tertiary,#94a3b8)}
+
+/* 3. Grid & Responsive Cards */
+.dsh-ig-gallery-page-body{flex:1;overflow-y:auto;padding:20px 24px}
+.dsh-ig-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
+.dsh-ig-gallery-card{background:var(--dsw-alias-bg-layer-2,#ffffff);border:1px solid var(--dsw-alias-border-l2,#e2e8f0);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
+.dsh-ig-gallery-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px -5px rgba(0,0,0,0.06),0 4px 6px -2px rgba(0,0,0,0.03);border-color:var(--dsw-alias-border-l1,#cbd5e1)}
+.dsh-ig-gallery-card-media{position:relative;width:100%;aspect-ratio:1/1;background:#f1f5f9;overflow:hidden;display:flex;align-items:center;justify-content:center}
+.dsh-ig-gallery-card-img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
 .dsh-ig-gallery-card:hover .dsh-ig-gallery-card-img{transform:scale(1.03)}
-.dsh-ig-gallery-card-loading{font-size:12px;color:#9ca3af}
+.dsh-ig-gallery-card-loading{font-size:12px;color:#94a3b8}
 .dsh-ig-gallery-card-error{font-size:12px;color:#ef4444;padding:8px;text-align:center}
 
-/* Floating Action Toolbar (Matches Chat Image Toolbar) */
+/* Floating Action Toolbar on Card Hover */
 .dsh-ig-gallery-card:hover .dsh-ig-card-toolbar{opacity:1;pointer-events:auto}
-.dsh-ig-card-toolbar{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;padding:3px 5px;border-radius:8px;background:rgba(0,0,0,0.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:10;line-height:1}
+.dsh-ig-card-toolbar{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:3px;padding:3px 5px;border-radius:6px;background:rgba(15,23,42,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:10;line-height:1}
 
-.dsh-ig-gallery-card-meta{padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--dsw-alias-bg-layer-2,#fff);flex:1}
-.dsh-ig-gallery-card-header{display:flex;align-items:center;justify-content:space-between;font-size:11px}
-.dsh-ig-tag{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--dsw-alias-bg-layer-3,#edf0f3);color:var(--dsw-alias-label-secondary,inherit);font-weight:500;text-transform:uppercase;font-size:10px}
-.dsh-ig-tag-model{background:rgba(76,120,255,0.1);color:#4c78ff}
-.dsh-ig-gallery-card-prompt{margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-primary,inherit);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
-.dsh-ig-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:360px;text-align:center;color:var(--dsw-alias-label-tertiary,#7b818b)}
-.dsh-ig-gallery-empty-icon{font-size:48px;margin-bottom:12px}
-.dsh-ig-gallery-empty-title{font-size:16px;font-weight:600;color:var(--dsw-alias-label-primary,inherit);margin-bottom:6px}
+/* Card Bottom Metadata */
+.dsh-ig-gallery-card-meta{padding:10px 12px;display:flex;flex-direction:column;gap:5px;background:var(--dsw-alias-bg-layer-2,#ffffff);flex:1}
+.dsh-ig-card-badge-row{display:flex;align-items:center}
+.dsh-ig-card-badge{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--dsw-alias-bg-layer-3,#f1f5f9);color:var(--dsw-alias-label-secondary,#475569);font-size:11px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsh-ig-gallery-card-prompt-line{font-size:12.5px;font-weight:500;color:var(--dsw-alias-label-primary,#1e293b);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsh-ig-card-footer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
+.dsh-ig-card-meta-text{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.dsh-ig-card-fav-btn{appearance:none;border:0;background:transparent;color:var(--dsw-alias-label-tertiary,#94a3b8);padding:2px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,transform .15s;flex-shrink:0}
+.dsh-ig-card-fav-btn:hover{color:#ef4444;transform:scale(1.15)}
+.dsh-ig-card-fav-btn.is-favorited{color:#ef4444}
+
+/* Placeholders for Upcoming Routes */
+.dsh-ig-placeholder-view{display:flex;align-items:center;justify-content:center;min-height:360px;height:100%;padding:24px}
+.dsh-ig-placeholder-card{max-width:500px;width:100%;text-align:center;padding:36px 28px;background:var(--dsw-alias-bg-layer-2,#ffffff);border:1px dashed var(--dsw-alias-border-l2,#e2e8f0);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:12px}
+.dsh-ig-placeholder-icon{font-size:40px;line-height:1}
+.dsh-ig-placeholder-header{display:flex;align-items:center;gap:8px;justify-content:center}
+.dsh-ig-placeholder-title{font-size:16px;font-weight:600;color:var(--dsw-alias-label-primary,inherit);margin:0}
+.dsh-ig-placeholder-badge{font-size:11px;font-weight:500;background:rgba(37,99,235,0.1);color:#2563eb;padding:2px 8px;border-radius:12px}
+.dsh-ig-placeholder-desc{font-size:13px;line-height:1.6;color:var(--dsw-alias-label-secondary,#64748b);margin:0}
+.dsh-ig-placeholder-tip{margin-top:6px;padding:8px 12px;font-size:12px;background:var(--dsw-alias-bg-layer-3,#f8fafc);border-radius:8px;color:var(--dsw-alias-label-tertiary,#64748b);text-align:left}
+
+/* Empty State */
+.dsh-ig-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:360px;text-align:center;color:var(--dsw-alias-label-tertiary,#94a3b8)}
+.dsh-ig-gallery-empty-icon{font-size:44px;margin-bottom:10px}
+.dsh-ig-gallery-empty-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary,inherit);margin-bottom:4px}
 .dsh-ig-gallery-empty-desc{font-size:13px;max-width:360px;line-height:1.5}
 
 /* Pure Centered Lightbox */
 .dsh-ig-lightbox-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;cursor:zoom-out;animation:dsh-ig-fade .15s ease-out}
 .dsh-ig-lightbox-topbar{position:absolute;top:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;z-index:10;pointer-events:none}
 .dsh-ig-lightbox-meta{display:flex;align-items:center;gap:8px;pointer-events:auto}
+.dsh-ig-tag{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--dsw-alias-bg-layer-3,#edf0f3);color:var(--dsw-alias-label-secondary,inherit);font-weight:500;text-transform:uppercase;font-size:10px}
+.dsh-ig-tag-model{background:rgba(76,120,255,0.1);color:#4c78ff}
 .dsh-ig-lightbox-close-btn{appearance:none;border:0;background:rgba(255,255,255,0.15);color:#fff;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;pointer-events:auto}
 .dsh-ig-lightbox-close-btn:hover{background:rgba(255,255,255,0.3)}
 .dsh-ig-lightbox-img-wrap{max-width:86vw;max-height:78vh;display:flex;align-items:center;justify-content:center;cursor:default}
 .dsh-ig-lightbox-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,0.7);user-select:none}
 .dsh-ig-lightbox-bottombar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(90vw,640px);background:rgba(20,22,26,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:10px 16px;display:flex;flex-direction:column;gap:8px;color:#fff;box-shadow:0 16px 40px rgba(0,0,0,0.5);cursor:default}
 .dsh-ig-lightbox-prompt-text{font-size:13px;line-height:1.4;color:rgba(255,255,255,0.92);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
-.dsh-ig-lightbox-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid rgba(255,255,255,0.1);padding-top:8px}
+.dsh-ig-lightbox-counter{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.15);color:#fff;font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums}
+.dsh-ig-lightbox-nav-btn{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .15s ease,transform .15s ease,opacity .15s ease;outline:none}
+.dsh-ig-lightbox-nav-btn:hover:not(:disabled){background:rgba(255,255,255,0.28);transform:translateY(-50%) scale(1.08)}
+.dsh-ig-lightbox-nav-btn:disabled{opacity:0.2;cursor:not-allowed;pointer-events:none}
+.dsh-ig-lightbox-nav-prev{left:24px}
+.dsh-ig-lightbox-nav-next{right:24px}
+.dsh-ig-lightbox-loading{display:flex;align-items:center;justify-content:center;min-width:180px;min-height:180px}
+.dsh-ig-lightbox-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:dsh-ig-spin .8s linear infinite}
+@keyframes dsh-ig-spin{to{transform:rotate(360deg)}}
 .dsh-ig-lightbox-btn{appearance:none;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.08);color:#fff;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s,color .15s}
 .dsh-ig-lightbox-btn:hover{background:rgba(255,255,255,0.22)}
 .dsh-ig-lightbox-btn-danger{border-color:rgba(239,68,68,0.4);color:#fca5a5}
 .dsh-ig-lightbox-btn-danger:hover{background:rgba(239,68,68,0.35)!important;color:#fff!important;border-color:rgba(239,68,68,0.7)!important}
 .dsh-ig-gallery-page-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:6px 14px;border-radius:8px;font-size:13px;z-index:99999;animation:dsh-ig-fade .15s}
 
+/* Card selection and checkbox */
+.dsh-ig-gallery-card.is-selected{box-shadow:0 0 0 2px var(--dsw-alias-brand-primary,#2563eb);border-color:transparent}
+.dsh-ig-card-checkbox{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.7);background:rgba(0,0,0,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;opacity:0;transition:opacity .15s ease,background-color .15s ease,border-color .15s ease;padding:0;outline:none}
+.dsh-ig-gallery-card:hover .dsh-ig-card-checkbox,.dsh-ig-gallery-card.is-manage-mode .dsh-ig-card-checkbox,.dsh-ig-card-checkbox.is-checked{opacity:1}
+.dsh-ig-card-checkbox.is-checked{background:var(--dsw-alias-brand-primary,#2563eb);border-color:var(--dsw-alias-brand-primary,#2563eb)}
+
+/* Studio button in toolbar */
+.dsh-ig-studio-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;box-sizing:border-box;border-radius:6px;border:1px solid var(--dsw-alias-border-subtle,rgba(0,0,0,0.12));background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-primary,inherit);font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
+.dsh-ig-studio-btn:hover{background:var(--dsw-alias-bg-layer-3,#f3f4f6);border-color:var(--dsw-alias-border-default,rgba(0,0,0,0.2))}
+.dsh-ig-studio-btn.is-active{background:var(--dsw-alias-brand-primary,#2563eb);border-color:var(--dsw-alias-brand-primary,#2563eb);color:#fff}
+.dsh-ig-studio-btn-danger{color:#ef4444;border-color:rgba(239,68,68,0.35);background:rgba(239,68,68,0.06)}
+.dsh-ig-studio-btn-danger:hover{background:rgba(239,68,68,0.14);border-color:rgba(239,68,68,0.6);color:#dc2626}
+.dsh-ig-studio-btn-danger.is-active{background:#dc2626;border-color:#dc2626;color:#fff}
+
+/* Floating Batch Action Bar */
+.dsh-ig-batch-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:rgba(20,24,32,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.18);border-radius:40px;padding:8px 16px;box-shadow:0 16px 40px rgba(0,0,0,0.5);z-index:99990;animation:dsh-ig-slide-up .2s cubic-bezier(0.16,1,0.3,1);color:#fff}
+@keyframes dsh-ig-slide-up{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
+.dsh-ig-batch-bar-left{display:flex;align-items:center;gap:10px}
+.dsh-ig-batch-bar-right{display:flex;align-items:center;gap:8px;border-left:1px solid rgba(255,255,255,0.15);padding-left:12px}
+.dsh-ig-batch-counter{font-size:13px;font-weight:600;color:rgba(255,255,255,0.95);margin-right:4px}
+.dsh-ig-batch-btn{appearance:none;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:#fff;border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s,color .15s}
+.dsh-ig-batch-btn:hover:not(:disabled){background:rgba(255,255,255,0.2)}
+.dsh-ig-batch-btn:disabled{opacity:0.4;cursor:not-allowed}
+.dsh-ig-batch-btn-danger{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.5);color:#fca5a5}
+.dsh-ig-batch-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.4)!important;border-color:rgba(239,68,68,0.8)!important;color:#fff!important}
+.dsh-ig-batch-btn-exit{border-color:transparent;background:transparent;color:rgba(255,255,255,0.7)}
+.dsh-ig-batch-btn-exit:hover{background:rgba(255,255,255,0.1);color:#fff}
+
+/* Batch Delete Confirmation Modal */
+.dsh-ig-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99995;display:flex;align-items:center;justify-content:center;padding:16px;animation:dsh-ig-fade .15s ease-out}
+.dsh-ig-modal-box{width:100%;max-width:440px;background:var(--dsw-alias-bg-layer-1,#1c1e24);border:1px solid var(--dsw-alias-border-subtle,rgba(255,255,255,0.12));border-radius:12px;padding:22px;box-sizing:border-box;box-shadow:0 20px 50px rgba(0,0,0,0.45);color:var(--dsw-alias-label-primary,#fff);animation:dsh-ig-scale-up .15s ease-out}
+@keyframes dsh-ig-scale-up{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}
+.dsh-ig-modal-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
+.dsh-ig-modal-icon-danger{width:36px;height:36px;border-radius:50%;background:rgba(239,68,68,0.12);color:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.dsh-ig-modal-title{font-size:16px;font-weight:600;line-height:1.4}
+.dsh-ig-modal-body{margin-bottom:20px;padding-left:48px}
+.dsh-ig-modal-desc{font-size:13.5px;color:var(--dsw-alias-label-secondary,rgba(255,255,255,0.7));margin:0 0 14px 0;line-height:1.5}
+.dsh-ig-modal-checkbox-label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dsw-alias-label-primary,inherit);cursor:pointer;user-select:none}
+.dsh-ig-modal-checkbox-label input{margin:0;cursor:pointer;width:15px;height:15px}
+.dsh-ig-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px}
+.dsh-ig-modal-btn{height:34px;padding:0 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s;outline:none}
+.dsh-ig-modal-btn-cancel{background:transparent;border:1px solid var(--dsw-alias-border-subtle,rgba(255,255,255,0.2));color:var(--dsw-alias-label-primary,inherit)}
+.dsh-ig-modal-btn-cancel:hover{background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,0.08))}
+.dsh-ig-modal-btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}
+.dsh-ig-modal-btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
+
 /* Hide floating chat composer when gallery page is active */
 [data-conversation-scroll]:has(.dsh-ig-gallery-page) [data-composer-seat]{display:none!important}
 `;
@@ -2034,6 +3149,7 @@ window.__ModuleLoader__.load({
 					provider: result.provider,
 					model: result.model,
 					output: result.output,
+					...result.savedTo ? { savedTo: result.savedTo } : {},
 					...result.seed !== void 0 ? { seed: result.seed } : {}
 				});
 			}, [result?.attachment.attachmentId]);