dsh-flyout-sidebar 0.1.2 → 0.1.4

package/dist/client.js

@@ -23,7 +23,9 @@
 		ctx = context;
 	}
 	async function getJson(url) {
-		return (await fetch(url)).json();
+		const res = await fetch(url);
+		if (!res.ok) throw new Error("HTTP " + res.status + " " + url);
+		return res.json();
 	}
 	/** 组装查询串：空值参数不下发（与旧版 URL 形态一致） */
 	function qs(...pairs) {
@@ -38,11 +40,17 @@
 		gitDiff(path, sessionId) {
 			return getJson("/flyout-sidebar/gitdiff" + qs(["path", path], ["sessionId", sessionId]));
 		},
-		readArtifact(path) {
-			return getJson("/flyout-sidebar/content" + qs(["path", path]));
+		readArtifact(path, sessionId) {
+			return getJson("/flyout-sidebar/content" + qs(["path", path], ["sessionId", sessionId]));
 		},
 		listDir(path, sessionId) {
 			return getJson("/flyout-sidebar/listdir" + qs(["path", path], ["sessionId", sessionId]));
+		},
+		searchFiles(query, sessionId) {
+			return getJson("/flyout-sidebar/search" + qs(["q", query], ["sessionId", sessionId]));
+		},
+		openInEditor(path, sessionId) {
+			return getJson("/flyout-sidebar/open" + qs(["path", path], ["sessionId", sessionId]));
 		}
 	};
 	//#endregion
@@ -121,7 +129,7 @@ body[data-dsh-flyout-dragging] .artifacts-preview-overlay { transition: none; }
 .artifacts-ptab-close:hover { background: var(--dsw-alias-interactive-bg-hover-accent, rgba(0, 0, 0, 0.08)); }
 .artifacts-preview-hide {
   flex: none; width: 32px; display: inline-flex; align-items: center; justify-content: center;
-  border: none; border-left: 1px solid var(--dsw-alias-border-l1); background: transparent;
+  border: none; border-right: 1px solid var(--dsw-alias-border-l1); background: transparent;
   color: var(--dsw-alias-label-secondary); cursor: pointer; padding: 0;
 }
 .artifacts-preview-hide:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
@@ -156,6 +164,7 @@ body[data-dsh-flyout-dragging] .artifacts-preview-overlay { transition: none; }
   color: var(--dsw-alias-label-secondary); cursor: pointer;
 }
 .artifacts-toggle:hover { color: var(--dsw-alias-label-primary); }
