dsh-remote-bridge 2.2.4 → 2.3.1

package/lib/client.cjs

@@ -164,6 +164,22 @@ window.__ModuleLoader__.load({
 			async audit() {
 				return this.manageJson("/audit?limit=200");
 			}
+			/** 识图路径：当前值 + 出厂默认（只读）+ 兜底目录（只读）。 */
+			async imageSettings() {
+				return this.manageJson("/image");
+			}
+			/**
+			* 改「识图路径」的当前值。
+			*
+			* 改动立即生效：宿主的交接写盘与只读图片路由都通过 getter 现读这份设置，
+			* 不需要重启 dsh，也不需要重装插件。
+			*/
+			async saveImageSubdir(subdir) {
+				return this.manageJson("/image", {
+					method: "PUT",
+					body: JSON.stringify({ subdir })
+				});
+			}
 			async json(path, init = {}) {
 				const response = await this.fetch(path, init);
 				await ensureOk(response);
@@ -205,6 +221,299 @@ window.__ModuleLoader__.load({
 			throw new WorkspaceApiError(response.status, code, message);
 		}
 		//#endregion
+		//#region src/client/handoff.tsx
+		/**
+		* 浏览器半边：把**图片交接消息**里的那个地址渲染成图片本身。
+		*
+		* 这半边是从 `dsh-image-paths` 0.3.1 并过来的，接的是同一个契约：纯文本模型收到图片时，
+		* remote-bridge 会在用户消息里追加两行 ——
+		*
+		*   🖼️ 图片 1「shot.png」（当前模型看不到图，已存到 .dsh-images/<sha>.png；要看图，请用识图工具打开下面那行的路径）
+		*   [Image: source: /absolute/path/.dsh-images/<sha>.png]
+		*
+		* 本模块只读第一行里那个地址，把它变成一张真的图。第二行是给模型读的机器契约，同一张图
+		* 不再重复出第二张；而且只扫**用户消息**，上下文注入、助手正文、工具输出里引用的路径
+		* 一律不碰 —— 否则对话里到处都是 `.dsh-images/…` 的例子，每个都会被渲染成图。
+		*
+		* 取图走宿主那条只读路由 `/plugin/dsh-remote-bridge/raw?sessionId=…&name=…`：
+		* 请求里**只有会话与裸文件名**，目录由宿主按会话工作目录推出，客户端连「读哪个目录」
+		* 都递不进去。这条路是给 `<img>` 用的 —— 浏览器不会给图片请求加 Authorization 头，
+		* 所以它独立于版本化 REST，按回环 + 同源 + 文件名白名单 + 字节自证守门。
+		*
+		* 座位选的是 Turn 尾部（`conversation.chat.turnTail`）：Chat 节点座位会把这个 kind 收进
+		* 「过程分组」，standard 模式下折叠起来 —— DOM 里有、肉眼看不着。Turn 尾在独立成行的
+		* 白名单内，任何工作详情模式下都看得见。
+		*/
+		/** 本插件在 Chat store 里占的节点 kind。 */
+		const KIND = "dsh-remote-bridge-handoff-gallery";
+		/** 宿主的只读图片路由。 */
+		const ROUTE = "/plugin/dsh-remote-bridge/raw";
+		/** 每轮最多显示几张。 */
+		const MAX_IMAGES = 8;
+		/** 长过这个的路径不值得去解析。 */
+		const MAX_PATH_CHARS = 4096;
+		/** 图片扩展名：与宿主交接写盘的白名单一致。 */
+		const IMAGE_EXTENSION = /\.(?:png|jpe?g|webp|gif|heic|heif|bmp|avif)$/i;
+		/**
+		* 交接行的行首标记：中英两种文案都以它开头。
+		*
+		* 判据选「行首标记」而不是「句子里有 已存到」——后者会把用户自己写的句子也算进来，
+		* 而 dsh-companion 摘除这一行用的也是同一个标记，两边口径一致。
+		*/
+		const HANDOFF_LINE = /^🖼️\s*(?:图片|Image)\s+\d+/i;
+		/**
+		* 从交接行里抠出图片地址。
+		*
+		* 允许「已存到 / 已保存到 / saved to」后面隔一段散文（历史文案里有「工作目录」这种词），
+		* 所以是「点心号 + 非贪婪」而不是紧邻匹配。取出的是消息里**原样**的那条路径，
+		* 相对（`.dsh-images/x.png`）与绝对（兜底目录那版）都认。
+		*/
+		const HANDOFF_PATH = /(?:已(?:保存|存)到|saved to)[^；;\n]*?([A-Za-z0-9_./@~+-][^\s`"'()[\]{}<>|,;:?，。；：、！？]*?\.(?:png|jpe?g|webp|gif|heic|heif|bmp|avif))/i;
+		/** 路径里的文件名（路由只收裸文件名）。 */
+		function basenameOf(path) {
+			const cut = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+			return cut === -1 ? path : path.slice(cut + 1);
+		}
+		/**
+		* 读出一段文本里的交接图片。
+		* @param text - 消息的文本内容（已按块拼接）。
+		* @returns 单个 `{ path, label }`，不是交接消息就是 null。
+		*/
+		function handoffMention(text) {
+			if (typeof text !== "string" || text === "") return null;
+			for (const line of text.split("\n")) {
+				if (!HANDOFF_LINE.test(line.trim())) continue;
+				const match = HANDOFF_PATH.exec(line);
+				if (match === null) continue;
+				const path = match[1] ?? "";
+				if (path.length === 0 || path.length > MAX_PATH_CHARS) continue;
+				if (!IMAGE_EXTENSION.test(path)) continue;
+				return {
+					path,
+					label: basenameOf(path)
+				};
+			}
+			return null;
+		}
+		/** 把一条消息的内容块拼成文本。 */
+		function contentText(content) {
+			if (!Array.isArray(content)) return "";
+			const parts = [];
+			for (const block of content) {
+				if (block === null || typeof block !== "object") continue;
+				const candidate = block;
+				if (candidate.type === "text" && typeof candidate.text === "string") parts.push(candidate.text);
+			}
+			return parts.join("\n");
+		}
+		/** 一条消息交接出去的那张图，没有就是空数组。 */
+		function itemsOfMessage(payload) {
+			if (payload === null || typeof payload !== "object") return [];
+			const item = handoffMention(contentText(payload.content));
+			return item === null ? [] : [item];
+		}
+		const WRAP_STYLE = {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "flex-start",
+			gap: 8,
+			margin: "8px 0 4px"
+		};
+		const ITEM_STYLE = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2,
+			maxWidth: "100%"
+		};
+		const THUMB_STYLE = {
+			display: "block",
+			maxHeight: 180,
+			maxWidth: "100%",
+			borderRadius: 8,
+			border: "1px solid rgba(127,127,127,0.28)",
+			background: "rgba(127,127,127,0.06)",
+			cursor: "zoom-in"
+		};
+		const CAPTION_STYLE = {
+			display: "block",
+			maxWidth: 180,
+			fontFamily: "inherit",
+			fontSize: 11,
+			lineHeight: 1.4,
+			color: "rgba(127,127,127,0.95)",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
+		const OVERLAY_STYLE = {
+			position: "fixed",
+			inset: 0,
+			zIndex: 1e3,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: "rgba(0,0,0,0.72)",
+			cursor: "zoom-out"
+		};
+		const FULL_STYLE = {
+			maxWidth: "92vw",
+			maxHeight: "92vh",
+			borderRadius: 6,
+			boxShadow: "0 8px 32px rgba(0,0,0,0.5)"
+		};
+		/** 某条地址在这条路由上的 URL。 */
+		function imageUrl(path, sessionId) {
+			return `${ROUTE}?sessionId=${encodeURIComponent(sessionId)}&name=${encodeURIComponent(basenameOf(path))}`;
+		}
+		/**
+		* 一张图。取不到的（文件已删、会话读不出、格式不符）自己消失，而不是在轮末留一个碎图标。
+		*/
+		function HandoffImage(props) {
+			const [failed, setFailed] = (0, react.useState)(false);
+			const [open, setOpen] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				if (!open) return void 0;
+				const onKey = (event) => {
+					if (event.key === "Escape") setOpen(false);
+				};
+				document.addEventListener("keydown", onKey);
+				return () => {
+					document.removeEventListener("keydown", onKey);
+				};
+			}, [open]);
+			if (failed) return null;
+			const url = imageUrl(props.item.path, props.sessionId);
+			const thumb = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: url,
+				alt: props.item.label,
+				title: props.item.path,
+				loading: "lazy",
+				decoding: "async",
+				referrerPolicy: "no-referrer",
+				style: THUMB_STYLE,
+				onError: () => setFailed(true),
+				onClick: () => setOpen(true)
+			});
+			const framed = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "daw-handoff-item",
+				style: ITEM_STYLE,
+				children: [thumb, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "daw-handoff-caption",
+					title: props.item.path,
+					style: CAPTION_STYLE,
+					children: props.item.path
+				})]
+			});
+			if (!open) return framed;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [framed, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: OVERLAY_STYLE,
+				role: "dialog",
+				"aria-label": props.item.path,
+				onClick: () => setOpen(false),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: url,
+					alt: props.item.label,
+					decoding: "async",
+					referrerPolicy: "no-referrer",
+					style: FULL_STYLE
+				})
+			})] });
+		}
+		/** 把本轮各节点里交接出去的图收成一串（按出现顺序去重）。 */
+		function collectTurnItems(nodes, locations, turn) {
+			if (nodes === void 0 || locations === void 0 || turn === void 0 || turn === null) return [];
+			let keys;
+			try {
+				keys = locations.getTurn(turn.turn);
+			} catch {
+				return [];
+			}
+			if (!Array.isArray(keys)) return [];
+			const seen = /* @__PURE__ */ new Set();
+			const items = [];
+			for (const key of keys) {
+				const node = nodes.get(key);
+				if (node === void 0 || node === null || node.kind !== KIND) continue;
+				const list = node.data?.items;
+				if (!Array.isArray(list)) continue;
+				for (const item of list) {
+					if (item === null || typeof item !== "object" || typeof item.path !== "string") continue;
+					if (seen.has(item.path)) continue;
+					seen.add(item.path);
+					items.push({
+						path: item.path,
+						label: typeof item.label === "string" ? item.label : basenameOf(item.path)
+					});
+					if (items.length >= MAX_IMAGES) return items;
+				}
+			}
+			return items;
+		}
+		/**
+		* Turn 尾部的图集：本轮每条交接消息各自那张图。
+		*
+		* 没有会话 id 就什么都不显示 —— 路由需要它来定位目录，猜一个只会 404。
+		*/
+		function HandoffTurnTail(props) {
+			const items = collectTurnItems(props.useChat((snapshot) => snapshot.nodes), props.useChat((snapshot) => snapshot.locations), props.turn);
+			const sessionId = props.sessionId;
+			if (items.length === 0) return null;
+			if (typeof sessionId !== "string" || sessionId === "") return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "daw-handoff-gallery",
+				style: WRAP_STYLE,
+				children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandoffImage, {
+					item,
+					sessionId
+				}, item.path))
+			});
+		}
+		/**
+		* 一条「交接消息 → 一个图集节点」的 Definition。
+		*
+		* 只匹配 `user/message`：交接说明属于读者自己发的那条消息。助手正文、上下文注入、
+		* 工具输出里到处都是引用 `.dsh-images/…` 的文本，读它们会把别人的话切成碎图。
+		*
+		* 节点自身**不注册渲染器**（Turn 尾负责显示），所以过程分组里不会多出一行、
+		* verbose 模式下也不会重复一次。
+		*/
+		const handoffDefinition = {
+			kind: KIND,
+			target: "chat",
+			match(event) {
+				if (event === null || typeof event !== "object" || event.surfaceOp !== "append") return null;
+				if (event.type !== "user/message") return null;
+				return {
+					id: `m:${String(event.seq)}`,
+					role: "start"
+				};
+			},
+			start(_context, match) {
+				return {
+					items: itemsOfMessage(match.event.data),
+					anchorSeq: match.event.seq
+				};
+			},
+			update(context) {
+				return context.state;
+			},
+			buildViewNode(context) {
+				const state = context.state;
+				if (state === void 0 || !Array.isArray(state.items) || state.items.length === 0) return null;
+				const start = context.start;
+				return {
+					key: context.key,
+					kind: KIND,
+					id: context.id,
+					target: "chat",
+					anchorSeq: state.anchorSeq,
+					location: start !== void 0 && start !== null ? start.location : { kind: "unresolved" },
+					visibility: "visible",
+					data: { items: state.items }
+				};
+			}
+		};
+		//#endregion
 		//#region node_modules/.pnpm/lucide-react@0.468.0_react@18.3.1/node_modules/lucide-react/dist/cjs/lucide-react.js
 		/**
 		* @license lucide-react v0.468.0 - ISC
@@ -15024,7 +15333,7 @@ window.__ModuleLoader__.load({
 					key: "1wpmix"
 				}]
 			]);
-			createLucideIcon("Image", [
+			const Image = createLucideIcon("Image", [
 				["rect", {
 					width: "18",
 					height: "18",
@@ -29728,6 +30037,7 @@ window.__ModuleLoader__.load({
 			exports.Download = Download;
 			exports.File = File;
 			exports.HardDrive = HardDrive;
+			exports.Image = Image;
 			exports.Smartphone = Smartphone;
 			exports.Trash2 = Trash2;
 			exports.Upload = Upload;
@@ -29794,11 +30104,45 @@ window.__ModuleLoader__.load({
 				devicesTab: "设备",
 				trashTab: "回收站",
 				auditTab: "审计",
+				imageTab: "识图",
+				rootsTabDesc: "授权手机访问这台机器上的哪些目录。新增、命名、移除都在这里。",
+				remoteTabDesc: "绑定 IP 与端口、开关远程访问、生成配对码与配置文本。",
+				devicesTabDesc: "查看已配对的手机，修改它们的权限范围与可访问目录，或吊销设备。",
+				imageTabDesc: "设置图片交给识图工具的落盘目录名。",
+				trashTabDesc: "经手机端删除的文件留在这里，可恢复或彻底清理。",
+				auditTabDesc: "最近的操作记录：谁、在什么时间、动了哪个路径。",
+				appDownloadTabDesc: "手机客户端的下载二维码与地址。",
+				imageTitle: "识图路径",
+				imageHint: "纯文本模型收到图片时，图片会落在这个目录里，消息里只留路径给识图工具读。这里改的就是那个目录。",
+				imageSubdir: "识图路径（目录名）",
+				imageSubdirHint: "相对于每个会话自己的工作目录。只填单段目录名：字母、数字、点、下划线、连字符（1-64 个字符），不能用 “.” 或 “..”。",
+				imageDefault: "当前默认（不能改）",
+				imageDefaultHint: "出厂默认值，只读展示：历史交接消息与识图工具都按它写过路径，所以它不跟着上面的设置走。",
+				imageFallback: "兜底目录（只读）",
+				imageFallbackHint: "解析不出会话工作目录时（冷会话，或会话目录不在任何授权根下）才会用到的落点。",
+				imageExample: "实际落点：<会话工作目录>/{subdir}/<内容哈希>.<扩展名>",
+				imageSaved: "识图路径已保存",
 				authorizedRoots: "授权根目录",
 				absolutePath: "绝对目录路径",
 				displayLabel: "显示名称",
 				addRoot: "添加根目录",
 				removeRoot: "移除根目录",
+				builtinRootBadge: "默认",
+				builtinRootHint: "默认目录 · 不可删除",
+				builtinRootNotice: "新加的根目录默认不发给已配对的手机。需要的话，到「设备」里给对应手机勾上这个目录的访问权。",
+				errorRootBuiltin: "这是 DSH 当前的工作目录，不能删除。你仍然可以在上面添加别的根目录。",
+				scopeChatRead: "读聊天",
+				scopeChatWrite: "发聊天",
+				scopeFilesRead: "读文件",
+				scopeFilesWrite: "写文件",
+				scopeFilesDelete: "删文件",
+				scopeSettingsRead: "读设置",
+				scopeSettingsWrite: "改设置",
+				noScopes: "没有任何权限",
+				scopeGrantNotice: "勾选要授予的权限，然后点「启用并创建配对」。APP 输入配对码后，这些权限会跟着设备一起生效。",
+				scopeGrantNoticeEmpty: "还没选任何权限。至少勾一项，否则生成的访问码不会带上任何权限。",
+				scopeGrantNoticeExisting: "改这里只影响**新生成**的配对码。已在用的设备要改权限，请到「设备」里点对应手机的「权限」。",
+				configTextScopeNote: "配置文本固定使用最小权限（不含删除文件、修改设置），不跟随上面勾选 —— 它是发给别人扫的。要完整权限请改用配对码。",
 				remoteAccess: "远程访问",
 				bindIp: "绑定 IP",
 				bindPort: "端口",
@@ -29921,11 +30265,45 @@ window.__ModuleLoader__.load({
 				devicesTab: "Devices",
 				trashTab: "Trash",
 				auditTab: "Audit",
+				imageTab: "Image reading",
+				rootsTabDesc: "Which directories on this machine phones may reach. Add, rename and remove them here.",
+				remoteTabDesc: "Bind address and port, switch remote access on or off, mint pairing codes and config texts.",
+				devicesTabDesc: "Paired phones, their permission scopes and reachable roots — or revoke them outright.",
+				imageTabDesc: "Choose the directory name where images land for the image-reading tool.",
+				trashTabDesc: "Files deleted from a phone land here. Restore them, or purge them for good.",
+				auditTabDesc: "Recent activity: who, when, and which path was touched.",
+				appDownloadTabDesc: "QR codes and addresses for the phone app download.",
+				imageTitle: "Image-reading path",
+				imageHint: "When a text-only model receives a picture, the file lands in this directory and the message keeps only its path for the image-reading tool. This setting is that directory.",
+				imageSubdir: "Image path (directory name)",
+				imageSubdirHint: "Relative to each session’s own working directory. A single directory name only: letters, digits, dots, underscores, hyphens (1-64 characters); \".\" and \"..\" are refused.",
+				imageDefault: "Current default (read-only)",
+				imageDefaultHint: "The factory default, shown read-only: past handoff messages and image-reading tools wrote their paths against it, so it does not follow the setting above.",
+				imageFallback: "Fallback directory (read-only)",
+				imageFallbackHint: "Used only when the session working directory cannot be resolved (a cold session, or a directory outside every authorized root).",
+				imageExample: "Where files actually land: <session working directory>/{subdir}/<content hash>.<extension>",
+				imageSaved: "Image path saved",
 				authorizedRoots: "Authorized roots",
 				absolutePath: "Absolute directory path",
 				displayLabel: "Display label",
 				addRoot: "Add root",
 				removeRoot: "Remove root",
+				builtinRootBadge: "Default",
+				builtinRootHint: "Default directory · cannot be removed",
+				builtinRootNotice: "New roots are not granted to already paired phones by default. To share one, open 「设备」 and tick that directory for the phone in question.",
+				errorRootBuiltin: "This is the current DSH working directory, so it cannot be removed. You can still add other roots above.",
+				scopeChatRead: "Read chat",
+				scopeChatWrite: "Send chat",
+				scopeFilesRead: "Read files",
+				scopeFilesWrite: "Write files",
+				scopeFilesDelete: "Delete files",
+				scopeSettingsRead: "Read settings",
+				scopeSettingsWrite: "Change settings",
+				noScopes: "No permissions",
+				scopeGrantNotice: "Tick the permissions to grant, then press \"Enable and pair\". Once the app enters the pairing code, these scopes take effect with the device.",
+				scopeGrantNoticeEmpty: "No permission selected yet. Tick at least one, otherwise the pairing code will carry no scopes at all.",
+				scopeGrantNoticeExisting: "Changing this only affects new pairing codes. To change an already paired device, open Devices and use its Permissions button.",
+				configTextScopeNote: "Config texts always carry a minimal set of scopes (no file deletion, no settings write) and ignore the ticks above — they are meant to be shared. Use a pairing code when you want the full set.",
 				remoteAccess: "Remote access",
 				bindIp: "Bind IP",
 				bindPort: "Port",
@@ -30008,8 +30386,48 @@ window.__ModuleLoader__.load({
 			listeners.add(listener);
 			return () => listeners.delete(listener);
 		}
+		/**
+		* 取一条文案并填占位符。
+		*
+		* **缺键不抛异常**。原来这里是 `dictionaries[locale][key].replace(...)`：任何一个不存在的键
+		* 都会抛 TypeError，而它在 React 渲染路径上 —— 结果不是那一行显示不出原文，而是**整个设置
+		* 面板白屏**。缺一个描述行就把七张卡里的全部设置都搭进去，代价和收益完全不成比例。
+		*
+		* 降级成「回退到另一种语言 → 再回退成键名本身」：最坏情况是某一行露出 `rootsTabDesc`
+		* 这样的字面量，一眼能看出该补哪条，而不是面对一个空白面板。
+		*/
 		function translate(locale, key, values = {}) {
-			return dictionaries[locale][key].replace(/\{(\w+)\}/g, (_, name) => String(values[name] ?? `{${name}}`));
+			const fill = (template) => template?.replace(/\{(\w+)\}/g, (_, name) => String(values[name] ?? `{${name}}`));
+			const primary = fill(dictionaries[locale][key]);
+			if (primary !== void 0) return primary;
+			const text = fill(dictionaries["zh-CN"][key]) ?? key;
+			console.warn(`[dsh-remote-bridge] 缺少文案键 ${String(key)}（locale=${locale}），已降级显示键名`);
+			return text;
+		}
+		/**
+		* 权限码 → 人话。
+		*
+		* 用户要求「中文状态下显示中文，英文显示英文」。文案刻意**用人话而不是协议码**：
+		* `读文件` / `写文件` / `删文件` 自己就看得懂，而 `files.read` 要对照文档才知道指什么 ——
+		* 出问题时用户把屏幕上的字念出来，比报一串码有用得多。
+		*
+		* 键名 `scope${码}`（`chat.read` → `scopeChatRead`）：与既有 `rootsTab` 一致的拼法。
+		* 用**显式查表**而不是模板拼 —— 拼错会查不到键，而键查不到时 `translate` 会静默降级成
+		* 露出键名（见上面），界面上会突然冒出一行 `scopeChatread`。白屏那次就是这么来的。
+		*/
+		const SCOPE_LABEL_KEYS = {
+			"chat.read": "scopeChatRead",
+			"chat.write": "scopeChatWrite",
+			"files.read": "scopeFilesRead",
+			"files.write": "scopeFilesWrite",
+			"files.delete": "scopeFilesDelete",
+			"settings.read": "scopeSettingsRead",
+			"settings.write": "scopeSettingsWrite"
+		};
+		function scopeLabel(locale, scope) {
+			const key = SCOPE_LABEL_KEYS[scope];
+			if (key === void 0) return scope;
+			return translate(locale, key);
 		}
 		function useWorkspaceI18n() {
 			const locale = (0, react.useSyncExternalStore)(subscribeWorkspaceLocale, getWorkspaceLocale, () => "zh-CN");
@@ -30042,15 +30460,30 @@ window.__ModuleLoader__.load({
 		*/
 		const WORKSPACE_CSS = `
 .daw-version{font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--daw-muted);white-space:nowrap}
-.daw-root,.daw-settings-section{--daw-bg:#f7f8fa;--daw-panel:#fff;--daw-ink:#18202a;--daw-muted:#687381;--daw-line:#dfe4e8;--daw-accent:#087f8c;--daw-accent-soft:#e5f5f6;--daw-good:#2f7d4a;--daw-danger:#b33a3a;color:var(--daw-ink);background:var(--daw-bg);font:13px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0;min-width:0}
-.daw-root *{box-sizing:border-box;letter-spacing:0}.daw-workspace{display:grid;grid-template-rows:44px minmax(0,1fr);height:min(760px,calc(100vh - 120px));min-height:420px;border:1px solid var(--daw-line);background:var(--daw-panel)}
-.daw-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--daw-line);background:#fff;min-width:0}.daw-toolbar-spacer{flex:1}.daw-select,.daw-input{height:30px;border:1px solid #cbd2d8;border-radius:4px;background:#fff;color:var(--daw-ink);padding:0 9px;min-width:0}.daw-select{max-width:220px}
-.daw-icon,.daw-command{height:30px;border:1px solid transparent;border-radius:4px;background:transparent;color:#33404d;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap}.daw-icon{width:30px;padding:0}.daw-command{padding:0 10px;border-color:#cbd2d8;background:#fff}.daw-icon:hover,.daw-command:hover{background:#edf1f3}.daw-command.primary{color:#fff;background:var(--daw-accent);border-color:var(--daw-accent)}.daw-command.danger{color:var(--daw-danger)}.daw-icon:disabled,.daw-command:disabled{opacity:.45;cursor:not-allowed}
-.daw-body{display:grid;grid-template-columns:minmax(210px,28%) minmax(0,1fr);min-height:0}.daw-tree{border-right:1px solid var(--daw-line);overflow:auto;padding:8px;background:#fafbfc}.daw-tree-row{display:grid;grid-template-columns:22px 18px minmax(0,1fr);align-items:center;width:100%;height:30px;border:0;border-radius:3px;background:transparent;color:var(--daw-ink);text-align:left;padding:0 5px;cursor:pointer}.daw-tree-row:hover,.daw-tree-row.selected{background:var(--daw-accent-soft);color:#075c65}.daw-tree-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daw-tree-children{padding-left:14px}
-.daw-editor-pane{display:grid;grid-template-rows:38px minmax(0,1fr) 28px;min-width:0;min-height:0}.daw-filebar{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--daw-line);padding:4px 8px;min-width:0}.daw-filepath{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.daw-editor{min-height:0;overflow:hidden}.daw-editor .cm-editor{height:100%;font-size:13px}.daw-editor .cm-scroller{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.daw-empty{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;color:var(--daw-muted);text-align:center}.daw-status{border-top:1px solid var(--daw-line);display:flex;align-items:center;padding:0 9px;color:var(--daw-muted);font-size:12px;min-width:0}.daw-status.error{color:var(--daw-danger)}.daw-binary{padding:24px;display:grid;place-items:center;height:100%;color:var(--daw-muted)}
-.daw-overlay{position:fixed;inset:0;z-index:1000;background:rgba(18,25,31,.42);display:grid;place-items:center;padding:18px;pointer-events:auto}.daw-dialog{width:min(920px,100%);height:min(720px,calc(100vh - 36px));display:grid;grid-template-rows:48px minmax(0,1fr);background:#fff;border:1px solid #cbd2d8;border-radius:6px;box-shadow:0 20px 55px rgba(0,0,0,.22);overflow:hidden}.daw-workspace-dialog{width:min(1400px,calc(100vw - 32px));height:min(900px,calc(100vh - 32px));display:grid;grid-template-rows:48px minmax(0,1fr);background:#fff;border:1px solid #cbd2d8;border-radius:6px;box-shadow:0 20px 55px rgba(0,0,0,.22);overflow:hidden}.daw-workspace-dialog-body,.daw-workspace-dialog-body>.daw-root{height:100%;min-height:0}.daw-workspace-dialog .daw-workspace{height:100%;min-height:0;border:0}.daw-dialog-head{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--daw-line);font-weight:650}.daw-dialog-head h2{font-size:15px;margin:0}.daw-dialog-body{display:grid;grid-template-columns:170px minmax(0,1fr);min-height:0}.daw-tabs{padding:8px;border-right:1px solid var(--daw-line);background:#f7f8fa}.daw-tab{display:flex;align-items:center;gap:8px;width:100%;height:36px;border:0;border-radius:4px;padding:0 9px;background:transparent;color:#354250;cursor:pointer}.daw-tab.active{background:#fff;color:var(--daw-accent);box-shadow:inset 3px 0 0 var(--daw-accent)}.daw-admin{overflow:auto;padding:18px}.daw-panel-body{display:grid;min-width:0;min-height:0}.daw-panel-pane{display:grid;min-width:0;min-height:0}.daw-panel-pane[hidden]{display:none}.daw-panel-pane>.daw-root,.daw-panel-pane>.daw-admin{min-width:0;min-height:0}.daw-panel-pane>.daw-root>.daw-workspace{height:100%;min-height:0;border:0}.daw-panel-pane>.daw-admin{height:100%}.daw-admin h3{font-size:14px;margin:0 0 12px}
-.daw-settings-launch{display:grid;gap:10px;justify-items:start}.daw-settings-section{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0;min-height:0}.daw-settings-section>.daw-list-meta{margin:0}.daw-settings-section .daw-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:0;border-right:0;border-bottom:1px solid var(--daw-line);background:transparent}.daw-settings-section .daw-tab{width:auto;height:32px;border-radius:4px 4px 0 0;padding:0 12px}.daw-settings-section .daw-tab.active{background:transparent;box-shadow:inset 0 -2px 0 var(--daw-accent)}.daw-settings-section .daw-admin{padding:14px 2px}.daw-qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}.daw-qr-card{margin:0;display:grid;justify-items:center;gap:8px;padding:16px;border:1px solid var(--daw-line);border-radius:6px;background:var(--daw-panel)}.daw-qr-image{width:180px;height:180px;background:#fff;border-radius:4px}.daw-qr-site{font-weight:600}.daw-qr-url{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--daw-accent);text-decoration:none;overflow-wrap:anywhere;text-align:center}.daw-qr-url:hover{text-decoration:underline}.daw-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.45fr) auto;gap:8px;margin-bottom:14px}.daw-listener-form{display:grid;grid-template-columns:minmax(180px,1fr) 130px auto;gap:8px;align-items:end}.daw-field{display:grid;gap:5px;color:#3d4955;font-size:12px}.daw-listener-status{display:flex;flex-wrap:wrap;gap:5px 18px;padding:9px 0;color:var(--daw-muted);font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.daw-listener-hint{margin:0 0 8px}.daw-list{border-top:1px solid var(--daw-line)}.daw-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px;border-bottom:1px solid var(--daw-line);padding:7px 2px}.daw-list-title{font-weight:600;overflow-wrap:anywhere}.daw-list-meta{font-size:12px;color:var(--daw-muted);overflow-wrap:anywhere}.daw-scope-grid{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 0}.daw-check{display:inline-flex;align-items:center;gap:5px;color:#3d4955}.daw-code{font:600 22px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:2px!important;padding:14px;border:1px solid #9bc9cd;background:var(--daw-accent-soft);border-radius:4px;text-align:center;margin:12px 0}.daw-warning{border-left:3px solid #d09a2d;background:#fff8e8;padding:9px 11px;color:#654d1b;margin-bottom:14px}.daw-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 8px;background:#edf1f3;color:#4f5b66;font-size:12px}.daw-pill.on{background:#e6f4ea;color:var(--daw-good)}.daw-token{width:min(520px,100%);margin:80px auto;padding:18px;border:1px solid var(--daw-line);border-radius:6px;background:#fff}.daw-token h1{font-size:18px;margin:0}.daw-token-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.daw-token-head h1{flex:1;min-width:0}.daw-inline-command{margin-left:8px}.daw-modal-small{width:min(430px,calc(100vw - 32px));background:#fff;border-radius:6px;border:1px solid var(--daw-line);padding:16px}.daw-modal-small h3{font-size:15px;margin:0 0 12px}.daw-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
-@media(max-width:720px){.daw-workspace{height:calc(100vh - 72px);min-height:520px}.daw-workspace-overlay{padding:6px}.daw-workspace-dialog{width:calc(100vw - 12px);height:calc(100vh - 12px)}.daw-workspace-dialog .daw-workspace{height:100%;min-height:0}.daw-body{grid-template-columns:1fr;grid-template-rows:minmax(170px,35%) minmax(0,1fr)}.daw-tree{border-right:0;border-bottom:1px solid var(--daw-line)}.daw-dialog-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.daw-tabs{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--daw-line)}.daw-tab{min-width:max-content}.daw-form-row,.daw-listener-form{grid-template-columns:1fr}.daw-toolbar .hide-mobile{display:none}.daw-select{max-width:150px}.daw-admin{padding:12px}.daw-qr-grid{grid-template-columns:1fr}.daw-qr-image{width:150px;height:150px}.daw-inline-command{margin:8px 0 0}}
+.daw-root,.daw-settings-section{--daw-bg:var(--dsw-alias-bg-base,var(--dsw-alias-bg-layer-2,#f7f8fa));--daw-panel:var(--dsw-alias-bg-layer-3,var(--dsw-alias-bg-layer-2,#fff));--daw-ink:var(--dsw-alias-label-primary,#18202a);--daw-muted:var(--dsw-alias-label-tertiary,#687381);--daw-line:var(--dsw-alias-border-l2,#dfe4e8);--daw-accent:var(--dsw-alias-brand-primary,#087f8c);--daw-accent-soft:var(--dsw-alias-bg-module-platform,#e5f5f6);--daw-good:var(--dsw-alias-state-success-primary,#2f7d4a);--daw-danger:var(--dsw-alias-state-error-primary,#b33a3a);color:var(--daw-ink);background:transparent;font:13px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0;min-width:0}
+.daw-root *{box-sizing:border-box;letter-spacing:0}
+.daw-input:focus-visible{border-color:var(--dsw-alias-brand-primary,var(--daw-accent));outline:none}.daw-icon{width:30px;padding:0}
+.daw-icon:hover{background:var(--dsw-alias-bg-module-platform,var(--daw-accent-soft))}
+.daw-icon.danger{color:var(--daw-danger);border-color:transparent;background:transparent}
+.daw-icon:disabled{opacity:.45;cursor:not-allowed}
+.daw-command{padding:0 10px;border-color:#cbd2d8;background:#fff}.daw-command.primary{color:var(--dsw-alias-label-primary,var(--daw-ink));background:var(--dsw-alias-bg-module-platform,var(--daw-panel));border-color:var(--dsw-alias-border-l2,var(--daw-line));font-weight:500}
+.daw-command.primary:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2,var(--daw-panel));border-color:var(--dsw-alias-label-dimmed,var(--daw-line))}.daw-command.danger{color:var(--daw-danger)}.daw-filebar{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--daw-line);padding:4px 8px;min-width:0}.daw-admin{overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}.daw-admin h3{font-size:14px;margin:0 0 12px}
+.daw-cards{display:grid;gap:10px}
+.daw-card{border:1px solid var(--dsw-alias-border-l2,var(--daw-line));background:var(--dsw-alias-bg-layer-3,var(--daw-panel));border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
+.daw-card:hover{border-color:var(--dsw-alias-label-dimmed,var(--daw-line))}
+.daw-card-open{background:var(--dsw-alias-bg-layer-2,var(--daw-panel));border-color:var(--dsw-alias-label-dimmed,var(--daw-line))}
+.daw-card-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
+.daw-card-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,var(--daw-accent));outline-offset:-2px}
+.daw-card-icon{color:var(--dsw-alias-label-tertiary,var(--daw-muted));flex:none;display:flex;align-items:center}
+.daw-card-headtext{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
+.daw-card-name{color:var(--dsw-alias-label-primary,var(--daw-ink));font-size:15px;font-weight:600;line-height:1.4}
+.daw-card-desc{color:var(--dsw-alias-label-tertiary,var(--daw-muted));font-size:13px;line-height:1.5}
+.daw-card-chevron{color:var(--dsw-alias-label-tertiary,var(--daw-muted));flex:none;transition:transform .16s;font-size:12px;line-height:1}
+.daw-card-chevron-open{transform:rotate(180deg)}
+.daw-card-body{border-top:1px solid var(--dsw-alias-border-l2,var(--daw-line));margin:0 16px;padding-bottom:8px}.daw-settings-section{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0;min-height:0}.daw-settings-section>.daw-list-meta{margin:0}.daw-settings-section .daw-admin{padding:14px 2px}.daw-qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}.daw-qr-card{margin:0;display:grid;justify-items:center;gap:8px;padding:16px;border:1px solid var(--daw-line);border-radius:6px;background:var(--daw-panel)}.daw-qr-image{width:180px;height:180px;background:var(--dsw-alias-bg-layer-3,#fff);border-radius:4px}.daw-qr-site{font-weight:600}.daw-qr-url{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--daw-accent);text-decoration:none;overflow-wrap:anywhere;text-align:center}.daw-qr-url:hover{text-decoration:underline}.daw-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.45fr) auto;gap:8px;margin-bottom:14px}.daw-listener-form{display:grid;grid-template-columns:minmax(180px,1fr) 130px auto;gap:8px;align-items:end}.daw-field{display:grid;gap:5px;color:var(--dsw-alias-label-secondary,var(--daw-muted));font-size:12px}.daw-listener-status{display:flex;flex-wrap:wrap;gap:5px 18px;padding:9px 0;color:var(--daw-muted);font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.daw-listener-hint{margin:0 0 8px}.daw-list{border-top:1px solid var(--daw-line)}.daw-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px;border-bottom:1px solid var(--daw-line);padding:7px 2px}.daw-list-title{font-weight:600;overflow-wrap:anywhere}
+.daw-list-title .daw-pill{margin-left:8px;vertical-align:middle}
+.daw-builtin-hint{text-align:right;align-self:center}
+.daw-builtin-notice{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-module-platform,var(--daw-accent-soft))}.daw-list-meta{font-size:12px;color:var(--daw-muted);overflow-wrap:anywhere}.daw-scope-grid{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 0}.daw-check{display:inline-flex;align-items:center;gap:5px;color:var(--dsw-alias-label-secondary,var(--daw-muted))}.daw-code{font:600 22px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:2px!important;padding:14px;border:1px solid var(--dsw-alias-border-l2,var(--daw-line));background:var(--dsw-alias-bg-module-platform,var(--daw-accent-soft));border-radius:8px;text-align:center;margin:12px 0}.daw-warning{flex:none;border:1px solid var(--dsw-alias-border-l2,var(--daw-line));border-radius:8px;background:var(--dsw-alias-bg-module-platform,var(--daw-accent-soft));padding:9px 11px;color:var(--daw-muted);margin-bottom:0}.daw-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:1px 8px;background:var(--dsw-alias-bg-module-platform,var(--daw-accent-soft));color:var(--dsw-alias-label-secondary,var(--daw-muted));font-size:11px;font-weight:500;line-height:17px}.daw-pill.on{background:var(--dsw-alias-bg-module-platform,var(--daw-accent-soft));color:var(--dsw-alias-state-success-primary,var(--daw-good))}.daw-inline-command{margin-left:8px}@mediaa(max-width:720px){.daw-form-row,.daw-listener-form{grid-template-columns:1fr}.daw-admin{padding:12px}.daw-qr-grid{grid-template-columns:1fr}.daw-qr-image{width:150px;height:150px}.daw-inline-command{margin:8px 0 0}}
 `;
 		function installWorkspaceStyles() {
 			if (document.getElementById(STYLE_ID) !== null) return;
@@ -30088,14 +30521,6 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/workspace.tsx
 		var import_lucide_react = require_lucide_react();
-		const ADMIN_TABS = [
-			"roots",
-			"remote",
-			"devices",
-			"trash",
-			"audit",
-			"app-download"
-		];
 		/** What the settings-page launcher opens: authorized roots, the first section. */
 		const DEFAULT_PANEL_SECTION = "roots";
 		/**
@@ -30109,6 +30534,29 @@ window.__ModuleLoader__.load({
 			return tab === "app-download" ? "appDownloadTab" : `${tab}Tab`;
 		}
 		/**
+		* 卡片头部的描述行。与 `tabLabelKey` 同理：唯一含连字符的分区显式映射。
+		*
+		* 键名是 `${tab}TabDesc`（**带 Tab**），不是 `${tab}Desc`。这个中间段不是冗余：它让
+		* 描述键与标题键 `rootsTab` / `rootsTabDesc` 成对，读的人一眼能看出这两个属于同一张卡。
+		*
+		* 踩过的坑：早先这里写成 `${tab}Desc`，`rootsDesc` 之类根本不在字典里 —— `translate` 直接
+		* `dictionaries[locale][key].replace(...)` 抛 TypeError，整个设置面板白屏。`as MessageKey`
+		* 把类型检查骗过去了，所以单测全绿也照样白屏。**键名靠模板拼出来时，类型系统是最后一道
+		* 防线，这里偏偏被断言关掉了。** 现在改成显式查表，见下。
+		*/
+		const TAB_DESC_KEYS = {
+			roots: "rootsTabDesc",
+			remote: "remoteTabDesc",
+			devices: "devicesTabDesc",
+			image: "imageTabDesc",
+			trash: "trashTabDesc",
+			audit: "auditTabDesc",
+			"app-download": "appDownloadTabDesc"
+		};
+		function tabDescKey(tab) {
+			return TAB_DESC_KEYS[tab];
+		}
+		/**
 		* The single desktop dialog: a vertical section rail on the left, one content pane on the right.
 		*
 		* Settings only — the five admin sections. The file tree used to live here as a sixth row; it does
@@ -30124,38 +30572,88 @@ window.__ModuleLoader__.load({
 		* 这就是把弹窗嵌进设置页的代价：入口看起来是空的，因为内容在下一层。
 		* 设置页本身就是一层容器，没有任何理由再套一层。
 		*/
+		/**
+		* 设置面板主体：**七张卡片平铺，各自独立开合，没有导航栏**。
+		*
+		* 上一版留了个分区导航栏、一次只显示一张卡。对照 Vision Router 的实际长相才发现差得远：
+		* 它是全部卡片一起列出来、想开哪张开哪张，标题栏自己就是入口。那句提示词写得很直白 ——
+		* 「多张卡可以同时保持展开」。所以导航栏这一层是多余的，用户还得先点导航、再点卡片头，
+		* 两次点击才走一步。
+		*
+		* 抽出来是为了让 DSH 设置页能把它**内联**渲染。
+		*
+		* 早先的版本做不到这一点，于是设置页里只放了一句说明加一个「打开手机设置面板」按钮，
+		* 真正的设置藏在按钮后面的模态框里。用户的反应很直接：「其他的可以设置的东西那去了」——
+		* 这就是把弹窗嵌进设置页的代价：入口看起来是空的，因为内容在下一层。
+		* 设置页本身就是一层容器，没有任何理由再套一层。
+		*
+		* `section` / `onSection` 保留是为了兼容旧调用方，但现在**不再决定显示哪一张卡**，
+		* 只用来决定默认展开哪一张。
+		*/
 		function PhoneSettingsBody(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminPanel, {
+				api: props.api,
+				initialOpen: props.section
+			});
+		}
+		/**
+		* 一个设置分区 = 一张 Vision Router 式折叠卡片。
+		*
+		* 交互模型照搬 dsh-vision-router 的 `vr-card`：外壳是圆角 12px 卡片，展开时加
+		* `daw-card-open`；头部是一个 `aria-expanded` 的按钮，装着图标 + 标题 + 描述 + 旋转箭头；
+		* 展开体是 `daw-card-body`（顶部一条分隔线）。
+		*
+		* 七张卡同时挂在页面上，各张独立开合 —— 导航栏已经删掉了，卡片头自己就是入口。
+		*/
+		function SettingsCard(props) {
 			const { t } = useWorkspaceI18n();
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-				className: "daw-tabs",
-				"aria-label": t("panelNav"),
-				children: ADMIN_TABS.map((name) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					className: `daw-tab${props.section === name ? " active" : ""}`,
-					onClick: () => props.onSection(name),
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: `daw-card${props.open ? " daw-card-open" : ""}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "daw-card-header",
+					"aria-expanded": props.open,
+					onClick: props.onToggle,
 					children: [
-						tabIcon(name),
-						" ",
-						t(tabLabelKey(name))
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "daw-card-icon",
+							"aria-hidden": "true",
+							children: tabIcon(props.tab)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "daw-card-headtext",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "daw-card-name",
+								children: t(props.nameKey)
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "daw-card-desc",
+								children: t(props.descKey)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `daw-card-chevron${props.open ? " daw-card-chevron-open" : ""}`,
+							"aria-hidden": "true",
+							children: "▾"
+						})
 					]
-				}, name))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "daw-panel-body",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "daw-panel-pane",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminPanel, {
-						api: props.api,
-						section: props.section
-					})
-				})
-			})] });
+				}), props.open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "daw-card-body",
+					children: props.children
+				})]
+			});
 		}
 		/**
 		* The settings content of one admin section, extracted from `AdminOverlay` so the unified panel and
 		* the standalone `/dsh-workspace` page render exactly the same body.
 		*/
