dsh-vscode-workbench 0.1.4 → 0.1.6

package/lib/client.js

@@ -115,6 +115,13 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region src/client/api.ts
+		var ApiError = class extends Error {
+			code;
+			constructor(code, message) {
+				super(message);
+				this.code = code;
+			}
+		};
 		async function api(method, body, signal) {
 			const response = await fetch(`/dsh-vscode/api/${method}`, {
 				method: "POST",
@@ -123,7 +130,7 @@ window.__ModuleLoader__.load({
 				signal
 			});
 			const answer = await response.json();
-			if (!response.ok || !answer.ok) throw new Error(answer.error?.message ?? `request failed (${response.status})`);
+			if (!response.ok || !answer.ok) throw new ApiError(answer.error?.code ?? "request-failed", answer.error?.message ?? `request failed (${response.status})`);
 			return answer.value;
 		}
 		//#endregion
@@ -4418,22 +4425,21 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 		}
 		//#endregion
 		//#region src/client/DshMark.tsx
-		/** Reuse the official DSH whale already rendered by the host brand plugin. */
+		/** Bundled DSH fish logo — self-contained, no dependence on host DOM. */
+		const WHALE_VIEWBOX = "0 0 23.16 17.04";
+		const WHALE_PATH = "M22.9168 1.43018C22.6713 1.31018 22.5658 1.53918 22.4223 1.65519C22.3733 1.69269 22.3318 1.74169 22.2903 1.78669C21.9317 2.1697 21.5127 2.42121 20.9657 2.39121C20.1657 2.34621 19.4827 2.59771 18.8787 3.20973C18.7502 2.45521 18.3236 2.0047 17.6746 1.71569C17.3351 1.56568 16.9916 1.41518 16.7536 1.08867C16.5876 0.856163 16.5421 0.597155 16.4591 0.341647C16.4061 0.187643 16.3536 0.0301382 16.1761 0.00363739C15.9836 -0.0263635 15.9081 0.135141 15.8326 0.270145C15.5306 0.822162 15.4136 1.43018 15.4251 2.0462C15.4516 3.43174 16.0366 4.53527 17.1991 5.3203C17.3311 5.4103 17.3651 5.5003 17.3236 5.63181C17.2441 5.90231 17.1501 6.16482 17.0671 6.43533C17.0141 6.60784 16.9351 6.64584 16.7501 6.57033C16.1121 6.30383 15.5611 5.90931 15.074 5.4328C14.2475 4.63328 13.5 3.75075 12.568 3.05973C12.349 2.89822 12.13 2.74822 11.9034 2.60522C10.9524 1.68169 12.028 0.923165 12.277 0.833162C12.5375 0.739159 12.3675 0.41615 11.5259 0.42015C10.6844 0.42365 9.91439 0.705658 8.93286 1.08117C8.78935 1.13767 8.63835 1.17867 8.48384 1.21267C7.59332 1.04367 6.66829 1.00617 5.70226 1.11517C3.88321 1.31768 2.43016 2.1777 1.36213 3.64575C0.0790928 5.4103 -0.222916 7.41536 0.146595 9.50642C0.535106 11.7105 1.66014 13.535 3.38869 14.9616C5.18125 16.4406 7.24581 17.1657 9.60138 17.0266C11.0319 16.9441 12.6245 16.7526 14.421 15.2321C14.874 15.4576 15.3496 15.5476 16.1381 15.6151C16.7456 15.6716 17.3306 15.5851 17.7836 15.4911C18.4931 15.3411 18.4441 14.6841 18.1876 14.5636C16.1081 13.595 16.5646 13.9891 16.1496 13.67C17.2061 12.42 18.8202 10.1979 19.3182 7.17235C19.3672 6.83834 19.4297 6.36783 19.4222 6.09732C19.4182 5.93231 19.4562 5.86831 19.6447 5.84931C20.1657 5.78931 20.6712 5.64681 21.1357 5.3913C22.4833 4.65528 23.0268 3.44624 23.1548 1.9972C23.1738 1.77569 23.1508 1.54668 22.9168 1.43018ZM11.1749 14.4736C9.15936 12.889 8.18184 12.3675 7.77832 12.39C7.40081 12.4125 7.46881 12.8445 7.55182 13.126C7.63882 13.404 7.75182 13.5955 7.91033 13.8396C8.01983 14.0011 8.09533 14.2411 7.80083 14.4216C7.15181 14.8231 6.02327 14.2866 5.97027 14.2601C4.65673 13.4865 3.5587 12.4655 2.78467 11.069C2.03715 9.72493 1.60314 8.28289 1.53164 6.74384C1.51264 6.37233 1.62214 6.24082 1.99215 6.17332C2.47916 6.08332 2.98118 6.06432 3.46769 6.13582C5.52476 6.43633 7.27581 7.35586 8.74385 8.8129C9.58188 9.64243 10.2159 10.634 10.8689 11.6025C11.5634 12.631 12.3105 13.611 13.262 14.4146C13.598 14.6961 13.866 14.9101 14.1225 15.0681C13.349 15.1546 12.058 15.1731 11.1749 14.4746L11.1749 14.4736ZM12.141 8.25988C12.141 8.09488 12.273 7.96338 12.439 7.96338C12.4765 7.96338 12.5105 7.97088 12.541 7.98188C12.5825 7.99688 12.6205 8.01938 12.6505 8.05338C12.7035 8.10588 12.7335 8.18088 12.7335 8.25988C12.7335 8.42489 12.6015 8.55639 12.4355 8.55639C12.2695 8.55639 12.141 8.42489 12.141 8.25988ZM15.1415 9.79893C14.949 9.87793 14.7565 9.94544 14.5715 9.95294C14.2845 9.96794 13.9715 9.85143 13.8015 9.70893C13.5375 9.48742 13.3485 9.36342 13.2695 8.97691C13.2355 8.8119 13.2545 8.55639 13.2845 8.40989C13.3525 8.09438 13.277 7.89187 13.0545 7.70787C12.8735 7.55786 12.643 7.51636 12.39 7.51636C12.2955 7.51636 12.209 7.47486 12.1445 7.44136C12.039 7.38886 11.9519 7.25735 12.035 7.09585C12.0615 7.04335 12.19 6.91584 12.22 6.89334C12.5635 6.69784 12.9595 6.76184 13.326 6.90834C13.6655 7.04735 13.9225 7.30236 14.292 7.66287C14.6695 8.09838 14.7375 8.21838 14.9525 8.54539C15.1225 8.8009 15.277 9.06341 15.3831 9.36392C15.4471 9.55142 15.3641 9.70493 15.1415 9.79893Z";
 		function DshMark({ size = 18 }) {
-			const mount = (0, react.useRef)(null);
-			(0, react.useLayoutEffect)(() => {
-				const source = [...document.querySelectorAll("svg")].find((svg) => svg.getAttribute("viewBox") === "0 0 23.16 17.04" && !mount.current?.contains(svg));
-				if (source === void 0 || mount.current === null) return;
-				const logo = source.cloneNode(true);
-				logo.setAttribute("width", String(size));
-				logo.setAttribute("height", String(size * 17.04 / 23.16));
-				mount.current.replaceChildren(logo);
-			}, [size]);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				className: "dvw-dsh-mark",
-				ref: mount,
+				width: size,
+				height: size * 17.04 / 23.16,
+				viewBox: WHALE_VIEWBOX,
+				fill: "none",
 				"aria-hidden": "true",
-				children: "DSH"
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: WHALE_PATH,
+					fill: "currentColor"
+				})
 			});
 		}
 		//#endregion