+.artifacts-toggle.is-active { color: var(--dsw-alias-state-business-primary); }
 .artifacts-link { color: var(--dsw-alias-state-business-primary); text-decoration: none; padding: 4px; border-radius: 6px; display: inline-flex; align-items: center; }
 .artifacts-link:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .artifacts-iconbtn {
@@ -231,6 +240,9 @@ body[data-dsh-flyout-dragging] .artifacts-preview-overlay { transition: none; }
 .artifacts-markdown blockquote { border-left: 3px solid var(--dsw-alias-border-l2); margin: 8px 0; padding: 2px 12px; color: var(--dsw-alias-label-secondary); }
 .artifacts-markdown ul, .artifacts-markdown ol { padding-left: 24px; }
 .artifacts-markdown a { color: var(--dsw-alias-state-business-primary); }
+.artifacts-markdown table { display: block; overflow-x: auto; border-collapse: collapse; margin: 10px 0; }
+.artifacts-markdown th, .artifacts-markdown td { border: 1px solid var(--dsw-alias-border-l2); padding: 4px 10px; text-align: left; }
+.artifacts-markdown th { background: var(--dsw-alias-bg-layer-1); font-weight: 600; }
 .artifacts-diff { border-top: 1px solid var(--dsw-alias-border-l2); }
 .artifacts-diff-block { border-bottom: 1px solid var(--dsw-alias-border-l1); }
 .artifacts-diff-label { font-size: 11px; padding: 4px 12px; font-weight: 600; }
@@ -263,6 +275,11 @@ body[data-ds-dark-theme] .gd-add { color: #69db7c; }
 body[data-ds-dark-theme] .gd-del { color: #faa2c1; }
 .artifacts-tree { display: flex; flex-direction: column; height: 100%; min-height: 0; }
 .artifacts-tree-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 6px 8px; }
+.artifacts-searchbar { flex: none; padding: 8px 10px 4px; }
+.artifacts-search-input { box-sizing: border-box; width: 100%; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font: inherit; border-radius: 8px; padding: 5px 10px; outline: none; }
+.artifacts-search-input:focus { border-color: var(--dsw-alias-button-primary-fill); }
+.artifacts-search-input::placeholder { color: var(--dsw-alias-label-tertiary); }
+.artifacts-search-dir { color: var(--dsw-alias-label-tertiary); font-size: 11px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .artifacts-tree-row { box-sizing: border-box; width: 100%; height: 34px; font: var(--dsw-font-s-14); color: var(--dsw-alias-label-primary); text-align: left; cursor: pointer; white-space: nowrap; background: transparent; border: none; border-radius: 8px; align-items: center; gap: 6px; padding: 0 8px; display: flex; animation: artifacts-row-in .15s var(--ds-ease-in-out, ease); }
 .artifacts-tree-row:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .artifacts-tree-dir { font: var(--dsw-font-s-strong-14); }
@@ -275,6 +292,14 @@ body[data-ds-dark-theme] .gd-del { color: #faa2c1; }
 .artifacts-tree-copied { font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary); flex: none; }
 .artifacts-tree-loading { cursor: default; color: var(--dsw-alias-label-tertiary); font-size: 12px; }
 .artifacts-tree-error { cursor: default; color: var(--dsw-alias-state-error-primary); font-size: 12px; }
+.artifacts-tree-fail { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
+.artifacts-tree-fail .artifacts-tree-error { text-align: center; word-break: break-all; }
+.artifacts-retry {
+  padding: 4px 16px; font-size: 12px; cursor: pointer; border-radius: 6px;
+  border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+}
+.artifacts-retry:hover { background: var(--dsw-alias-interactive-bg-hover); }
 @keyframes artifacts-row-in { 0% { opacity: 0 } }
 .artifacts-settings { display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
 .artifacts-setintro { color: var(--dsw-alias-label-tertiary); margin: 0; padding: 0 2px; font-size: 13px; line-height: 20px; }
@@ -294,13 +319,22 @@ body[data-ds-dark-theme] .gd-del { color: #faa2c1; }
 .artifacts-switch input:focus-visible + .artifacts-switch-track { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 2px; }
 .artifacts-setcontrol { flex: none; align-items: center; gap: 6px; display: flex; }
 .artifacts-widthinput { width: 76px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font: inherit; border-radius: 6px; padding: 4px 8px; }
+.artifacts-langselect { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font: inherit; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
 .artifacts-suffix { color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 22px; }
 .artifacts-code { display: flex; flex-direction: column; height: 100%; min-height: 0; }
-.artifacts-code-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; background: var(--shiki-background, var(--dsw-alias-markdown-code-block, var(--dsw-alias-bg-layer-1))); }
-.artifacts-code-gutter { flex: none; min-width: 2.2em; margin: 0; padding: 12px 6px 12px 8px; text-align: right; color: var(--dsw-alias-label-tertiary); border-right: 1px solid var(--dsw-alias-border-l1); position: sticky; left: 0; user-select: none; background: var(--shiki-background, var(--dsw-alias-markdown-code-block, var(--dsw-alias-bg-layer-1))); font: 12px/1.6 var(--dsh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: pre; }
-.artifacts-code-pre { flex: 1; margin: 0; padding: 12px; background: var(--shiki-background, var(--dsw-alias-markdown-code-block, var(--dsw-alias-bg-layer-1))); color: var(--shiki-foreground, var(--dsw-alias-label-primary)); font: 12px/1.6 var(--dsh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: pre; }
+/* 代码视图：逐行渲染（行 = 行号 + 代码），软换行时行号仍对齐 */
+.artifacts-code-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 0; background: var(--shiki-background, var(--dsw-alias-markdown-code-block, var(--dsw-alias-bg-layer-1))); }
+.artifacts-code-line { display: flex; align-items: flex-start; min-width: fit-content; }
+.artifacts-code-gutter { flex: none; min-width: 2.2em; padding: 0 6px 0 8px; text-align: right; color: var(--dsw-alias-label-tertiary); border-right: 1px solid var(--dsw-alias-border-l1); position: sticky; left: 0; user-select: none; background: var(--shiki-background, var(--dsw-alias-markdown-code-block, var(--dsw-alias-bg-layer-1))); font: 12px/1.6 var(--dsh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
+.artifacts-code-pre { flex: 1 0 auto; margin: 0; padding: 0 12px; color: var(--shiki-foreground, var(--dsw-alias-label-primary)); font: 12px/1.6 var(--dsh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: pre; }
 .artifacts-code-pre code { font: inherit; color: inherit; }
-.artifacts-code-line { display: block; }
+.artifacts-code-wrap .artifacts-code-pre { white-space: pre-wrap; word-break: break-all; }
+.artifacts-imgview { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; }
+.artifacts-imgview.is-dragging { cursor: grabbing; }
+.artifacts-imgview .artifacts-img { flex: none; margin: 16px; transform-origin: center; will-change: transform; }
+.artifacts-git-stats { flex: none; display: inline-flex; gap: 4px; font: 11px/16px var(--dsh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
+.artifacts-git-adds { color: var(--p-success-fg, #1a7f37); }
+.artifacts-git-dels { color: var(--p-error, #cf222e); }
 .tok-comment { color: #868e96; }
 .tok-string { color: #2f9e44; }
 .tok-number, .tok-bool, .tok-variable, .tok-hex, .tok-attr { color: #e8590c; }
@@ -385,11 +419,339 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		return m ? (m[1] || "").toLowerCase() : "";
 	}
 	//#endregion
-	//#region src/client/store.ts
-	const basename = (p) => {
-		const parts = String(p).split("/");
-		return parts[parts.length - 1] || p;
+	//#region src/shared/i18n.js
+	/**
+	* 共享：中英双语 UI 文案。
+	*
+	* 与 ext/highlight/markdown 一样遵守「可移植源码」约束：只能使用 JSDoc 标注
+	* 类型（不得出现 TS 语法注记）、不得引入本目录之外的依赖。本模块被同时用于：
+	* 1. tsdown 打包进 client 侧（浏览器 React bundle）；
+	* 2. tsdown 构建期经 `?raw` 读入原始文本，内联进独立弹出页 /flyout-sidebar
+	*    的经典 <script>（见 src/host/page.ts）。
+	*
+	* 语言选择：localStorage `dsh-flyout-sidebar:lang`（'zh' | 'en'，主面板的
+	* 设置项写入、弹出页读取），未设置时按浏览器语言自动判定。`t(key)` 取当前
+	* 语言文案，缺失时回退另一语言、再回退 key 本身。
+	*/
+	/** @type {Record<string, string>} */
+	const ZH = {
+		loading: "加载中…",
+		loadingTree: "加载文件树…",
+		loadingChanges: "加载变更列表…",
+		loadingPdf: "加载 PDF…",
+		searching: "搜索中…",
+		emptyDir: "（空目录）",
+		noChanges: "没有未提交的变更",
+		noChangesHead: "没有未提交的变更（相对于 HEAD）",
+		noResults: "没有匹配的文件",
+		readFailed: "读取失败",
+		retry: "重试",
+		gitStatusFailed: "git status 失败",
+		imageLoadFailed: "图片加载失败",
+		pdfLoadFailed: "pdf.js 加载失败",
+		searchFailed: "搜索失败",
+		treeLoadFailed: "加载失败",
+		truncated: "（已截断的预览）",
+		copied: "已复制",
+		copiedPath: "已复制路径",
+		copiedRef: "已复制 @引用（未能写入输入框）",
+		insertedInput: "已插入输入框",
+		refBtn: "@引用",
+		refTitle: "引用到输入框（失败则复制 @path）",
+		refFlyoutTitle: "复制 @path 引用",
+		copyPath: "复制路径",
+		refInput: "@引用到输入框",
+		collapsePanel: "收起侧边栏",
+		panelAria: "文件面板",
+		flyoutTitle: "弹出式侧边栏",
+		flyoutOpen: "弹出式侧边栏 — 在新标签页打开（可拖到另一块显示器）",
+		resizeHandle: "拖动调整宽度",
+		resizePanel: "拖动调整面板宽度",
+		refreshTree: "刷新文件树",
+		refreshChanges: "刷新变更列表",
+		refresh: "刷新",
+		viewGit: "查看 Git 变更（未提交）",
+		backToFiles: "返回文件列表",
+		hidePreview: "隐藏预览（标签页保留）",
+		closeTab: "关闭标签页",
+		previewRegion: "文件预览",
+		diffTabPrefix: "[diff] ",
+		searchPlaceholder: "搜索文件…",
+		searchToggle: "搜索文件",
+		hintClickGit: "点击右侧变更文件查看 diff",
+		hintClickTree: "点击右侧文件查看内容",
+		movePanelLeft: "将文件面板移到左侧",
+		movePanelRight: "将文件面板移到右侧",
+		statusU: "未跟踪",
+		statusA: "新增",
+		statusM: "修改",
+		statusD: "删除",
+		statusR: "重命名",
+		statusC: "复制",
+		statusT: "类型变更",
+		staged: "（已暂存）",
+		unstaged: "（未暂存）",
+		diffDeleted: "- 删除",
+		diffAdded: "+ 新增",
+		zoomOut: "缩小",
+		zoomIn: "放大",
+		prevPage: "上一页",
+		nextPage: "下一页",
+		settingsIntro: "管理「Flyout Sidebar」的显示与行为。",
+		setDefaultOpen: "默认展开",
+		setDefaultOpenDesc: "页面加载后侧边栏默认展开；关闭则默认收起，点右上角图标再打开。",
+		setAutoRefresh: "自动刷新",
+		setAutoRefreshDesc: "开启后侧边栏展开时将即时同步并更新产物列表",
+		setFileTree: "文件树",
+		setFileTreeDesc: "在侧边栏显示「文件树」标签页，浏览工作区目录。",
+		setMinWidth: "最短面板宽度",
+		setMinWidthDesc: "面板的最小宽度（占窗口宽度的百分比，20–60）；更宽可通过拖动面板左边缘调整。",
+		setCodeWrap: "代码换行",
+		setCodeWrapDesc: "代码预览长行软换行；关闭则横向滚动。",
+		wordWrap: "自动换行",
+		openInEditor: "在系统编辑器打开",
+		openedInEditor: "已在编辑器打开",
+		openFailed: "打开失败",
+		setLang: "界面语言",
+		setLangDesc: "侧边栏与独立弹出页的显示语言；独立弹出页需刷新后生效。",
+		langAuto: "跟随浏览器",
+		langZh: "中文",
+		langEn: "English"
+	};
+	/** @type {Record<string, string>} */
+	const EN = {
+		loading: "Loading…",
+		loadingTree: "Loading file tree…",
+		loadingChanges: "Loading change list…",
+		loadingPdf: "Loading PDF…",
+		searching: "Searching…",
+		emptyDir: "(empty directory)",
+		noChanges: "No uncommitted changes",
+		noChangesHead: "No uncommitted changes (relative to HEAD)",
+		noResults: "No matching files",
+		readFailed: "Failed to read",
+		retry: "Retry",
+		gitStatusFailed: "git status failed",
+		imageLoadFailed: "Failed to load image",
+		pdfLoadFailed: "Failed to load pdf.js",
+		searchFailed: "Search failed",
+		treeLoadFailed: "Failed to load",
+		truncated: "(truncated preview)",
+		copied: "Copied",
+		copiedPath: "Path copied",
+		copiedRef: "Copied @reference (could not write to input box)",
+		insertedInput: "Inserted into input box",
+		refBtn: "@ref",
+		refTitle: "Quote into input box (falls back to copying @path)",
+		refFlyoutTitle: "Copy @path reference",
+		copyPath: "Copy path",
+		refInput: "@reference into input box",
+		collapsePanel: "Collapse sidebar",
+		panelAria: "File panel",
+		flyoutTitle: "Flyout sidebar",
+		flyoutOpen: "Flyout sidebar — open in a new tab (drag to another display)",
+		resizeHandle: "Drag to resize",
+		resizePanel: "Drag to resize panel",
+		refreshTree: "Refresh file tree",
+		refreshChanges: "Refresh change list",
+		refresh: "Refresh",
+		viewGit: "View Git changes (uncommitted)",
+		backToFiles: "Back to file list",
+		hidePreview: "Hide preview (tabs are kept)",
+		closeTab: "Close tab",
+		previewRegion: "File preview",
+		diffTabPrefix: "[diff] ",
+		searchPlaceholder: "Search files…",
+		searchToggle: "Search files",
+		hintClickGit: "Click a changed file to view its diff",
+		hintClickTree: "Click a file to view its content",
+		movePanelLeft: "Move file panel to the left",
+		movePanelRight: "Move file panel to the right",
+		statusU: "Untracked",
+		statusA: "Added",
+		statusM: "Modified",
+		statusD: "Deleted",
+		statusR: "Renamed",
+		statusC: "Copied",
+		statusT: "Type change",
+		staged: "(staged)",
+		unstaged: "(unstaged)",
+		diffDeleted: "- Deleted",
+		diffAdded: "+ Added",
+		zoomOut: "Zoom out",
+		zoomIn: "Zoom in",
+		prevPage: "Previous page",
+		nextPage: "Next page",
+		settingsIntro: "Manage the display and behavior of \"Flyout Sidebar\".",
+		setDefaultOpen: "Open by default",
+		setDefaultOpenDesc: "Expand the sidebar on page load; when off it stays collapsed until the corner icon is clicked.",
+		setAutoRefresh: "Auto refresh",
+		setAutoRefreshDesc: "Keep the artifact list in sync while the sidebar is open",
+		setFileTree: "File tree",
+		setFileTreeDesc: "Show the \"File tree\" tab in the sidebar to browse the workspace directory.",
+		setMinWidth: "Minimum panel width",
+		setMinWidthDesc: "Minimum width of the panel (percentage of window width, 20–60); drag the panel edge to go wider.",
+		setCodeWrap: "Code wrap",
+		setCodeWrapDesc: "Soft-wrap long lines in code previews; when off they scroll horizontally.",
+		wordWrap: "Word wrap",
+		openInEditor: "Open in system editor",
+		openedInEditor: "Opened in editor",
+		openFailed: "Failed to open",
+		setLang: "Interface language",
+		setLangDesc: "Display language for the sidebar and the standalone flyout page (flyout requires a reload).",
+		langAuto: "Auto (browser)",
+		langZh: "中文",
+		langEn: "English"
 	};
+	/** @type {Record<string, Record<string, string>>} */
+	const DICTS = {
+		zh: ZH,
+		en: EN
+	};
+	const LANG_KEY = "dsh-flyout-sidebar:lang";
+	/** @type {'zh' | 'en' | null} 已显式选择的语言（null = 跟随浏览器自动判定） */
+	let explicitLang = null;
+	/** @type {Array<(lang: string) => void>} */
+	let listeners = [];
+	function readStoredLang() {
+		try {
+			var v = localStorage.getItem(LANG_KEY);
+			return v === "zh" || v === "en" ? v : null;
+		} catch (e) {
+			return null;
+		}
+	}
+	/** 浏览器语言自动判定：非 zh 开头一律英文 */
+	function autoLang() {
+		try {
+			var langs = navigator.languages || (navigator.language ? [navigator.language] : []);
+			for (var i = 0; i < langs.length; i++) {
+				var l = String(langs[i] || "").toLowerCase();
+				if (l.indexOf("zh") === 0) return "zh";
+				if (l.indexOf("en") === 0) return "en";
+			}
+		} catch (e) {}
+		return "en";
+	}
+	function currentLang() {
+		if (explicitLang === null) explicitLang = readStoredLang();
+		return explicitLang || autoLang();
+	}
+	/**
+	* @param {string} key 文案键
+	* @returns {string} 当前语言文案；两级回退（另一语言 → key）
+	*/
+	function t(key) {
+		var lang = currentLang();
+		var dict = DICTS[lang] || EN;
+		if (dict[key] != null) return dict[key];
+		var other = DICTS[lang === "zh" ? "en" : "zh"];
+		if (!other) return key;
+		return other[key] != null ? other[key] : key;
+	}
+	/** @returns {'zh' | 'en'} 当前生效语言（含自动判定的结果） */
+	function getLang() {
+		return currentLang();
+	}
+	/** @returns {'zh' | 'en' | null} 用户显式选择的语言（null = 跟随浏览器） */
+	function getExplicitLang() {
+		if (explicitLang === null) explicitLang = readStoredLang();
+		return explicitLang;
+	}
+	/**
+	* 显式设置语言并持久化（null = 恢复跟随浏览器）。
+	* @param {'zh' | 'en' | null} lang
+	*/
+	function setLang(lang) {
+		explicitLang = lang;
+		try {
+			if (lang === null) localStorage.removeItem(LANG_KEY);
+			else localStorage.setItem(LANG_KEY, lang);
+		} catch (e) {}
+		var next = listeners.slice();
+		for (var i = 0; i < next.length; i++) {
+			var fn = next[i];
+			if (!fn) continue;
+			try {
+				fn(currentLang());
+			} catch (e) {}
+		}
+	}
+	/** @param {(lang: string) => void} fn @returns {() => void} 取消订阅 */
+	function subscribeLang(fn) {
+		listeners.push(fn);
+		return function() {
+			listeners = listeners.filter(function(f) {
+				return f !== fn;
+			});
+		};
+	}
+	//#endregion
+	//#region src/shared/gitui.js
+	/**
+	* 共享：git 变更列表 / diff 的纯展示逻辑。
+	*
+	* client 侧 React 组件与独立弹出页（page.ts 内联脚本）共用，避免双端各自
+	* 实现后细节漂移。与 ext/highlight/markdown 一样遵守「可移植源码」约束：
+	* 只能使用 JSDoc 标注类型、依赖仅限本目录（i18n 的 t 在内联场景由同作用域
+	* 函数声明提升提供）。
+	*/
+	/** @param {string} p @returns {string} */
+	function basename(p) {
+		var parts = String(p).split("/");
+		return parts[parts.length - 1] || p;
+	}
+	/**
+	* 变更文件的状态徽章字母：未跟踪为 U，否则取工作树状态（y），再退到暂存
+	* 状态（x），空缺按 M。
+	* @param {{ x: string, y: string }} e @returns {string}
+	*/
+	function gitLabel(e) {
+		if (e.x === "?" || e.y === "?") return "U";
+		return (e.y !== " " ? e.y : e.x) || "M";
+	}
+	/**
+	* 变更文件行 hover 提示：状态名 + 暂存/未暂存。
+	* @param {{ x: string, y: string }} e @returns {string}
+	*/
+	function gitTitle(e) {
+		var label = gitLabel(e);
+		/** @type {Record<string, string>} */
+		var map = {
+			U: t("statusU"),
+			A: t("statusA"),
+			M: t("statusM"),
+			D: t("statusD"),
+			R: t("statusR"),
+			C: t("statusC"),
+			T: t("statusT")
+		};
+		var staged = e.x !== " " && e.x !== "?";
+		return (map[label] || label) + (staged ? t("staged") : t("unstaged"));
+	}
+	/**
+	* unified diff 单行的样式类：hunk / 增 / 删 / 元信息（diff --git、index、
+	* rename 等），其余为普通行。
+	* @param {string} line @returns {string}
+	*/
+	function gitDiffLineClass(line) {
+		var cls = "gd-line";
+		if (line.indexOf("@@") === 0) cls += " gd-hunk";
+		else if (line.charAt(0) === "+" && line.indexOf("+++") !== 0) cls += " gd-add";
+		else if (line.charAt(0) === "-" && line.indexOf("---") !== 0) cls += " gd-del";
+		else if (line.indexOf("diff ") === 0 || line.indexOf("index ") === 0 || line.indexOf("--- ") === 0 || line.indexOf("+++ ") === 0 || line.indexOf("new file") === 0 || line.indexOf("deleted file") === 0 || line.indexOf("old mode") === 0 || line.indexOf("new mode") === 0 || line.indexOf("rename ") === 0 || line.indexOf("similarity ") === 0 || line.indexOf("copy ") === 0 || line.indexOf("Binary files") === 0 || line.charAt(0) === "\\") cls += " gd-meta";
+		return cls;
+	}
+	//#endregion
+	//#region src/client/store.ts
+	/**
+	* Client 侧：共享状态与工具函数。
+	*
+	* - store / settingsStore：面板开关与功能设置（localStorage 持久化），
+	*   触发按钮与面板等组件通过 useOpen / useSettings 订阅。
+	* - currentSessionId / quoteToComposer：读取客户端会话库、把 @path 引用
+	*   写入会话输入框。
+	*/
 	/** 当前会话 id（读自客户端会话库；文件树把它传给 host 以定位工作区） */
 	function currentSessionId() {
 		try {
@@ -475,7 +837,8 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		autoRefresh: true,
 		minPanelWidth: 20,
 		showFileTree: true,
-		defaultOpen: true
+		defaultOpen: true,
+		codeWrap: false
 	};
 	function loadSettings() {
 		try {
@@ -518,7 +881,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 	};
 	store.open = !!settingsStore.get().defaultOpen;
 	const slideState = {
-		visible: store.open,
+		visible: true,
 		slidOut: !store.open
 	};
 	const slideListeners = [];
@@ -537,22 +900,8 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			fn(next);
 		} catch {}
 	};
-	let slideTimer = null;
 	store.subscribe((open) => {
-		if (open) {
-			if (slideTimer) {
-				clearTimeout(slideTimer);
-				slideTimer = null;
-			}
-			setSlide({ visible: true });
-			requestAnimationFrame(() => requestAnimationFrame(() => setSlide({ slidOut: false })));
-		} else {
-			setSlide({ slidOut: true });
-			slideTimer = setTimeout(() => {
-				slideTimer = null;
-				setSlide({ visible: false });
-			}, 240);
-		}
+		setSlide({ slidOut: !open });
 	});
 	const useSlide = () => {
 		const [s, setS] = React.useState({ ...slideState });
@@ -585,6 +934,22 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		}, []);
 		return sessionId;
 	}
+	/**
+	* 界面语言：订阅 i18n 的语言变更，语言切换时强制订阅组件重渲染（组件内的
+	* t() 调用随之取到新语言文案）。返回值用于设置区判断下拉框选项。
+	*/
+	function useLang() {
+		const [, force] = React.useReducer((n) => n + 1, 0);
+		React.useEffect(() => {
+			const unsubscribe = subscribeLang(() => force());
+			return () => unsubscribe();
+		}, []);
+		return getLang();
+	}
+	/** 当前设置语言：'zh' / 'en'（显式）或 null（跟随浏览器自动判定） */
+	const getLanguageSetting = getExplicitLang;
+	/** 设置界面语言并持久化；null = 恢复跟随浏览器 */
+	const setLanguage = setLang;
 	//#endregion
 	//#region src/shared/highlight.js
 	/**
@@ -841,6 +1206,67 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		const fn = HL_ENGINES[hlLangOf(hint)];
 		return fn ? fn(String(src)) : escHtml(src);
 	}
+	/**
+	* 把 highlightCode 输出的 HTML 按源码行拆分成逐行 HTML 数组。跨行 token
+	* （块注释、Python 三引号串等）在行边界处闭合、下一行重新打开，保证逐行
+	* 渲染时着色与整块渲染一致。逐行渲染使行号与代码天然对齐（含软换行模式），
+	* 也是行级查找高亮的基础。
+	* @param {string} html highlightCode 的输出
+	* @returns {string[]}
+	*/
+	function splitHlLines(html) {
+		var lines = [];
+		var cur = "";
+		/** @type {string[]} */
+		var stack = [];
+		var i = 0;
+		var openAll = function() {
+			var s = "";
+			for (var k = 0; k < stack.length; k++) s += "<span class=\"" + stack[k] + "\">";
+			return s;
+		};
+		var closeAll = function() {
+			var s = "";
+			for (var k = 0; k < stack.length; k++) s += "</span>";
+			return s;
+		};
+		while (i < html.length) {
+			if (html.indexOf("<span class=\"", i) === i) {
+				var end = html.indexOf(">", i);
+				if (end < 0) {
+					cur += html.slice(i);
+					break;
+				}
+				cur += html.slice(i, end + 1);
+				stack.push(html.slice(i + 13, end - 1));
+				i = end + 1;
+				continue;
+			}
+			if (html.indexOf("</span>", i) === i) {
+				cur += "</span>";
+				stack.pop();
+				i += 7;
+				continue;
+			}
+			var nl = html.indexOf("\n", i);
+			var nextTag = html.indexOf("<", i);
+			if (nextTag >= 0 && (nl < 0 || nextTag < nl)) {
+				cur += html.slice(i, nextTag);
+				i = nextTag;
+				continue;
+			}
+			if (nl < 0) {
+				cur += html.slice(i);
+				break;
+			}
+			cur += html.slice(i, nl);
+			lines.push(cur + closeAll());
+			cur = openAll();
+			i = nl + 1;
+		}
+		lines.push(cur + closeAll());
+		return lines;
+	}
 	//#endregion
 	//#region src/shared/markdown.js
 	/**
@@ -852,17 +1278,69 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 	*/
 	/** @param {string} s @returns {string} */
 	function mdEscape(s) {
-		return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+		return String(s).replace(/[\u0000\u0001]/g, "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+	}
+	/**
+	* URL 白名单：只放行 http(s)、站内相对路径、页内锚点与 data:image/*，
+	* 其余（javascript:、vbscript: 及实体编码变体等）一律替换为 '#'，防止
+	* 预览渲染出来的链接/图片在点击时执行脚本。
+	* @param {string} u @returns {string}
+	*/
+	function mdSafeUrl(u) {
+		var s = String(u || "").replace(/[\s\u0000-\u001f]/g, "");
+		if (/^https?:\/\//i.test(s)) return s;
+		if (/^\/(?!\/)/.test(s) || /^\.{1,2}\//.test(s) || s.charAt(0) === "#") return s;
+		if (/^data:image\/(?:png|gif|jpeg|webp|bmp|avif);/i.test(s)) return s;
+		return "#";
 	}
 	/** @param {string} s @returns {string} */
 	function mdInline(s) {
-		s = s.replace(/`([^`]+)`/g, (m, c) => "<code>" + c + "</code>");
-		s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, "<img alt=\"$1\" src=\"$2\">");
-		s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, "<a href=\"$2\" target=\"_blank\" rel=\"noopener noreferrer\">$1</a>");
+		/** @type {string[]} */
+		const codes = [];
+		s = s.replace(/`([^`]+)`/g, (m, c) => {
+			codes.push("<code>" + c + "</code>");
+			return "\0" + (codes.length - 1) + "\0";
+		});
+		s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (m, alt, u) => "<img alt=\"" + alt + "\" src=\"" + mdSafeUrl(u) + "\">");
+		s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (m, text, u) => "<a href=\"" + mdSafeUrl(u) + "\" target=\"_blank\" rel=\"noopener noreferrer\">" + text + "</a>");
 		s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
 		s = s.replace(/\*([^*\n]+)\*/g, "<em>$1</em>");
+		s = s.replace(/\u0000(\d+)\u0000/g, (m, i) => codes[Number(i)] ?? "");
 		return s;
 	}
+	/**
+	* GFM 管道表格辅助：按未转义的 | 切分单元格（行内 \| 还原为字面量竖线），
+	* 并去掉首尾管道产生的空单元格。
+	* @param {string} line @returns {string[]}
+	*/
+	function mdSplitCells(line) {
+		const parts = String(line).replace(/\\\|/g, "").split("|");
+		for (let i = 0; i < parts.length; i += 1) parts[i] = (parts[i] || "").replace(/\u0002/g, "|").trim();
+		return parts;
+	}
+	/** @param {string[]} cells @returns {string[]} */
+	function mdTrimEdgeCells(cells) {
+		if (cells.length && cells[0] === "") cells.shift();
+		if (cells.length && cells[cells.length - 1] === "") cells.pop();
+		return cells;
+	}
+	/** @param {string[]} cells @returns {boolean} 是否为 GFM 分隔行（:--- / :---: / ---: 形态） */
+	function mdIsDelimiterRow(cells) {
+		return cells.length > 0 && cells.every((c) => /^:?-+:?$/.test(c));
+	}
+	/**
+	* @param {string} cell @returns {string} 'center' | 'right' | ''（left 与默认一致，不输出）
+	*/
+	function mdCellAlign(cell) {
+		if (/^:-+:$/.test(cell)) return "center";
+		if (/^:-+$/.test(cell)) return "left";
+		if (/^-+:$/.test(cell)) return "right";
+		return "";
+	}
+	/** @param {string} a @returns {string} 单元格对齐的内联样式属性 */
+	function mdAlignAttr(a) {
+		return a === "center" || a === "right" ? " style=\"text-align:" + a + "\"" : "";
+	}
 	/** @param {string} src @returns {string} HTML */
 	function mdToHtml(src) {
 		const lines = String(src || "").replace(/\r\n/g, "\n").split("\n");
@@ -931,6 +1409,35 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				i += 1;
 				continue;
 			}
+			if (line.indexOf("|") >= 0 && i + 1 < lines.length) {
+				const head = mdTrimEdgeCells(mdSplitCells(line));
+				const delim = mdTrimEdgeCells(mdSplitCells(lines[i + 1]));
+				if (head.length && mdIsDelimiterRow(delim)) {
+					const aligns = delim.map(mdCellAlign);
+					const colCount = head.length;
+					/** @type {string[][]} */
+					const rows = [];
+					i += 2;
+					while (i < lines.length && lines[i].trim() !== "" && lines[i].indexOf("|") >= 0) {
+						const cells = mdTrimEdgeCells(mdSplitCells(lines[i]));
+						/** @type {string[]} */
+						const padded = [];
+						for (let c = 0; c < colCount; c += 1) padded.push(cells[c] || "");
+						rows.push(padded);
+						i += 1;
+					}
+					let table = "<table><thead><tr>";
+					for (let c = 0; c < colCount; c += 1) table += "<th" + mdAlignAttr(aligns[c] || "") + ">" + mdInline(mdEscape(head[c] || "")) + "</th>";
+					table += "</tr></thead><tbody>";
+					for (const cells of rows) {
+						table += "<tr>";
+						for (let c = 0; c < colCount; c += 1) table += "<td" + mdAlignAttr(aligns[c] || "") + ">" + mdInline(mdEscape(cells[c] || "")) + "</td>";
+						table += "</tr>";
+					}
+					out.push(table + "</tbody></table>");
+					continue;
+				}
+			}
 			out.push("<p>" + mdInline(mdEscape(line)) + "</p>");
 			i += 1;
 		}
@@ -943,15 +1450,23 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 	* 自定义 pdf.js 渲染器、Markdown / 图片 / HTML 沙箱、多类型分发。
 	*/
 	function renderDiff(diff) {
-		return /* @__PURE__ */ h("div", { className: "artifacts-diff" }, diff && diff.before != null && diff.before !== "" ? /* @__PURE__ */ h("div", { className: "artifacts-diff-block artifacts-diff-del" }, /* @__PURE__ */ h("div", { className: "artifacts-diff-label" }, "- 删除"), /* @__PURE__ */ h("pre", { className: "artifacts-diff-pre" }, diff.before)) : null, /* @__PURE__ */ h("div", { className: "artifacts-diff-block artifacts-diff-add" }, /* @__PURE__ */ h("div", { className: "artifacts-diff-label" }, "+ 新增"), /* @__PURE__ */ h("pre", { className: "artifacts-diff-pre" }, diff && diff.after != null ? diff.after : "")));
+		return /* @__PURE__ */ h("div", { className: "artifacts-diff" }, diff && diff.before != null && diff.before !== "" ? /* @__PURE__ */ h("div", { className: "artifacts-diff-block artifacts-diff-del" }, /* @__PURE__ */ h("div", { className: "artifacts-diff-label" }, t("diffDeleted")), /* @__PURE__ */ h("pre", { className: "artifacts-diff-pre" }, diff.before)) : null, /* @__PURE__ */ h("div", { className: "artifacts-diff-block artifacts-diff-add" }, /* @__PURE__ */ h("div", { className: "artifacts-diff-label" }, t("diffAdded")), /* @__PURE__ */ h("pre", { className: "artifacts-diff-pre" }, diff && diff.after != null ? diff.after : "")));
 	}
-	/** 代码预览：行号栏 + 语法高亮代码（共享高亮器，语言取自扩展名） */
-	function CodeView({ code, path }) {
-		const src = String(code || "");
-		return /* @__PURE__ */ h("div", { className: "artifacts-code" }, /* @__PURE__ */ h("div", { className: "artifacts-code-scroll" }, /* @__PURE__ */ h("pre", {
+	/** 代码预览：逐行渲染（行号 + 语法高亮同行内对齐，软换行也不串行）。
+	*  文内查找直接用浏览器原生 Ctrl/Cmd+F（真实 DOM 文本可搜）。 */
+	function CodeView({ code, path, wrap }) {
+		const src = String(code || "").replace(/\n$/, "");
+		const hlLines = React.useMemo(() => splitHlLines(highlightCode(src, fileExt(path || ""))), [src, path]);
+		return /* @__PURE__ */ h("div", { className: "artifacts-code" + (wrap ? " artifacts-code-wrap" : "") }, /* @__PURE__ */ h("div", { className: "artifacts-code-scroll" }, hlLines.map((line, i) => /* @__PURE__ */ h("div", {
+			key: i,
+			className: "artifacts-code-line"
+		}, /* @__PURE__ */ h("div", {
 			className: "artifacts-code-gutter",
 			"aria-hidden": "true"
-		}, src.replace(/\n$/, "").split("\n").map((_, i) => String(i + 1)).join("\n")), /* @__PURE__ */ h("pre", { className: "artifacts-code-pre" }, /* @__PURE__ */ h("code", { dangerouslySetInnerHTML: { __html: highlightCode(src, fileExt(path || "")) } }))));
+		}, i + 1), /* @__PURE__ */ h("div", {
+			className: "artifacts-code-pre",
+			dangerouslySetInnerHTML: { __html: line || "&nbsp;" }
+		})))));
 	}
 	let pdfjsPromise = null;
 	function loadPdfjs() {
@@ -969,7 +1484,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			s.async = true;
 			s.onload = () => {
 				try {
-					if (!window.pdfjsLib) throw new Error("pdf.js 加载失败");
+					if (!window.pdfjsLib) throw new Error(t("pdfLoadFailed"));
 					window.pdfjsLib.GlobalWorkerOptions.workerSrc = "/flyout-sidebar/pdfjs/pdf.worker.min.js";
 					resolve(window.pdfjsLib);
 				} catch (e) {
@@ -978,7 +1493,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			};
 			s.onerror = () => {
 				pdfjsPromise = null;
-				reject(/* @__PURE__ */ new Error("pdf.js 加载失败"));
+				reject(new Error(t("pdfLoadFailed")));
 			};
 			document.head.appendChild(s);
 		});
@@ -1096,7 +1611,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		const clampPage = (n) => Math.max(1, Math.min(pageCount || 1, n));
 		const goPage = (n) => setPageNo(clampPage(n));
 		const zoomBy = (f) => setZoom((z) => Math.max(.25, Math.min(4, Math.round(z * f * 100) / 100)));
-		if (phase === "loading") return /* @__PURE__ */ h("div", { className: "artifacts-pdfview" }, /* @__PURE__ */ h("div", { className: "artifacts-hint" }, "加载 PDF…"));
+		if (phase === "loading") return /* @__PURE__ */ h("div", { className: "artifacts-pdfview" }, /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("loadingPdf")));
 		if (phase === "error") return /* @__PURE__ */ h("embed", {
 			className: "artifacts-pdf",
 			src: "/flyout-sidebar/media?path=" + encodeURIComponent(path),
@@ -1107,25 +1622,25 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		return /* @__PURE__ */ h("div", { className: "artifacts-pdfview" }, /* @__PURE__ */ h("div", { className: "artifacts-pdfview-bar" }, /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-pdfview-btn",
-			title: "缩小",
+			title: t("zoomOut"),
 			disabled,
 			onClick: () => zoomBy(.8)
 		}, "−"), /* @__PURE__ */ h("span", { className: "artifacts-pdfview-zoom" }, Math.round(zoom * 100) + "%"), /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-pdfview-btn",
-			title: "放大",
+			title: t("zoomIn"),
 			disabled,
 			onClick: () => zoomBy(1.25)
 		}, "＋"), /* @__PURE__ */ h("span", { className: "artifacts-pdfview-spacer" }), /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-pdfview-btn",
-			title: "上一页",
+			title: t("prevPage"),
 			disabled: disabled || pageNo <= 1,
 			onClick: () => goPage(pageNo - 1)
 		}, "‹"), /* @__PURE__ */ h("span", { className: "artifacts-pdfview-page" }, pageNo + " / " + pageCount), /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-pdfview-btn",
-			title: "下一页",
+			title: t("nextPage"),
 			disabled: disabled || pageNo >= pageCount,
 			onClick: () => goPage(pageNo + 1)
 		}, "›")), /* @__PURE__ */ h("div", {
@@ -1136,33 +1651,93 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			className: "artifacts-pdfview-canvas"
 		})));
 	}
-	/** 统一 git diff 渲染：meta/hunk/+/- 行着色，等宽可滚动 */
+	/** 图片预览：滚轮缩放 + 拖拽平移 + 双击复位 */
+	function ImageView({ path }) {
+		const [scale, setScale] = React.useState(1);
+		const [offset, setOffset] = React.useState({
+			x: 0,
+			y: 0
+		});
+		const [dragging, setDragging] = React.useState(false);
+		const dragRef = React.useRef(null);
+		const wrapRef = React.useRef(null);
+		const src = "/flyout-sidebar/media?path=" + encodeURIComponent(path);
+		React.useEffect(() => {
+			const wrap = wrapRef.current;
+			if (!wrap) return;
+			const onWheel = (ev) => {
+				ev.preventDefault();
+				const factor = ev.deltaY < 0 ? 1.15 : 1 / 1.15;
+				setScale((sc) => Math.max(.1, Math.min(12, sc * factor)));
+			};
+			wrap.addEventListener("wheel", onWheel, { passive: false });
+			return () => wrap.removeEventListener("wheel", onWheel);
+		}, []);
+		React.useEffect(() => {
+			if (!dragging) return;
+			const onMove = (ev) => {
+				const start = dragRef.current;
+				if (!start) return;
+				setOffset({
+					x: start.ox + (ev.clientX - start.x),
+					y: start.oy + (ev.clientY - start.y)
+				});
+			};
+			const onUp = () => {
+				setDragging(false);
+				dragRef.current = null;
+			};
+			document.addEventListener("mousemove", onMove);
+			document.addEventListener("mouseup", onUp);
+			return () => {
+				document.removeEventListener("mousemove", onMove);
+				document.removeEventListener("mouseup", onUp);
+			};
+		}, [dragging]);
+		return /* @__PURE__ */ h("div", {
+			ref: wrapRef,
+			className: "artifacts-imgview" + (dragging ? " is-dragging" : ""),
+			onMouseDown: (ev) => {
+				ev.preventDefault();
+				dragRef.current = {
+					x: ev.clientX,
+					y: ev.clientY,
+					ox: offset.x,
+					oy: offset.y
+				};
+				setDragging(true);
+			},
+			onDoubleClick: () => {
+				setScale(1);
+				setOffset({
+					x: 0,
+					y: 0
+				});
+			}
+		}, /* @__PURE__ */ h("img", {
+			className: "artifacts-img",
+			draggable: false,
+			src,
+			alt: path,
+			style: { transform: "translate(" + offset.x + "px," + offset.y + "px) scale(" + scale + ")" }
+		}));
+	}
+	/** 统一 git diff 渲染：meta/hunk/+/- 行着色，等宽可滚动；行分类与独立弹出页共用 */
 	function GitDiffView({ diff }) {
 		const text = String(diff || "");
-		if (!text) return /* @__PURE__ */ h("div", { className: "artifacts-hint" }, "没有未提交的变更（相对于 HEAD）");
-		return /* @__PURE__ */ h("div", { className: "artifacts-gitdiff" }, text.replace(/\n$/, "").split("\n").map((line, i) => {
-			let cls = "gd-line";
-			if (line.startsWith("@@")) cls += " gd-hunk";
-			else if (line.startsWith("+") && !line.startsWith("+++")) cls += " gd-add";
-			else if (line.startsWith("-") && !line.startsWith("---")) cls += " gd-del";
-			else if (line.startsWith("diff ") || line.startsWith("index ") || line.startsWith("--- ") || line.startsWith("+++ ") || line.startsWith("new file") || line.startsWith("deleted file") || line.startsWith("old mode") || line.startsWith("new mode") || line.startsWith("rename ") || line.startsWith("similarity ") || line.startsWith("copy ") || line.startsWith("Binary files") || line.startsWith("\\")) cls += " gd-meta";
-			return /* @__PURE__ */ h("div", {
-				key: i,
-				className: cls
-			}, line);
-		}));
+		if (!text) return /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("noChangesHead"));
+		return /* @__PURE__ */ h("div", { className: "artifacts-gitdiff" }, text.replace(/\n$/, "").split("\n").map((line, i) => /* @__PURE__ */ h("div", {
+			key: i,
+			className: gitDiffLineClass(line)
+		}, line)));
 	}
-	function renderPreview(p) {
-		if (p.loading) return /* @__PURE__ */ h("div", { className: "artifacts-hint" }, "加载中…");
-		if (p.ok === false) return /* @__PURE__ */ h("div", { className: "artifacts-error" }, p.error || "读取失败");
+	function renderPreview(p, codeWrap = false) {
+		if (p.loading) return /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("loading"));
+		if (p.ok === false) return /* @__PURE__ */ h("div", { className: "artifacts-error" }, p.error || t("readFailed"));
 		if (p.git) return /* @__PURE__ */ h("div", { className: "artifacts-preview-body" }, /* @__PURE__ */ h(GitDiffView, { diff: p.diff }));
 		const type = p.type || extType(p.path);
 		let view;
-		if (type === "image") view = /* @__PURE__ */ h("img", {
-			className: "artifacts-img",
-			src: "/flyout-sidebar/media?path=" + encodeURIComponent(p.path || ""),
-			alt: p.path || ""
-		});
+		if (type === "image") view = /* @__PURE__ */ h(ImageView, { path: p.path || "" });
 		else if (type === "html") view = /* @__PURE__ */ h("iframe", {
 			className: "artifacts-iframe",
 			sandbox: "allow-scripts",
@@ -1176,8 +1751,9 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		});
 		else view = /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(CodeView, {
 			code: p.content,
-			path: p.path
-		}), p.truncated ? /* @__PURE__ */ h("div", { className: "artifacts-diff-label" }, "(truncated preview)") : null);
+			path: p.path,
+			wrap: codeWrap
+		}), p.truncated ? /* @__PURE__ */ h("div", { className: "artifacts-diff-label" }, t("truncated")) : null);
 		return /* @__PURE__ */ h("div", { className: "artifacts-preview-body" }, p.diff && typeof p.diff === "object" ? renderDiff(p.diff) : null, view);
 	}
 	//#endregion
@@ -1335,43 +1911,139 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		strokeLinecap: "round",
 		fill: "none"
 	}));
+	/** 搜索图标：放大镜（文件搜索开关） */
+	const SearchIcon = ({ size }) => /* @__PURE__ */ h("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ h("circle", {
+		cx: "7",
+		cy: "7",
+		r: "4.4",
+		stroke: "currentColor",
+		strokeWidth: 1.4
+	}), /* @__PURE__ */ h("path", {
+		d: "m10.4 10.4 3.1 3.1",
+		stroke: "currentColor",
+		strokeWidth: 1.4,
+		strokeLinecap: "round"
+	}));
 	//#endregion
 	//#region src/client/components.tsx
 	/**
 	* Client 侧：UI 组件 —— 文件树、多标签预览侧边面板、角落触发按钮、设置区。
 	*/