+		/**
+		* 设置面板：七张卡片平铺，各自独立开合。
+		*
+		* `initialOpen` 决定进页面时先展开哪一张（默认第一张），之后完全由用户点卡片头控制。
+		* 展开状态存 Set —— 这样「同时展开两张」是自然结果，不需要额外的互斥逻辑。
+		*/
 		function AdminPanel(props) {
 			const { locale, t } = useWorkspaceI18n();
-			const tab = props.section;
 			const [status, setStatus] = (0, react.useState)();
 			const [trash, setTrash] = (0, react.useState)([]);
 			const [audit, setAudit] = (0, react.useState)([]);
@@ -30167,18 +30665,37 @@ window.__ModuleLoader__.load({
 			const [configText, setConfigText] = (0, react.useState)();
 			const [configEndpoint, setConfigEndpoint] = (0, react.useState)("");
 			const [configTextBusy, setConfigTextBusy] = (0, react.useState)(false);
+			const [image, setImage] = (0, react.useState)();
+			const [imageDraft, setImageDraft] = (0, react.useState)("");
+			const [imageBusy, setImageBusy] = (0, react.useState)(false);
+			const [openCards, setOpenCards] = (0, react.useState)(() => /* @__PURE__ */ new Set([props.initialOpen]));
+			const [imageSaved, setImageSaved] = (0, react.useState)(false);
 			const [error, setError] = (0, react.useState)();
+			const isOpen = (0, react.useCallback)((card) => openCards.has(card), [openCards]);
+			const toggleCard = (0, react.useCallback)((card) => {
+				setOpenCards((previous) => {
+					const next = new Set(previous);
+					if (!next.delete(card)) next.add(card);
+					return next;
+				});
+			}, []);
 			const refresh = (0, react.useCallback)(async () => {
 				try {
 					const next = await props.api.status();
 					setStatus(next);
-					if (tab === "trash") setTrash((await props.api.trashItems()).items);
-					if (tab === "audit") setAudit((await props.api.audit()).items);
+					if (openCards.has("trash")) setTrash((await props.api.trashItems()).items);
+					if (openCards.has("audit")) setAudit((await props.api.audit()).items);
+					if (openCards.has("image")) {
+						const settings = await props.api.imageSettings();
+						setImage(settings);
+						setImageDraft(settings.subdir);
+						setImageSaved(false);
+					}
 					setError(void 0);
 				} catch (cause) {
 					setError(cause);
 				}
-			}, [props.api, tab]);
+			}, [props.api, openCards]);
 			(0, react.useEffect)(() => {
 				refresh();
 			}, [refresh]);
@@ -30188,6 +30705,11 @@ window.__ModuleLoader__.load({
 				setListenerPort(String(status.configuredPort));
 			}, [status?.configuredHost, status?.configuredPort]);
 			const roots = status?.roots ?? [];
+			const [grantedScopes, setGrantedScopes] = (0, react.useState)([...DEVICE_SCOPES]);
+			const toggleScope = (0, react.useCallback)((scope) => {
+				setGrantedScopes((current) => current.includes(scope) ? current.filter((item) => item !== scope) : [...current, scope]);
+			}, []);
+			const grantNotice = grantedScopes.length === 0 ? t("scopeGrantNoticeEmpty") : (status?.devices?.length ?? 0) === 0 ? t("scopeGrantNotice") : t("scopeGrantNoticeExisting");
 			const parsedListenerPort = Number(listenerPort);
 			const listenerPortValid = Number.isInteger(parsedListenerPort) && parsedListenerPort >= 1 && parsedListenerPort <= 65535;
 			const listenerDirty = status !== void 0 && (listenerHost.trim() !== status.configuredHost || parsedListenerPort !== status.configuredPort);
@@ -30215,226 +30737,361 @@ window.__ModuleLoader__.load({
 						className: "daw-warning",
 						children: messageOf(error, t)
 					}),
-					tab === "roots" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("authorizedRoots") }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "daw-form-row",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									className: "daw-input",
-									placeholder: t("absolutePath"),
-									value: path,
-									onChange: (event) => setPath(event.target.value)
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									className: "daw-input",
-									placeholder: t("displayLabel"),
-									value: label,
-									onChange: (event) => setLabel(event.target.value)
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsCard, {
+						tab: "roots",
+						nameKey: tabLabelKey("roots"),
+						descKey: tabDescKey("roots"),
+						open: isOpen("roots"),
+						onToggle: () => toggleCard("roots"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "daw-form-row",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "daw-input",
+										placeholder: t("absolutePath"),
+										value: path,
+										onChange: (event) => setPath(event.target.value)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "daw-input",
+										placeholder: t("displayLabel"),
+										value: label,
+										onChange: (event) => setLabel(event.target.value)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										className: "daw-command primary",
+										onClick: () => {
+											props.api.addRoot(path, label || void 0).then(() => {
+												setPath("");
+												setLabel("");
+												return refresh();
+											}).catch(setError);
+										},
+										children: t("addRoot")
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list",
+								children: roots.map((root) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "daw-list-row",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "daw-list-title",
+										children: [root.label, root.builtin === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "daw-pill on",
+											children: t("builtinRootBadge")
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "daw-list-meta",
+										children: root.realPath
+									})] }), root.builtin === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "daw-list-meta daw-builtin-hint",
+										children: t("builtinRootHint")
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										className: "daw-icon danger",
+										title: t("removeRoot"),
+										onClick: () => {
+											props.api.removeRoot(root.id).then(refresh).catch(setError);
+										},
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Trash2, { size: 15 })
+									})]
+								}, root.id))
+							}),
+							roots.some((root) => root.builtin === true) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta daw-builtin-notice",
+								children: t("builtinRootNotice")
+							})
+						]
+					}, "roots"),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsCard, {
+						tab: "remote",
+						nameKey: tabLabelKey("remote"),
+						descKey: tabDescKey("remote"),
+						open: isOpen("remote"),
+						onToggle: () => toggleCard("remote"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-warning",
+								children: t("httpWarning")
+							}),
+							roots.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-warning",
+								children: t("addRootBeforeRemote")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "daw-listener-form",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "daw-field",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("bindIp") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											className: "daw-input",
+											value: listenerHost,
+											disabled: status?.remoteEnabled,
+											spellCheck: false,
+											placeholder: "0.0.0.0",
+											onChange: (event) => setListenerHost(event.target.value)
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "daw-field",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("bindPort") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											className: "daw-input",
+											type: "number",
+											min: 1,
+											max: 65535,
+											inputMode: "numeric",
+											value: listenerPort,
+											disabled: status?.remoteEnabled,
+											onChange: (event) => setListenerPort(event.target.value)
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										className: "daw-command",
+										disabled: status?.remoteEnabled || listenerHost.trim() === "" || !listenerPortValid || !listenerDirty,
+										onClick: () => {
+											props.api.configureListener(listenerHost.trim(), parsedListenerPort).then((result) => poll(result.id)).then(refresh).catch(setError);
+										},
+										children: t("saveListener")
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "daw-listener-status",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [t("configuredListener"), ":"] }),
+									" ",
+									formatEndpoint(status?.configuredHost ?? listenerHost, status?.configuredPort ?? parsedListenerPort)
+								] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [t("actualListener"), ":"] }),
+									" ",
+									formatEndpoint(status?.host ?? "127.0.0.1", status?.port ?? parsedListenerPort)
+								] })]
+							}),
+							status?.remoteEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta daw-listener-hint",
+								children: t("disableToEditListener")
+							}),
+							!status?.remoteEnabled && listenerDirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta daw-listener-hint",
+								children: t("saveBeforeEnable")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `daw-pill${status?.remoteEnabled ? " on" : ""}`,
+								children: status?.remoteEnabled ? t("remoteEnabled") : t("loopbackOnly")
+							}) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-scope-grid",
+								children: DEVICE_SCOPES.map((scope) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "daw-check",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: grantedScopes.includes(scope),
+											onChange: () => toggleScope(scope)
+										}),
+										" ",
+										scopeLabel(locale, scope)
+									]
+								}, scope))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta",
+								children: grantNotice
+							}),
+							status?.remoteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "daw-command danger",
+								onClick: () => {
+									props.api.disableRemote().then((result) => poll(result.id)).then(refresh).catch(setError);
+								},
+								children: t("disableRemote")
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "daw-command primary",
+								disabled: roots.length === 0 || listenerDirty || !listenerPortValid || listenerHost.trim() === "" || grantedScopes.length === 0,
+								onClick: () => {
+									props.api.enableRemote(roots.map((root) => root.id), grantedScopes).then((result) => poll(result.id)).catch(setError);
+								},
+								children: t("enablePairing")
+							}),
+							status?.remoteEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "daw-command daw-inline-command",
+									disabled: grantedScopes.length === 0,
+									onClick: () => {
+										props.api.createPairing(roots.map((root) => root.id), grantedScopes).then((value) => setPairing(value)).catch(setError);
+									},
+									children: t("newPairingCode")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: "daw-command primary",
+									className: "daw-command daw-inline-command",
+									disabled: configTextBusy,
 									onClick: () => {
-										props.api.addRoot(path, label || void 0).then(() => {
-											setPath("");
-											setLabel("");
+										const manual = configEndpoint.trim();
+										setConfigTextBusy(true);
+										setError(void 0);
+										props.api.createConfigText({
+											...roots.length === 0 ? {} : { rootIds: roots.map((root) => root.id) },
+											...manual === "" ? {} : { endpoints: [{
+												label: t("configTextManualLabel"),
+												baseUrl: manual
+											}] }
+										}).then((value) => {
+											setConfigText(value);
 											return refresh();
-										}).catch(setError);
+										}).catch(setError).finally(() => setConfigTextBusy(false));
 									},