@@ -4469,11 +4475,48 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 		};
 		//#endregion
 		//#region src/client/Workbench.tsx
+		function unloadedTab(path) {
+			return {
+				path,
+				content: "",
+				draft: "",
+				revision: "",
+				size: 0,
+				binary: false,
+				tooLarge: false,
+				dirty: false,
+				loaded: false,
+				preview: /\.md$/i.test(path)
+			};
+		}
+		/** Restore tab headers without reading their file contents. */
+		function restoreTabPaths(paths) {
+			return [...new Set(paths)].map(unloadedTab);
+		}
+		/** Return whether file changes require reloading one visible directory. */
+		function directoryAffected(directory, changedPaths) {
+			return changedPaths.some((changed) => {
+				const normalized = changed.replace(/\\/g, "/");
+				const parent = normalized.includes("/") ? normalized.slice(0, normalized.lastIndexOf("/")) : "";
+				return normalized === directory || parent === directory;
+			});
+		}
 		/** Return the basename shown in a tab while preserving its full internal path. */
 		function tabLabel(tab) {
 			const path = tab.title ?? tab.diffSourcePath ?? tab.path.replace(/^diff:/, "");
 			return path.split(/[\\/]/).at(-1) ?? path;
 		}
+		/** Invoke `fn` at most once per `ms` after the latest call, always running the freshest callback. */
+		function useDebouncedCallback(fn, ms) {
+			const fnRef = (0, react.useRef)(fn);
+			fnRef.current = fn;
+			const timer = (0, react.useRef)();
+			(0, react.useEffect)(() => () => clearTimeout(timer.current), []);
+			return (0, react.useCallback)(() => {
+				clearTimeout(timer.current);
+				timer.current = setTimeout(() => fnRef.current(), ms);
+			}, [ms]);
+		}
 		function useDshDarkTheme() {
 			const read = () => document.body.hasAttribute("data-ds-dark-theme");
 			const [dark, setDark] = (0, react.useState)(read);
@@ -4487,7 +4530,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			}, []);
 			return dark;
 		}