-	function FileTree({ onOpen, selectedPath, refreshToken }) {
+	function FileTree({ onOpen, selectedPath, refreshToken, searchOpen = false, onCloseSearch }) {
 		const [root, setRoot] = React.useState(null);
 		const [children, setChildren] = React.useState({});
 		const [expanded, setExpanded] = React.useState({});
 		const [copiedPath, setCopiedPath] = React.useState(null);
 		const [copiedLabel, setCopiedLabel] = React.useState("");
+		const [query, setQuery] = React.useState("");
+		const [search, setSearch] = React.useState(null);
 		const copyTimer = React.useRef(null);
 		const rootTimer = React.useRef(null);
 		const sessionId = useSessionId();
-		const loadRoot = () => {
-			setChildren({});
-			setExpanded({});
-			setRoot(null);
+		React.useEffect(() => {
+			if (!searchOpen) setQuery("");
+		}, [searchOpen]);
+		React.useEffect(() => {
+			const q = query.trim();
+			if (!q) {
+				setSearch(null);
+				return;
+			}
+			let alive = true;
+			setSearch({ loading: true });
+			const timer = setTimeout(() => {
+				host.searchFiles(q, currentSessionId()).then((res) => {
+					if (alive) setSearch(res && res.ok ? { entries: res.entries || [] } : { error: res && res.error || t("searchFailed") });
+				}).catch(() => {
+					if (alive) setSearch({ error: t("searchFailed") });
+				});
+			}, 250);
+			return () => {
+				alive = false;
+				clearTimeout(timer);
+			};
+		}, [
+			query,
+			sessionId,
+			refreshToken
+		]);
+		const fetchDir = (path) => {
+			const sid = currentSessionId();
+			setChildren((prev) => ({
+				...prev,
+				[path]: { loading: true }
+			}));
+			host.listDir(path, sid).then((res) => {
+				if (currentSessionId() !== sid) return;
+				setChildren((prev) => ({
+					...prev,
+					[path]: res && res.ok ? { entries: res.entries || [] } : { error: res && res.error || t("readFailed") }
+				}));
+			}).catch(() => {
+				if (currentSessionId() !== sid) return;
+				setChildren((prev) => ({
+					...prev,
+					[path]: { error: t("readFailed") }
+				}));
+			});
+		};
+		const [rootError, setRootError] = React.useState(null);
+		const loadRoot = (keepState = false) => {
+			if (!keepState) {
+				setChildren({});
+				setExpanded({});
+				setRoot(null);
+			}
+			setRootError(null);
+			if (keepState) {
+				for (const p of Object.keys(expanded)) if (expanded[p]) fetchDir(p);
+			}
 			if (rootTimer.current) clearTimeout(rootTimer.current);
-			const attempt = (tries) => {
+			const delays = [
+				400,
+				800,
+				1600,
+				3200,
+				3200
+			];
+			const sid = currentSessionId();
+			const attempt = (i) => {
 				host.listDir("", currentSessionId()).then((res) => {
+					if (currentSessionId() !== sid) return;
 					if (res && res.ok) setRoot({
 						path: res.path || "",
 						entries: res.entries || []
 					});
-					else if (tries > 0) rootTimer.current = setTimeout(() => attempt(tries - 1), 400);
+					else if (i < delays.length) rootTimer.current = setTimeout(() => attempt(i + 1), delays[i]);
+					else if (!keepState) setRootError(res && res.error || t("treeLoadFailed"));
 				}).catch(() => {
-					if (tries > 0) rootTimer.current = setTimeout(() => attempt(tries - 1), 400);
+					if (currentSessionId() !== sid) return;
+					if (i < delays.length) rootTimer.current = setTimeout(() => attempt(i + 1), delays[i]);
+					else if (!keepState) setRootError(t("treeLoadFailed"));
 				});
 			};
-			attempt(3);
+			attempt(0);
 		};
+		const firstTreeRender = React.useRef(true);
 		React.useEffect(() => {
 			loadRoot();
-		}, [sessionId, refreshToken]);
+		}, [sessionId]);
+		React.useEffect(() => {
+			if (firstTreeRender.current) {
+				firstTreeRender.current = false;
+				return;
+			}
+			loadRoot(root != null);
+		}, [refreshToken]);
 		React.useEffect(() => () => {
 			if (rootTimer.current) clearTimeout(rootTimer.current);
+			if (copyTimer.current) clearTimeout(copyTimer.current);
 		}, []);
 		const toggle = (path) => {
 			const nextExpanded = {
@@ -1379,27 +2051,11 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				[path]: !expanded[path]
 			};
 			setExpanded(nextExpanded);
-			if (nextExpanded[path] && !children[path]) {
-				setChildren({
-					...children,
-					[path]: { loading: true }
-				});
-				host.listDir(path, currentSessionId()).then((res) => {
-					setChildren((prev) => ({
-						...prev,
-						[path]: res && res.ok ? { entries: res.entries || [] } : { error: res && res.error || "读取失败" }
-					}));
-				}).catch(() => {
-					setChildren((prev) => ({
-						...prev,
-						[path]: { error: "读取失败" }
-					}));
-				});
-			}
+			if (nextExpanded[path] && !children[path]) fetchDir(path);
 		};
 		const copyRef = (path) => {
 			const text = "@" + path;
-			let label = "已复制";
+			let label = t("copied");
 			const done = () => {
 				setCopiedPath(path);
 				setCopiedLabel(label);
@@ -1410,7 +2066,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				}, 1600);
 			};
 			if (quoteToComposer(path)) {
-				label = "已插入输入框";
+				label = t("insertedInput");
 				done();
 				return;
 			}
@@ -1423,15 +2079,15 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				done();
 			}
 		};