-									children: t("addRoot")
+									children: t("newConfigText")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "daw-list-meta daw-listener-hint",
+									children: t("configTextScopeNote")
 								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-list",
-							children: roots.map((root) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "daw-list-row",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "daw-list-title",
-									children: root.label
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "daw-list-meta",
-									children: root.realPath
-								})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: "daw-icon danger",
-									title: t("removeRoot"),
-									onClick: () => {
-										props.api.removeRoot(root.id).then(refresh).catch(setError);
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Trash2, { size: 15 })
-								})]
-							}, root.id))
-						})
-					] }),
-					tab === "remote" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("remoteAccess") }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-warning",
-							children: t("httpWarning")
-						}),
-						roots.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-warning",
-							children: t("addRootBeforeRemote")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "daw-listener-form",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							] }),
+							pairing !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-code",
+								children: pairing.code
+							}),
+							status?.remoteEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									marginTop: 12,
+									maxWidth: 560
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 									className: "daw-field",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("bindIp") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("configTextManual") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 										className: "daw-input",
-										value: listenerHost,
-										disabled: status?.remoteEnabled,
+										value: configEndpoint,
 										spellCheck: false,
-										placeholder: "0.0.0.0",
-										onChange: (event) => setListenerHost(event.target.value)
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									className: "daw-field",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("bindPort") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										className: "daw-input",
-										type: "number",
-										min: 1,
-										max: 65535,
-										inputMode: "numeric",
-										value: listenerPort,
-										disabled: status?.remoteEnabled,
-										onChange: (event) => setListenerPort(event.target.value)
+										placeholder: t("configTextManualPlaceholder"),
+										onChange: (event) => setConfigEndpoint(event.target.value)
 									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: "daw-command",
