dsh-plugin-workbench 0.0.2 → 0.0.4

package/lib/client.js

@@ -30,7 +30,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region \0dsh-css:src/client/files.module.css.mjs
-		const css$1 = "[data-fe-theme=light]{--fe-bg:#fff;--fe-sidebar-bg:#f3f3f3;--fe-fg:#1f1f1f;--fe-muted:#6e6e6e;--fe-faint:#9d9d9d;--fe-border:#e5e5e5;--fe-border-strong:#c8c8c8;--fe-accent:#005fb8;--fe-hover:#e8e8e8;--fe-selection:#add6ff;--fe-token-keyword:#00f;--fe-token-string:#a31515;--fe-token-comment:green;--fe-token-number:#098658;--fe-token-function:#795e26;--fe-token-type:#267f99;--fe-token-variable:#001080;--fe-token-tag:maroon;--fe-token-meta:#6e6e6e}[data-fe-theme=dark]{--fe-bg:#1e1e1e;--fe-sidebar-bg:#252526;--fe-fg:#d4d4d4;--fe-muted:#ccc;--fe-faint:#9d9d9d;--fe-border:#3c3c3c;--fe-border-strong:#454545;--fe-accent:#007acc;--fe-hover:#2a2d2e;--fe-selection:#264f78;--fe-token-keyword:#569cd6;--fe-token-string:#ce9178;--fe-token-comment:#6a9955;--fe-token-number:#b5cea8;--fe-token-function:#dcdcaa;--fe-token-type:#4ec9b0;--fe-token-variable:#9cdcfe;--fe-token-tag:#569cd6;--fe-token-meta:#9b9b9b}.Myjg4a_column{box-sizing:border-box;background:var(--fe-sidebar-bg);min-width:0;height:100%;color:var(--fe-fg);flex-direction:column;font-size:13px;display:flex;overflow:hidden}.Myjg4a_header{box-sizing:border-box;border-bottom:1px solid var(--fe-border);flex:none;align-items:center;gap:6px;height:34px;padding:0 8px;display:flex}.Myjg4a_headerTitle{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;min-width:0;color:var(--fe-muted);flex:1;font-size:11px;font-weight:600;overflow:hidden}.Myjg4a_headerActions{flex:none;align-items:center;gap:2px;display:flex}.Myjg4a_action{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:13px;line-height:1;display:inline-flex}.Myjg4a_action:hover:not(:disabled){background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_action:disabled{opacity:.5;cursor:default}.Myjg4a_treeArea{flex:1;min-height:0;padding:4px;overflow-y:auto}.Myjg4a_row{cursor:pointer;user-select:none;white-space:nowrap;height:22px;color:var(--fe-fg);border-radius:3px;align-items:center;gap:6px;font-size:13px;display:flex}.Myjg4a_row:hover{background:var(--fe-hover)}.Myjg4a_rowSelected{background:var(--fe-selection)}.Myjg4a_rowSelected .Myjg4a_name{color:var(--fe-fg)}.Myjg4a_chevron{text-align:center;width:12px;color:var(--fe-muted);flex:none;font-size:10px;line-height:22px}.Myjg4a_icon{text-align:center;flex:none;width:16px;font-size:13px;line-height:22px}.Myjg4a_name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_size{color:var(--fe-faint);flex:none;font-size:11px}.Myjg4a_actions{opacity:0;flex:none;align-items:center;gap:2px;transition:opacity .12s;display:flex}.Myjg4a_row:hover .Myjg4a_actions,.Myjg4a_row:focus-within .Myjg4a_actions{opacity:1}.Myjg4a_rowHint{color:var(--fe-faint);padding:2px 8px 2px 0;font-size:12px;line-height:20px}.Myjg4a_rowError{color:#f48771;padding:2px 8px 2px 0;font-size:12px;line-height:18px}.Myjg4a_preview{border-right:1px solid var(--fe-border);background:var(--fe-bg);flex-direction:column;flex:0 0 55%;min-width:240px;min-height:0;animation:.18s Myjg4a_fe-preview-in;display:flex;overflow:hidden}.Myjg4a_previewClosing{animation:.2s forwards Myjg4a_fe-preview-out}@keyframes Myjg4a_fe-preview-in{0%{opacity:0}to{opacity:1}}@keyframes Myjg4a_fe-preview-out{0%{opacity:1}to{opacity:0}}.Myjg4a_handle{cursor:col-resize;touch-action:none;z-index:2;background:0 0;flex:none;width:6px;margin-left:-4px;margin-right:-2px}.Myjg4a_handle:hover,.Myjg4a_handle:active{background:var(--fe-accent);opacity:.35}.Myjg4a_tabBar{border-bottom:1px solid var(--fe-border);background:var(--fe-sidebar-bg);flex:none;align-items:stretch;height:34px;display:flex}.Myjg4a_tabScroller{scrollbar-width:thin;flex:1;align-items:stretch;min-width:0;display:flex;overflow-x:auto}.Myjg4a_collapse{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;margin:auto 4px;padding:0;font-size:14px;line-height:1;display:inline-flex}.Myjg4a_collapse:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tab{max-width:180px;color:var(--fe-muted);border-right:1px solid var(--fe-border);cursor:pointer;user-select:none;white-space:nowrap;flex:none;align-items:center;gap:6px;padding:0 8px 0 12px;font-size:13px;display:flex}.Myjg4a_tab:hover{background:var(--fe-hover)}.Myjg4a_tabActive{background:var(--fe-bg);color:var(--fe-fg);box-shadow:inset 0 -1px 0 var(--fe-accent)}.Myjg4a_tabName{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_tabClose{appearance:none;color:var(--fe-faint);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:11px;display:inline-flex}.Myjg4a_tabClose:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tabDot{background:var(--fe-fg);opacity:.85;border-radius:50%;flex:none;width:8px;height:8px}.Myjg4a_previewBody{flex:1;min-height:0;overflow:auto}.Myjg4a_editor{height:100%;min-height:0;position:relative}.Myjg4a_editorHighlight{pointer-events:none;white-space:pre;color:var(--fe-fg);background:0 0;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:hidden}.Myjg4a_editorHighlight code{font-family:inherit;font-size:inherit;line-height:inherit;white-space:inherit}.Myjg4a_editorTextarea{box-sizing:border-box;resize:none;color:#0000;caret-color:var(--fe-fg);white-space:pre;tab-size:2;background:0 0;border:none;outline:none;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.Myjg4a_saveError{color:#1e1e1e;background:#f48771;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;right:8px}.Myjg4a_previewHint{color:var(--fe-faint);padding:12px;font-size:12px;line-height:18px}.Myjg4a_previewMeta{color:var(--fe-faint);font-size:11px}.Myjg4a_placeholder{text-align:center;color:var(--fe-faint);flex:1;justify-content:center;align-items:center;padding:16px;font-size:12px;line-height:18px;display:flex}.Myjg4a_editorHighlight .hljs-keyword,.Myjg4a_editorHighlight .hljs-selector-tag,.Myjg4a_editorHighlight .hljs-literal{color:var(--fe-token-keyword)}.Myjg4a_editorHighlight .hljs-string,.Myjg4a_editorHighlight .hljs-regexp,.Myjg4a_editorHighlight .hljs-addition{color:var(--fe-token-string)}.Myjg4a_editorHighlight .hljs-comment,.Myjg4a_editorHighlight .hljs-quote{color:var(--fe-token-comment);font-style:italic}.Myjg4a_editorHighlight .hljs-number,.Myjg4a_editorHighlight .hljs-symbol,.Myjg4a_editorHighlight .hljs-bullet{color:var(--fe-token-number)}.Myjg4a_editorHighlight .hljs-title,.Myjg4a_editorHighlight .hljs-section,.Myjg4a_editorHighlight .hljs-title.function_{color:var(--fe-token-function)}.Myjg4a_editorHighlight .hljs-type,.Myjg4a_editorHighlight .hljs-built_in,.Myjg4a_editorHighlight .hljs-class .hljs-title{color:var(--fe-token-type)}.Myjg4a_editorHighlight .hljs-attr,.Myjg4a_editorHighlight .hljs-attribute,.Myjg4a_editorHighlight .hljs-variable,.Myjg4a_editorHighlight .hljs-template-variable,.Myjg4a_editorHighlight .hljs-params{color:var(--fe-token-variable)}.Myjg4a_editorHighlight .hljs-tag,.Myjg4a_editorHighlight .hljs-name{color:var(--fe-token-tag)}.Myjg4a_editorHighlight .hljs-meta{color:var(--fe-token-meta)}.Myjg4a_editorHighlight .hljs-emphasis{font-style:italic}.Myjg4a_editorHighlight .hljs-strong{font-weight:700}body[data-dsh-maid-atelier] [data-skin-chrome=top-trim],body[data-dsh-maid-atelier] [data-skin-chrome=bottom-trim]{translate:calc(var(--maid-sidebar-width,0px) + var(--dsh-explorer-width,0px) + var(--dsh-preview-width,0px)) 0!important}[class*=explorerCol]{border-right:1px solid var(--fe-border)!important}";
+		const css$1 = "[data-fe-theme=light]{--fe-bg:#fff;--fe-sidebar-bg:#f3f3f3;--fe-fg:#1f1f1f;--fe-muted:#6e6e6e;--fe-faint:#9d9d9d;--fe-border:#e5e5e5;--fe-border-strong:#c8c8c8;--fe-accent:#005fb8;--fe-hover:#e8e8e8;--fe-selection:#add6ff;--fe-token-keyword:#00f;--fe-token-string:#a31515;--fe-token-comment:green;--fe-token-number:#098658;--fe-token-function:#795e26;--fe-token-type:#267f99;--fe-token-variable:#001080;--fe-token-tag:maroon;--fe-token-meta:#6e6e6e}[data-fe-theme=dark]{--fe-bg:#1e1e1e;--fe-sidebar-bg:#252526;--fe-fg:#d4d4d4;--fe-muted:#ccc;--fe-faint:#9d9d9d;--fe-border:#3c3c3c;--fe-border-strong:#454545;--fe-accent:#007acc;--fe-hover:#2a2d2e;--fe-selection:#264f78;--fe-token-keyword:#569cd6;--fe-token-string:#ce9178;--fe-token-comment:#6a9955;--fe-token-number:#b5cea8;--fe-token-function:#dcdcaa;--fe-token-type:#4ec9b0;--fe-token-variable:#9cdcfe;--fe-token-tag:#569cd6;--fe-token-meta:#9b9b9b}.Myjg4a_column{box-sizing:border-box;background:var(--fe-sidebar-bg);min-width:0;height:100%;color:var(--fe-fg);flex-direction:column;font-size:13px;display:flex;overflow:hidden}.Myjg4a_header{box-sizing:border-box;border-bottom:1px solid var(--fe-border);flex:none;align-items:center;gap:6px;height:34px;padding:0 8px;display:flex}.Myjg4a_headerTitle{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;min-width:0;color:var(--fe-muted);flex:1;font-size:11px;font-weight:600;overflow:hidden}.Myjg4a_headerActions{flex:none;align-items:center;gap:2px;display:flex}.Myjg4a_action{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:13px;line-height:1;display:inline-flex}.Myjg4a_action:hover:not(:disabled){background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_action:disabled{opacity:.5;cursor:default}.Myjg4a_treeArea{flex:1;min-height:0;padding:4px;overflow-y:auto}.Myjg4a_row{cursor:pointer;user-select:none;white-space:nowrap;height:22px;color:var(--fe-fg);border-radius:3px;align-items:center;gap:6px;font-size:13px;display:flex}.Myjg4a_row:hover{background:var(--fe-hover)}.Myjg4a_rowSelected{background:var(--fe-selection)}.Myjg4a_rowSelected .Myjg4a_name{color:var(--fe-fg)}.Myjg4a_chevron{text-align:center;width:12px;color:var(--fe-muted);flex:none;font-size:10px;line-height:22px}.Myjg4a_icon{text-align:center;flex:none;width:16px;font-size:13px;line-height:22px}.Myjg4a_fileBadge{letter-spacing:-.3px;box-sizing:border-box;vertical-align:middle;user-select:none;border-radius:3px;justify-content:center;align-items:center;width:16px;height:15px;padding:0 1px;font-size:8px;font-weight:700;line-height:1;display:inline-flex}.Myjg4a_fileBadgeLong{letter-spacing:-.4px;font-size:6.5px}.Myjg4a_name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_size{color:var(--fe-faint);flex:none;font-size:11px}.Myjg4a_actions{opacity:0;flex:none;align-items:center;gap:2px;transition:opacity .12s;display:flex}.Myjg4a_row:hover .Myjg4a_actions,.Myjg4a_row:focus-within .Myjg4a_actions{opacity:1}.Myjg4a_rowHint{color:var(--fe-faint);padding:2px 8px 2px 0;font-size:12px;line-height:20px}.Myjg4a_rowError{color:#f48771;padding:2px 8px 2px 0;font-size:12px;line-height:18px}.Myjg4a_preview{border-right:1px solid var(--fe-border);background:var(--fe-bg);flex-direction:column;flex:0 0 55%;min-width:240px;min-height:0;animation:.18s Myjg4a_fe-preview-in;display:flex;overflow:hidden}.Myjg4a_previewClosing{animation:.2s forwards Myjg4a_fe-preview-out}@keyframes Myjg4a_fe-preview-in{0%{opacity:0}to{opacity:1}}@keyframes Myjg4a_fe-preview-out{0%{opacity:1}to{opacity:0}}.Myjg4a_handle{cursor:col-resize;touch-action:none;z-index:2;background:0 0;flex:none;width:6px;margin-left:-4px;margin-right:-2px}.Myjg4a_handle:hover,.Myjg4a_handle:active{background:var(--fe-accent);opacity:.35}.Myjg4a_tabBar{border-bottom:1px solid var(--fe-border);background:var(--fe-sidebar-bg);flex:none;align-items:stretch;height:34px;display:flex}.Myjg4a_tabScroller{scrollbar-width:thin;flex:1;align-items:stretch;min-width:0;display:flex;overflow-x:auto}.Myjg4a_collapse,.Myjg4a_tabAction{appearance:none;color:var(--fe-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;margin:auto 4px;padding:0;font-size:14px;line-height:1;display:inline-flex}.Myjg4a_collapse:hover,.Myjg4a_tabAction:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tabActionActive{background:var(--fe-hover);color:var(--fe-accent)}.Myjg4a_tab{max-width:180px;color:var(--fe-muted);border-right:1px solid var(--fe-border);cursor:pointer;user-select:none;white-space:nowrap;flex:none;align-items:center;gap:6px;padding:0 8px 0 12px;font-size:13px;display:flex}.Myjg4a_tab:hover{background:var(--fe-hover)}.Myjg4a_tabActive{background:var(--fe-bg);color:var(--fe-fg);box-shadow:inset 0 -1px 0 var(--fe-accent)}.Myjg4a_tabName{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.Myjg4a_tabIcon{flex:none;justify-content:center;align-items:center;width:16px;font-size:13px;line-height:1;display:inline-flex}.Myjg4a_tabClose{appearance:none;color:var(--fe-faint);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:11px;display:inline-flex}.Myjg4a_tabClose:hover{background:var(--fe-hover);color:var(--fe-fg)}.Myjg4a_tabDot{background:var(--fe-fg);opacity:.85;border-radius:50%;flex:none;width:8px;height:8px}.Myjg4a_previewBody{flex:1;min-height:0;overflow:auto}.Myjg4a_editor{contain:layout paint;height:100%;min-height:0;position:relative}.Myjg4a_editorPlain .Myjg4a_editorTextarea{color:var(--fe-fg)}.Myjg4a_editorHint{background:var(--fe-hover);color:var(--fe-muted);pointer-events:none;border-radius:4px;padding:4px 10px;font-size:11px;position:absolute;bottom:8px;left:8px}.Myjg4a_editorHighlight{pointer-events:none;white-space:pre;tab-size:2;color:var(--fe-fg);background:0 0;margin:0;padding:12px 12px calc(12px + 1.5em);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.Myjg4a_editorHighlight code{font-family:inherit;font-size:inherit;line-height:inherit;white-space:inherit}.Myjg4a_editorTextarea{box-sizing:border-box;resize:none;color:#0000;caret-color:var(--fe-fg);white-space:pre;tab-size:2;background:0 0;border:none;outline:none;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.Myjg4a_editor[data-wrap=on] .Myjg4a_editorHighlight,.Myjg4a_editor[data-wrap=on] .Myjg4a_editorTextarea{white-space:pre-wrap;overflow-wrap:anywhere}.Myjg4a_editor[data-wrap=on] .Myjg4a_editorTextarea{overflow-x:hidden}.Myjg4a_saveError{color:#1e1e1e;background:#f48771;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;right:8px}.Myjg4a_previewHint{color:var(--fe-faint);padding:12px;font-size:12px;line-height:18px}.Myjg4a_previewMeta{color:var(--fe-faint);font-size:11px}.Myjg4a_placeholder{text-align:center;color:var(--fe-faint);flex:1;justify-content:center;align-items:center;padding:16px;font-size:12px;line-height:18px;display:flex}.Myjg4a_editorHighlight .hljs-keyword,.Myjg4a_editorHighlight .hljs-selector-tag,.Myjg4a_editorHighlight .hljs-literal{color:var(--fe-token-keyword)}.Myjg4a_editorHighlight .hljs-string,.Myjg4a_editorHighlight .hljs-regexp,.Myjg4a_editorHighlight .hljs-addition{color:var(--fe-token-string)}.Myjg4a_editorHighlight .hljs-comment,.Myjg4a_editorHighlight .hljs-quote{color:var(--fe-token-comment);font-style:italic}.Myjg4a_editorHighlight .hljs-number,.Myjg4a_editorHighlight .hljs-symbol,.Myjg4a_editorHighlight .hljs-bullet{color:var(--fe-token-number)}.Myjg4a_editorHighlight .hljs-title,.Myjg4a_editorHighlight .hljs-section,.Myjg4a_editorHighlight .hljs-title.function_{color:var(--fe-token-function)}.Myjg4a_editorHighlight .hljs-type,.Myjg4a_editorHighlight .hljs-built_in,.Myjg4a_editorHighlight .hljs-class .hljs-title{color:var(--fe-token-type)}.Myjg4a_editorHighlight .hljs-attr,.Myjg4a_editorHighlight .hljs-attribute,.Myjg4a_editorHighlight .hljs-variable,.Myjg4a_editorHighlight .hljs-template-variable,.Myjg4a_editorHighlight .hljs-params{color:var(--fe-token-variable)}.Myjg4a_editorHighlight .hljs-tag,.Myjg4a_editorHighlight .hljs-name{color:var(--fe-token-tag)}.Myjg4a_editorHighlight .hljs-meta{color:var(--fe-token-meta)}.Myjg4a_editorHighlight .hljs-emphasis{font-style:italic}.Myjg4a_editorHighlight .hljs-strong{color:var(--fe-accent);font-weight:inherit}body[data-dsh-maid-atelier] [data-skin-chrome=top-trim],body[data-dsh-maid-atelier] [data-skin-chrome=bottom-trim]{translate:calc(var(--maid-sidebar-width,0px) + var(--dsh-explorer-width,0px) + var(--dsh-preview-width,0px)) 0!important}[class*=explorerCol]{border-right:1px solid var(--fe-border)!important}";
 		const tagId = "dsh-plugin-workbench/files.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -47,9 +47,13 @@ window.__ModuleLoader__.load({
 			"column": "Myjg4a_column",
 			"editor": "Myjg4a_editor",
 			"editorHighlight": "Myjg4a_editorHighlight",