-		const rowActions = (entry) => copiedPath === entry.path ? /* @__PURE__ */ h("span", { className: "artifacts-tree-copied" }, copiedLabel || "已复制") : /* @__PURE__ */ h("button", {
+		const rowActions = (entry) => copiedPath === entry.path ? /* @__PURE__ */ h("span", { className: "artifacts-tree-copied" }, copiedLabel || t("copied")) : /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-tree-ref",
-			title: "引用到输入框（失败则复制 @path）",
+			title: t("refTitle"),
 			onClick: (e) => {
 				e.stopPropagation();
 				copyRef(entry.path);
 			}
-		}, "@引用");
+		}, t("refBtn"));
 		const renderNode = (entry, depth, flashDelay) => {
 			const pad = { paddingLeft: 6 + depth * 20 };
 			const isSelected = selectedPath === entry.path;
@@ -1459,7 +2115,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				}, isExpanded ? /* @__PURE__ */ h(FolderOpenIcon, { size: 14 }) : /* @__PURE__ */ h(FolderClosedIcon, { size: 14 }), /* @__PURE__ */ h("span", { className: "artifacts-tree-name" }, entry.name), rowActions(entry)), isExpanded ? node && node.loading ? /* @__PURE__ */ h("div", {
 					className: "artifacts-tree-row artifacts-tree-loading",
 					style: { paddingLeft: 6 + (depth + 1) * 20 + 20 }
-				}, "加载中…") : node && node.error ? /* @__PURE__ */ h("div", {
+				}, t("loading")) : node && node.error ? /* @__PURE__ */ h("div", {
 					className: "artifacts-tree-row artifacts-tree-error",
 					style: { paddingLeft: 6 + (depth + 1) * 20 + 20 }
 				}, node.error) : node && node.entries ? node.entries.map((c) => renderNode(c, depth + 1)) : null : null);