-									disabled: status?.remoteEnabled || listenerHost.trim() === "" || !listenerPortValid || !listenerDirty,
-									onClick: () => {
-										props.api.configureListener(listenerHost.trim(), parsedListenerPort).then((result) => poll(result.id)).then(refresh).catch(setError);
-									},
-									children: t("saveListener")
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "daw-listener-status",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [t("configuredListener"), ":"] }),
-								" ",
-								formatEndpoint(status?.configuredHost ?? listenerHost, status?.configuredPort ?? parsedListenerPort)
-							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [t("actualListener"), ":"] }),
-								" ",
-								formatEndpoint(status?.host ?? "127.0.0.1", status?.port ?? parsedListenerPort)
-							] })]
-						}),
-						status?.remoteEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-list-meta daw-listener-hint",
-							children: t("disableToEditListener")
-						}),
-						!status?.remoteEnabled && listenerDirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-list-meta daw-listener-hint",
-							children: t("saveBeforeEnable")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `daw-pill${status?.remoteEnabled ? " on" : ""}`,
-							children: status?.remoteEnabled ? t("remoteEnabled") : t("loopbackOnly")
-						}) }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-scope-grid",
-							children: DEVICE_SCOPES.map((scope) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-								className: "daw-check",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "checkbox",
-										checked: true,
-										readOnly: true
-									}),
-									" ",
-									scope
-								]
-							}, scope))
-						}),
-						status?.remoteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: "daw-command danger",
-							onClick: () => {
-								props.api.disableRemote().then((result) => poll(result.id)).then(refresh).catch(setError);
-							},
-							children: t("disableRemote")
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: "daw-command primary",
-							disabled: roots.length === 0 || listenerDirty || !listenerPortValid || listenerHost.trim() === "",
-							onClick: () => {
-								props.api.enableRemote(roots.map((root) => root.id), [...DEVICE_SCOPES]).then((result) => poll(result.id)).catch(setError);
-							},
-							children: t("enablePairing")
-						}),
-						status?.remoteEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: "daw-command daw-inline-command",
-							onClick: () => {
-								props.api.createPairing(roots.map((root) => root.id), [...DEVICE_SCOPES]).then((value) => setPairing(value)).catch(setError);
-							},
-							children: t("newPairingCode")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: "daw-command daw-inline-command",
-							disabled: configTextBusy,
-							onClick: () => {
-								const manual = configEndpoint.trim();
-								setConfigTextBusy(true);
-								setError(void 0);
-								props.api.createConfigText({
-									...roots.length === 0 ? {} : { rootIds: roots.map((root) => root.id) },
-									...manual === "" ? {} : { endpoints: [{
-										label: t("configTextManualLabel"),
-										baseUrl: manual
-									}] }
-								}).then((value) => {
-									setConfigText(value);
-									return refresh();
-								}).catch(setError).finally(() => setConfigTextBusy(false));
-							},
-							children: t("newConfigText")
-						})] }),
-						pairing !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-code",
-							children: pairing.code
-						}),
-						status?.remoteEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								marginTop: 12,
-								maxWidth: 560
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "daw-list-meta",
+									style: { marginTop: 5 },
+									children: t("configTextManualHint")
+								})]
+							}),
+							configText !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigTextPanel, { result: configText })
+						]
+					}, "remote"),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsCard, {
+						tab: "devices",
+						nameKey: tabLabelKey("devices"),
+						descKey: tabDescKey("devices"),
+						open: isOpen("devices"),
+						onToggle: () => toggleCard("devices"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "daw-list",
+							children: (status?.devices ?? []).map((device) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceRow, {
+								api: props.api,
+								device,
+								roots,
+								onChanged: refresh,
+								onError: setError
+							}, device.id))
+						})
+					}, "devices"),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsCard, {
+						tab: "image",
+						nameKey: tabLabelKey("image"),
+						descKey: tabDescKey("image"),
+						open: isOpen("image"),
+						onToggle: () => toggleCard("image"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "daw-list-meta",
+								children: t("imageHint")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 								className: "daw-field",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("configTextManual") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageSubdir") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 									className: "daw-input",
-									value: configEndpoint,
+									value: imageDraft,
 									spellCheck: false,
-									placeholder: t("configTextManualPlaceholder"),
-									onChange: (event) => setConfigEndpoint(event.target.value)
+									disabled: imageBusy || image === void 0,
+									onChange: (event) => {
+										setImageDraft(event.target.value);
+										setImageSaved(false);
+									}
 								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "daw-list-meta",
 								style: { marginTop: 5 },
-								children: t("configTextManualHint")
-							})]
-						}),
-						configText !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigTextPanel, { result: configText })
-					] }),
-					tab === "devices" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("pairedDevices") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "daw-list",
-						children: (status?.devices ?? []).map((device) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceRow, {
-							api: props.api,
-							device,
-							roots,
-							onChanged: refresh,
-							onError: setError
-						}, device.id))
-					})] }),
-					tab === "trash" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("pluginTrash") }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								children: t("imageSubdirHint")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "daw-field",
+								style: { marginTop: 14 },
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageDefault") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									className: "daw-input",
+									value: image?.defaultSubdir ?? "",
+									readOnly: true,
+									disabled: true
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta",
+								style: { marginTop: 5 },
+								children: t("imageDefaultHint")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "daw-field",
+								style: { marginTop: 14 },
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageFallback") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									className: "daw-input",
+									value: image?.fallbackDir ?? "",
+									readOnly: true,
+									disabled: true
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta",
+								style: { marginTop: 5 },
+								children: t("imageFallbackHint")
+							}),
+							image !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-meta",
+								style: { marginTop: 12 },
+								children: t("imageExample", { subdir: image.subdir })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "daw-form-row",
+								style: {
+									marginTop: 12,
+									gridTemplateColumns: "auto auto minmax(0,1fr)",
+									alignItems: "center"
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "daw-command primary",
+									disabled: imageBusy || image === void 0 || imageDraft.trim() === "" || imageDraft.trim() === image.subdir,
+									onClick: () => {
+										setImageBusy(true);
+										setError(void 0);
+										props.api.saveImageSubdir(imageDraft.trim()).then((next) => {
+											setImage(next);
+											setImageDraft(next.subdir);
+											setImageSaved(true);
+										}).catch(setError).finally(() => setImageBusy(false));
+									},
+									children: t("save")
+								}), imageSaved && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "daw-pill on",
+									children: t("imageSaved")
+								})]
+							})
+						]
+					}, "image"),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsCard, {
+						tab: "trash",
+						nameKey: tabLabelKey("trash"),
+						descKey: tabDescKey("trash"),
+						open: isOpen("trash"),
+						onToggle: () => toggleCard("trash"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "daw-list-meta",
 							children: t("pluginTrashHint")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "daw-list",
 							children: trash.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "daw-list-row",
@@ -30465,30 +31122,40 @@ window.__ModuleLoader__.load({
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Trash2, { size: 15 })
 								})] })]
 							}, item.id))