+			"editorHint": "Myjg4a_editorHint",
+			"editorPlain": "Myjg4a_editorPlain",
 			"editorTextarea": "Myjg4a_editorTextarea",
 			"fe-preview-in": "Myjg4a_fe-preview-in",
 			"fe-preview-out": "Myjg4a_fe-preview-out",
+			"fileBadge": "Myjg4a_fileBadge",
+			"fileBadgeLong": "Myjg4a_fileBadgeLong",
 			"handle": "Myjg4a_handle",
 			"header": "Myjg4a_header",
 			"headerActions": "Myjg4a_headerActions",
@@ -69,15 +73,465 @@ window.__ModuleLoader__.load({
 			"saveError": "Myjg4a_saveError",
 			"size": "Myjg4a_size",
 			"tab": "Myjg4a_tab",
+			"tabAction": "Myjg4a_tabAction",
+			"tabActionActive": "Myjg4a_tabActionActive",
 			"tabActive": "Myjg4a_tabActive",
 			"tabBar": "Myjg4a_tabBar",
 			"tabClose": "Myjg4a_tabClose",
 			"tabDot": "Myjg4a_tabDot",
+			"tabIcon": "Myjg4a_tabIcon",
 			"tabName": "Myjg4a_tabName",
 			"tabScroller": "Myjg4a_tabScroller",
 			"treeArea": "Myjg4a_treeArea"
 		};
 		//#endregion
+		//#region src/client/fileIcons.tsx
+		/**
+		* File-type icons for the explorer tree rows and the preview tabs.
+		*
+		* Code/config files render as small colored badges with an extension label
+		* (VS Code "Minimal"-theme style); media, archives and installer files use
+		* emoji; anything unknown falls back to a generic document glyph. No icon
+		* assets are shipped — badges are pure CSS (per-language colors) and emoji
+		* come from the platform font.
+		*/
+		/** lowercase extension (no dot) → badge colors. */
+		const BADGES = {
+			ts: {
+				label: "TS",
+				bg: "#3178c6",
+				fg: "#ffffff"
+			},
+			mts: {
+				label: "TS",
+				bg: "#3178c6",
+				fg: "#ffffff"
+			},
+			cts: {
+				label: "TS",
+				bg: "#3178c6",
+				fg: "#ffffff"
+			},
+			tsx: {
+				label: "TSX",
+				bg: "#61dafb",
+				fg: "#06283d"
+			},
+			js: {
+				label: "JS",
+				bg: "#f7df1e",
+				fg: "#1e1e1e"
+			},
+			mjs: {
+				label: "JS",
+				bg: "#f7df1e",
+				fg: "#1e1e1e"
+			},
+			cjs: {
+				label: "JS",
+				bg: "#f7df1e",
+				fg: "#1e1e1e"
+			},
+			jsx: {
+				label: "JSX",
+				bg: "#61dafb",
+				fg: "#06283d"
+			},
+			json: {
+				label: "{}",
+				bg: "#cbcb41",
+				fg: "#1e1e1e"
+			},
+			jsonc: {
+				label: "{}",
+				bg: "#cbcb41",
+				fg: "#1e1e1e"
+			},
+			html: {
+				label: "HTML",
+				bg: "#e44d26",
+				fg: "#ffffff"
+			},
+			htm: {
+				label: "HTML",
+				bg: "#e44d26",
+				fg: "#ffffff"
+			},
+			css: {
+				label: "CSS",
+				bg: "#2965f1",
+				fg: "#ffffff"
+			},
+			scss: {
+				label: "SCSS",
+				bg: "#cc6699",
+				fg: "#ffffff"
+			},
+			less: {
+				label: "LESS",
+				bg: "#2a4d80",
+				fg: "#ffffff"
+			},
+			md: {
+				label: "MD",
+				bg: "#519aba",
+				fg: "#ffffff"
+			},
+			markdown: {
+				label: "MD",
+				bg: "#519aba",
+				fg: "#ffffff"
+			},
+			py: {
+				label: "PY",
+				bg: "#3572a5",
+				fg: "#ffffff"
+			},
+			pyw: {
+				label: "PY",
+				bg: "#3572a5",
+				fg: "#ffffff"
+			},
+			go: {
+				label: "GO",
+				bg: "#00add8",
+				fg: "#06283d"
+			},
+			rs: {
+				label: "RS",
+				bg: "#dea584",
+				fg: "#1e1e1e"
+			},
+			java: {
+				label: "JAVA",
+				bg: "#b07219",
+				fg: "#ffffff"
+			},
+			c: {
+				label: "C",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			h: {
+				label: "H",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			cpp: {
+				label: "CPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			cc: {
+				label: "CPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			cxx: {
+				label: "CPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			hpp: {
+				label: "HPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			hxx: {
+				label: "HPP",
+				bg: "#f34b7d",
+				fg: "#ffffff"
+			},
+			cs: {
+				label: "CS",
+				bg: "#178600",
+				fg: "#ffffff"
+			},
+			sh: {
+				label: "SH",
+				bg: "#89e051",
+				fg: "#1e1e1e"
+			},
+			bash: {
+				label: "SH",
+				bg: "#89e051",
+				fg: "#1e1e1e"
+			},
+			zsh: {
+				label: "SH",
+				bg: "#89e051",
+				fg: "#1e1e1e"
+			},
+			ps1: {
+				label: "PS1",
+				bg: "#012456",
+				fg: "#ffffff"
+			},
+			psm1: {
+				label: "PS1",
+				bg: "#012456",
+				fg: "#ffffff"
+			},
+			psd1: {
+				label: "PS1",
+				bg: "#012456",
+				fg: "#ffffff"
+			},
+			bat: {
+				label: "BAT",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			cmd: {
+				label: "BAT",
+				bg: "#6e6e6e",
+				fg: "#ffffff"
+			},
+			sql: {
+				label: "SQL",
+				bg: "#e38c00",
+				fg: "#ffffff"
+			},
+			yml: {
+				label: "YML",
+				bg: "#cb171e",
+				fg: "#ffffff"
+			},
+			yaml: {
+				label: "YML",
+				bg: "#cb171e",
+				fg: "#ffffff"
+			},
+			toml: {
+				label: "TOML",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			ini: {
+				label: "INI",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			conf: {
+				label: "INI",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			cfg: {
+				label: "INI",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			xml: {
+				label: "XML",
+				bg: "#a074c4",
+				fg: "#ffffff"
+			},
+			xsl: {
+				label: "XML",
+				bg: "#a074c4",
+				fg: "#ffffff"
+			},
+			svg: {
+				label: "SVG",
+				bg: "#e37933",
+				fg: "#ffffff"
+			},
+			vue: {
+				label: "VUE",
+				bg: "#41b883",
+				fg: "#06283d"
+			},
+			lock: {
+				label: "LOCK",
+				bg: "#9d9d9d",
+				fg: "#1e1e1e"
+			},
+			env: {
+				label: "ENV",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			gitignore: {
+				label: "GIT",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			gitattributes: {
+				label: "GIT",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			gitmodules: {
+				label: "GIT",
+				bg: "#f05033",
+				fg: "#ffffff"
+			},
+			editorconfig: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			npmrc: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			pnpmrc: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			yarnrc: {
+				label: "CFG",
+				bg: "#8b8b8b",
+				fg: "#ffffff"
+			},
+			mk: {
+				label: "MK",
+				bg: "#6d8086",
+				fg: "#ffffff"
+			},
+			makefile: {
+				label: "MK",
+				bg: "#6d8086",
+				fg: "#ffffff"
+			},
+			txt: {
+				label: "TXT",
+				bg: "#9d9d9d",
+				fg: "#ffffff"
+			},
+			log: {
+				label: "TXT",
+				bg: "#9d9d9d",
+				fg: "#ffffff"
+			},
+			pdf: {
+				label: "PDF",
+				bg: "#e74c3c",
+				fg: "#ffffff"
+			}
+		};
+		/** lowercase extension (no dot) → emoji glyph. */
+		const EMOJI = {
+			png: "🖼️",
+			jpg: "🖼️",
+			jpeg: "🖼️",
+			gif: "🖼️",
+			webp: "🖼️",
+			bmp: "🖼️",
+			ico: "🖼️",
+			avif: "🖼️",
+			jfif: "🖼️",
+			tif: "🖼️",
+			tiff: "🖼️",
+			mp3: "🎵",
+			wav: "🎵",
+			flac: "🎵",
+			ogg: "🎵",
+			oga: "🎵",
+			m4a: "🎵",
+			aac: "🎵",
+			wma: "🎵",
+			opus: "🎵",
+			mid: "🎵",
+			mp4: "🎬",
+			mkv: "🎬",
+			avi: "🎬",
+			mov: "🎬",
+			webm: "🎬",
+			flv: "🎬",
+			wmv: "🎬",
+			m4v: "🎬",
+			mpg: "🎬",
+			mpeg: "🎬",
+			zip: "🗜️",
+			rar: "🗜️",
+			"7z": "🗜️",
+			tar: "🗜️",
+			gz: "🗜️",
+			bz2: "🗜️",
+			xz: "🗜️",
+			tgz: "🗜️",
+			tbz2: "🗜️",
+			zst: "🗜️",
+			doc: "📘",
+			docx: "📘",
+			odt: "📘",
+			rtf: "📘",
+			xls: "📗",
+			xlsx: "📗",
+			ods: "📗",
+			csv: "📗",
+			ppt: "📙",
+			pptx: "📙",
+			odp: "📙",
+			epub: "📖",
+			mobi: "📖",
+			exe: "📦",
+			msi: "📦",
+			dmg: "📦",
+			app: "📦",
+			deb: "📦",
+			rpm: "📦",
+			apk: "📦",
+			iso: "📦"
+		};
+		/** Well-known extension-less names (lowercase) → emoji. */
+		const NAMED_EMOJI = { dockerfile: "🐳" };
+		/** Resolve a file name to its icon spec (badge colors or an emoji glyph). */
+		function fileIconFor(name) {
+			const lower = name.trim().toLowerCase();
+			if (lower === "") return {
+				kind: "emoji",
+				char: "📄"
+			};
+			const namedEmoji = NAMED_EMOJI[lower];
+			if (namedEmoji !== void 0) return {
+				kind: "emoji",
+				char: namedEmoji
+			};
+			let key;
+			if (lower.startsWith(".")) {
+				const rest = lower.slice(1);
+				key = rest.startsWith("env.") ? "env" : rest;
+			} else {
+				const dot = lower.lastIndexOf(".");
+				key = dot > 0 ? lower.slice(dot + 1) : lower;
+			}
+			const badge = BADGES[key];
+			if (badge !== void 0) return {
+				kind: "badge",
+				label: badge.label,
+				bg: badge.bg,
+				fg: badge.fg
+			};
+			const emoji = EMOJI[key];
+			if (emoji !== void 0) return {
+				kind: "emoji",
+				char: emoji
+			};
+			return {
+				kind: "emoji",
+				char: "📄"
+			};
+		}
+		/** Render a file's icon: a colored extension badge or an emoji glyph. */
+		function FileIcon({ name }) {
+			const icon = fileIconFor(name);
+			if (icon.kind === "emoji") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: icon.char });
+			const className = icon.label.length >= 4 ? `${files_module_css_default.fileBadge} ${files_module_css_default.fileBadgeLong}` : files_module_css_default.fileBadge;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className,
+				style: {
+					background: icon.bg,
+					color: icon.fg
+				},
+				children: icon.label
+			});
+		}
+		//#endregion
 		//#region src/client/store.ts
 		/**
 		* Module-local store shared by the explorer tree (FileExplorer) and the split
@@ -93,15 +547,29 @@ window.__ModuleLoader__.load({
 			active: void 0,
 			collapsed: false
 		};
+		const WRAP_KEY = "dsh-plugin-workbench:wrap";
+		/** Read the persisted wrap preference; defaults to soft wrap ON. */
+		function storedWrap() {
+			try {
+				if (typeof window === "undefined") return true;
+				const stored = window.localStorage.getItem(WRAP_KEY);
+				return stored === null ? true : stored === "1";
+			} catch {
+				return true;
+			}
+		}
+		const initialWrap = storedWrap();
 		let state = {
 			currentCwd: void 0,
 			workspaces: {},
-			theme: "dark"
+			theme: "dark",
+			wrap: initialWrap
 		};
 		let view = {
 			tabs: EMPTY_TABS,
 			active: void 0,
 			collapsed: false,
+			wrap: initialWrap,
 			theme: "dark",
 			cwd: void 0
 		};
@@ -128,10 +596,11 @@ window.__ModuleLoader__.load({
 				tabs: ws.tabs,
 				active: ws.active,
 				collapsed: ws.collapsed,
+				wrap: state.wrap,
 				theme: state.theme,
 				cwd: state.currentCwd
 			};
-			if (nextView.tabs === view.tabs && nextView.active === view.active && nextView.collapsed === view.collapsed && nextView.theme === view.theme && nextView.cwd === view.cwd) return;
+			if (nextView.tabs === view.tabs && nextView.active === view.active && nextView.collapsed === view.collapsed && nextView.wrap === view.wrap && nextView.theme === view.theme && nextView.cwd === view.cwd) return;
 			view = nextView;
 			for (const listener of [...listeners]) listener();
 		}
@@ -236,6 +705,17 @@ window.__ModuleLoader__.load({
 				theme: state.theme === "dark" ? "light" : "dark"
 			});
 		}
+		/** Toggle display-only soft wrap for the editor (global, persisted). */
+		function toggleWrap() {
+			const wrap = !state.wrap;
+			try {
+				window.localStorage.setItem(WRAP_KEY, wrap ? "1" : "0");
+			} catch {}
+			commit({
+				...state,
+				wrap
+			});
+		}
 		//#endregion
 		//#region src/client/FileExplorer.tsx
 		/**
@@ -257,6 +737,10 @@ window.__ModuleLoader__.load({
 		}
 		/** How often the visible tree is re-listed to pick up disk changes. */
 		const REFRESH_MS = 2e3;
+		/** How many previously-expanded folders to re-list at once on workspace switch. */
+		const DIR_LOAD_BATCH = 4;
+		/** Pause between batches when restoring expanded folders. */
+		const DIR_LOAD_GAP_MS = 50;
 		const EMPTY_EXPANDED = /* @__PURE__ */ new Set();
 		/** True when two directory listings are identical (name/kind/size). */
 		function sameEntries(a, b) {
@@ -264,6 +748,69 @@ window.__ModuleLoader__.load({
 			for (let i = 0; i < a.length; i += 1) if (a[i].name !== b[i].name || a[i].kind !== b[i].kind || a[i].size !== b[i].size) return false;
 			return true;
 		}
+		/**
+		* One tree row, memoized so opening/activating a file (which changes the
+		* active-path highlight) re-renders only the affected row — with a workspace
+		* full of files, re-rendering the whole tree on every click is what made
+		* opening files feel laggy.
+		*/
+		const TreeRow = (0, react.memo)(function TreeRow({ entry, depth, isActive, isExpanded, onToggleDir, onRefreshDir, onSelect, onDoubleClick, onOpenExternal, t }) {
+			const isDir = entry.kind === "dir";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${files_module_css_default.row} ${isActive ? files_module_css_default.rowSelected : ""}`,
+				style: { paddingLeft: 8 + depth * 14 },
+				onClick: () => onSelect(entry),
+				onDoubleClick: () => onDoubleClick(entry),
+				role: "treeitem",
+				"aria-selected": isActive,
+				"aria-expanded": isDir ? isExpanded : void 0,
+				title: entry.name,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: files_module_css_default.chevron,
+						onClick: (e) => {
+							e.stopPropagation();
+							if (isDir) onToggleDir(entry.path);
+						},
+						children: isDir ? isExpanded ? "▾" : "▸" : ""
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: files_module_css_default.icon,
+						children: isDir ? isExpanded ? "📂" : "📁" : entry.kind === "file" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { name: entry.name }) : "·"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: files_module_css_default.name,
+						children: entry.name
+					}),
+					entry.kind === "file" && entry.size !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: files_module_css_default.size,
+						children: formatSize$1(entry.size)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: files_module_css_default.actions,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: files_module_css_default.action,
+							title: t("action.open"),
+							onClick: (e) => {
+								e.stopPropagation();
+								onOpenExternal(entry.path);
+							},
+							children: "↗"
+						}), isDir && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: files_module_css_default.action,
+							title: t("action.refresh"),
+							onClick: (e) => {
+								e.stopPropagation();
+								onRefreshDir(entry.path);
+							},
+							children: "⟳"
+						})]
+					})
+				]
+			});
+		});
 		function FileExplorer({ width, useSessions, t, listDir, openPath }) {
 			const sessionList = useSessions((s) => s);
 			const currentId = sessionList.current;
@@ -291,6 +838,8 @@ window.__ModuleLoader__.load({
 				expanded,
 				rootLoading
 			};
+			const childrenRef = (0, react.useRef)(children);
+			childrenRef.current = children;
 			(0, react.useEffect)(() => {
 				document.body.style.setProperty("--dsh-explorer-width", `${width}px`);
 				return () => {
@@ -312,12 +861,18 @@ window.__ModuleLoader__.load({
 				setRootLoading(true);
 				const controller = new AbortController();
 				rootAbortRef.current = controller;
-				listDir(cwd, controller.signal).then((result) => {
+				listDir(cwd, controller.signal).then(async (result) => {
 					if (controller.signal.aborted) return;
 					setRoot(result.root);
 					setChildren({ [result.root]: result.entries });
 					setRootError(void 0);
-					for (const dirPath of expanded) if (dirPath !== result.root) loadDir(dirPath);
+					const dirs = [...expanded].filter((dirPath) => dirPath !== result.root);
+					for (let i = 0; i < dirs.length; i += DIR_LOAD_BATCH) {
+						if (controller.signal.aborted) return;
+						const batch = dirs.slice(i, i + DIR_LOAD_BATCH);
+						await Promise.all(batch.map((dirPath) => loadDir(dirPath)));
+						if (i + DIR_LOAD_BATCH < dirs.length) await new Promise((resolve) => setTimeout(resolve, DIR_LOAD_GAP_MS));
+					}
 				}).catch((error) => {
 					if (controller.signal.aborted) return;
 					setRootError(error instanceof Error ? error.message : String(error));
@@ -427,12 +982,8 @@ window.__ModuleLoader__.load({
 						[cwdKey]: next
 					};
 				});
-				if (!children[dirPath]) loadDir(dirPath);
-			}, [
-				cwdKey,
-				children,
-				loadDir
-			]);
+				if (!childrenRef.current[dirPath]) loadDir(dirPath);
+			}, [cwdKey, loadDir]);
 			const refreshDir = (0, react.useCallback)((dirPath) => {
 				setChildren((prev) => {
 					const next = { ...prev };
@@ -468,59 +1019,17 @@ window.__ModuleLoader__.load({
 				const isLoading = isDir && loadingDirs.has(entry.path);
 				const childEntries = isDir && isExpanded ? children[entry.path] : void 0;
 				const error = isDir ? dirErrors[entry.path] : void 0;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: `${files_module_css_default.row} ${entry.kind === "file" && activePath === entry.path ? files_module_css_default.rowSelected : ""}`,
-					style: { paddingLeft: 8 + depth * 14 },
-					onClick: () => onRowClick(entry),
-					onDoubleClick: () => onRowDoubleClick(entry),
-					role: "treeitem",
-					"aria-selected": entry.kind === "file" && activePath === entry.path,
-					"aria-expanded": isDir ? isExpanded : void 0,
-					title: entry.name,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: files_module_css_default.chevron,
-							onClick: (e) => {
-								e.stopPropagation();
-								if (isDir) toggleDir(entry.path);
-							},
-							children: isDir ? isExpanded ? "▾" : "▸" : ""
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: files_module_css_default.icon,
-							children: isDir ? "📁" : entry.kind === "file" ? "📄" : "·"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: files_module_css_default.name,
-							children: entry.name
-						}),
-						entry.kind === "file" && entry.size !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: files_module_css_default.size,
-							children: formatSize$1(entry.size)
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: files_module_css_default.actions,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: files_module_css_default.action,
-								title: t("action.open"),
-								onClick: (e) => {
-									e.stopPropagation();
-									openPath(entry.path);
-								},
-								children: "↗"
-							}), isDir && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: files_module_css_default.action,
-								title: t("action.refresh"),
-								onClick: (e) => {
-									e.stopPropagation();
-									refreshDir(entry.path);
-								},
-								children: "⟳"
-							})]
-						})
-					]
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeRow, {
+					entry,
+					depth,
+					isActive: entry.kind === "file" && activePath === entry.path,
+					isExpanded,
+					onToggleDir: toggleDir,
+					onRefreshDir: refreshDir,
+					onSelect: onRowClick,
+					onDoubleClick: onRowDoubleClick,
+					onOpenExternal: openPath,
+					t
 				}), isDir && isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 					isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: files_module_css_default.rowHint,
@@ -8227,6 +8736,20 @@ window.__ModuleLoader__.load({
 		const PREVIEW_MIN = 240;
 		const CHAT_MIN = 240;
 		const PREVIEW_TOO_LARGE_LABEL = "512KB";
+		/**
+		* Above this size the overlay editor (syntax-highlight layer + transparent
+		* textarea) falls back to a plain textarea: re-injecting and re-laying out
+		* hundreds of KB of wrapped text on every keystroke is what makes the page
+		* lag. The plain textarea keeps editing, wrapping and scrolling — it only
+		* loses the colors, which files this big rarely need anyway.
+		*/
+		const HIGHLIGHT_MAX_BYTES = 65536;
+		/**
+		* Languages always rendered as a plain textarea, never the overlay: the
+		* highlight layer costs a full extra layout pass (and with CJK text a
+		* fragile alignment surface) for prose formats where colors add little.
+		*/
+		const PLAIN_LANGUAGES = /* @__PURE__ */ new Set(["markdown"]);
 		function basenameOf(path) {
 			const trimmed = path.replace(/[\\/]+$/, "");
 			const idx = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
@@ -8261,7 +8784,7 @@ window.__ModuleLoader__.load({
 			};
 		}
 		function FilePreview({ t, readFile, writeFile }) {
-			const { tabs, active, theme, collapsed } = useTabsState();
+			const { tabs, active, theme, collapsed, wrap } = useTabsState();
 			const [previewWidth, setPreviewWidth] = (0, react.useState)(null);
 			const [closing, setClosing] = (0, react.useState)(false);
 			const [dragPath, setDragPath] = (0, react.useState)(void 0);
@@ -8272,35 +8795,38 @@ window.__ModuleLoader__.load({
 			const previewRef = (0, react.useRef)(null);
 			const handleRef = (0, react.useRef)(null);
 			const highlightRef = (0, react.useRef)(null);
+			const textareaRef = (0, react.useRef)(null);
 			const refresh = (0, react.useCallback)(() => bump((v) => v + 1), []);
 			(0, react.useEffect)(() => {
 				const cache = cacheRef.current;
 				for (const [path] of cache) if (!tabs.includes(path)) cache.delete(path);
-				const controllers = [];
-				for (const path of tabs) {
-					if (cache.has(path)) continue;
-					cache.set(path, { status: "loading" });
-					const controller = new AbortController();
-					controllers.push(controller);
-					readFile(path, controller.signal).then((result) => {
-						if (!controller.signal.aborted) {
-							cache.set(path, previewDataOf(result));
-							refresh();
-						}
-					}).catch((error) => {
-						if (!controller.signal.aborted) {
-							cache.set(path, {
-								status: "error",
-								message: error instanceof Error ? error.message : String(error)
-							});
-							refresh();
-						}
-					});
+				const target = active ?? tabs[0];
+				if (target === void 0 || cache.has(target)) {
+					refresh();
+					return;
 				}
+				const controller = new AbortController();
+				cache.set(target, { status: "loading" });
+				readFile(target, controller.signal).then((result) => {
+					if (!controller.signal.aborted) {
+						cache.set(target, previewDataOf(result));
+						if (result.size > HIGHLIGHT_MAX_BYTES) requestAnimationFrame(refresh);
+						else refresh();
+					}
+				}).catch((error) => {
+					if (!controller.signal.aborted) {
+						cache.set(target, {
+							status: "error",
+							message: error instanceof Error ? error.message : String(error)
+						});
+						refresh();
+					}
+				});
 				refresh();
-				return () => controllers.forEach((c) => c.abort());
+				return () => controller.abort();
 			}, [
 				tabs,
+				active,
 				readFile,
 				refresh
 			]);
@@ -8320,6 +8846,28 @@ window.__ModuleLoader__.load({
 				}
 			}, [tabs.length]);
 			const isOpen = !collapsed && (tabs.length > 0 || closing || hasOpenedRef.current);
+			const activeData = active !== void 0 ? cacheRef.current.get(active) : void 0;
+			const language = active !== void 0 ? detectLanguage(active) : void 0;
+			const tooBig = (activeData?.size ?? 0) > HIGHLIGHT_MAX_BYTES;
+			const plain = language === void 0 || tooBig || language !== void 0 && PLAIN_LANGUAGES.has(language);
+			(0, react.useEffect)(() => {
+				const pre = highlightRef.current;
+				const ta = textareaRef.current;
+				if (pre === null || ta === null || plain) return void 0;
+				let raf = 0;
+				const tick = () => {
+					pre.scrollTop = ta.scrollTop;
+					pre.scrollLeft = ta.scrollLeft;
+					raf = requestAnimationFrame(tick);
+				};
+				raf = requestAnimationFrame(tick);
+				return () => cancelAnimationFrame(raf);
+			}, [
+				isOpen,
+				active,
+				activeData?.status,
+				plain
+			]);
 			(0, react.useEffect)(() => {
 				if (!isOpen) {
 					document.body.style.removeProperty("--dsh-preview-width");
@@ -8416,7 +8964,6 @@ window.__ModuleLoader__.load({
 			const onTabDragEnd = (0, react.useCallback)(() => {
 				setDragPath(void 0);
 			}, []);
-			const activeData = active !== void 0 ? cacheRef.current.get(active) : void 0;
 			if (!isOpen) return null;
 			const renderBody = () => {
 				if (activeData === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -8428,34 +8975,36 @@ window.__ModuleLoader__.load({
 						className: files_module_css_default.previewHint,
 						children: t("preview.loading")
 					});
-					case "loaded": {
-						const highlighted = active !== void 0 ? highlightCode(activeData.draft ?? "", active) : "";
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: files_module_css_default.editor,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-									ref: highlightRef,
-									className: files_module_css_default.editorHighlight,
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { dangerouslySetInnerHTML: { __html: highlighted } })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-									className: files_module_css_default.editorTextarea,
-									value: activeData.draft ?? "",
-									onChange: (e) => onTextareaChange(e.target.value),
-									onScroll: onTextareaScroll,
-									onKeyDown,
-									spellCheck: false,
-									wrap: "off",
-									title: t("action.saveHint")
-								}),
-								saveError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: files_module_css_default.saveError,
-									children: saveError
-								})
-							]
-						});
-					}
+					case "loaded": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `${files_module_css_default.editor}${plain ? ` ${files_module_css_default.editorPlain}` : ""}`,
+						"data-wrap": wrap ? "on" : "off",
+						children: [
+							!plain && active !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								ref: highlightRef,
+								className: files_module_css_default.editorHighlight,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { dangerouslySetInnerHTML: { __html: highlightCode(activeData.draft ?? "", active) } })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+								ref: textareaRef,
+								className: files_module_css_default.editorTextarea,
+								value: activeData.draft ?? "",
+								onChange: (e) => onTextareaChange(e.target.value),
+								onScroll: onTextareaScroll,
+								onKeyDown,
+								spellCheck: false,
+								wrap: wrap ? "soft" : "off"
+							}),
+							language !== void 0 && tooBig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: files_module_css_default.editorHint,
+								children: t("preview.highlightOff")
+							}),
+							saveError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: files_module_css_default.saveError,
+								children: saveError
+							})
+						]
+					});
 					case "binary": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: files_module_css_default.previewHint,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("preview.binary") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -8488,44 +9037,58 @@ window.__ModuleLoader__.load({
 				"data-fe-theme": theme,
 				children: [tabs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: files_module_css_default.tabBar,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: files_module_css_default.tabScroller,
-						children: tabs.map((path) => {
-							const data = cacheRef.current.get(path);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: `${files_module_css_default.tab} ${path === active ? files_module_css_default.tabActive : ""}`,
-								onClick: () => activateFile(path),
-								draggable: true,
-								onDragStart: (e) => onTabDragStart(e, path),
-								onDragOver: (e) => onTabDragOver(e, path),
-								onDragEnd: onTabDragEnd,
-								title: path,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: files_module_css_default.tabName,
-										children: basenameOf(path)
-									}),
-									data?.dirty === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: files_module_css_default.tabDot }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: files_module_css_default.tabClose,
-										title: t("tab.close"),
-										onClick: (e) => {
-											e.stopPropagation();
-											closeFile(path);
-										},
-										children: "✕"
-									})
-								]
-							}, path);
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: files_module_css_default.tabScroller,
+							children: tabs.map((path) => {
+								const data = cacheRef.current.get(path);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: `${files_module_css_default.tab} ${path === active ? files_module_css_default.tabActive : ""}`,
+									onClick: () => activateFile(path),
+									draggable: true,
+									onDragStart: (e) => onTabDragStart(e, path),
+									onDragOver: (e) => onTabDragOver(e, path),
+									onDragEnd: onTabDragEnd,
+									title: path,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: files_module_css_default.tabIcon,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, { name: basenameOf(path) })
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: files_module_css_default.tabName,
+											children: basenameOf(path)
+										}),
+										data?.dirty === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: files_module_css_default.tabDot }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: files_module_css_default.tabClose,
+											title: t("tab.close"),
+											onClick: (e) => {
+												e.stopPropagation();
+												closeFile(path);
+											},
+											children: "✕"
+										})
+									]
+								}, path);
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: `${files_module_css_default.tabAction}${wrap ? ` ${files_module_css_default.tabActionActive}` : ""}`,
+							title: wrap ? t("action.wrapOff") : t("action.wrapOn"),
+							onClick: toggleWrap,
+							children: "⤶"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: files_module_css_default.collapse,
+							title: t("tab.collapse"),
+							onClick: collapsePreview,
+							children: "<"
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: files_module_css_default.collapse,
-						title: t("tab.collapse"),
-						onClick: collapsePreview,
-						children: "<"
-					})]
+					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: files_module_css_default.previewBody,
 					children: renderBody()
@@ -8549,6 +9112,8 @@ window.__ModuleLoader__.load({
 			"action.open": "在系统中打开",
 			"action.theme": "切换浅色/暗色主题",
 			"action.saveHint": "Ctrl+S 保存",
+			"action.wrapOn": "开启自动换行（显示层换行，不改文件）",
+			"action.wrapOff": "关闭自动换行（长行横向滚动）",
 			"tab.close": "关闭标签页",
 			"tab.collapse": "收起文件详情",
 			"tab.expand": "弹出文件详情",
@@ -8556,7 +9121,8 @@ window.__ModuleLoader__.load({
 			"preview.binary": "二进制文件，无法预览",
 			"preview.tooLarge": "文件过大，仅支持预览不超过 {limit}",
 			"preview.emptyDir": "空目录",
-			"preview.error": "加载失败"
+			"preview.error": "加载失败",
+			"preview.highlightOff": "大文件：已关闭语法高亮（仍可编辑）"
 		};
 		const en = {
 			"placeholder.noSession": "No session",
@@ -8565,6 +9131,8 @@ window.__ModuleLoader__.load({
 			"action.open": "Open in system",
 			"action.theme": "Toggle light/dark theme",
 			"action.saveHint": "Ctrl+S to save",
+			"action.wrapOn": "Enable word wrap (display only, file unchanged)",
+			"action.wrapOff": "Disable word wrap (long lines scroll horizontally)",
 			"tab.close": "Close tab",
 			"tab.collapse": "Collapse file details",
 			"tab.expand": "Expand file details",
@@ -8572,7 +9140,8 @@ window.__ModuleLoader__.load({
 			"preview.binary": "Binary file, cannot preview",
 			"preview.tooLarge": "File too large to preview (limit {limit})",
 			"preview.emptyDir": "Empty directory",
-			"preview.error": "Load failed"
+			"preview.error": "Load failed",
+			"preview.highlightOff": "Large file: syntax highlighting off (still editable)"
 		};
 		//#endregion
 		//#region src/client/index.ts