@@ -1484,15 +2140,64 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				title: entry.path
 			}, /* @__PURE__ */ h(FileCodeIcon, { size: 14 }), /* @__PURE__ */ h("span", { className: "artifacts-tree-name" }, entry.name), rowActions(entry));
 		};
-		return /* @__PURE__ */ h("div", { className: "artifacts-tree" }, /* @__PURE__ */ h("div", { className: "artifacts-tree-body" }, !root ? /* @__PURE__ */ h("div", { className: "artifacts-hint" }, "加载文件树…") : !root.entries || !root.entries.length ? /* @__PURE__ */ h("div", { className: "artifacts-hint" }, "（空目录）") : root.entries.map((e, i) => renderNode(e, 0, Math.min(i, 12) * 45))));
+		const renderSearchRow = (path, idx) => {
+			const entry = {
+				name: basename(path),
+				path,
+				isDir: false,
+				hidden: false
+			};
+			const slash = path.lastIndexOf("/");
+			const dir = slash >= 0 ? path.slice(0, slash) : "";
+			return /* @__PURE__ */ h("div", {
+				key: path,
+				role: "button",
+				tabIndex: 0,
+				className: "artifacts-tree-row artifacts-flash-in" + (selectedPath === path ? " is-selected" : ""),
+				style: { animationDelay: Math.min(idx, 12) * 30 + "ms" },
+				onClick: () => {
+					if (onOpen) onOpen(path);
+				},
+				onKeyDown: (ev) => {
+					if (ev.key === "Enter" || ev.key === " ") {
+						ev.preventDefault();
+						if (onOpen) onOpen(path);
+					}
+				},
+				title: path
+			}, /* @__PURE__ */ h(FileCodeIcon, { size: 14 }), /* @__PURE__ */ h("span", { className: "artifacts-tree-name" }, entry.name, dir ? /* @__PURE__ */ h("span", { className: "artifacts-search-dir" }, dir) : null), rowActions(entry));
+		};
+		return /* @__PURE__ */ h("div", { className: "artifacts-tree" }, searchOpen ? /* @__PURE__ */ h("div", { className: "artifacts-searchbar" }, /* @__PURE__ */ h("input", {
+			type: "text",
+			className: "artifacts-search-input",
+			placeholder: t("searchPlaceholder"),
+			value: query,
+			autoFocus: true,
+			onChange: (e) => setQuery(e.currentTarget.value),
+			onKeyDown: (ev) => {
+				if (ev.key === "Escape") {
+					if (onCloseSearch) onCloseSearch();
+					else setQuery("");
+				}
+			}
+		})) : null, /* @__PURE__ */ h("div", {
+			className: "artifacts-tree-body",
+			key: refreshToken
+		}, query.trim() ? search && search.loading ? /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("searching")) : search && search.error ? /* @__PURE__ */ h("div", { className: "artifacts-tree-error artifacts-git-error" }, search.error) : search && search.entries && search.entries.length ? search.entries.map((p, i) => renderSearchRow(p, i)) : /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("noResults")) : !root ? rootError ? /* @__PURE__ */ h("div", { className: "artifacts-tree-fail" }, /* @__PURE__ */ h("div", { className: "artifacts-tree-error artifacts-git-error" }, rootError), /* @__PURE__ */ h("button", {
+			type: "button",
+			className: "artifacts-retry",
+			onClick: () => loadRoot(false)
+		}, t("retry"))) : /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("loadingTree")) : !root.entries || !root.entries.length ? /* @__PURE__ */ h("div", { className: "artifacts-hint" }, t("emptyDir")) : root.entries.map((e, i) => renderNode(e, 0, Math.min(i, 12) * 45))));
 	}