-		function Tree({ sessionId, path, depth, expanded, selected, selectedDirectory, statuses, onToggle, onSelectDirectory, onOpen, onChange, onUpload }) {
+		function Tree({ sessionId, path, depth, expanded, selected, selectedDirectory, statuses, onToggle, onSelectDirectory, onOpen, onChange, onUpload, creating, onCreatingChange, onCreatingCancel, onCreatingSubmit }) {
 			const [rows, setRows] = (0, react.useState)([]);
 			const [error, setError] = (0, react.useState)();
 			const [dropTarget, setDropTarget] = (0, react.useState)(false);
@@ -4502,7 +4545,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			}, [sessionId, path]);
 			(0, react.useEffect)(load, [load]);
 			(0, react.useEffect)(() => {
-				const handler = () => load();
+				const handler = (event) => {
+					const paths = event.detail;
+					if (paths === void 0 || directoryAffected(path, paths)) load();
+				};
 				window.addEventListener("dvw-files-changed", handler);
 				return () => window.removeEventListener("dvw-files-changed", handler);
 			}, [load]);
@@ -4569,6 +4615,41 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					className: "dvw-error",
 					children: error
 				}),
+				creating?.directory === path && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dvw-tree-row dvw-tree-create-row",
+					style: { paddingLeft: 6 + depth * 13 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dvw-chevron" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: creating.kind === "directory" ? "folder" : "new-file",
+							className: `dvw-file-icon ${creating.kind === "directory" ? "folder" : ""}`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "dvw-tree-create-input",
+							value: creating.value,
+							autoFocus: true,
+							"aria-label": creating.kind === "directory" ? "新建文件夹名称" : "新建文件名称",
+							"aria-invalid": creating.error !== void 0,
+							placeholder: creating.kind === "directory" ? "文件夹名称" : "文件名称",
+							onChange: (event) => onCreatingChange(event.target.value),
+							onKeyDown: (event) => {
+								if (event.key === "Enter") {
+									event.preventDefault();
+									onCreatingSubmit();
+								}
+								if (event.key === "Escape") {
+									event.preventDefault();
+									onCreatingCancel();
+								}
+							},
+							onBlur: onCreatingCancel
+						})
+					]
+				}), creating.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dvw-tree-create-error",
+					style: { paddingLeft: 42 + depth * 13 },
+					children: creating.error
+				})] }),
 				rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dvw-tree-row",
 					"data-dvw-upload-directory": row.kind === "directory" ? row.path : void 0,
@@ -4646,7 +4727,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					onSelectDirectory,
 					onOpen,
 					onChange,
-					onUpload
+					onUpload,
+					creating,
+					onCreatingChange,
+					onCreatingCancel,
+					onCreatingSubmit
 				})] }, row.path)),
 				context && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dvw-context-menu",
@@ -4722,6 +4807,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			const [statuses, setStatuses] = (0, react.useState)(/* @__PURE__ */ new Map());
 			const [dropTarget, setDropTarget] = (0, react.useState)(false);
 			const [selectedDirectory, setSelectedDirectory] = (0, react.useState)("");
+			const [creating, setCreating] = (0, react.useState)();
 			const picker = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				if (props.cwd) try {
@@ -4736,25 +4822,49 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			const refreshStatus = (0, react.useCallback)(() => {
 				api("git.status", { sessionId: props.sessionId }).then((status) => setStatuses(new Map(status.changes.map((change) => [change.path, gitStatusCode(change)])))).catch(() => setStatuses(/* @__PURE__ */ new Map()));
 			}, [props.sessionId]);
+			const refreshStatusDebounced = useDebouncedCallback(refreshStatus, 500);
 			(0, react.useEffect)(() => {
 				refreshStatus();
-				const handler = () => refreshStatus();
+				const handler = () => refreshStatusDebounced();
 				window.addEventListener("dvw-files-changed", handler);
 				return () => window.removeEventListener("dvw-files-changed", handler);
-			}, [refreshStatus]);
-			const create = async (kind) => {
-				const path = prompt(kind === "file" ? "新文件路径" : "新目录路径");
-				if (!path) return;
+			}, [refreshStatus, refreshStatusDebounced]);
+			const startCreating = (kind) => {
+				const directory = selectedDirectory;
+				if (directory) setExpanded((current) => new Set(current).add(directory));
+				setCreating({
+					kind,
+					directory,
+					value: ""
+				});
+			};
+			const submitCreating = async () => {
+				if (creating === void 0) return;
+				const value = creating.value.trim();
+				if (value === "") {
+					setCreating((current) => current && {
+						...current,
+						error: "请输入名称"
+					});
+					return;
+				}
+				const path = createdEntryPath(creating.directory, value);
 				try {
 					await api("fs.create", {
 						sessionId: props.sessionId,
 						path,
-						kind
+						kind: creating.kind
 					});
+					const created = path;
+					setCreating(void 0);
+					setSelectedDirectory(creating.kind === "directory" ? created : creating.directory);
 					setRevision((x) => x + 1);
 					window.dispatchEvent(new Event("dvw-files-changed"));
 				} catch (error) {
-					alert(String(error));
+					setCreating((current) => current && {
+						...current,
+						error: error instanceof Error ? error.message : String(error)
+					});
 				}
 			};
 			const upload = (0, react.useCallback)(async (directory, files) => {
@@ -4865,13 +4975,13 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dvw-icon",
 							title: "新建文件",
-							onClick: () => void create("file"),
+							onClick: () => startCreating("file"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "new-file" })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dvw-icon",
-							title: "新建目录",
-							onClick: () => void create("directory"),
+							title: "新建文件夹",
+							onClick: () => startCreating("directory"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "new-folder" })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -4909,7 +5019,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					onSelectDirectory: setSelectedDirectory,
 					onOpen: props.onOpen,
 					onChange: () => setRevision((x) => x + 1),