+						})]
+					}, "trash"),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsCard, {
+						tab: "audit",
+						nameKey: tabLabelKey("audit"),
+						descKey: tabDescKey("audit"),
+						open: isOpen("audit"),
+						onToggle: () => toggleCard("audit"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "daw-list",
+							children: audit.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "daw-list-row",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "daw-list-title",
+									children: String(item.action ?? t("event"))
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "daw-list-meta",
+									children: [
+										new Date(Number(item.time ?? 0)).toLocaleString(locale),
+										" · ",
+										String(item.actorType ?? ""),
+										":",
+										String(item.actorId ?? ""),
+										" · ",
+										String(item.relativePath ?? "")
+									]
+								})] })
+							}, String(item.id ?? index)))
 						})
-					] }),
-					tab === "audit" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("recentAudit") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "daw-list",
-						children: audit.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "daw-list-row",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "daw-list-title",
-								children: String(item.action ?? t("event"))
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "daw-list-meta",
-								children: [
-									new Date(Number(item.time ?? 0)).toLocaleString(locale),
-									" · ",
-									String(item.actorType ?? ""),
-									":",
-									String(item.actorId ?? ""),
-									" · ",
-									String(item.relativePath ?? "")
-								]
-							})] })
-						}, String(item.id ?? index)))
-					})] }),
-					tab === "app-download" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppDownloadSection, {})
+					}, "audit"),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppDownloadSection, {
+						open: isOpen("app-download"),
+						onToggle: () => toggleCard("app-download")
+					})
 				]
 			});
 		}