-	function ArtifactsPanel() {
-		const open = useOpen();
-		const settings = useSettings();
+	const TABS_KEY = "dsh-flyout-sidebar:tabs";
+	/**
+	* 多标签预览状态（'p:' 前缀 = 内容预览，'g:' 前缀 = git diff）：打开/关闭/
+	* 会话切换清空/持久化与恢复集中在此 hook，面板组件只消费结果。
+	*/
+	function usePreviewTabs(sessionId) {
 		const [tabs, setTabs] = React.useState([]);
 		const [activeKey, setActiveKey] = React.useState(null);
 		const [previewHidden, setPreviewHidden] = React.useState(false);
-		const sessionId = useSessionId();
 		const firstSession = React.useRef(true);
 		React.useEffect(() => {
 			if (firstSession.current) {
@@ -1502,18 +2207,219 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			setTabs([]);
 			setActiveKey(null);
 			setPreviewHidden(false);
+			try {
+				sessionStorage.removeItem(TABS_KEY);
+			} catch {}
+		}, [sessionId]);
+		const restoredSid = React.useRef(null);
+		React.useEffect(() => {
+			if (restoredSid.current !== sessionId) return;
+			try {
+				if (!tabs.length) sessionStorage.removeItem(TABS_KEY);
+				else sessionStorage.setItem(TABS_KEY, JSON.stringify({
+					sid: sessionId,
+					tabs: tabs.map((tb) => ({
+						key: tb.key,
+						path: tb.path,
+						git: tb.git
+					})),
+					activeKey
+				}));
+			} catch {}
+		}, [
+			tabs,
+			activeKey,
+			sessionId
+		]);
+		const patchTab = (key, patch) => setTabs((prev) => prev.map((tb) => tb.key === key ? {
+			...tb,
+			...patch
+		} : tb));
+		const reqTokens = React.useRef({});
+		const openTab = (key, path, git, initial) => {
+			setPreviewHidden(false);
+			reqTokens.current[key] = (reqTokens.current[key] || 0) + 1;
+			setTabs((prev) => {
+				const i = prev.findIndex((tb) => tb.key === key);
+				if (i >= 0) {
+					const next = prev.slice();
+					const cur = next[i];
+					if (cur) next[i] = {
+						...cur,
+						...initial,
+						ok: void 0,
+						error: void 0
+					};
+					return next;
+				}
+				return prev.concat([{
+					key,
+					path,
+					git,
+					...initial
+				}]);
+			});
+			setActiveKey(key);
+		};
+		const closeTab = (key) => {
+			setTabs((prev) => {
+				prev.findIndex((tb) => tb.key === key);
+				return prev.filter((tb) => tb.key !== key);
+			});
+			setActiveKey((cur) => {
+				if (cur !== key) return cur;
+				const remaining = tabsRef.current.filter((tb) => tb.key !== key);
+				if (!remaining.length) return null;
+				const closedIdx = tabsRef.current.findIndex((tb) => tb.key === key);
+				return remaining[Math.min(Math.max(closedIdx, 0), remaining.length - 1)]?.key ?? null;
+			});
+		};
+		const tabsRef = React.useRef([]);
+		React.useEffect(() => {
+			tabsRef.current = tabs;
+		}, [tabs]);
+		const openFile = (path) => {
+			const key = "p:" + path;
+			const type = extType(path);
+			const initial = {
+				loading: false,
+				type,
+				diff: null
+			};
+			if (type !== "image" && type !== "pdf") initial.loading = true;
+			openTab(key, path, false, initial);
+			if (type === "image" || type === "pdf") return;
+			const myReq = reqTokens.current[key];
+			host.readArtifact(path, sessionId).then((res) => {
+				if (reqTokens.current[key] !== myReq) return;
+				patchTab(key, {
+					loading: false,
+					...res
+				});
+			}).catch((e) => {
+				if (reqTokens.current[key] !== myReq) return;
+				patchTab(key, {
+					loading: false,
+					ok: false,
+					error: String(e instanceof Error && e.message ? e.message : e)
+				});
+			});
+		};
+		const openGitDiff = (path) => {
+			const key = "g:" + path;
+			openTab(key, path, true, { loading: true });
+			const myReq = reqTokens.current[key];
+			host.gitDiff(path, sessionId).then((res) => {
+				if (reqTokens.current[key] !== myReq) return;
+				patchTab(key, {
+					loading: false,
+					...res
+				});
+			}).catch((e) => {
+				if (reqTokens.current[key] !== myReq) return;
+				patchTab(key, {
+					loading: false,
+					ok: false,
+					error: String(e instanceof Error && e.message ? e.message : e)
+				});
+			});
+		};
+		React.useEffect(() => {
+			if (restoredSid.current === sessionId) return;
+			restoredSid.current = sessionId;
+			if (sessionId == null) return;
+			try {
+				const raw = sessionStorage.getItem(TABS_KEY);
+				if (!raw) return;
+				const saved = JSON.parse(raw);
+				const sid = saved.sid;
+				const list = saved.tabs;
+				if (sid !== sessionId || !Array.isArray(list)) return;
+				for (const st of list) {
+					if (typeof st?.key !== "string" || typeof st?.path !== "string") continue;
+					if (st.git) openGitDiff(st.path);
+					else openFile(st.path);
+				}
+				const savedActive = saved.activeKey;
+				if (typeof savedActive === "string") setActiveKey(savedActive);
+			} catch {}
 		}, [sessionId]);
+		return {
+			tabs,
+			activeKey,
+			setActiveKey,
+			previewHidden,
+			setPreviewHidden,
+			openFile,
+			openGitDiff,
+			closeTab
+		};
+	}
+	/** git 变更列表（文件面板的「变更」视图） */
+	function GitChangesList({ files, error, activeDiffPath, flashKey, onOpen, onCopyPath, onQuote }) {
+		const rows = [];
+		if (error) rows.push(/* @__PURE__ */ h("div", {
+			key: "err",
+			className: "artifacts-tree-error artifacts-git-error"
+		}, error));
+		else if (files == null) rows.push(/* @__PURE__ */ h("div", {
+			key: "load",
+			className: "artifacts-empty"
+		}, t("loadingChanges")));
+		else if (!files.length) rows.push(/* @__PURE__ */ h("div", {
+			key: "empty",
+			className: "artifacts-empty"
+		}, t("noChanges")));
+		(files || []).forEach((e, idx) => {
+			const label = gitLabel(e);
+			const isActive = activeDiffPath === e.path;
+			const flashPrefix = flashKey > 0 ? flashKey + ":" : "";
+			rows.push(/* @__PURE__ */ h("div", {
+				key: flashPrefix + e.path,
+				className: "artifacts-item" + (isActive ? " is-active" : "") + (flashPrefix ? " artifacts-flash-in" : ""),
+				style: flashPrefix ? { animationDelay: Math.min(idx, 12) * 45 + "ms" } : void 0
+			}, /* @__PURE__ */ h("button", {
+				type: "button",
+				className: "artifacts-item-main",
+				title: gitTitle(e),
+				onClick: () => onOpen(e.path)
+			}, /* @__PURE__ */ h("div", { className: "artifacts-item-row" }, /* @__PURE__ */ h("span", { className: "artifacts-git-badge artifacts-git-badge-" + label }, label), /* @__PURE__ */ h("span", { className: "artifacts-item-base" }, basename(e.path)), typeof e.adds === "number" && (e.adds > 0 || (e.dels ?? 0) > 0) ? /* @__PURE__ */ h("span", { className: "artifacts-git-stats" }, /* @__PURE__ */ h("span", { className: "artifacts-git-adds" }, "+", e.adds), /* @__PURE__ */ h("span", { className: "artifacts-git-dels" }, "−", e.dels ?? 0)) : null, e.origPath ? /* @__PURE__ */ h("span", { className: "artifacts-git-orig" }, "← ", basename(e.origPath)) : null), /* @__PURE__ */ h("div", { className: "artifacts-item-full" }, e.path)), /* @__PURE__ */ h("div", { className: "artifacts-item-actions" }, /* @__PURE__ */ h("button", {
+				type: "button",
+				className: "artifacts-minibtn",
+				title: t("copyPath"),
+				onClick: () => onCopyPath(e.path)
+			}, "⧉"), /* @__PURE__ */ h("button", {
+				type: "button",
+				className: "artifacts-minibtn",
+				title: t("refInput"),
+				onClick: () => onQuote(e.path)
+			}, "@"))));
+		});
+		return /* @__PURE__ */ h(Fragment, null, rows);
+	}
+	function ArtifactsPanel() {
+		const open = useOpen();
+		const settings = useSettings();
+		useLang();
+		const sessionId = useSessionId();
+		const { tabs, activeKey, setActiveKey, previewHidden, setPreviewHidden, openFile, openGitDiff, closeTab } = usePreviewTabs(sessionId);
+		const activeTab = tabs.find((t) => t.key === activeKey) || null;
 		const [notice, setNotice] = React.useState("");
+		const [winW, setWinW] = React.useState(() => typeof window !== "undefined" ? window.innerWidth : 1400);
 		const [gitFiles, setGitFiles] = React.useState(null);
 		const [gitError, setGitError] = React.useState(null);
-		const [panelWidth, setPanelWidth] = React.useState(null);
+		const [panelFrac, setPanelFrac] = React.useState(null);
 		const [resizing, setResizing] = React.useState(false);
 		const [activeView, setActiveView] = React.useState(() => settings.showFileTree ? "tree" : "git");
 		const [treeRefresh, setTreeRefresh] = React.useState(0);
+		const [searchOpen, setSearchOpen] = React.useState(false);
 		const [gitRefresh, setGitRefresh] = React.useState(0);
 		const [gitRefreshing, setGitRefreshing] = React.useState(false);
 		const [gitFlash, setGitFlash] = React.useState(0);
 		const noticeTimer = React.useRef(null);
+		React.useEffect(() => () => {
+			if (noticeTimer.current) clearTimeout(noticeTimer.current);
+		}, []);
 		const gitForceRef = React.useRef(false);
 		React.useEffect(() => {
 			if (!open || activeView !== "git") return;
@@ -1532,7 +2438,7 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 						setGitError(null);
 					} else {
 						setGitFiles([]);
-						setGitError(res && res.error || "git status 失败");
+						setGitError(res && res.error || t("gitStatusFailed"));
 					}
 				}).catch((e) => {
 					if (force) setGitRefreshing(false);
@@ -1595,8 +2501,18 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			if (document.body) obs.observe(document.body, opts);
 			return () => obs.disconnect();
 		}, []);
-		const minWidthPx = Math.max(80, Math.round(window.innerWidth * (settings.minPanelWidth || 0) / 100));
-		const widthPx = panelWidth != null ? Math.max(panelWidth, minWidthPx) : minWidthPx;
+		React.useEffect(() => {
+			const onResize = () => setWinW(window.innerWidth);
+			window.addEventListener("resize", onResize);
+			return () => window.removeEventListener("resize", onResize);
+		}, []);
+		const rightOffset = (() => {
+			const n = parseFloat(document.documentElement.style.getPropertyValue("--dsh-sidebar-width"));
+			return Number.isFinite(n) ? n : 0;
+		})();
+		const avail = Math.max(120, winW - rightOffset);
+		const minWidthPx = Math.max(80, Math.round(winW * (settings.minPanelWidth || 0) / 100));
+		const widthPx = panelFrac != null ? Math.max(minWidthPx, Math.round(panelFrac * avail)) : minWidthPx;
 		React.useEffect(() => {
 			const root = document.documentElement;
 			root.style.setProperty("--dsh-flyout-sidebar-width", open ? widthPx + "px" : "0px");
@@ -1611,26 +2527,36 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				document.body.removeAttribute("data-dsh-flyout-dragging");
 			};
 		}, [resizing]);
+		const resizeHandlers = React.useRef(null);
+		React.useEffect(() => () => {
+			const h = resizeHandlers.current;
+			if (h) {
+				document.removeEventListener("mousemove", h.onMove);
+				document.removeEventListener("mouseup", h.onUp);
+			}
+		}, []);
 		const { visible, slidOut } = useSlide();
 		if (!visible) return null;
 		const flyoutHref = "/flyout-sidebar" + (sessionId ? "?sessionId=" + encodeURIComponent(sessionId) : "");
 		const startResize = (e) => {
 			e.preventDefault();
 			setResizing(true);
-			const rightOffset = (() => {
-				const v = document.documentElement.style.getPropertyValue("--dsh-sidebar-width");
-				const n = parseFloat(v);
-				return Number.isFinite(n) ? n : 0;
-			})();
+			const availAtStart = avail;
 			const onMove = (ev) => {
 				const w = window.innerWidth - ev.clientX - rightOffset;
-				setPanelWidth(Math.max(minWidthPx, Math.min(w, window.innerWidth - rightOffset - 24)));
+				const frac = Math.max(minWidthPx / availAtStart, Math.min(w / availAtStart, (availAtStart - 24) / availAtStart));
+				setPanelFrac(frac);
 			};
 			const onUp = () => {
 				setResizing(false);
+				resizeHandlers.current = null;
 				document.removeEventListener("mousemove", onMove);
 				document.removeEventListener("mouseup", onUp);
 			};
+			resizeHandlers.current = {
+				onMove,
+				onUp
+			};
 			document.addEventListener("mousemove", onMove);
 			document.addEventListener("mouseup", onUp);
 		};
@@ -1652,162 +2578,53 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		};
 		const quotePath = (path) => {
 			if (quoteToComposer(path)) {
-				flash("已插入输入框");
+				flash(t("insertedInput"));
 				return;
 			}
-			copyText("@" + path, "已复制 @引用（未能写入输入框）");
-		};
-		const patchTab = (key, patch) => setTabs((prev) => prev.map((t) => t.key === key ? {
-			...t,
-			...patch
-		} : t));
-		const openTab = (key, path, git, initial) => {
-			setPreviewHidden(false);
-			setTabs((prev) => {
-				const i = prev.findIndex((t) => t.key === key);
-				if (i >= 0) {
-					const next = prev.slice();
-					const cur = next[i];
-					if (cur) next[i] = {
-						...cur,
-						...initial
-					};
-					return next;
-				}
-				return prev.concat([{
-					key,
-					path,
-					git,
-					...initial
-				}]);
-			});
-			setActiveKey(key);
-		};
-		const closeTab = (key) => {
-			const idx = tabs.findIndex((t) => t.key === key);
-			const next = tabs.filter((t) => t.key !== key);
-			setTabs(next);
-			if (activeKey === key) setActiveKey(next.length ? next[Math.min(idx, next.length - 1)]?.key ?? null : null);
-		};
-		const activeTab = tabs.find((t) => t.key === activeKey) || null;
-		const openFile = (path) => {
-			const key = "p:" + path;
-			const type = extType(path);
-			const initial = {
-				loading: false,
-				type,
-				diff: null
-			};
-			if (type !== "image" && type !== "pdf") initial.loading = true;
-			openTab(key, path, false, initial);
-			if (type === "image" || type === "pdf") return;
-			host.readArtifact(path).then((res) => {
-				patchTab(key, {
-					loading: false,
-					...res
-				});
-			}).catch((e) => {
-				patchTab(key, {
-					loading: false,
-					ok: false,
-					error: String(e instanceof Error && e.message ? e.message : e)
-				});
-			});
-		};
-		const openGitDiff = (path) => {
-			const key = "g:" + path;
-			openTab(key, path, true, { loading: true });
-			host.gitDiff(path, currentSessionId()).then((res) => {
-				patchTab(key, {
-					loading: false,
-					...res
-				});
-			}).catch((e) => {
-				patchTab(key, {
-					loading: false,
-					ok: false,
-					error: String(e instanceof Error && e.message ? e.message : e)
-				});
-			});
+			copyText("@" + path, t("copiedRef"));
 		};