-					onUpload: (directory, files) => void upload(directory, files)
+					onUpload: (directory, files) => void upload(directory, files),
+					creating,
+					onCreatingChange: (value) => setCreating((current) => current && {
+						...current,
+						value,
+						error: void 0
+					}),
+					onCreatingCancel: () => setCreating(void 0),
+					onCreatingSubmit: () => void submitCreating()
 				})
 			}, revision)] });
 		}
@@ -4917,6 +5035,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 		function uploadDestination(selectedDirectory) {
 			return selectedDirectory ?? "";
 		}
+		/** Join an inline-created entry name to the currently selected Explorer directory. */
+		function createdEntryPath(directory, name) {
+			return directory ? `${directory}/${name}` : name;
+		}
 		/** Replace the final path component while preserving its workspace-relative directory. */
 		function renamedPath(path, name) {
 			return [...path.split("/").slice(0, -1), name].filter(Boolean).join("/");
@@ -5318,14 +5440,19 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					setStatus(nextStatus);
 					setCommits(nextCommits);
 					setError(void 0);
-				}).catch((error) => setError(String(error)));
+				}).catch((error) => {
+					setStatus(void 0);
+					setCommits([]);
+					setError(error instanceof ApiError && error.code === "not-repository" ? void 0 : String(error));
+				});
 			}, [props.sessionId]);
+			const refreshDebounced = useDebouncedCallback(refresh, 500);
 			(0, react.useEffect)(refresh, [refresh]);
 			(0, react.useEffect)(() => {
-				const fn = () => refresh();
+				const fn = () => refreshDebounced();
 				window.addEventListener("dvw-files-changed", fn);
 				return () => window.removeEventListener("dvw-files-changed", fn);
-			}, [refresh]);
+			}, [refreshDebounced]);
 			const action = async (name, path, value) => {
 				setBusy(true);
 				try {
@@ -5586,6 +5713,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			const tabsRef = (0, react.useRef)(tabs);
 			tabsRef.current = tabs;
 			const workspaceRequests = (0, react.useRef)(new WorkspaceRequestScope());
+			const loadingTabs = (0, react.useRef)(/* @__PURE__ */ new Set());
 			const dshDark = useDshDarkTheme();
 			const [theme, setTheme] = (0, react.useState)(() => {
 				const saved = localStorage.getItem("dvw:theme");
@@ -5608,61 +5736,24 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				window.addEventListener("keydown", onKey, true);
 				return () => window.removeEventListener("keydown", onKey, true);
 			}, [snapshot.visible]);
-			const openForWorkspace = async (targetSessionId, epoch, path, line, column) => {
-				if (!workspaceRequests.current.isCurrent(epoch)) return;
-				if (tabsRef.current.find((tab) => tab.path === path)) {
-					setActive(path);
-					setTabs((rows) => rows.map((tab) => tab.path === path ? {
-						...tab,
-						line,
-						column
-					} : tab));
-					return;
-				}
-				if (/\.(?:avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(path)) {
-					const imageUrl = `/dsh-vscode/file?sessionId=${encodeURIComponent(targetSessionId)}&path=${encodeURIComponent(path)}`;
-					if (!workspaceRequests.current.isCurrent(epoch)) return;
-					setTabs((rows) => workspaceRequests.current.isCurrent(epoch) ? [...rows.filter((tab) => tab.path !== path), {
-						path,
-						content: "",
-						draft: "",
-						revision: "",
-						size: 0,
-						binary: false,
-						tooLarge: false,
-						dirty: false,
-						imageUrl
-					}] : rows);
-					setActive(path);
-					return;
-				}
-				try {
-					const doc = await api("fs.read", {
-						sessionId: targetSessionId,
-						path
-					});
-					if (!workspaceRequests.current.isCurrent(epoch)) return;
-					if (doc.binary || doc.tooLarge) {
-						setError(doc.binary ? "二进制文件不能在文本编辑器中打开" : `文件超过 5 MiB：${path}`);
-						return;
-					}
-					setTabs((rows) => workspaceRequests.current.isCurrent(epoch) ? [...rows.filter((tab) => tab.path !== path), {
-						...doc,
-						draft: doc.content,
-						dirty: false,
-						line,
-						column,
-						preview: /\.md$/i.test(path)
-					}] : rows);
-					setActive(path);
-				} catch (error) {
-					if (workspaceRequests.current.isCurrent(epoch)) setError(String(error));
-				}
+			const openForWorkspace = (path, line, column) => {
+				if (tabsRef.current.find((tab) => tab.path === path)) setTabs((rows) => rows.map((tab) => tab.path === path ? {
+					...tab,
+					line,
+					column
+				} : tab));
+				else setTabs((rows) => [...rows, {
+					...unloadedTab(path),
+					line,
+					column
+				}]);
+				setActive(path);
 			};
 			(0, react.useEffect)(() => {
 				if (!snapshot.visible || sessionId === void 0) return;
 				const epoch = workspaceRequests.current.begin();
 				const cleared = resetWorkspaceDocuments();
+				loadingTabs.current.clear();
 				setWorkspace(void 0);
 				setTabs(cleared.tabs);
 				tabsRef.current = cleared.tabs;
@@ -5678,13 +5769,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 						if (parsed.view) service.show(parsed.view);
 						if (typeof parsed.panelHeight === "number") setPanelHeight(parsed.panelHeight);
 						if (typeof parsed.sideWidth === "number") setSideWidth(Math.max(210, Math.min(640, Math.round(parsed.sideWidth))));
-						for (const path of parsed.paths ?? []) openForWorkspace(sessionId, epoch, path);
+						const restored = restoreTabPaths(parsed.paths ?? []);
+						setTabs(restored);
+						setActive(restored.some((tab) => tab.path === parsed.active) ? parsed.active : restored.at(-1)?.path);
 					} catch {}
 				}).catch((error) => {
 					if (!controller.signal.aborted && workspaceRequests.current.isCurrent(epoch)) setError(String(error));
 				});
 				return () => {
 					controller.abort();
+					loadingTabs.current.clear();
 					workspaceRequests.current.invalidate(epoch);
 				};
 			}, [snapshot.visible, sessionId]);
@@ -5692,6 +5786,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				if (workspace) localStorage.setItem(`dvw:${workspace.cwd}`, JSON.stringify({
 					view: snapshot.view,
 					paths: tabs.filter((t) => !t.path.startsWith("diff:")).map((t) => t.path),
+					active,
 					panelHeight,
 					sideWidth
 				}));
@@ -5699,6 +5794,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				workspace,
 				snapshot.view,
 				tabs,
+				active,
 				panelHeight,
 				sideWidth
 			]);