@@ -30503,15 +31170,18 @@ window.__ModuleLoader__.load({
 		* screen, so this page is mostly used by the desktop admin to send a code to someone else. Without
 		* the text there would be no way to type the address in by hand when a camera is unavailable.
 		*/
-		function AppDownloadSection() {
+		function AppDownloadSection(props) {
 			const { t } = useWorkspaceI18n();
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("appDownloadTitle") }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SettingsCard, {
+				tab: "app-download",
+				nameKey: tabLabelKey("app-download"),
+				descKey: tabDescKey("app-download"),
+				open: props.open,
+				onToggle: props.onToggle,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "daw-list-meta",
 					children: t("appDownloadHint")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "daw-qr-grid",
 					children: APP_QR_CODES.map((code) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
 						className: "daw-qr-card",
@@ -30536,8 +31206,8 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}, code.key))
-				})
-			] });
+				})]
+			});
 		}
 		/**
 		* Standalone settings overlay kept for the `/dsh-workspace` page (mobile WebView / direct link).
@@ -30672,7 +31342,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function DeviceRow(props) {
-			const { t } = useWorkspaceI18n();
+			const { locale, t } = useWorkspaceI18n();
 			const [editing, setEditing] = (0, react.useState)(false);
 			const [scopes, setScopes] = (0, react.useState)(props.device.scopes);
 			const [rootIds, setRootIds] = (0, react.useState)(props.device.rootIds);
@@ -30696,7 +31366,7 @@ window.__ModuleLoader__.load({
 						children: [
 							props.device.id,
 							" · ",
-							props.device.scopes.join(", ")
+							props.device.scopes.length === 0 ? t("noScopes") : props.device.scopes.map((scope) => scopeLabel(locale, scope)).join(" · ")
 						]
 					}),
 					editing && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -30707,7 +31377,7 @@ window.__ModuleLoader__.load({
 								type: "checkbox",
 								checked: scopes.includes(scope),
 								onChange: () => setScopes((current) => toggle(current, scope))
-							}), scope]
+							}), scopeLabel(locale, scope)]
 						}, scope))
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "daw-scope-grid",
@@ -30747,6 +31417,7 @@ window.__ModuleLoader__.load({
 		function tabIcon(tab) {
 			if (tab === "roots") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.HardDrive, { size: 15 });
 			if (tab === "devices") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Smartphone, { size: 15 });
+			if (tab === "image") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Image, { size: 15 });
 			if (tab === "trash") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Trash2, { size: 15 });
 			if (tab === "remote") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Upload, { size: 15 });
 			if (tab === "app-download") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.Download, { size: 15 });
@@ -30772,6 +31443,7 @@ window.__ModuleLoader__.load({
 			if (error.status === 401) return "errorUnauthorized";
 			if (error.status === 429) return "errorRateLimited";
 			if (error.code === "ROOT_NOT_GRANTED" || error.code === "ROOT_FORBIDDEN") return "errorRootDenied";
+			if (error.code === "ROOT_BUILTIN") return "errorRootBuiltin";
 			if (error.code === "ETAG_MISMATCH") return "errorEtag";
 			if (error.code === "LISTENER_HOST_INVALID") return "listenerHostInvalid";
 			if (error.code === "LISTENER_PORT_INVALID") return "listenerPortInvalid";
@@ -30794,9 +31466,17 @@ window.__ModuleLoader__.load({
 		//#region src/client/index.tsx
 		const DEFAULT_SECTION = DEFAULT_PANEL_SECTION;
 		const api = new WorkspaceApi("/dsh-workspace-api/api/v1", "/dsh-workspace-api/manage", void 0, true);
-		const inject = ["slots"];
+		const inject = ["slots", "uiConversation"];
 		function apply(ctx) {
 			installWorkspaceStyles();
+			ctx.effect(() => {
+				ctx.uiConversation.events.register(handoffDefinition);
+				return ctx.slots.inject("conversation.chat.turnTail", () => ctx.slots.register({
+					name: "conversation.chat.turnTail",
+					id: "dsh-remote-bridge-handoff",
+					order: 40
+				}, HandoffTurnTail));
+			}, "dsh remote bridge handoff gallery");
 			ctx.effect(() => localizedSlot(ctx, "settings.section", {
 				name: "settings.section",
 				id: "dsh-remote-bridge",