-		const gitLabel = (e) => {
-			if (e.x === "?" || e.y === "?") return "U";
-			return (e.y !== " " ? e.y : e.x) || "M";
-		};
-		const gitTitle = (e) => {
-			const label = gitLabel(e);
-			const map = {
-				U: "未跟踪",
-				A: "新增",
-				M: "修改",
-				D: "删除",
-				R: "重命名",
-				C: "复制"
+		React.useEffect(() => {
+			if (!open) return;
+			const onKey = (ev) => {
+				if (ev.key !== "Escape") return;
+				const target = ev.target;
+				if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) return;
+				if (tabs.length && !previewHidden) {
+					if (activeKey) closeTab(activeKey);
+					else setPreviewHidden(true);
+				} else store.setOpen(false);
 			};
-			const staged = e.x !== " " && e.x !== "?";
-			return (map[label] || label) + (staged ? "（已暂存）" : "（未暂存）");
-		};
-		const gitListRows = [];
-		if (gitError) gitListRows.push(/* @__PURE__ */ h("div", {
-			key: "err",
-			className: "artifacts-tree-error artifacts-git-error"
-		}, gitError));
-		else if (gitFiles == null) gitListRows.push(/* @__PURE__ */ h("div", {
-			key: "load",
-			className: "artifacts-empty"
-		}, "加载变更列表…"));
-		else if (!gitFiles.length) gitListRows.push(/* @__PURE__ */ h("div", {
-			key: "empty",
-			className: "artifacts-empty"
-		}, "没有未提交的变更"));
-		(gitFiles || []).forEach((e, idx) => {
-			const label = gitLabel(e);
-			const isActive = !!(activeTab && activeTab.git && activeTab.path === e.path);
-			const flashKey = gitFlash > 0 ? gitFlash + ":" : "";
-			gitListRows.push(/* @__PURE__ */ h("div", {
-				key: flashKey + e.path,
-				className: "artifacts-item" + (isActive ? " is-active" : "") + (flashKey ? " artifacts-flash-in" : ""),
-				style: flashKey ? { animationDelay: Math.min(idx, 12) * 45 + "ms" } : void 0
-			}, /* @__PURE__ */ h("button", {
-				type: "button",
-				className: "artifacts-item-main",
-				title: gitTitle(e),
-				onClick: () => openGitDiff(e.path)
-			}, /* @__PURE__ */ h("div", { className: "artifacts-item-row" }, /* @__PURE__ */ h("span", { className: "artifacts-git-badge artifacts-git-badge-" + label }, label), /* @__PURE__ */ h("span", { className: "artifacts-item-base" }, basename(e.path)), e.origPath ? /* @__PURE__ */ h("span", { className: "artifacts-git-orig" }, "← ", basename(e.origPath)) : null), /* @__PURE__ */ h("div", { className: "artifacts-item-full" }, e.path)), /* @__PURE__ */ h("div", { className: "artifacts-item-actions" }, /* @__PURE__ */ h("button", {
-				type: "button",
-				className: "artifacts-minibtn",
-				title: "复制路径",
-				onClick: () => copyText(e.path, "已复制路径")
-			}, "⧉"), /* @__PURE__ */ h("button", {
-				type: "button",
-				className: "artifacts-minibtn",
-				title: "@引用到输入框",
-				onClick: () => quotePath(e.path)
-			}, "@"))));
-		});
+			document.addEventListener("keydown", onKey);
+			return () => document.removeEventListener("keydown", onKey);
+		}, [
+			open,
+			tabs,
+			previewHidden,
+			activeKey
+		]);
 		const previewOverlay = tabs.length && !previewHidden ? /* @__PURE__ */ h("div", {
 			className: "artifacts-preview-overlay" + (slidOut ? " artifacts-slid-out" : ""),
 			role: "region",
-			"aria-label": "文件预览"
-		}, /* @__PURE__ */ h("div", { className: "artifacts-preview-overlay-tabs" }, /* @__PURE__ */ h("div", { className: "artifacts-ptabs-scroll" }, tabs.map((t) => /* @__PURE__ */ h("div", {
-			key: t.key,
-			className: "artifacts-ptab" + (t.key === activeKey ? " is-active" : ""),
-			title: (t.git ? "[diff] " : "") + (t.path || ""),
-			onClick: () => setActiveKey(t.key)
-		}, /* @__PURE__ */ h("span", { className: "artifacts-ptab-name" }, basename(t.path || "")), /* @__PURE__ */ h("button", {
+			"aria-label": t("previewRegion")
+		}, /* @__PURE__ */ h("div", { className: "artifacts-preview-overlay-tabs" }, /* @__PURE__ */ h("div", { className: "artifacts-ptabs-scroll" }, tabs.map((tab) => /* @__PURE__ */ h("div", {
+			key: tab.key,
+			className: "artifacts-ptab" + (tab.key === activeKey ? " is-active" : ""),
+			title: (tab.git ? t("diffTabPrefix") : "") + (tab.path || ""),
+			onClick: () => setActiveKey(tab.key)
+		}, /* @__PURE__ */ h("span", { className: "artifacts-ptab-name" }, basename(tab.path || "")), /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-ptab-close",
-			title: "关闭标签页",
+			title: t("closeTab"),
 			onClick: (e) => {
 				e.stopPropagation();
-				closeTab(t.key);
+				closeTab(tab.key);
 			}
 		}, "×")))), /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-preview-hide",
-			title: "隐藏预览（标签页保留）",
+			title: t("hidePreview"),
 			onClick: () => setPreviewHidden(true)
-		}, /* @__PURE__ */ h(PanelCollapseIcon, { size: 16 }))), activeTab ? renderPreview(activeTab) : null) : null;
+		}, /* @__PURE__ */ h(PanelCollapseIcon, { size: 16 }))), activeTab ? renderPreview(activeTab, settings.codeWrap) : null) : null;
 		return /* @__PURE__ */ h(Fragment, null, previewOverlay, /* @__PURE__ */ h("div", {
 			className: "artifacts-panel" + (slidOut ? " artifacts-slid-out" : "") + (resizing ? " artifacts-resizing" : ""),
 			style: { width: widthPx },
@@ -1815,23 +2632,29 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 			"aria-label": "Artifacts"
 		}, /* @__PURE__ */ h("div", {
 			className: "artifacts-resize",
-			title: "拖动调整宽度",
+			title: t("resizeHandle"),
 			onMouseDown: startResize
 		}), /* @__PURE__ */ h("div", { className: "artifacts-head" }, /* @__PURE__ */ h("div", { className: "artifacts-head-left" }, /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-toggle",
-			title: "收起侧边栏",
+			title: t("collapsePanel"),
 			onClick: () => store.setOpen(false)
 		}, /* @__PURE__ */ h(PanelIcon, { size: 16 })), /* @__PURE__ */ h("a", {
 			className: "artifacts-link",
 			href: flyoutHref,
 			target: "_blank",
 			rel: "noreferrer noopener",
-			title: "弹出式侧边栏 — 在新标签页打开（可拖到另一块显示器）"
-		}, /* @__PURE__ */ h(FlyoutIcon, { size: 16 }))), /* @__PURE__ */ h("span", { className: "artifacts-spacer" }), notice ? /* @__PURE__ */ h("span", { className: "artifacts-notice" }, notice) : null, /* @__PURE__ */ h("button", {
+			title: t("flyoutOpen")
+		}, /* @__PURE__ */ h(FlyoutIcon, { size: 16 }))), /* @__PURE__ */ h("span", { className: "artifacts-spacer" }), notice ? /* @__PURE__ */ h("span", { className: "artifacts-notice" }, notice) : null, activeView === "tree" && settings.showFileTree ? /* @__PURE__ */ h("button", {
+			type: "button",
+			className: "artifacts-toggle artifacts-search-toggle" + (searchOpen ? " is-active" : ""),
+			title: t("searchToggle"),
+			"aria-pressed": searchOpen,
+			onClick: () => setSearchOpen((v) => !v)
+		}, /* @__PURE__ */ h(SearchIcon, { size: 16 })) : null, /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-toggle",
-			title: activeView === "tree" ? "刷新文件树" : "刷新变更列表",
+			title: activeView === "tree" ? t("refreshTree") : t("refreshChanges"),
 			onClick: () => {
 				if (activeView === "tree") setTreeRefresh((n) => n + 1);
 				else {
@@ -1843,24 +2666,35 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 		}, /* @__PURE__ */ h(RefreshIcon, { size: 16 })), settings.showFileTree ? /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-iconbtn artifacts-viewbtn" + (activeView === "git" ? " is-active" : ""),
-			title: activeView === "tree" ? "查看 Git 变更（未提交）" : "返回文件列表",
+			title: activeView === "tree" ? t("viewGit") : t("backToFiles"),
 			"aria-pressed": activeView === "git",
 			onClick: () => setActiveView(activeView === "tree" ? "git" : "tree")
 		}, activeView === "tree" ? /* @__PURE__ */ h(GitBranchIcon, { size: 16 }) : /* @__PURE__ */ h(FolderClosedIcon, { size: 16 })) : null), /* @__PURE__ */ h("div", { className: "artifacts-main" }, /* @__PURE__ */ h("div", {
 			className: "artifacts-body" + (activeView === "git" && gitRefreshing ? " artifacts-refreshing" : ""),
 			style: { flex: "1 1 auto" }
-		}, activeView === "tree" && settings.showFileTree ? /* @__PURE__ */ h(FileTree, {
+		}, open ? activeView === "tree" && settings.showFileTree ? /* @__PURE__ */ h(FileTree, {
 			onOpen: openFile,
 			selectedPath: activeTab && !activeTab.git ? activeTab.path : null,
-			refreshToken: treeRefresh
-		}) : gitListRows))));
+			refreshToken: treeRefresh,
+			searchOpen,
+			onCloseSearch: () => setSearchOpen(false)
+		}) : /* @__PURE__ */ h(GitChangesList, {
+			files: gitFiles,
+			error: gitError,
+			activeDiffPath: activeTab && activeTab.git ? activeTab.path : null,
+			flashKey: gitFlash,
+			onOpen: openGitDiff,
+			onCopyPath: (p) => copyText(p, t("copiedPath")),
+			onQuote: quotePath
+		}) : null))));
 	}
 	function CornerButton() {
 		const open = useOpen();
+		useLang();
 		return /* @__PURE__ */ h("button", {
 			type: "button",
 			className: "artifacts-corner-btn" + (open ? " artifacts-slid-out" : ""),
-			title: "弹出式侧边栏",
+			title: t("flyoutTitle"),
 			"aria-expanded": open,
 			onClick: () => store.toggle()
 		}, /* @__PURE__ */ h(PanelIcon, { size: 18 }));
@@ -1878,23 +2712,29 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 	}
 	function SettingsSection() {
 		const settings = useSettings();
+		useLang();
 		const set = (key, value) => settingsStore.set(key, value);
-		return /* @__PURE__ */ h("div", { className: "artifacts-settings" }, /* @__PURE__ */ h("p", { className: "artifacts-setintro" }, "管理「Flyout Sidebar」的显示与行为。"), /* @__PURE__ */ h("div", { className: "artifacts-setgroup" }, /* @__PURE__ */ h(SettingsToggle, {
-			label: "默认展开",
-			desc: "页面加载后侧边栏默认展开；关闭则默认收起，点右上角图标再打开。",
+		return /* @__PURE__ */ h("div", { className: "artifacts-settings" }, /* @__PURE__ */ h("p", { className: "artifacts-setintro" }, t("settingsIntro")), /* @__PURE__ */ h("div", { className: "artifacts-setgroup" }, /* @__PURE__ */ h(SettingsToggle, {
+			label: t("setDefaultOpen"),
+			desc: t("setDefaultOpenDesc"),
 			value: settings.defaultOpen,
 			onToggle: (v) => set("defaultOpen", v)
 		}), /* @__PURE__ */ h(SettingsToggle, {
-			label: "自动刷新",
-			desc: "开启后侧边栏展开时将即时同步并更新产物列表",
+			label: t("setAutoRefresh"),
+			desc: t("setAutoRefreshDesc"),
 			value: settings.autoRefresh,
 			onToggle: (v) => set("autoRefresh", v)
 		}), /* @__PURE__ */ h(SettingsToggle, {
-			label: "文件树",
-			desc: "在侧边栏显示「文件树」标签页，浏览工作区目录。",
+			label: t("setFileTree"),
+			desc: t("setFileTreeDesc"),
 			value: settings.showFileTree,
 			onToggle: (v) => set("showFileTree", v)
-		}), /* @__PURE__ */ h("div", { className: "artifacts-setrow" }, /* @__PURE__ */ h("div", { className: "artifacts-settext" }, /* @__PURE__ */ h("div", { className: "artifacts-settitle" }, "最短面板宽度"), /* @__PURE__ */ h("div", { className: "artifacts-setdesc" }, "面板的最小宽度（占窗口宽度的百分比，20–60）；更宽可通过拖动面板左边缘调整。")), /* @__PURE__ */ h("div", { className: "artifacts-setcontrol" }, /* @__PURE__ */ h("input", {
+		}), /* @__PURE__ */ h(SettingsToggle, {
+			label: t("setCodeWrap"),
+			desc: t("setCodeWrapDesc"),
+			value: settings.codeWrap,
+			onToggle: (v) => set("codeWrap", v)
+		}), /* @__PURE__ */ h("div", { className: "artifacts-setrow" }, /* @__PURE__ */ h("div", { className: "artifacts-settext" }, /* @__PURE__ */ h("div", { className: "artifacts-settitle" }, t("setMinWidth")), /* @__PURE__ */ h("div", { className: "artifacts-setdesc" }, t("setMinWidthDesc"))), /* @__PURE__ */ h("div", { className: "artifacts-setcontrol" }, /* @__PURE__ */ h("input", {
 			type: "number",
 			className: "artifacts-widthinput",
 			min: 20,
@@ -1904,8 +2744,19 @@ body[data-ds-dark-theme] .tok-property { color: #ced4da; }
 				const n = parseInt(e.currentTarget.value, 10);
 				if (Number.isNaN(n)) return;
 				set("minPanelWidth", Math.max(20, Math.min(60, n)));
+			},
+			onBlur: (e) => {
+				const n = parseInt(e.currentTarget.value, 10);
+				set("minPanelWidth", Number.isNaN(n) ? 20 : Math.max(20, Math.min(60, n)));
+			}
+		}), /* @__PURE__ */ h("span", { className: "artifacts-suffix" }, "%"))), /* @__PURE__ */ h("div", { className: "artifacts-setrow" }, /* @__PURE__ */ h("div", { className: "artifacts-settext" }, /* @__PURE__ */ h("div", { className: "artifacts-settitle" }, t("setLang")), /* @__PURE__ */ h("div", { className: "artifacts-setdesc" }, t("setLangDesc"))), /* @__PURE__ */ h("div", { className: "artifacts-setcontrol" }, /* @__PURE__ */ h("select", {
+			className: "artifacts-langselect",
+			value: getLanguageSetting() || "",
+			onChange: (e) => {
+				const v = e.currentTarget.value;
+				setLanguage(v === "zh" || v === "en" ? v : null);
 			}
-		}), /* @__PURE__ */ h("span", { className: "artifacts-suffix" }, "%")))));
+		}, /* @__PURE__ */ h("option", { value: "" }, t("langAuto")), /* @__PURE__ */ h("option", { value: "zh" }, t("langZh")), /* @__PURE__ */ h("option", { value: "en" }, t("langEn")))))));
 	}
 	//#endregion
 	//#region src/client/index.tsx