@@ -5706,8 +5802,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				if (!snapshot.visible || sessionId === void 0) return;
 				const protocol = location.protocol === "https:" ? "wss" : "ws";
 				const ws = new WebSocket(`${protocol}://${location.host}/dsh-vscode/ws/files?sessionId=${encodeURIComponent(sessionId)}`);
-				ws.onmessage = () => {
-					window.dispatchEvent(new Event("dvw-files-changed"));
+				ws.onmessage = (event) => {
+					let paths = [];
+					try {
+						paths = JSON.parse(String(event.data)).paths ?? [];
+					} catch {}
+					window.dispatchEvent(new CustomEvent("dvw-files-changed", { detail: paths }));
 					setTabs((current) => current.map((tab) => tab.dirty ? {
 						...tab,
 						external: true
@@ -5715,9 +5815,49 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				};
 				return () => ws.close();
 			}, [snapshot.visible, sessionId]);
-			const open = async (path, line, column) => {
-				if (sessionId === void 0) return;
-				await openForWorkspace(sessionId, workspaceRequests.current.current(), path, line, column);
+			(0, react.useEffect)(() => {
+				if (sessionId === void 0 || active === void 0) return;
+				const tab = tabsRef.current.find((row) => row.path === active);
+				if (tab === void 0 || tab.loaded !== false || loadingTabs.current.has(active)) return;
+				const epoch = workspaceRequests.current.current();
+				loadingTabs.current.add(active);
+				if (/\.(?:avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(active)) {
+					const imageUrl = `/dsh-vscode/file?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(active)}`;
+					setTabs((rows) => rows.map((row) => row.path === active ? {
+						...row,
+						loaded: true,
+						imageUrl
+					} : row));
+					loadingTabs.current.delete(active);
+					return;
+				}
+				api("fs.read", {
+					sessionId,
+					path: active
+				}).then((doc) => {
+					if (!workspaceRequests.current.isCurrent(epoch)) return;
+					if (doc.binary || doc.tooLarge) {
+						setTabs((rows) => rows.filter((row) => row.path !== active));
+						setActive((current) => current === active ? void 0 : current);
+						setError(doc.binary ? "二进制文件不能在文本编辑器中打开" : `文件超过 5 MiB：${active}`);
+						return;
+					}
+					setTabs((rows) => rows.map((row) => row.path === active ? {
+						...row,
+						...doc,
+						draft: doc.content,
+						loaded: true
+					} : row));
+				}).catch((error) => {
+					if (workspaceRequests.current.isCurrent(epoch)) setError(String(error));
+				}).finally(() => loadingTabs.current.delete(active));
+			}, [
+				active,
+				sessionId,
+				tabs
+			]);
+			const open = (path, line, column) => {
+				if (sessionId !== void 0) openForWorkspace(path, line, column);
 			};
 			(0, react.useEffect)(() => {
 				const listener = (event) => void open(event.detail);
@@ -6301,7 +6441,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 body[data-ds-dark-theme] .dvw-overlay,.dvw-overlay[data-dvw-theme=dark]{color-scheme:dark}
 .dvw-overlay[data-dvw-theme=dark]{--dvw-base:#151517;--dvw-surface-1:#232324;--dvw-surface-2:#2c2c2e;--dvw-surface-3:#353638;--dvw-text:#f9fafb;--dvw-text-2:#cfd3d6;--dvw-text-3:#adb2b8;--dvw-border:#ffffff1f;--dvw-border-soft:#ffffff29;--dvw-hover:#ffffff14;--dvw-active:#ffffff24;--dvw-accent:#679efe;--dvw-error:#f25a5a;--dvw-success:#22c55e;--dvw-warn:#f59e0b}
 .dvw-overlay[data-dvw-theme=light]{--dvw-base:#fff;--dvw-surface-1:#fff;--dvw-surface-2:#fff;--dvw-surface-3:#fff;--dvw-text:#0f1115;--dvw-text-2:#61666b;--dvw-text-3:#81858c;--dvw-border:#0000001a;--dvw-border-soft:#0000001f;--dvw-hover:#2631480f;--dvw-active:#2631481a;--dvw-accent:#4176e6;--dvw-error:#ec1313;--dvw-success:#22c55e;--dvw-warn:#f59e0b;color-scheme:light}
-.dvw-overlay *{box-sizing:border-box}.dvw-activity{grid-row:1/3;background:var(--dvw-base);border-right:1px solid var(--dvw-border-soft);display:flex;flex-direction:column;align-items:center}.dvw-act{width:48px;height:48px;border:0;border-left:2px solid transparent;background:transparent;color:var(--dvw-text-3);font-size:22px;cursor:pointer}.dvw-act:hover,.dvw-act[data-active=true]{color:var(--dvw-text)}.dvw-act[data-active=true]{border-left-color:var(--dvw-accent)}.dvw-act.dsh{margin-top:auto}.dvw-side{grid-column:2;grid-row:1/3;min-width:0;width:100%;background:var(--dvw-surface-1);border-right:1px solid var(--dvw-border);display:flex;flex-direction:column}.dvw-side-resizer{grid-column:2;grid-row:1/3;justify-self:end;width:7px;height:100%;z-index:4;cursor:ew-resize;transform:translateX(3px);touch-action:none}.dvw-side-resizer:hover,.dvw-side-resizer:active{background:var(--dvw-accent)}.dvw-side-head{height:36px;display:flex;align-items:center;padding:0 12px;text-transform:uppercase;font-size:11px;letter-spacing:.4px}.dvw-toolbar{margin-left:auto;display:flex;gap:2px}.dvw-icon{border:0;background:transparent;color:var(--dvw-text-2);border-radius:4px;min-width:24px;height:24px;display:inline-grid;place-items:center;cursor:pointer}.dvw-icon:hover{background:var(--dvw-hover);color:var(--dvw-text)}.dvw-icon:disabled{opacity:.45;cursor:default}.dvw-file-picker{display:none}.dvw-tree,.dvw-results,.dvw-git{overflow:auto;flex:1}.dvw-tree[data-drop-target=true]{outline:1px dashed var(--dvw-accent);outline-offset:-3px}.dvw-tree-row{display:flex;align-items:center;height:24px;padding-right:6px;cursor:pointer;white-space:nowrap}.dvw-tree-row:hover{background:var(--dvw-hover)}.dvw-tree-row[data-selected=true],.dvw-tree-row[data-drop-target=true]{background:var(--dvw-active)}.dvw-chevron{width:16px;text-align:center;color:var(--dvw-text-3)}.dvw-file-icon{width:18px;color:var(--dvw-text-2)}.dvw-file-icon.folder{color:var(--dvw-accent)}.dvw-tree-name{overflow:hidden;text-overflow:ellipsis}.dvw-tree-rename{min-width:0;flex:1;height:20px;border:1px solid var(--dvw-accent);background:var(--dvw-surface-1);color:var(--dvw-text);font:inherit;outline:0}.dvw-tree-status{margin-left:auto;padding-left:6px;font-size:11px;font-weight:600;color:var(--dvw-warn)}.dvw-tree-status[data-status=M]{color:var(--dvw-warn)}.dvw-tree-status[data-status=A]{color:var(--dvw-success)}.dvw-tree-status[data-status=D]{color:var(--dvw-error)}.dvw-context-menu{position:fixed;z-index:40;min-width:148px;padding:4px;border:1px solid var(--dvw-border);border-radius:5px;background:var(--dvw-surface-3);box-shadow:0 6px 20px rgba(0,0,0,.3)}.dvw-context-menu button{width:100%;height:28px;border:0;border-radius:3px;background:transparent;color:var(--dvw-text);display:flex;align-items:center;gap:8px;padding:0 8px;text-align:left;font:inherit;cursor:pointer}.dvw-context-menu button:hover{background:var(--dvw-hover)}.dvw-context-menu .dvw-context-delete{color:var(--dvw-error)}
+.dvw-overlay *{box-sizing:border-box}.dvw-activity{grid-row:1/3;background:var(--dvw-base);border-right:1px solid var(--dvw-border-soft);display:flex;flex-direction:column;align-items:center}.dvw-act{width:48px;height:48px;border:0;border-left:2px solid transparent;background:transparent;color:var(--dvw-text-3);font-size:22px;cursor:pointer}.dvw-act:hover,.dvw-act[data-active=true]{color:var(--dvw-text)}.dvw-act[data-active=true]{border-left-color:var(--dvw-accent)}.dvw-act.dsh{margin-top:auto}.dvw-side{grid-column:2;grid-row:1/3;min-width:0;width:100%;background:var(--dvw-surface-1);border-right:1px solid var(--dvw-border);display:flex;flex-direction:column}.dvw-side-resizer{grid-column:2;grid-row:1/3;justify-self:end;width:7px;height:100%;z-index:4;cursor:ew-resize;transform:translateX(3px);touch-action:none}.dvw-side-resizer:hover,.dvw-side-resizer:active{background:var(--dvw-accent)}.dvw-side-head{height:36px;display:flex;align-items:center;padding:0 12px;text-transform:uppercase;font-size:11px;letter-spacing:.4px}.dvw-toolbar{margin-left:auto;display:flex;gap:2px}.dvw-icon{border:0;background:transparent;color:var(--dvw-text-2);border-radius:4px;min-width:24px;height:24px;display:inline-grid;place-items:center;cursor:pointer}.dvw-icon:hover{background:var(--dvw-hover);color:var(--dvw-text)}.dvw-icon:disabled{opacity:.45;cursor:default}.dvw-file-picker{display:none}.dvw-tree,.dvw-results,.dvw-git{overflow:auto;flex:1}.dvw-tree[data-drop-target=true]{outline:1px dashed var(--dvw-accent);outline-offset:-3px}.dvw-tree-row{display:flex;align-items:center;height:24px;padding-right:6px;cursor:pointer;white-space:nowrap}.dvw-tree-row:hover{background:var(--dvw-hover)}.dvw-tree-row[data-selected=true],.dvw-tree-row[data-drop-target=true]{background:var(--dvw-active)}.dvw-chevron{width:16px;flex:none;text-align:center;color:var(--dvw-text-3)}.dvw-file-icon{width:18px;flex:none;color:var(--dvw-text-2)}.dvw-file-icon.folder{color:var(--dvw-accent)}.dvw-tree-name{overflow:hidden;text-overflow:ellipsis}.dvw-tree-rename,.dvw-tree-create-input{min-width:0;flex:1;height:20px;border:1px solid var(--dvw-accent);border-radius:0;background:var(--dvw-surface-1);color:var(--dvw-text);padding:0 3px;font:inherit;letter-spacing:0;outline:0}.dvw-tree-create-row{cursor:text}.dvw-tree-create-row:hover{background:transparent}.dvw-tree-create-input::placeholder{color:var(--dvw-text-3)}.dvw-tree-create-input[aria-invalid=true]{border-color:var(--dvw-error)}.dvw-tree-create-error{min-height:20px;padding-top:2px;padding-right:6px;padding-bottom:3px;color:var(--dvw-error);font-size:11px;line-height:15px;white-space:normal;overflow-wrap:anywhere}.dvw-tree-status{margin-left:auto;padding-left:6px;font-size:11px;font-weight:600;color:var(--dvw-warn)}.dvw-tree-status[data-status=M]{color:var(--dvw-warn)}.dvw-tree-status[data-status=A]{color:var(--dvw-success)}.dvw-tree-status[data-status=D]{color:var(--dvw-error)}.dvw-context-menu{position:fixed;z-index:40;min-width:148px;padding:4px;border:1px solid var(--dvw-border);border-radius:5px;background:var(--dvw-surface-3);box-shadow:0 6px 20px rgba(0,0,0,.3)}.dvw-context-menu button{width:100%;height:28px;border:0;border-radius:3px;background:transparent;color:var(--dvw-text);display:flex;align-items:center;gap:8px;padding:0 8px;text-align:left;font:inherit;cursor:pointer}.dvw-context-menu button:hover{background:var(--dvw-hover)}.dvw-context-menu .dvw-context-delete{color:var(--dvw-error)}
 .dvw-main{grid-column:3;grid-row:1;display:flex;min-width:0;min-height:0;flex-direction:column;background:var(--dvw-surface-1)}.dvw-tabs{height:36px;background:var(--dvw-base);display:flex;overflow-x:auto}.dvw-tab{height:36px;min-width:110px;max-width:260px;border:0;border-right:1px solid var(--dvw-border-soft);background:var(--dvw-base);color:var(--dvw-text-2);padding:0 8px 0 12px;display:flex;align-items:center;gap:8px;cursor:pointer}.dvw-tab[data-active=true]{background:var(--dvw-surface-1);color:var(--dvw-text);border-top:1px solid var(--dvw-accent)}.dvw-tab-name{overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}.dvw-editor{position:relative;flex:1;min-height:0}.dvw-editor-toolbar{position:absolute;z-index:3;top:0;right:0;left:0;height:36px;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:0 10px;border-bottom:1px solid var(--dvw-border-soft);background:var(--dvw-surface-1)}.dvw-editor-body{position:absolute;inset:0;min-height:0}.dvw-editor-body[data-toolbar=true]{top:36px}.dvw-mode-button{height:27px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--dvw-text-2);cursor:pointer}.dvw-mode-button:hover{background:var(--dvw-hover)}.dvw-mode-button[data-active=true]{border-color:var(--dvw-border);background:var(--dvw-active);color:var(--dvw-text)}.dvw-empty{height:100%;display:grid;place-items:center;color:var(--dvw-text-3);text-align:center}.dvw-empty strong{font-size:24px;color:var(--dvw-text-2)}.dvw-message{padding:12px;color:var(--dvw-warn)}
 .dvw-bottom{grid-column:3;grid-row:2;height:260px;min-height:120px;border-top:1px solid var(--dvw-border);background:var(--dvw-base);display:flex;flex-direction:column}.dvw-bottom-head{height:35px;display:flex;align-items:center;gap:14px;padding:0 12px}.dvw-bottom-title{border:0;border-bottom:1px solid var(--dvw-text);background:transparent;color:var(--dvw-text);height:35px}.dvw-bottom-body{flex:1;min-height:0}.dvw-status{grid-column:1/4;grid-row:3;background:var(--dvw-accent);color:#fff;display:flex;align-items:center;padding:0 8px;gap:18px;font-size:12px}.dvw-theme-control{position:relative;margin-left:auto}.dvw-theme-trigger{height:22px;min-width:112px;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:5px;background:color-mix(in srgb,#000 17%,transparent);color:#fff;cursor:pointer}.dvw-theme-trigger:hover{background:color-mix(in srgb,#000 27%,transparent)}.dvw-theme-orb{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:linear-gradient(90deg,#17181c 50%,#fff 50%)}.dvw-theme-orb.dark{background:#17181c}.dvw-theme-orb.light{background:#fff}.dvw-theme-menu{position:absolute;right:0;bottom:29px;width:224px;padding:6px;border:1px solid var(--dvw-border);border-radius:10px;background:var(--dvw-surface-3);box-shadow:0 10px 35px rgba(0,0,0,.28);color:var(--dvw-text)}.dvw-theme-menu button{width:100%;min-height:48px;border:0;border-radius:7px;background:transparent;color:inherit;display:grid;grid-template-columns:30px 1fr 20px;align-items:center;text-align:left;padding:6px;cursor:pointer}.dvw-theme-menu button:hover,.dvw-theme-menu button[aria-checked=true]{background:var(--dvw-hover)}.dvw-theme-menu strong,.dvw-theme-menu small{display:block}.dvw-theme-menu small{color:var(--dvw-text-3);margin-top:2px}.dvw-theme-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--dvw-border);background:linear-gradient(135deg,#17181c 0 50%,#fff 50%)}.dvw-theme-swatch.dark{background:#17181c}.dvw-theme-swatch.light{background:#fff}
 .dvw-search-form{padding:8px;display:grid;gap:6px}.dvw-input,.dvw-textarea,.dvw-select{width:100%;border:1px solid var(--dvw-border);background:var(--dvw-surface-2);color:var(--dvw-text);padding:5px 7px;outline:none}.dvw-input:focus,.dvw-textarea:focus,.dvw-select:focus{border-color:var(--dvw-accent)}.dvw-options{display:flex;align-items:center;gap:8px;font-size:11px}.dvw-result-file{padding:5px 8px;font-weight:600}.dvw-result{padding:4px 8px 4px 20px;cursor:pointer;display:flex;gap:8px}.dvw-result:hover{background:var(--dvw-hover)}.dvw-line{color:var(--dvw-text-3);min-width:30px;text-align:right}.dvw-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -6319,7 +6459,7 @@ body[data-ds-dark-theme] .dvw-overlay,.dvw-overlay[data-dvw-theme=dark]{color-sc
 .dvw-chat{grid-column:4;grid-row:1/3;min-width:0;background:var(--dvw-base);border-left:1px solid var(--dvw-border);position:relative}
 .dvw-chat-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 12px;border-bottom:1px solid var(--dvw-border);background:var(--dvw-base);font-weight:600}
 .dvw-chat-head>span{display:flex;align-items:center;gap:7px}.dvw-chat-body{height:calc(100% - 36px);background:var(--dvw-base)}
-.dvw-dsh-mark{min-width:18px;height:18px;display:inline-grid;place-items:center;color:currentColor;font-size:0}.dvw-dsh-mark svg{display:block}
+.dvw-dsh-mark{display:block}
 .dvw-chat-resizer{position:fixed;top:0;right:calc(var(--dvw-chat-width) - 4px);bottom:0;width:8px;z-index:4;cursor:ew-resize;touch-action:none}
 .dvw-chat-resizer:hover,.dvw-chat-resizer:active{background:var(--dvw-accent)}
 .dvw-chat-toggle{position:absolute;z-index:5;top:6px;right:6px;border:1px solid var(--dvw-border);background:var(--dvw-base)}