@rooode/dsh-plugin-preview 0.1.2 → 0.1.4

package/lib/client.js

@@ -23,8 +23,13 @@
     // =========================================================================
     const STORAGE_KEY_TABS = 'dsh:preview:tabs:v1';
     const STORAGE_KEY_WIDTH = 'dsh:preview:panel_width:v1';
-    const DEFAULT_PANEL_WIDTH = 620;
+    const STORAGE_KEY_TREE_OPEN = 'dsh:preview:tree:open:v1';
+    const STORAGE_KEY_TREE_WIDTH = 'dsh:preview:tree:width:v1';
+    const DEFAULT_PANEL_WIDTH = 760;
     const MIN_PANEL_WIDTH = 380;
+    const DEFAULT_TREE_WIDTH = 240;
+    const MIN_TREE_WIDTH = 180;
+    const MAX_TREE_WIDTH = 450;
     const SUPPORTED_EXTENSIONS = new Set([
       '.md', '.markdown', '.mdown', '.mkdn', '.mdwn',
       '.txt', '.log', '.json', '.yaml', '.yml',
@@ -39,7 +44,9 @@
     let globalTabs = [];
     let globalActiveTabId = null;
     let globalIsPanelOpen = false;
+    let globalIsTreeOpen = true;
     let globalPanelWidth = DEFAULT_PANEL_WIDTH;
+    let globalTreeWidth = DEFAULT_TREE_WIDTH;
     let globalLastOpenTime = 0;
     const stateListeners = new Set();
 
@@ -53,6 +60,23 @@
       }
     } catch (e) {}
 
+    try {
+      const savedTreeOpen = localStorage.getItem(STORAGE_KEY_TREE_OPEN);
+      if (savedTreeOpen !== null) {
+        globalIsTreeOpen = savedTreeOpen === 'true';
+      }
+    } catch (e) {}
+
+    try {
+      const savedTreeWidth = localStorage.getItem(STORAGE_KEY_TREE_WIDTH);
+      if (savedTreeWidth) {
+        const parsed = parseInt(savedTreeWidth, 10);
+        if (!isNaN(parsed) && parsed >= MIN_TREE_WIDTH) {
+          globalTreeWidth = Math.min(parsed, MAX_TREE_WIDTH);
+        }
+      }
+    } catch (e) {}
+
     try {
       const savedTabs = localStorage.getItem(STORAGE_KEY_TABS);
       if (savedTabs) {
@@ -84,6 +108,22 @@
       notifyStateChange();
     }
 
+    function setIsTreeOpen(open) {
+      globalIsTreeOpen = open;
+      try {
+        localStorage.setItem(STORAGE_KEY_TREE_OPEN, String(open));
+      } catch (e) {}
+      notifyStateChange();
+    }
+
+    function setTreeWidth(width) {
+      globalTreeWidth = Math.max(MIN_TREE_WIDTH, Math.min(width, MAX_TREE_WIDTH));
+      try {
+        localStorage.setItem(STORAGE_KEY_TREE_WIDTH, String(globalTreeWidth));
+      } catch (e) {}
+      notifyStateChange();
+    }
+
     function setPanelOpen(open) {
       globalIsPanelOpen = open;
       if (open) {
@@ -112,6 +152,85 @@
       return SUPPORTED_EXTENSIONS.has(ext);
     }
 
+    function formatBytes(bytes) {
+      if (!bytes || bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return (bytes / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1) + ' ' + sizes[i];
+    }
+
+    function getFileIcon(node) {
+      if (node.isDir) {
+        return { icon: '📁', color: '#eab308' };
+      }
+      const ext = (node.extension || getFileExtension(node.name || node.path || '')).toLowerCase();
+      if (ext === '.md' || ext === '.markdown') return { icon: '📝', color: '#0284c7' };
+      if (ext === '.json') return { icon: '{ }', color: '#10b981' };
+      if (ext === '.ts' || ext === '.tsx') return { icon: 'TS', color: '#3b82f6' };
+      if (ext === '.js' || ext === '.jsx' || ext === '.mjs') return { icon: 'JS', color: '#eab308' };
+      if (ext === '.yaml' || ext === '.yml' || ext === '.toml' || ext === '.ini') return { icon: '⚙️', color: '#f97316' };
+      if (ext === '.html' || ext === '.htm') return { icon: '🌐', color: '#ef4444' };
+      if (ext === '.css' || ext === '.scss' || ext === '.less') return { icon: '#', color: '#06b6d4' };
+      if (ext === '.py') return { icon: '🐍', color: '#38bdf8' };
+      if (ext === '.sh' || ext === '.bash' || ext === '.ps1') return { icon: '⌨️', color: '#8b5cf6' };
+      if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].includes(ext)) return { icon: '🖼️', color: '#ec4899' };
+      if (ext === '.log' || ext === '.txt') return { icon: '📄', color: '#64748b' };
+      return { icon: '📄', color: '#94a3b8' };
+    }
+
+    
+    function getFileTypeCategory(filePath) {
+      if (!filePath) return 'text';
+      const ext = getFileExtension(filePath).toLowerCase();
+      if (['.md', '.markdown', '.mdown', '.mkdn', '.mdwn'].includes(ext)) return 'markdown';
+      if (['.json', '.jsonc', '.json5', '.geojson', '.lock'].includes(ext)) return 'json';
+      if (['.yaml', '.yml'].includes(ext)) return 'yaml';
+      if (['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts'].includes(ext)) return 'javascript';
+      if (['.py', '.pyw'].includes(ext)) return 'python';
+      if (['.html', '.htm', '.svg', '.xml'].includes(ext)) return 'markup';
+      if (['.css', '.scss', '.less', '.sass'].includes(ext)) return 'css';
+      if (['.sh', '.bash', '.zsh', '.ps1', '.bat', '.cmd'].includes(ext)) return 'shell';
+      if (['.sql'].includes(ext)) return 'sql';
+      if (['.toml', '.ini', '.env', '.properties', '.conf', '.cfg', '.gitignore', '.gitattributes', '.editorconfig'].includes(ext)) return 'config';
+      return 'text';
+    }
+
+    function getDefaultViewMode(category) {
+      if (category === 'markdown') return 'preview';
+      if (category === 'json') return 'json-tree';
+      if (category === 'yaml') return 'code';
+      return 'code';
+    }
+
+    function getCurrentWorkspaceRoot() {
+      if (clientCtx && clientCtx.workspaces) {
+        try {
+          if (clientCtx.workspaces.current?.directory) {
+            return clientCtx.workspaces.current.directory;
+          }
+          const snapshot = clientCtx.workspaces.list?.getSnapshot();
+          if (snapshot?.items?.length > 0) {
+            return snapshot.items[0].directory || snapshot.items[0].path || '';
+          }
+        } catch (e) {}
+      }
+      if (clientCtx && clientCtx.sessions) {
+        try {
+          const snapshot = clientCtx.sessions.list?.getSnapshot();
+          const currentSessionId = snapshot?.current;
+          if (currentSessionId && snapshot?.byId?.[currentSessionId]?.cwd) {
+            return snapshot.byId[currentSessionId].cwd;
+          }
+        } catch (e) {}
+      }
+      if (typeof location !== 'undefined' && location.hash) {
+        const m = location.hash.match(/workspace=([^&]+)/);
+        if (m) return decodeURIComponent(m[1]);
+      }
+      return '';
+    }
+
     function resolveAbsoluteFilePath(targetPath) {
       if (!targetPath) return '';
       let cleanPath = targetPath.trim();
@@ -126,24 +245,7 @@
       if (isWinAbs || isPosixAbs) {
         return cleanPath;
       }
-      let cwd = '';
-      if (clientCtx && clientCtx.sessions) {
-        try {
-          const snapshot = clientCtx.sessions.list.getSnapshot();
-          const currentSessionId = snapshot.current;
-          if (currentSessionId && snapshot.byId[currentSessionId]) {
-            cwd = snapshot.byId[currentSessionId].cwd || '';
-          }
-        } catch (e) {}
-      }
-      if (!cwd && clientCtx && clientCtx.workspaces) {
-        try {
-          const wsList = clientCtx.workspaces.list.getSnapshot();
-          if (wsList.items && wsList.items.length > 0) {
-            cwd = wsList.items[0].directory || '';
-          }
-        } catch (e) {}
-      }
+      const cwd = getCurrentWorkspaceRoot();
       if (cwd) {
         const isWinCwd = /^[a-zA-Z]:[\\/]/.test(cwd);
         const sep = isWinCwd ? '\\' : '/';
@@ -170,12 +272,15 @@
         globalActiveTabId = globalTabs[existingIndex].id;
         globalTabs[existingIndex].lastActiveAt = Date.now();
       } else {
+        const category = getFileTypeCategory(fullPath);
+        const defaultMode = getDefaultViewMode(category);
         const newTab = {
           id: tabId,
           filePath: fullPath,
           title: fileName,
           extension: ext,
-          viewMode: options.viewMode || 'preview',
+          category: category,
+          viewMode: options.viewMode || defaultMode,
           pinned: false,
           createdAt: Date.now(),
           lastActiveAt: Date.now(),
@@ -201,7 +306,6 @@
           globalActiveTabId = nextTabs[nextIdx].id;
         } else {
           globalActiveTabId = null;
-          globalIsPanelOpen = false;
         }
       }
       saveTabsToStorage();
@@ -211,7 +315,6 @@
     function closeAllTabs() {
       globalTabs = [];
       globalActiveTabId = null;
-      globalIsPanelOpen = false;
       saveTabsToStorage();
       notifyStateChange();
     }
@@ -687,506 +790,1759 @@
     }
 
     // =========================================================================
-    // React Components: MarkdownPreviewView
+    // React Components: Workspace File Tree Explorer
     // =========================================================================
-    function MarkdownPreviewView({ tab, fileInfo, isLoading, error, onRefresh, onOpenNative, onReveal }) {
-      const [viewMode, setViewMode] = useState(tab.viewMode || 'preview');
-      const [isTocOpen, setIsTocOpen] = useState(false);
-      const [searchQuery, setSearchQuery] = useState('');
-      const [isSearchOpen, setIsSearchOpen] = useState(false);
-      const contentRef = useRef(null);
-      const sourceRef = useRef(null);
+    function FileTreeNodeItem({ node, depth = 0, expandedPaths, onToggleExpand, activeFilePath, onOpenFile, searchQuery }) {
+      const isDir = node.isDir;
+      const isExpanded = expandedPaths.has(node.path);
+      const isActive = !isDir && activeFilePath && activeFilePath.toLowerCase() === node.path.toLowerCase();
+      const iconInfo = getFileIcon(node);
+
+      const indentStyle = { paddingLeft: `${depth * 14 + 6}px` };
+
+      const handleClick = (e) => {
+        e.stopPropagation();
+        if (isDir) {
+          onToggleExpand(node.path);
+        } else {
+          onOpenFile(node.path);
+        }
+      };
 
-      const content = fileInfo?.content || '';
-      const tocHeadings = useMemo(() => extractTocHeadings(content), [content]);
+      return h(Fragment, null,
+        h('div', {
+          className: `dsh-tree-node-row ${isDir ? 'is-dir' : 'is-file'} ${isActive ? 'active' : ''}`,
+          style: indentStyle,
+          onClick: handleClick,
+          title: `${node.name}\n${node.path}${node.size ? ' (' + formatBytes(node.size) + ')' : ''}`,
+        },
+          // Chevron indicator for directory
+          isDir ? h('span', {
+            className: `dsh-tree-chevron ${isExpanded ? 'expanded' : ''}`,
+          }, isExpanded ? '▼' : '▶') : h('span', { className: 'dsh-tree-chevron-placeholder' }),
+
+          // File / Directory Icon
+          h('span', {
+            className: 'dsh-tree-icon',
+            style: { color: isDir ? (isExpanded ? '#ca8a04' : '#eab308') : iconInfo.color },
+          }, isDir ? (isExpanded ? '📂' : '📁') : iconInfo.icon),
+
+          // File / Directory Name
+          h('span', { className: 'dsh-tree-name' }, node.name),
+
+          // Size / Count badge
+          isDir && node.childCount !== undefined ? h('span', { className: 'dsh-tree-badge' }, node.childCount) : (
+            !isDir && node.size ? h('span', { className: 'dsh-tree-size-badge' }, formatBytes(node.size)) : null
+          )
+        ),
 
-      const renderedHtml = useMemo(() => {
-        if (!content) return '';
-        let html = renderMarkdownToHtml(content);
-        if (searchQuery.trim()) {
-          try {
-            const q = escapeHtml(searchQuery.trim());
-            const regex = new RegExp(`(${q})`, 'gi');
-            html = html.replace(regex, '<mark class="dsh-search-highlight">$1</mark>');
-          } catch (e) {}
+        // Children if expanded
+        isDir && isExpanded && node.children && node.children.length > 0 ? (
+          node.children.map(child => h(FileTreeNodeItem, {
+            key: child.path,
+            node: child,
+            depth: depth + 1,
+            expandedPaths,
+            onToggleExpand,
+            activeFilePath,
+            onOpenFile,
+            searchQuery,
+          }))
+        ) : null
+      );
+    }
+
+    function filterTreeNode(node, query) {
+      if (!query) return true;
+      const q = query.toLowerCase();
+      if (node.name.toLowerCase().includes(q)) return true;
+      if (node.isDir && node.children) {
+        return node.children.some(child => filterTreeNode(child, query));
+      }
+      return false;
+    }
+
+    function filterTree(tree, query) {
+      if (!query) return tree;
+      return tree.filter(node => filterTreeNode(node, query)).map(node => {
+        if (!node.isDir) return node;
+        return {
+          ...node,
+          children: filterTree(node.children || [], query),
+        };
+      });
+    }
+
+    function collectAllDirPaths(tree) {
+      const paths = [];
+      const traverse = (nodes) => {
+        for (const n of nodes) {
+          if (n.isDir) {
+            paths.push(n.path);
+            if (n.children) traverse(n.children);
+          }
         }
-        return html;
-      }, [content, searchQuery]);
+      };
+      traverse(tree);
+      return paths;
+    }
 
-      const handleCopyAll = () => {
-        if (!content) return;
-        navigator.clipboard.writeText(content).then(() => {
-          showToast('已复制文档全文到剪贴板', 'success');
-        }).catch(() => {
-          showToast('复制失败', 'error');
+    function WorkspaceTreeSidebar({
+      width,
+      activeFilePath,
+      onOpenFile,
+      onCloseSidebar,
+    }) {
+      const [treeData, setTreeData] = useState(null);
+      const [isLoading, setIsLoading] = useState(false);
+      const [error, setError] = useState(null);
+      const [searchQuery, setSearchQuery] = useState('');
+      const [expandedPaths, setExpandedPaths] = useState(new Set());
+      const currentWs = getCurrentWorkspaceRoot();
+
+      const loadTree = useCallback(async (force = false) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+          const rootPath = getCurrentWorkspaceRoot();
+          const query = encodeURIComponent(rootPath);
+          const res = await fetch(`/api/preview/workspace-tree?path=${query}`);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const json = await res.json();
+          if (!json.ok) throw new Error(json?.error?.message || '读取工作区目录失败');
+          setTreeData(json);
+          // By default expand top 1 level directories
+          if (json.tree) {
+            const topDirs = json.tree.filter(n => n.isDir).map(n => n.path);
+            setExpandedPaths(new Set(topDirs));
+          }
+        } catch (err) {
+          setError(err.message || '加载工作空间文件树失败');
+        } finally {
+          setIsLoading(false);
+        }
+      }, []);
+
+      useEffect(() => {
+        loadTree();
+      }, [loadTree]);
+
+      const handleToggleExpand = (dirPath) => {
+        setExpandedPaths(prev => {
+          const next = new Set(prev);
+          if (next.has(dirPath)) next.delete(dirPath);
+          else next.add(dirPath);
+          return next;
         });
       };
 
-      const handleTocClick = (headingId) => {
-        if (!contentRef.current) return;
-        const el = contentRef.current.querySelector(`#${headingId}`);
-        if (el) {
-          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const handleExpandAll = () => {
+        if (treeData?.tree) {
+          setExpandedPaths(new Set(collectAllDirPaths(treeData.tree)));
         }
       };
 
-      const handleModeChange = (mode) => {
-        setViewMode(mode);
-        updateTabMode(tab.id, mode);
+      const handleCollapseAll = () => {
+        setExpandedPaths(new Set());
       };
 
-      return h('div', { className: 'dsh-preview-content-container' },
-        // Toolbar
-        h('div', { className: 'dsh-preview-toolbar' },
-          // Left: View mode toggles
-          h('div', { className: 'dsh-preview-toolbar-left' },
-            h('div', { className: 'dsh-preview-mode-group' },
-              h('button', {
-                type: 'button',
-                className: `dsh-preview-mode-btn ${viewMode === 'preview' ? 'active' : ''}`,
-                onClick: () => handleModeChange('preview'),
-                title: '渲染预览模式 (Markdown Render)',
-              }, '📖 预览'),
-              h('button', {
-                type: 'button',
-                className: `dsh-preview-mode-btn ${viewMode === 'source' ? 'active' : ''}`,
-                onClick: () => handleModeChange('source'),
-                title: '源码模式 (Raw Source)',
-              }, '📝 源码'),
-              h('button', {
-                type: 'button',
-                className: `dsh-preview-mode-btn ${viewMode === 'split' ? 'active' : ''}`,
-                onClick: () => handleModeChange('split'),
-                title: '分栏对比模式 (Split View)',
-              }, '🌓 分栏')
-            ),
-
-            tocHeadings.length > 0 ? h('button', {
-              type: 'button',
-              className: `dsh-preview-tool-btn ${isTocOpen ? 'active' : ''}`,
-              onClick: () => setIsTocOpen(!isTocOpen),
-              title: isTocOpen ? '隐藏目录大纲' : '显示目录大纲 (TOC)',
-            }, `📑 大纲 (${tocHeadings.length})`) : null,
+      const displayTree = useMemo(() => {
+        if (!treeData?.tree) return [];
+        return filterTree(treeData.tree, searchQuery.trim());
+      }, [treeData, searchQuery]);
 
-            h('button', {
-              type: 'button',
-              className: `dsh-preview-tool-btn ${isSearchOpen ? 'active' : ''}`,
-              onClick: () => setIsSearchOpen(!isSearchOpen),
-              title: '在文档中查找',
-            }, '🔍 查找')
+      // If searching, auto expand matching folders
+      useEffect(() => {
+        if (searchQuery.trim() && treeData?.tree) {
+          const allMatchingDirs = collectAllDirPaths(filterTree(treeData.tree, searchQuery.trim()));
+          setExpandedPaths(new Set(allMatchingDirs));
+        }
+      }, [searchQuery, treeData]);
+
+      return h('div', {
+        className: 'dsh-tree-sidebar',
+        style: { width: `${width}px` },
+      },
+        // Sidebar Header
+        h('div', { className: 'dsh-tree-sidebar-header' },
+          h('div', { className: 'dsh-tree-sidebar-title', title: treeData?.workspaceRoot || currentWs },
+            h('span', { className: 'dsh-tree-header-icon' }, '📁'),
+            h('span', { className: 'dsh-tree-header-text' }, treeData?.workspaceName || getFileName(currentWs) || '工作区')
           ),
-
-          // Right: Action buttons
-          h('div', { className: 'dsh-preview-toolbar-right' },
+          h('div', { className: 'dsh-tree-header-actions' },
             h('button', {
               type: 'button',
-              className: 'dsh-preview-tool-btn',
-              onClick: handleCopyAll,
-              title: '一键复制全文',
-            }, '📋 复制'),
-
+              className: 'dsh-tree-action-btn',
+              onClick: () => loadTree(true),
+              title: '刷新文件树',
+            }, '🔄'),
             h('button', {
               type: 'button',
-              className: 'dsh-preview-tool-btn',
-              onClick: onRefresh,
-              title: '从磁盘重新加载最新内容',
-            }, '🔄 刷新'),
-
+              className: 'dsh-tree-action-btn',
+              onClick: handleExpandAll,
+              title: '全部展开',
+            }, '📂'),
             h('button', {
               type: 'button',
-              className: 'dsh-preview-tool-btn dsh-preview-tool-btn-accent',
-              onClick: () => onOpenNative(tab.filePath),
-              title: '在系统本地默认编辑器中打开 (记事本/VSCode)',
-            }, '🖥️ 本地打开'),
-
-            h('button', {
+              className: 'dsh-tree-action-btn',
+              onClick: handleCollapseAll,
+              title: '全部折叠',
+            }, '📁'),
+            onCloseSidebar ? h('button', {
               type: 'button',
-              className: 'dsh-preview-tool-btn',
-              onClick: () => onReveal(tab.filePath),
-              title: '在文件管理器中定位',
-            }, '📁 定位')
+              className: 'dsh-tree-action-btn',
+              onClick: onCloseSidebar,
+              title: '收起目录树 (快捷键 Ctrl/Cmd+B)',
+            }, '✕') : null
           )
         ),
 
-        // Search Bar (if open)
-        isSearchOpen ? h('div', { className: 'dsh-preview-search-bar' },
-          h('span', { className: 'dsh-search-icon' }, '🔍'),
-          h('input', {
-            type: 'text',
-            placeholder: '输入关键词在文档中搜索...',
-            value: searchQuery,
-            onChange: e => setSearchQuery(e.target.value),
-            className: 'dsh-preview-search-input',
-            autoFocus: true,
-          }),
-          searchQuery ? h('button', {
-            type: 'button',
-            className: 'dsh-search-clear-btn',
-            onClick: () => setSearchQuery(''),
-          }, '✕') : null
-        ) : null,
+        // Search Input
+        h('div', { className: 'dsh-tree-sidebar-search' },
+          h('div', { className: 'dsh-tree-search-wrapper' },
+            h('input', {
+              type: 'text',
+              className: 'dsh-tree-search-input',
+              placeholder: '🔍 过滤文件 (如 .md, ts)...',
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+            }),
+            searchQuery ? h('button', {
+              type: 'button',
+              className: 'dsh-tree-search-clear',
+              onClick: () => setSearchQuery(''),
+              title: '清空过滤条件',
+            }, '✕') : null
+          )
+        ),
 
-        // Body area with optional TOC sidebar + Main content
-        h('div', { className: 'dsh-preview-body-layout' },
-          // TOC Sidebar
-          isTocOpen && tocHeadings.length > 0 ? h('div', { className: 'dsh-preview-toc-sidebar' },
-            h('div', { className: 'dsh-preview-toc-header' },
-              h('span', { style: { fontWeight: 600, fontSize: 12 } }, '目录大纲 (TOC)'),
+        // Tree Content
+        h('div', { className: 'dsh-tree-node-list' },
+          isLoading ? (
+            h('div', { className: 'dsh-tree-loading' }, '正在扫描工作区文件...')
+          ) : error ? (
+            h('div', { className: 'dsh-tree-error' },
+              h('p', null, `⚠️ ${error}`),
               h('button', {
                 type: 'button',
-                className: 'dsh-toc-close-btn',
-                onClick: () => setIsTocOpen(false),
-              }, '✕')
-            ),
-            h('div', { className: 'dsh-preview-toc-list' },
-              tocHeadings.map((hItem, idx) =>
-                h('div', {
-                  key: idx,
-                  className: `dsh-toc-item dsh-toc-level-${hItem.level}`,
-                  onClick: () => handleTocClick(hItem.id),
-                  title: hItem.text,
-                },
-                  h('span', { className: 'dsh-toc-bullet' }, '•'),
-                  h('span', { className: 'dsh-toc-text' }, hItem.text)
-                )
-              )
-            )
-          ) : null,
-
-          // Main Viewer
-          h('div', { className: 'dsh-preview-main-scroll' },
-            isLoading ? h('div', { className: 'dsh-preview-loading' },
-              h('div', { className: 'dsh-preview-spinner' }),
-              h('span', null, '正在加载文档内容...')
-            ) : (error || fileInfo?.error) ? h('div', { className: 'dsh-preview-error-card' },
-              h('div', { className: 'dsh-error-icon' }, '⚠️'),
-              h('div', { className: 'dsh-error-title' }, '读取文档失败'),
-              h('div', { className: 'dsh-error-desc' }, error || fileInfo?.error),
-              h('div', { className: 'dsh-error-actions' },
-                h('button', { type: 'button', className: 'dsh-btn-retry', onClick: onRefresh }, '重试'),
-                h('button', { type: 'button', className: 'dsh-btn-native', onClick: () => onOpenNative(tab.filePath) }, '在外部打开')
-              )
-            ) : viewMode === 'preview' ? (
-              // 1. Preview Mode
-              h('div', {
-                ref: contentRef,
-                className: 'dsh-markdown-body',
-                dangerouslySetInnerHTML: { __html: renderedHtml },
-              })
-            ) : viewMode === 'source' ? (
-              // 2. Source Code Mode
-              h('div', { className: 'dsh-source-view' },
-                h('div', { className: 'dsh-source-line-numbers' },
-                  (content.split('\n') || []).map((_, i) => h('div', { key: i }, i + 1))
-                ),
-                h('pre', { ref: sourceRef, className: 'dsh-source-pre' },
-                  h('code', null, content)
-                )
-              )
-            ) : (
-              // 3. Split Mode
-              h('div', { className: 'dsh-split-view' },
-                h('div', { className: 'dsh-split-pane dsh-split-source' },
-                  h('div', { className: 'dsh-split-pane-header' }, '📝 原始源码'),
-                  h('div', { className: 'dsh-source-view' },
-                    h('div', { className: 'dsh-source-line-numbers' },
-                      (content.split('\n') || []).map((_, i) => h('div', { key: i }, i + 1))
-                    ),
-                    h('pre', { className: 'dsh-source-pre' },
-                      h('code', null, content)
-                    )
-                  )
-                ),
-                h('div', { className: 'dsh-split-pane dsh-split-render' },
-                  h('div', { className: 'dsh-split-pane-header' }, '📖 渲染预览'),
-                  h('div', {
-                    ref: contentRef,
-                    className: 'dsh-markdown-body',
-                    dangerouslySetInnerHTML: { __html: renderedHtml },
-                  })
-                )
-              )
+                className: 'dsh-tree-retry-btn',
+                onClick: () => loadTree(true),
+              }, '重试')
             )
+          ) : displayTree.length === 0 ? (
+            h('div', { className: 'dsh-tree-empty' }, searchQuery ? '未匹配到相关文件' : '工作区暂无文件')
+          ) : (
+            displayTree.map(node => h(FileTreeNodeItem, {
+              key: node.path,
+              node,
+              depth: 0,
+              expandedPaths,
+              onToggleExpand: handleToggleExpand,
+              activeFilePath,
+              onOpenFile,
+              searchQuery,
+            }))
           )
         ),
 
-        // Status Footer
-        h('div', { className: 'dsh-preview-footer' },
-          h('div', { className: 'dsh-footer-left', title: fileInfo?.path || tab.filePath },
-            h('span', { className: 'dsh-footer-ext' }, (fileInfo?.extension || tab.extension || '.md').toUpperCase().replace('.', '')),
-            h('span', { className: 'dsh-footer-path' }, fileInfo?.path || tab.filePath)
+        // Sidebar Footer with file count stats
+        treeData ? h('div', { className: 'dsh-tree-sidebar-footer' },
+          h('span', null, `${treeData.totalDirs || 0} 目录`),
+          h('span', { className: 'dsh-tree-footer-dot' }, '•'),
+          h('span', null, `${treeData.totalFiles || 0} 文件`)
+        ) : null
+      );
+    }
+
+    function WorkspaceWelcomeView({ workspaceRoot, workspaceName, onOpenFile, onOpenTree }) {
+      return h('div', { className: 'dsh-preview-welcome-container' },
+        h('div', { className: 'dsh-preview-welcome-card' },
+          h('div', { className: 'dsh-welcome-icon' }, '🗂️'),
+          h('h3', { className: 'dsh-welcome-title' }, `工作空间: ${workspaceName || '当前项目'}`),
+          h('p', { className: 'dsh-welcome-path' }, workspaceRoot || '本地项目目录'),
+          h('p', { className: 'dsh-welcome-desc' },
+            '在左侧目录树中选择并点击任意文件（Markdown 文档、代码文件、配置文件等），即可在此多标签预览、阅读与对照。'
           ),
-          h('div', { className: 'dsh-footer-right' },
-            fileInfo?.size ? h('span', { className: 'dsh-footer-stat' }, `${(fileInfo.size / 1024).toFixed(1)} KB`) : null,
-            fileInfo?.lineCount ? h('span', { className: 'dsh-footer-stat' }, `${fileInfo.lineCount} 行`) : null,
-            fileInfo?.wordCount ? h('span', { className: 'dsh-footer-stat' }, `约 ${fileInfo.wordCount} 字`) : null
+          h('div', { className: 'dsh-welcome-actions' },
+            h('button', {
+              type: 'button',
+              className: 'dsh-welcome-btn primary',
+              onClick: onOpenTree,
+            }, '📁 浏览工作区文件树'),
+            h('button', {
+              type: 'button',
+              className: 'dsh-welcome-btn',
+              onClick: () => triggerRevealInExplorer(workspaceRoot || '.'),
+            }, '🖥️ 在资源管理器中查看')
           )
         )
       );
     }
 
     // =========================================================================
-    // React Components: Right Side Drawer / Shell Overlay Container
+    
     // =========================================================================
-    function PreviewDrawerRoot() {
-      const [tabs, setTabs] = useState(globalTabs);
-      const [activeTabId, setActiveTabId] = useState(globalActiveTabId);
-      const [isOpen, setIsOpen] = useState(globalIsPanelOpen);
-      const [width, setWidth] = useState(globalPanelWidth);
-      const [fileData, setFileData] = useState({});
-      const [loadingMap, setLoadingMap] = useState({});
-      const [errorMap, setErrorMap] = useState({});
-      const [isDragging, setIsDragging] = useState(false);
-      const dragStartX = useRef(0);
-      const dragStartWidth = useRef(0);
+    // Multi-Language Syntax Highlighting & Tokenizers (Single-Pass Safe)
+    // =========================================================================
+    function highlightJSON(jsonStr) {
+      if (!jsonStr) return '';
+      const regex = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|[{}\[\],:])/g;
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = regex.exec(jsonStr)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(jsonStr.slice(lastIndex, index));
+        }
+        lastIndex = regex.lastIndex;
+
+        if (raw.startsWith('"')) {
+          if (raw.endsWith(':')) {
+            const keyText = raw.slice(0, -1).trim();
+            out += '<span class="tok-key">' + escapeHtml(keyText) + '</span>:';
+          } else {
+            out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+          }
+        } else if (raw === 'true' || raw === 'false') {
+          out += '<span class="tok-boolean">' + raw + '</span>';
+        } else if (raw === 'null') {
+          out += '<span class="tok-null">' + raw + '</span>';
+        } else if (/^-?\d/.test(raw)) {
+          out += '<span class="tok-number">' + raw + '</span>';
+        } else if (/[{}\[\]]/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/[:,]/.test(raw)) {
+          out += '<span class="tok-punctuation">' + raw + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
 
-      // Subscribe to global store changes
-      useEffect(() => {
-        const update = () => {
-          setTabs([...globalTabs]);
-          setActiveTabId(globalActiveTabId);
-          setIsOpen(globalIsPanelOpen);
-          setWidth(globalPanelWidth);
-        };
-        stateListeners.add(update);
-        return () => stateListeners.delete(update);
-      }, []);
-
-      const activeTab = useMemo(() => {
-        return tabs.find(t => t.id === activeTabId) || tabs[0] || null;
-      }, [tabs, activeTabId]);
+      if (lastIndex < jsonStr.length) {
+        out += escapeHtml(jsonStr.slice(lastIndex));
+      }
+      return out;
+    }
 
-      // Load file content when active tab changes
-      const loadTabFile = useCallback(async (tab, force = false) => {
-        if (!tab || !tab.filePath) return;
-        const key = tab.filePath.toLowerCase();
-        setLoadingMap(m => ({ ...m, [key]: true }));
-        setErrorMap(m => ({ ...m, [key]: null }));
-        try {
-          const fileInfo = await fetchFileContent(tab.filePath, force);
-          if (fileInfo?.error) {
-            setErrorMap(m => ({ ...m, [key]: fileInfo.error }));
+    function highlightYAML(yamlStr) {
+      if (!yamlStr) return '';
+      const lines = yamlStr.split('\n');
+      return lines.map(line => {
+        const commentIdx = line.indexOf('#');
+        let mainPart = line;
+        let commentPart = '';
+        if (commentIdx !== -1) {
+          mainPart = line.slice(0, commentIdx);
+          commentPart = '<span class="tok-comment">' + escapeHtml(line.slice(commentIdx)) + '</span>';
+        }
+
+        let highlightedMain = '';
+        const kvMatch = mainPart.match(/^(\s*-\s+)?([a-zA-Z0-9_\-./@$]+)(\s*:\s*)(.*)$/);
+        if (kvMatch) {
+          const prefix = kvMatch[1] ? '<span class="tok-operator">' + escapeHtml(kvMatch[1]) + '</span>' : '';
+          const key = '<span class="tok-key">' + escapeHtml(kvMatch[2]) + '</span>';
+          const colon = '<span class="tok-punctuation">' + escapeHtml(kvMatch[3]) + '</span>';
+          let val = kvMatch[4];
+          const trimmedVal = val.trim();
+          let valHtml = escapeHtml(val);
+          if (/^(true|false|yes|no|on|off)$/i.test(trimmedVal)) {
+            valHtml = '<span class="tok-boolean">' + escapeHtml(val) + '</span>';
+          } else if (/^(null|~)$/i.test(trimmedVal)) {
+            valHtml = '<span class="tok-null">' + escapeHtml(val) + '</span>';
+          } else if (/^-?\d+(\.\d+)?$/.test(trimmedVal)) {
+            valHtml = '<span class="tok-number">' + escapeHtml(val) + '</span>';
+          } else if (/^["'].*["']$/.test(trimmedVal)) {
+            valHtml = '<span class="tok-string">' + escapeHtml(val) + '</span>';
+          } else if (trimmedVal.startsWith('&') || trimmedVal.startsWith('*')) {
+            valHtml = '<span class="tok-type">' + escapeHtml(val) + '</span>';
+          }
+          highlightedMain = prefix + key + colon + valHtml;
+        } else {
+          const bulletMatch = mainPart.match(/^(\s*-\s+)(.*)$/);
+          if (bulletMatch) {
+            highlightedMain = '<span class="tok-operator">' + escapeHtml(bulletMatch[1]) + '</span>' + escapeHtml(bulletMatch[2]);
           } else {
-            setFileData(d => ({ ...d, [key]: fileInfo }));
+            highlightedMain = escapeHtml(mainPart);
           }
-        } catch (e) {
-          setErrorMap(m => ({ ...m, [key]: e.message }));
-        } finally {
-          setLoadingMap(m => ({ ...m, [key]: false }));
         }
-      }, []);
+        return highlightedMain + commentPart;
+      }).join('\n');
+    }
 
-      useEffect(() => {
-        if (activeTab) {
-          loadTabFile(activeTab);
+    function highlightJS(code) {
+      if (!code) return '';
+      const keywords = new Set([
+        'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do',
+        'switch', 'case', 'break', 'continue', 'default', 'new', 'delete', 'typeof', 'instanceof',
+        'void', 'yield', 'await', 'async', 'try', 'catch', 'finally', 'throw', 'class',
+        'extends', 'super', 'this', 'import', 'export', 'from', 'as', 'type', 'interface',
+        'enum', 'implements', 'declare', 'namespace', 'public', 'private', 'protected',
+        'readonly', 'static', 'abstract', 'get', 'set', 'of', 'in', 'debugger', 'constructor'
+      ]);
+      const types = new Set([
+        'Promise', 'Array', 'Object', 'String', 'Number', 'Boolean', 'Map', 'Set', 'WeakMap',
+        'WeakSet', 'JSON', 'Math', 'RegExp', 'Date', 'Error', 'Symbol', 'React', 'ReactDOM',
+        'null', 'undefined', 'true', 'false', 'any', 'unknown', 'never', 'void', 'string',
+        'number', 'boolean', 'bigint', 'Record', 'Partial', 'Required', 'Pick', 'Omit'
+      ]);
+
+      const tokenRegex = /(\/\*[\s\S]*?\*\/|\/\/.*$|`(?:\[\s\S]|[^`\])*`|"(?:\\[\s\S]|[^"\\])*"|'(?:\\[\s\S]|[^'\\])*'|\b(?:0x[0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?n?)\b|\b[a-zA-Z_$][a-zA-Z0-9_$]*\b|=>|===|!==|<=|>=|&&|\|\||\?\?|\?\.|[+\-*/%=!&|^~<>?:;,{}()\[\].])/gm;
+
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('/*') || raw.startsWith('//')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('`') || raw.startsWith('"') || raw.startsWith("'")) {
+          out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+        } else if (/^\d|^0x/.test(raw)) {
+          out += '<span class="tok-number">' + escapeHtml(raw) + '</span>';
+        } else if (/^[a-zA-Z_$]/.test(raw)) {
+          if (keywords.has(raw)) {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          } else if (types.has(raw)) {
+            out += '<span class="tok-type">' + escapeHtml(raw) + '</span>';
+          } else {
+            const remainder = code.slice(lastIndex);
+            if (/^\s*\(/.test(remainder)) {
+              out += '<span class="tok-func">' + escapeHtml(raw) + '</span>';
+            } else {
+              out += escapeHtml(raw);
+            }
+          }
+        } else if (/^(=>|===|!==|<=|>=|&&|\|\||\?\?|\?\.|[+\-*/%=!&|^~<>])$/.test(raw)) {
+          out += '<span class="tok-operator">' + escapeHtml(raw) + '</span>';
+        } else if (/^[{}()\[\]]$/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/^[,;:?]$/.test(raw)) {
+          out += '<span class="tok-punctuation">' + escapeHtml(raw) + '</span>';
+        } else {
+          out += escapeHtml(raw);
         }
-      }, [activeTab, loadTabFile]);
+      }
 
-      // Drag Resize Handlers
-      const onResizePointerDown = useCallback((e) => {
-        e.preventDefault();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        dragStartX.current = e.clientX;
-        dragStartWidth.current = globalPanelWidth;
-        setIsDragging(true);
-      }, []);
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
 
-      const onResizePointerMove = useCallback((e) => {
-        if (!isDragging) return;
-        const dx = dragStartX.current - e.clientX; // drag left increases width
-        const newWidth = dragStartWidth.current + dx;
-        setPanelWidth(newWidth);
-      }, [isDragging]);
+    function highlightPython(code) {
+      if (!code) return '';
+      const pyKeywords = new Set([
+        'def', 'class', 'import', 'from', 'return', 'if', 'elif', 'else', 'for', 'while',
+        'try', 'except', 'finally', 'raise', 'with', 'as', 'lambda', 'pass', 'yield',
+        'async', 'await', 'global', 'nonlocal', 'assert', 'del', 'in', 'is', 'not', 'and', 'or'
+      ]);
+      const pyBuiltins = new Set([
+        'True', 'False', 'None', 'self', 'cls', 'print', 'len', 'range', 'dict', 'list',
+        'set', 'tuple', 'str', 'int', 'float', 'bool', 'type', 'isinstance', 'enumerate', 'zip'
+      ]);
+
+      const tokenRegex = /("""[\s\S]*?"""|'''[\s\S]*?'''|#.*$|f?"(?:\\[\s\S]|[^"\\])*"|f?'(?:\\[\s\S]|[^'\\])*'|\b\d+(?:\.\d+)?\b|\b[a-zA-Z_][a-zA-Z0-9_]*\b|==|!=|<=|>=|\+=|-=|\*=|\/=|->|[+\-*/%=&|^~<>?:;,{}()\[\].])/gm;
+
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('#')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('"""') || raw.startsWith("'''") || raw.startsWith('"') || raw.startsWith("'") || raw.startsWith('f"') || raw.startsWith("f'")) {
+          out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+        } else if (/^\d/.test(raw)) {
+          out += '<span class="tok-number">' + escapeHtml(raw) + '</span>';
+        } else if (/^[a-zA-Z_]/.test(raw)) {
+          if (pyKeywords.has(raw)) {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          } else if (pyBuiltins.has(raw)) {
+            out += '<span class="tok-type">' + escapeHtml(raw) + '</span>';
+          } else {
+            const remainder = code.slice(lastIndex);
+            if (/^\s*\(/.test(remainder)) {
+              out += '<span class="tok-func">' + escapeHtml(raw) + '</span>';
+            } else {
+              out += escapeHtml(raw);
+            }
+          }
+        } else if (/^(==|!=|<=|>=|\+=|-=|\*=|\/=|->|[+\-*/%=&|^~<>])$/.test(raw)) {
+          out += '<span class="tok-operator">' + escapeHtml(raw) + '</span>';
+        } else if (/^[{}()\[\]]$/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/^[,;:?]$/.test(raw)) {
+          out += '<span class="tok-punctuation">' + escapeHtml(raw) + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
 
-      const onResizePointerUp = useCallback((e) => {
-        if (isDragging) {
-          setIsDragging(false);
-          try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightHTML(code) {
+      if (!code) return '';
+      const tokenRegex = /(<!--[\s\S]*?-->|<\/?[a-zA-Z0-9\-:]+|(?:[a-zA-Z0-9\-:]+)=("[^"]*"|'[^']*')|\/?>)/g;
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('<!--')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('<')) {
+          out += '<span class="tok-bracket">&lt;</span><span class="tok-tag">' + escapeHtml(raw.slice(raw.startsWith('</') ? 2 : 1)) + '</span>';
+        } else if (raw.endsWith('>')) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (raw.includes('=')) {
+          const eqIdx = raw.indexOf('=');
+          const attrName = raw.slice(0, eqIdx);
+          const attrVal = raw.slice(eqIdx + 1);
+          out += '<span class="tok-attr">' + escapeHtml(attrName) + '</span>=<span class="tok-string">' + escapeHtml(attrVal) + '</span>';
+        } else {
+          out += escapeHtml(raw);
         }
-      }, [isDragging]);
+      }
 
-      const drawerRef = useRef(null);
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
 
-      // Outside Click Listener: Click on the chat conversation / dialog box outside the drawer to auto close/hide it
-      useEffect(() => {
-        if (!isOpen) return;
+    function highlightGenericCode(code, category) {
+      if (!code) return '';
+      if (category === 'sql') {
+        const sqlKeywords = /\b(SELECT|FROM|WHERE|INSERT|INTO|UPDATE|DELETE|JOIN|LEFT|RIGHT|INNER|OUTER|GROUP|BY|ORDER|HAVING|LIMIT|OFFSET|AS|ON|AND|OR|NOT|NULL|IS|CREATE|TABLE|DROP|ALTER|ADD|INDEX|PRIMARY|KEY)\b/gi;
+        return escapeHtml(code)
+          .replace(sqlKeywords, '<span class="tok-keyword">$1</span>')
+          .replace(/(--.*$)/gm, '<span class="tok-comment">$1</span>')
+          .replace(/('[^']*')/g, '<span class="tok-string">$1</span>');
+      }
+      const lines = code.split('\n');
+      return lines.map(line => {
+        const commentIdx = line.indexOf('#');
+        let mainPart = line;
+        let commentPart = '';
+        if (commentIdx !== -1) {
+          mainPart = line.slice(0, commentIdx);
+          commentPart = '<span class="tok-comment">' + escapeHtml(line.slice(commentIdx)) + '</span>';
+        }
+        let h = escapeHtml(mainPart);
+        h = h.replace(/^([a-zA-Z0-9_\-.]+)(\s*=\s*)(.*)$/, (m, k, eq, v) => {
+          return '<span class="tok-key">' + k + '</span>' + eq + '<span class="tok-string">' + v + '</span>';
+        });
+        h = h.replace(/(\$[a-zA-Z0-9_{}]+)/g, '<span class="tok-type">$1</span>');
+        h = h.replace(/\b(if|then|else|elif|fi|for|in|do|done|case|esac|echo|cd|export|npm|pnpm|node|git|curl)\b/g, '<span class="tok-keyword">$1</span>');
+        return h + commentPart;
+      }).join('\n');
+    }
 
-        const handleOutsidePointerDown = (e) => {
-          // 1. Ignore if just opened within 250ms
-          if (Date.now() - globalLastOpenTime < 250) return;
-          // 2. Ignore during dragging resize handle
-          if (isDragging) return;
+    function highlightCode(rawCode, category) {
+      if (!rawCode) return '';
+      if (category === 'json') return highlightJSON(rawCode);
+      if (category === 'yaml') return highlightYAML(rawCode);
+      if (category === 'javascript') return highlightJS(rawCode);
+      if (category === 'python') return highlightPython(rawCode);
+      if (category === 'markup') return highlightHTML(rawCode);
+      if (category === 'css') return highlightCSS(rawCode);
+      if (category === 'shell' || category === 'config' || category === 'sql') return highlightGenericCode(rawCode, category);
+      return escapeHtml(rawCode);
+    }
 
-          const target = e.target;
-          if (!target) return;
+    // =========================================================================
+    // Lightweight YAML to JSON Recursive Parser
+    // =========================================================================
+    function parseYamlScalar(val) {
+      if (!val) return '';
+      const v = val.trim();
+      if (/^(true|yes|on)$/i.test(v)) return true;
+      if (/^(false|no|off)$/i.test(v)) return false;
+      if (/^(null|~)$/i.test(v)) return null;
+      if (/^-?\d+$/.test(v)) return parseInt(v, 10);
+      if (/^-?\d+\.\d+$/.test(v)) return parseFloat(v);
+      if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
+        return v.slice(1, -1);
+      }
+      return v;
+    }
 
-          // 3. If clicking inside the preview drawer, do not close
-          const drawerEl = drawerRef.current || document.querySelector('.dsh-preview-drawer-container');
-          if (drawerEl && (drawerEl === target || drawerEl.contains(target))) {
-            return;
+    function parseYamlToJson(yamlStr) {
+      if (!yamlStr) return { ok: true, data: {} };
+      try {
+        const rawLines = yamlStr.split('\n');
+        const lines = [];
+        for (const raw of rawLines) {
+          const cIdx = raw.indexOf('#');
+          const l = cIdx !== -1 ? raw.slice(0, cIdx) : raw;
+          if (l.trim()) {
+            lines.push({ indent: l.search(/\S/), text: l.trim() });
           }
+        }
+        if (lines.length === 0) return { ok: true, data: {} };
 
-          // 4. If clicking on the floating pill, do not close
-          const floatPill = document.querySelector('.dsh-preview-float-pill');
-          if (floatPill && (floatPill === target || floatPill.contains(target))) {
+        let idx = 0;
+        function parseBlock(currentIndent) {
+          let isArr = false;
+          if (idx < lines.length && lines[idx].text.startsWith('- ')) {
+            isArr = true;
+          }
+          const container = isArr ? [] : {};
+
+          while (idx < lines.length) {
+            const line = lines[idx];
+            if (line.indent < currentIndent) break;
+            if (line.indent > currentIndent) break;
+
+            idx++;
+
+            if (isArr) {
+              if (line.text.startsWith('- ')) {
+                const itemText = line.text.slice(2).trim();
+                if (!itemText) {
+                  if (idx < lines.length && lines[idx].indent > line.indent) {
+                    container.push(parseBlock(lines[idx].indent));
+                  } else {
+                    container.push(null);
+                  }
+                } else if (itemText.includes(':')) {
+                  const colonPos = itemText.indexOf(':');
+                  const k = itemText.slice(0, colonPos).trim().replace(/^['"]|['"]$/g, '');
+                  const v = itemText.slice(colonPos + 1).trim();
+                  const obj = {};
+                  if (!v) {
+                    if (idx < lines.length && lines[idx].indent > line.indent) {
+                      obj[k] = parseBlock(lines[idx].indent);
+                    } else {
+                      obj[k] = {};
+                    }
+                  } else {
+                    obj[k] = parseYamlScalar(v);
+                  }
+                  while (idx < lines.length && lines[idx].indent === line.indent + 2 && !lines[idx].text.startsWith('- ')) {
+                    const nextLine = lines[idx++];
+                    const cPos = nextLine.text.indexOf(':');
+                    if (cPos !== -1) {
+                      const nk = nextLine.text.slice(0, cPos).trim().replace(/^['"]|['"]$/g, '');
+                      const nv = nextLine.text.slice(cPos + 1).trim();
+                      if (!nv && idx < lines.length && lines[idx].indent > nextLine.indent) {
+                        obj[nk] = parseBlock(lines[idx].indent);
+                      } else {
+                        obj[nk] = parseYamlScalar(nv);
+                      }
+                    }
+                  }
+                  container.push(obj);
+                } else {
+                  container.push(parseYamlScalar(itemText));
+                }
+              }
+            } else {
+              const colonPos = line.text.indexOf(':');
+              if (colonPos !== -1) {
+                const k = line.text.slice(0, colonPos).trim().replace(/^['"]|['"]$/g, '');
+                const v = line.text.slice(colonPos + 1).trim();
+                if (!v) {
+                  if (idx < lines.length && lines[idx].indent > line.indent) {
+                    container[k] = parseBlock(lines[idx].indent);
+                  } else {
+                    container[k] = {};
+                  }
+                } else {
+                  container[k] = parseYamlScalar(v);
+                }
+              }
+            }
+          }
+          return container;
+        }
+
+        const root = parseBlock(lines[0].indent);
+        return { ok: true, data: root };
+      } catch (err) {
+        return { ok: false, error: err.message };
+      }
+    }
+
+    // =========================================================================
+    // Code Symbol Outline Extractor
+    // =========================================================================
+    function extractCodeSymbols(content, category) {
+      if (!content) return [];
+      const lines = content.split('\n');
+      const symbols = [];
+
+      if (category === 'javascript') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const trimmed = line.trim();
+          if (trimmed.startsWith('//') || trimmed.startsWith('/*') || trimmed.startsWith('*')) return;
+
+          const classMatch = trimmed.match(/\bclass\s+([a-zA-Z0-9_$]+)/);
+          if (classMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: classMatch[1], kind: 'class', line: lineNum, text: `🔷 class ${classMatch[1]}` });
             return;
           }
 
-          // 5. If clicking on a file link or button that opens a file preview, do not close (let interceptor open it)
-          if (target.closest) {
-            const btn = target.closest('button');
-            if (btn) {
-              const candidate = btn.getAttribute('title') || btn.getAttribute('aria-label') || btn.textContent || '';
-              if (isPreviewableFile(candidate.trim())) return;
-            }
-            const anchor = target.closest('a');
-            if (anchor) {
-              const href = anchor.getAttribute('href') || '';
-              if (isPreviewableFile(href)) return;
-            }
+          const funcMatch = trimmed.match(/\b(?:async\s+)?function\s*([a-zA-Z0-9_$]+)\s*\(/);
+          if (funcMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: funcMatch[1], kind: 'function', line: lineNum, text: `⚡ fn ${funcMatch[1]}()` });
+            return;
           }
 
-          // 6. Outside click in dialog/conversation/background: Auto hide the preview drawer!
-          setPanelOpen(false);
-        };
+          const arrowMatch = trimmed.match(/(?:const|let|var)\s+([a-zA-Z0-9_$]+)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[a-zA-Z0-9_$]+)\s*=>/);
+          if (arrowMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: arrowMatch[1], kind: 'function', line: lineNum, text: `⚡ fn ${arrowMatch[1]}()` });
+            return;
+          }
 
-        window.addEventListener('pointerdown', handleOutsidePointerDown, true);
-        return () => {
-          window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
-        };
-      }, [isOpen, isDragging]);
+          const typeMatch = trimmed.match(/\b(?:interface|type|enum)\s+([a-zA-Z0-9_$]+)/);
+          if (typeMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: typeMatch[1], kind: 'type', line: lineNum, text: `🏷️ ${typeMatch[1]}` });
+            return;
+          }
 
-      // Hotkey: Esc closes preview
-      useEffect(() => {
-        const onKeyDown = (e) => {
-          if (e.key === 'Escape' && globalIsPanelOpen) {
-            setPanelOpen(false);
+          if (trimmed.startsWith('export default')) {
+            symbols.push({ id: `line-${lineNum}`, name: 'default export', kind: 'export', line: lineNum, text: `📦 export default` });
           }
-        };
-        window.addEventListener('keydown', onKeyDown);
-        return () => window.removeEventListener('keydown', onKeyDown);
-      }, []);
+        });
+      } else if (category === 'python') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const classMatch = line.match(/^class\s+([a-zA-Z0-9_]+)/);
+          if (classMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: classMatch[1], kind: 'class', line: lineNum, text: `🔷 class ${classMatch[1]}` });
+            return;
+          }
+          const funcMatch = line.match(/^(\s*)(?:async\s+)?def\s+([a-zA-Z0-9_]+)/);
+          if (funcMatch) {
+            const prefix = funcMatch[1].length > 0 ? '  ' : '';
+            symbols.push({ id: `line-${lineNum}`, name: funcMatch[2], kind: 'function', line: lineNum, text: `${prefix}⚡ def ${funcMatch[2]}()` });
+          }
+        });
+      } else if (category === 'yaml') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const topKeyMatch = line.match(/^([a-zA-Z0-9_\-./@$]+)\s*:/);
+          if (topKeyMatch && !line.startsWith('#')) {
+            symbols.push({ id: `line-${lineNum}`, name: topKeyMatch[1], kind: 'key', line: lineNum, text: `🔑 ${topKeyMatch[1]}` });
+          }
+        });
+      } else if (category === 'json') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const keyMatch = line.match(/^\s{2}"([a-zA-Z0-9_\-./@$]+)"\s*:/);
+          if (keyMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: keyMatch[1], kind: 'key', line: lineNum, text: `🔑 "${keyMatch[1]}"` });
+          }
+        });
+      }
+      return symbols;
+    }
 
-      if (!isOpen && tabs.length === 0) return null;
+    // =========================================================================
+    // React Component: JSONTreeNode & JSONTreeInspector
+    // =========================================================================
+    function JSONTreeNode({ name, value, path, depth, isArrayItem, index, expandedKeys, onToggle, filterQuery, onCopy }) {
+      const isObject = value !== null && typeof value === 'object';
+      const isArray = Array.isArray(value);
+      const isExpanded = expandedKeys.has(path);
 
-      const activeKey = activeTab?.filePath?.toLowerCase();
-      const currentFileInfo = activeKey ? fileData[activeKey] : null;
-      const currentLoading = activeKey ? !!loadingMap[activeKey] : false;
-      const currentError = activeKey ? errorMap[activeKey] : null;
+      if (isObject) {
+        const keys = Object.keys(value);
+        const count = keys.length;
+        const typeLabel = isArray ? `Array(${count})` : `Object{${count}}`;
 
-      return h(Fragment, null,
-        // Floating Mini Button to Reopen (when closed but tabs exist)
-        !isOpen && tabs.length > 0 ? h('div', {
-          className: 'dsh-preview-float-pill',
-          onClick: () => setPanelOpen(true),
-          title: `重新展开文档预览 (${tabs.length} 个标签)`,
-        },
-          h('span', { className: 'dsh-float-pill-icon' }, '📝'),
-          h('span', { className: 'dsh-float-pill-text' }, `预览: ${activeTab?.title || '文档'}`),
-          h('span', { className: 'dsh-float-pill-badge' }, tabs.length)
-        ) : null,
+        if (filterQuery) {
+          const matchSelf = (name && String(name).toLowerCase().includes(filterQuery)) || path.toLowerCase().includes(filterQuery);
+          let matchChild = false;
+          try { matchChild = JSON.stringify(value).toLowerCase().includes(filterQuery); } catch (e) {}
+          if (!matchSelf && !matchChild) return null;
+        }
 
-        // Right-Side Slide Drawer
-        isOpen ? h('div', {
-          ref: drawerRef,
-          className: `dsh-preview-drawer-container ${isDragging ? 'dragging' : ''}`,
-          style: { width: `${width}px` },
-        },
-          // Drag Handle on Left Border
+        const previewSummary = isArray
+          ? `[ ${count === 0 ? '' : '...'} ]`
+          : `{ ${keys.slice(0, 3).map(k => `${k}: ...`).join(', ')}${count > 3 ? ', ...' : ''} }`;
+
+        return h('div', { className: 'dsh-json-node-group' },
           h('div', {
-            className: 'dsh-preview-drag-handle',
-            onPointerDown: onResizePointerDown,
-            onPointerMove: onResizePointerMove,
-            onPointerUp: onResizePointerUp,
-            title: '左右拖拽调整预览面板宽度',
-          }),
+            className: 'dsh-json-row dsh-json-row-expandable',
+            style: { paddingLeft: `${depth * 16 + 6}px` },
+            onClick: () => onToggle(path),
+          },
+            h('span', { className: `dsh-json-chevron ${isExpanded ? 'expanded' : ''}` }, isExpanded ? '▼' : '▶'),
+            name ? h('span', { className: 'dsh-json-key' }, isArrayItem ? `[${index}]` : `"${name}":`) : null,
+            h('span', { className: 'dsh-json-type-badge' }, typeLabel),
+            !isExpanded ? h('span', { className: 'dsh-json-preview' }, previewSummary) : null,
+            h('span', {
+              className: 'dsh-json-copy-btn',
+              title: `复制字段路径: ${path.replace(/^root\.?/, '')}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                onCopy(path.replace(/^root\.?/, ''), '字段路径');
+              }
+            }, '📋')
+          ),
+          isExpanded ? h('div', { className: 'dsh-json-children' },
+            keys.map((k, i) => h(JSONTreeNode, {
+              key: k,
+              name: isArray ? null : k,
+              value: value[k],
+              path: `${path}.${k}`,
+              depth: depth + 1,
+              isArrayItem: isArray,
+              index: i,
+              expandedKeys,
+              onToggle,
+              filterQuery,
+              onCopy,
+            }))
+          ) : null
+        );
+      }
 
-          // Drawer Header with FileTabs
-          h('div', { className: 'dsh-preview-drawer-header' },
-            // Tabs Bar
-            h('div', { className: 'dsh-preview-tabs-row' },
-              tabs.map(tab => {
-                const isActive = tab.id === activeTabId;
-                const ext = (tab.extension || '').toLowerCase();
-                const icon = ext === '.json' ? '{ }' : (ext === '.ts' || ext === '.js' ? 'TS' : '📝');
-                return h('div', {
-                  key: tab.id,
-                  className: `dsh-preview-tab-item ${isActive ? 'active' : ''}`,
-                  onClick: () => switchActiveTab(tab.id),
-                  title: `${tab.title}\n${tab.filePath}`,
-                },
-                  h('span', { className: 'dsh-tab-icon' }, icon),
-                  h('span', { className: 'dsh-tab-title' }, tab.title),
-                  h('button', {
-                    type: 'button',
-                    className: 'dsh-tab-close-btn',
-                    onClick: (e) => closePreviewTab(tab.id, e),
-                    title: '关闭此标签',
-                  }, '✕')
-                );
-              })
-            ),
+      // Primitive Value
+      const valType = value === null ? 'null' : typeof value;
+      let valDisplay = String(value);
+      let valClass = `tok-${valType}`;
+
+      if (valType === 'string') {
+        valDisplay = `"${value}"`;
+        valClass = 'tok-string';
+      } else if (valType === 'number') {
+        valClass = 'tok-number';
+      } else if (valType === 'boolean') {
+        valClass = 'tok-boolean';
+      } else if (valType === 'null') {
+        valDisplay = 'null';
+        valClass = 'tok-null';
+      }
 
-            // Header Right Window Controls
-            h('div', { className: 'dsh-preview-window-controls' },
-              tabs.length > 1 ? h('button', {
-                type: 'button',
-                className: 'dsh-win-ctrl-btn',
-                onClick: closeAllTabs,
-                title: '关闭所有标签页',
-              }, '✕ 全部') : null,
-              h('button', {
-                type: 'button',
-                className: 'dsh-win-ctrl-btn dsh-win-ctrl-close',
-                onClick: () => setPanelOpen(false),
-                title: '收起预览面板 (Esc)',
-              }, '✕')
-            )
-          ),
+      if (filterQuery) {
+        const matchName = name && String(name).toLowerCase().includes(filterQuery);
+        const matchVal = valDisplay.toLowerCase().includes(filterQuery);
+        if (!matchName && !matchVal) return null;
+      }
 
-          // Drawer Body
-          activeTab ? h(MarkdownPreviewView, {
-            tab: activeTab,
-            fileInfo: currentFileInfo,
-            isLoading: currentLoading,
-            error: currentError,
-            onRefresh: () => loadTabFile(activeTab, true),
-            onOpenNative: triggerOpenNative,
-            onReveal: triggerRevealInExplorer,
-          }) : h('div', { className: 'dsh-preview-empty-state' }, '暂无打开的文件')
-        ) : null
+      const isUrl = typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'));
+
+      return h('div', {
+        className: 'dsh-json-row dsh-json-row-leaf',
+        style: { paddingLeft: `${depth * 16 + 22}px` },
+      },
+        name ? h('span', { className: 'dsh-json-key' }, isArrayItem ? `[${index}]:` : `"${name}":`) : null,
+        isUrl ? h('a', {
+          href: value,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          className: 'dsh-json-link tok-string',
+          onClick: (e) => e.stopPropagation(),
+        }, valDisplay) : h('span', { className: valClass }, valDisplay),
+        h('span', {
+          className: 'dsh-json-copy-btn',
+          title: '复制值',
+          onClick: () => onCopy(String(value), '字段值')
+        }, '📋')
       );
     }
 
-    // =========================================================================
-    // Global Link Click Listener & Workspace Interceptor
-    // =========================================================================
-    function setupFileInterceptors(ctx) {
-      // 1. Intercept ctx.workspaces.openPath
-      if (ctx && ctx.workspaces && typeof ctx.workspaces.openPath === 'function') {
-        const originalOpenPath = ctx.workspaces.openPath.bind(ctx.workspaces);
-        ctx.workspaces.openPath = async function(targetPath) {
-          if (isPreviewableFile(targetPath)) {
-            console.log('[Preview] Intercepted workspaces.openPath ->', targetPath);
-            openPreviewFile(targetPath);
-            return Promise.resolve();
+    function JSONTreeInspector({ data, rawContent, onFormat, onMinify }) {
+      const [expandedKeys, setExpandedKeys] = useState(new Set(['root', 'root.scripts', 'root.dependencies', 'root.devDependencies']));
+      const [filterQuery, setFilterQuery] = useState('');
+
+      const toggleKey = (path) => {
+        setExpandedKeys(prev => {
+          const next = new Set(prev);
+          if (next.has(path)) next.delete(path);
+          else next.add(path);
+          return next;
+        });
+      };
+
+      const expandAll = () => {
+        const all = new Set();
+        const traverse = (val, p) => {
+          all.add(p);
+          if (val && typeof val === 'object') {
+            for (const k of Object.keys(val)) {
+              traverse(val[k], p ? `${p}.${k}` : k);
+            }
           }
-          return originalOpenPath(targetPath);
         };
-        console.log('[Preview] Successfully hooked ctx.workspaces.openPath');
-      }
+        traverse(data, 'root');
+        setExpandedKeys(all);
+      };
 
-      // 2. Intercept DOM Clicks globally
-      if (typeof document !== 'undefined') {
-        document.addEventListener('click', (e) => {
-          const target = e.target;
-          if (!target || !target.closest) return;
+      const collapseAll = () => {
+        setExpandedKeys(new Set(['root']));
+      };
 
-          // A. Click on ProducedFiles chip button or ToolRow summary button
-          const button = target.closest('button');
-          if (button) {
-            const title = button.getAttribute('title') || '';
-            const ariaLabel = button.getAttribute('aria-label') || '';
+      const handleCopy = (text, label) => {
+        navigator.clipboard.writeText(text).then(() => {
+          showToast(`已复制 ${label || '内容'}`, 'success');
+        });
+      };
+
+      return h('div', { className: 'dsh-json-inspector' },
+        h('div', { className: 'dsh-json-header' },
+          h('div', { className: 'dsh-json-search-box' },
+            h('span', { className: 'dsh-json-search-icon' }, '🔍'),
+            h('input', {
+              type: 'text',
+              placeholder: '过滤属性名或值...',
+              value: filterQuery,
+              onChange: (e) => setFilterQuery(e.target.value),
+              className: 'dsh-json-search-input',
+            }),
+            filterQuery ? h('button', {
+              className: 'dsh-search-clear-btn',
+              onClick: () => setFilterQuery(''),
+            }, '✕') : null
+          ),
+          h('div', { className: 'dsh-json-actions' },
+            h('button', { type: 'button', className: 'dsh-json-btn', onClick: expandAll, title: '展开所有层级' }, '📂 展开全部'),
+            h('button', { type: 'button', className: 'dsh-json-btn', onClick: collapseAll, title: '折叠到根节点' }, '📁 折叠全部'),
+            onFormat ? h('button', { type: 'button', className: 'dsh-json-btn', onClick: onFormat, title: '格式化并复制' }, '⚡ 格式化') : null,
+            onMinify ? h('button', { type: 'button', className: 'dsh-json-btn', onClick: onMinify, title: '压缩并复制' }, '🗜️ 压缩') : null
+          )
+        ),
+        h('div', { className: 'dsh-json-tree-body' },
+          h(JSONTreeNode, {
+            name: Array.isArray(data) ? 'Array' : 'Object',
+            value: data,
+            path: 'root',
+            depth: 0,
+            expandedKeys,
+            onToggle: toggleKey,
+            filterQuery: filterQuery.trim().toLowerCase(),
+            onCopy: handleCopy,
+          })
+        )
+      );
+    }
+
+    // =========================================================================
+    // React Component: CodeEditorView
+    // =========================================================================
+    function CodeEditorView({ content, category, isHighlighted = true, isWordWrap = true, searchQuery = '', onLineClick }) {
+      const lines = useMemo(() => (content ? content.split('\n') : []), [content]);
+
+      const highlightedHtml = useMemo(() => {
+        if (!content) return '';
+        if (!isHighlighted) {
+          let escaped = escapeHtml(content);
+          if (searchQuery.trim()) {
+            const q = escapeHtml(searchQuery.trim());
+            escaped = escaped.replace(new RegExp(`(${q})`, 'gi'), '<mark class="dsh-search-highlight">$1</mark>');
+          }
+          return escaped;
+        }
+        let html = highlightCode(content, category);
+        if (searchQuery.trim()) {
+          try {
+            const q = escapeHtml(searchQuery.trim());
+            const regex = new RegExp(`(${q})(?![^<]*>)`, 'gi');
+            html = html.replace(regex, '<mark class="dsh-search-highlight">$1</mark>');
+          } catch (e) {}
+        }
+        return html;
+      }, [content, category, isHighlighted, searchQuery]);
+
+      return h('div', { className: `dsh-code-editor-view ${isWordWrap ? 'word-wrap' : ''}` },
+        h('div', { className: 'dsh-code-gutter' },
+          lines.map((_, i) => h('div', {
+            key: i,
+            id: `line-gutter-${i + 1}`,
+            className: 'dsh-gutter-line',
+            onClick: () => onLineClick && onLineClick(i + 1),
+            title: `第 ${i + 1} 行 (点击定位)`
+          }, i + 1))
+        ),
+        h('div', { className: 'dsh-code-content' },
+          h('pre', { className: 'dsh-code-pre' },
+            h('code', {
+              className: `dsh-code-lang-${category}`,
+              dangerouslySetInnerHTML: { __html: highlightedHtml }
+            })
+          )
+        )
+      );
+    }
+
+    // React Components: MarkdownPreviewView
+    // =========================================================================
+    function MarkdownPreviewView({ tab, fileInfo, isLoading, error, isTreeOpen, onToggleTree, onRefresh, onOpenNative, onReveal }) {
+      const category = getFileTypeCategory(tab.filePath);
+      const defaultMode = getDefaultViewMode(category);
+      const [viewMode, setViewMode] = useState(tab.viewMode || defaultMode);
+
+      useEffect(() => {
+        const mode = tab.viewMode || getDefaultViewMode(getFileTypeCategory(tab.filePath));
+        setViewMode(mode);
+      }, [tab.id, tab.filePath, tab.viewMode]);
+      const [isWordWrap, setIsWordWrap] = useState(false);
+      const [isTocOpen, setIsTocOpen] = useState(false);
+      const [searchQuery, setSearchQuery] = useState('');
+      const [isSearchOpen, setIsSearchOpen] = useState(false);
+      const contentRef = useRef(null);
+      const sourceRef = useRef(null);
+
+      const content = fileInfo?.content || '';
+
+      // Outline extraction: markdown headings for md, symbols for code/json/yaml
+      const outlineItems = useMemo(() => {
+        if (!content) return [];
+        if (category === 'markdown') {
+          return extractTocHeadings(content);
+        }
+        return extractCodeSymbols(content, category);
+      }, [content, category]);
+
+      // Parse JSON / YAML structure for tree mode
+      const parsedTreeData = useMemo(() => {
+        if (!content) return { ok: false, error: '空文件' };
+        if (category === 'json' || viewMode === 'json-tree') {
+          if (category === 'yaml') {
+            return parseYamlToJson(content);
+          }
+          try {
+            const data = JSON.parse(content);
+            return { ok: true, data };
+          } catch (e) {
+            return { ok: false, error: e.message };
+          }
+        }
+        return { ok: false };
+      }, [content, category, viewMode]);
+
+      const renderedMarkdownHtml = useMemo(() => {
+        if (!content || category !== 'markdown') return '';
+        let html = renderMarkdownToHtml(content);
+        if (searchQuery.trim()) {
+          try {
+            const q = escapeHtml(searchQuery.trim());
+            const regex = new RegExp(`(${q})`, 'gi');
+            html = html.replace(regex, '<mark class="dsh-search-highlight">$1</mark>');
+          } catch (e) {}
+        }
+        return html;
+      }, [content, category, searchQuery]);
+
+      const handleCopyAll = () => {
+        if (!content) return;
+        navigator.clipboard.writeText(content).then(() => {
+          showToast('已复制全文到剪贴板', 'success');
+        }).catch(() => {
+          showToast('复制失败', 'error');
+        });
+      };
+
+      const handleFormatJSON = () => {
+        try {
+          const obj = JSON.parse(content);
+          const formatted = JSON.stringify(obj, null, 2);
+          navigator.clipboard.writeText(formatted).then(() => {
+            showToast('已格式化 JSON 并复制到剪贴板', 'success');
+          });
+        } catch (e) {
+          showToast('JSON 语法错误，无法格式化', 'error');
+        }
+      };
+
+      const handleMinifyJSON = () => {
+        try {
+          const obj = JSON.parse(content);
+          const minified = JSON.stringify(obj);
+          navigator.clipboard.writeText(minified).then(() => {
+            showToast('已压缩为单行 JSON 并复制到剪贴板', 'success');
+          });
+        } catch (e) {
+          showToast('JSON 语法错误，无法压缩', 'error');
+        }
+      };
+
+      const handleOutlineClick = (item) => {
+        if (category === 'markdown') {
+          if (!contentRef.current) return;
+          const el = contentRef.current.querySelector(`#${item.id}`);
+          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        } else {
+          const el = document.getElementById(`line-gutter-${item.line}`);
+          if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            el.classList.add('dsh-line-highlight-flash');
+            setTimeout(() => el.classList.remove('dsh-line-highlight-flash'), 1800);
+          }
+        }
+      };
+
+      const handleModeChange = (mode) => {
+        setViewMode(mode);
+        updateTabMode(tab.id, mode);
+      };
+
+      return h('div', { className: 'dsh-preview-content-container' },
+        // Toolbar
+        h('div', { className: 'dsh-preview-toolbar' },
+          // Left: View mode toggles
+          h('div', { className: 'dsh-preview-toolbar-left' },
+            h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isTreeOpen ? 'active' : ''}`,
+              onClick: onToggleTree,
+              title: isTreeOpen ? '隐藏工作区目录树 (Ctrl/Cmd+B)' : '展开工作区目录树 (Ctrl/Cmd+B)',
+            }, '🗂️ 目录树'),
+
+            // Adaptive View Mode buttons based on File Category
+            category === 'markdown' ? (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'preview' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('preview'),
+                  title: 'Markdown 渲染预览 (Markdown Render)',
+                }, '📖 预览'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'source' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('source'),
+                  title: '源码高亮模式 (Source Code)',
+                }, '📝 源码'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'split' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('split'),
+                  title: '分栏对照模式 (Split View)',
+                }, '🌓 分栏')
+              )
+            ) : category === 'json' ? (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'json-tree' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('json-tree'),
+                  title: '可视化结构树检查器 (JSON Tree)',
+                }, '🌳 结构树'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'code' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('code'),
+                  title: '语法高亮代码 (Code View)',
+                }, '📜 代码'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'raw' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('raw'),
+                  title: '纯文本模式 (Raw Text)',
+                }, '📝 纯文本')
+              )
+            ) : category === 'yaml' ? (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'code' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('code'),
+                  title: 'YAML 语法高亮 (Syntax Highlighting)',
+                }, '📜 高亮'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'json-tree' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('json-tree'),
+                  title: '转为可视化结构树 (YAML as Tree)',
+                }, '🌳 结构树'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'raw' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('raw'),
+                  title: '纯文本模式 (Raw Text)',
+                }, '📝 纯文本')
+              )
+            ) : (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'code' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('code'),
+                  title: '语法高亮模式 (Syntax Highlighting)',
+                }, '📜 高亮'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'raw' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('raw'),
+                  title: '纯文本模式 (Raw Text)',
+                }, '📝 纯文本')
+              )
+            ),
+
+            // Outline / TOC Button
+            outlineItems.length > 0 ? h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isTocOpen ? 'active' : ''}`,
+              onClick: () => setIsTocOpen(!isTocOpen),
+              title: isTocOpen ? '隐藏大纲侧栏' : '显示大纲侧栏',
+            }, category === 'markdown' ? `📑 大纲 (${outlineItems.length})` : `📑 符号 (${outlineItems.length})`) : null,
+
+            // Word Wrap Toggle
+            h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isWordWrap ? 'active' : ''}`,
+              onClick: () => setIsWordWrap(!isWordWrap),
+              title: isWordWrap ? '切换为不自动换行 (水平滚动)' : '切换为自动换行',
+            }, '↩️ 换行'),
+
+            // Search Button
+            h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isSearchOpen ? 'active' : ''}`,
+              onClick: () => setIsSearchOpen(!isSearchOpen),
+              title: '在文件中搜索',
+            }, '🔍 查找')
+          ),
+
+          // Right: Action buttons
+          h('div', { className: 'dsh-preview-toolbar-right' },
+            category === 'json' ? h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: handleFormatJSON,
+              title: '格式化 JSON 并复制',
+            }, '⚡ 格式化') : null,
+
+            category === 'json' ? h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: handleMinifyJSON,
+              title: '单行压缩 JSON 并复制',
+            }, '🗜️ 压缩') : null,
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: handleCopyAll,
+              title: '一键复制全文',
+            }, '📋 复制'),
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: onRefresh,
+              title: '从磁盘重新加载最新内容',
+            }, '🔄 刷新'),
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn dsh-preview-tool-btn-accent',
+              onClick: () => onOpenNative(tab.filePath),
+              title: '在系统本地默认编辑器中打开 (记事本/VSCode)',
+            }, '🖥️ 本地打开'),
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: () => onReveal(tab.filePath),
+              title: '在文件管理器中定位',
+            }, '📁 定位')
+          )
+        ),
+
+        // Search Bar (if open)
+        isSearchOpen ? h('div', { className: 'dsh-preview-search-bar' },
+          h('span', { className: 'dsh-search-icon' }, '🔍'),
+          h('input', {
+            type: 'text',
+            placeholder: '输入关键词在文档中搜索...',
+            value: searchQuery,
+            onChange: e => setSearchQuery(e.target.value),
+            className: 'dsh-preview-search-input',
+            autoFocus: true,
+          }),
+          searchQuery ? h('button', {
+            type: 'button',
+            className: 'dsh-search-clear-btn',
+            onClick: () => setSearchQuery(''),
+          }, '✕') : null
+        ) : null,
+
+        // Body Layout
+        h('div', { className: 'dsh-preview-body-layout' },
+          // Outline / TOC Sidebar
+          isTocOpen && outlineItems.length > 0 ? h('div', { className: 'dsh-preview-toc-sidebar' },
+            h('div', { className: 'dsh-preview-toc-header' },
+              h('span', { style: { fontWeight: 600, fontSize: 12 } }, category === 'markdown' ? '目录大纲 (TOC)' : '符号与属性大纲'),
+              h('button', {
+                type: 'button',
+                className: 'dsh-toc-close-btn',
+                onClick: () => setIsTocOpen(false),
+              }, '✕')
+            ),
+            h('div', { className: 'dsh-preview-toc-list' },
+              outlineItems.map((item, idx) =>
+                h('div', {
+                  key: idx,
+                  className: `dsh-toc-item ${item.level ? `dsh-toc-level-${item.level}` : 'dsh-symbol-item'}`,
+                  onClick: () => handleOutlineClick(item),
+                  title: item.text,
+                },
+                  h('span', { className: 'dsh-toc-text' }, item.text)
+                )
+              )
+            )
+          ) : null,
+
+          // Main View Content
+          h('div', { className: 'dsh-preview-main-scroll' },
+            isLoading ? h('div', { className: 'dsh-preview-loading' },
+              h('div', { className: 'dsh-preview-spinner' }),
+              h('span', null, '正在加载文件内容...')
+            ) : (error || fileInfo?.error) ? h('div', { className: 'dsh-preview-error-card' },
+              h('div', { className: 'dsh-error-icon' }, '⚠️'),
+              h('div', { className: 'dsh-error-title' }, '读取文件失败'),
+              h('div', { className: 'dsh-error-desc' }, error || fileInfo?.error),
+              h('div', { className: 'dsh-error-actions' },
+                h('button', { type: 'button', className: 'dsh-btn-retry', onClick: onRefresh }, '重试'),
+                h('button', { type: 'button', className: 'dsh-btn-native', onClick: () => onOpenNative(tab.filePath) }, '在外部打开')
+              )
+            ) : viewMode === 'json-tree' ? (
+              // JSON / YAML Tree Inspector
+              parsedTreeData.ok ? (
+                h(JSONTreeInspector, {
+                  data: parsedTreeData.data,
+                  rawContent: content,
+                  onFormat: category === 'json' ? handleFormatJSON : null,
+                  onMinify: category === 'json' ? handleMinifyJSON : null,
+                })
+              ) : (
+                h('div', { className: 'dsh-json-parse-error' },
+                  h('div', { style: { fontSize: 28, marginBottom: 8 } }, '⚠️'),
+                  h('div', { style: { fontWeight: 600, fontSize: 14, marginBottom: 4 } }, '结构解析失败'),
+                  h('div', { style: { fontSize: 12, color: '#ef4444', marginBottom: 12 } }, parsedTreeData.error || '无法按树状结构解析'),
+                  h('button', {
+                    type: 'button',
+                    className: 'dsh-btn-native',
+                    onClick: () => handleModeChange('code')
+                  }, '切换到代码高亮模式查看')
+                )
+              )
+            ) : viewMode === 'preview' && category === 'markdown' ? (
+              // Markdown Render View
+              h('div', {
+                ref: contentRef,
+                className: 'dsh-markdown-body',
+                dangerouslySetInnerHTML: { __html: renderedMarkdownHtml },
+              })
+            ) : viewMode === 'split' && category === 'markdown' ? (
+              // Markdown Split View
+              h('div', { className: 'dsh-split-view' },
+                h('div', { className: 'dsh-split-pane dsh-split-source' },
+                  h('div', { className: 'dsh-split-pane-header' }, '📝 源码'),
+                  h(CodeEditorView, {
+                    content,
+                    category: 'markdown',
+                    isHighlighted: true,
+                    isWordWrap,
+                    searchQuery,
+                    onLineClick: () => {},
+                  })
+                ),
+                h('div', { className: 'dsh-split-pane dsh-split-render' },
+                  h('div', { className: 'dsh-split-pane-header' }, '📖 渲染预览'),
+                  h('div', {
+                    ref: contentRef,
+                    className: 'dsh-markdown-body',
+                    dangerouslySetInnerHTML: { __html: renderedMarkdownHtml },
+                  })
+                )
+              )
+            ) : (
+              // Code View (for code/json/yaml/source/raw modes)
+              h(CodeEditorView, {
+                content,
+                category,
+                isHighlighted: viewMode !== 'raw',
+                isWordWrap,
+                searchQuery,
+                onLineClick: (lineNum) => {
+                  showToast(`已选定第 ${lineNum} 行`, 'info');
+                },
+              })
+            )
+          )
+        ),
+
+        // Status Footer
+        h('div', { className: 'dsh-preview-footer' },
+          h('div', { className: 'dsh-footer-left', title: fileInfo?.path || tab.filePath },
+            h('span', { className: 'dsh-footer-ext' }, (fileInfo?.extension || tab.extension || category).toUpperCase().replace('.', '')),
+            h('span', { className: 'dsh-footer-path' }, fileInfo?.path || tab.filePath)
+          ),
+          h('div', { className: 'dsh-footer-right' },
+            fileInfo?.size ? h('span', { className: 'dsh-footer-stat' }, formatBytes(fileInfo.size)) : null,
+            fileInfo?.lineCount ? h('span', { className: 'dsh-footer-stat' }, `${fileInfo.lineCount} 行`) : null,
+            fileInfo?.wordCount ? h('span', { className: 'dsh-footer-stat' }, `约 ${fileInfo.wordCount} 字`) : null
+          )
+        )
+      );
+    }
+
+    // =========================================================================
+    // React Components: Right Side Drawer / Shell Overlay Container
+    // =========================================================================
+    function PreviewDrawerRoot() {
+      const [tabs, setTabs] = useState(globalTabs);
+      const [activeTabId, setActiveTabId] = useState(globalActiveTabId);
+      const [isOpen, setIsOpen] = useState(globalIsPanelOpen);
+      const [width, setWidth] = useState(globalPanelWidth);
+      const [isTreeOpen, setLocalIsTreeOpen] = useState(globalIsTreeOpen);
+      const [treeWidth, setLocalTreeWidth] = useState(globalTreeWidth);
+      const [isTreeDragging, setIsTreeDragging] = useState(false);
+      const treeDragStartX = useRef(0);
+      const treeDragStartWidth = useRef(0);
+      const [fileData, setFileData] = useState({});
+      const [loadingMap, setLoadingMap] = useState({});
+      const [errorMap, setErrorMap] = useState({});
+      const [isDragging, setIsDragging] = useState(false);
+      const dragStartX = useRef(0);
+      const dragStartWidth = useRef(0);
+
+      // Subscribe to global store changes
+      useEffect(() => {
+        const update = () => {
+          setTabs([...globalTabs]);
+          setActiveTabId(globalActiveTabId);
+          setIsOpen(globalIsPanelOpen);
+          setWidth(globalPanelWidth);
+          setLocalIsTreeOpen(globalIsTreeOpen);
+          setLocalTreeWidth(globalTreeWidth);
+        };
+        stateListeners.add(update);
+        return () => stateListeners.delete(update);
+      }, []);
+
+      const activeTab = useMemo(() => {
+        return tabs.find(t => t.id === activeTabId) || tabs[0] || null;
+      }, [tabs, activeTabId]);
+
+      // Load file content when active tab changes
+      const loadTabFile = useCallback(async (tab, force = false) => {
+        if (!tab || !tab.filePath) return;
+        const key = tab.filePath.toLowerCase();
+        setLoadingMap(m => ({ ...m, [key]: true }));
+        setErrorMap(m => ({ ...m, [key]: null }));
+        try {
+          const fileInfo = await fetchFileContent(tab.filePath, force);
+          if (fileInfo?.error) {
+            setErrorMap(m => ({ ...m, [key]: fileInfo.error }));
+          } else {
+            setFileData(d => ({ ...d, [key]: fileInfo }));
+          }
+        } catch (e) {
+          setErrorMap(m => ({ ...m, [key]: e.message }));
+        } finally {
+          setLoadingMap(m => ({ ...m, [key]: false }));
+        }
+      }, []);
+
+      useEffect(() => {
+        if (activeTab) {
+          loadTabFile(activeTab);
+        }
+      }, [activeTab, loadTabFile]);
+
+      // Drag Resize Handlers (Panel Width)
+      const onResizePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        dragStartX.current = e.clientX;
+        dragStartWidth.current = globalPanelWidth;
+        setIsDragging(true);
+      }, []);
+
+      const onResizePointerMove = useCallback((e) => {
+        if (!isDragging) return;
+        const dx = dragStartX.current - e.clientX; // drag left increases width
+        const newWidth = dragStartWidth.current + dx;
+        setPanelWidth(newWidth);
+      }, [isDragging]);
+
+      const onResizePointerUp = useCallback((e) => {
+        if (isDragging) {
+          setIsDragging(false);
+          try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
+        }
+      }, [isDragging]);
+
+      // Drag Resize Handlers (Tree Width)
+      const onTreeResizePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        treeDragStartX.current = e.clientX;
+        treeDragStartWidth.current = globalTreeWidth;
+        setIsTreeDragging(true);
+      }, []);
+
+      const onTreeResizePointerMove = useCallback((e) => {
+        if (!isTreeDragging) return;
+        const dx = e.clientX - treeDragStartX.current;
+        const newWidth = treeDragStartWidth.current + dx;
+        setTreeWidth(newWidth);
+      }, [isTreeDragging]);
+
+      const onTreeResizePointerUp = useCallback((e) => {
+        if (isTreeDragging) {
+          setIsTreeDragging(false);
+          try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
+        }
+      }, [isTreeDragging]);
+
+      const drawerRef = useRef(null);
+
+      // Outside Click Listener: Click on the chat conversation / dialog box outside the drawer to auto close/hide it
+      useEffect(() => {
+        if (!isOpen) return;
+
+        const handleOutsidePointerDown = (e) => {
+          // 1. Ignore if just opened within 250ms
+          if (Date.now() - globalLastOpenTime < 250) return;
+          // 2. Ignore during dragging resize handle
+          if (isDragging || isTreeDragging) return;
+
+          const target = e.target;
+          if (!target) return;
+
+          // 3. If clicking inside the preview drawer, do not close
+          const drawerEl = drawerRef.current || document.querySelector('.dsh-preview-drawer-container');
+          if (drawerEl && (drawerEl === target || drawerEl.contains(target))) {
+            return;
+          }
+
+          // 4. If clicking on the floating pill, do not close
+          const floatPill = document.querySelector('.dsh-preview-float-pill');
+          if (floatPill && (floatPill === target || floatPill.contains(target))) {
+            return;
+          }
+
+          // 5. If clicking on a file link or button that opens a file preview, do not close (let interceptor open it)
+          if (target.closest) {
+            const btn = target.closest('button');
+            if (btn) {
+              const candidate = btn.getAttribute('title') || btn.getAttribute('aria-label') || btn.textContent || '';
+              if (isPreviewableFile(candidate.trim())) return;
+            }
+            const anchor = target.closest('a');
+            if (anchor) {
+              const href = anchor.getAttribute('href') || '';
+              if (isPreviewableFile(href)) return;
+            }
+          }
+
+          // 6. Outside click in dialog/conversation/background: Auto hide the preview drawer!
+          setPanelOpen(false);
+        };
+
+        window.addEventListener('pointerdown', handleOutsidePointerDown, true);
+        return () => {
+          window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
+        };
+      }, [isOpen, isDragging, isTreeDragging]);
+
+      // Hotkey: Esc closes preview, Ctrl/Cmd+B toggles file tree
+      useEffect(() => {
+        const onKeyDown = (e) => {
+          if (e.key === 'Escape' && globalIsPanelOpen) {
+            setPanelOpen(false);
+          }
+          if ((e.ctrlKey || e.metaKey) && (e.key === 'b' || e.key === 'B')) {
+            e.preventDefault();
+            setIsTreeOpen(!globalIsTreeOpen);
+          }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+      }, []);
+
+      const activeKey = activeTab?.filePath?.toLowerCase();
+      const currentFileInfo = activeKey ? fileData[activeKey] : null;
+      const currentLoading = activeKey ? !!loadingMap[activeKey] : false;
+      const currentError = activeKey ? errorMap[activeKey] : null;
+
+      return h(Fragment, null,
+        // Floating Mini Button to Reopen (when closed)
+        !isOpen ? h('div', {
+          className: 'dsh-preview-float-pill',
+          onClick: () => setPanelOpen(true),
+          title: tabs.length > 0 ? `展开文档与工作区文件浏览 (${tabs.length} 个标签)` : '浏览工作空间文件树',
+        },
+          h('span', { className: 'dsh-float-pill-icon' }, '📁'),
+          h('span', { className: 'dsh-float-pill-text' }, tabs.length > 0 ? `预览: ${activeTab?.title || '文档'}` : '工作区文件'),
+          tabs.length > 0 ? h('span', { className: 'dsh-float-pill-badge' }, tabs.length) : null
+        ) : null,
+
+        // Right-Side Slide Drawer
+        isOpen ? h('div', {
+          ref: drawerRef,
+          className: `dsh-preview-drawer-container ${isDragging || isTreeDragging ? 'dragging' : ''}`,
+          style: { width: `${width}px` },
+        },
+          // Drag Handle on Left Border
+          h('div', {
+            className: 'dsh-preview-drag-handle',
+            onPointerDown: onResizePointerDown,
+            onPointerMove: onResizePointerMove,
+            onPointerUp: onResizePointerUp,
+            title: '左右拖拽调整预览面板宽度',
+          }),
+
+          // Drawer Header with FileTabs
+          h('div', { className: 'dsh-preview-drawer-header' },
+            // Tabs Bar
+            h('div', { className: 'dsh-preview-tabs-row' },
+              tabs.length > 0 ? tabs.map(tab => {
+                const isActive = tab.id === activeTabId;
+                const ext = (tab.extension || '').toLowerCase();
+                const icon = ext === '.json' ? '{ }' : (ext === '.ts' || ext === '.js' ? 'TS' : '📝');
+                return h('div', {
+                  key: tab.id,
+                  className: `dsh-preview-tab-item ${isActive ? 'active' : ''}`,
+                  onClick: () => switchActiveTab(tab.id),
+                  title: `${tab.title}\n${tab.filePath}`,
+                },
+                  h('span', { className: 'dsh-tab-icon' }, icon),
+                  h('span', { className: 'dsh-tab-title' }, tab.title),
+                  h('button', {
+                    type: 'button',
+                    className: 'dsh-tab-close-btn',
+                    onClick: (e) => closePreviewTab(tab.id, e),
+                    title: '关闭此标签',
+                  }, '✕')
+                );
+              }) : h('div', { className: 'dsh-preview-tab-item active' },
+                h('span', { className: 'dsh-tab-icon' }, '📁'),
+                h('span', { className: 'dsh-tab-title' }, '工作空间文件树')
+              )
+            ),
+
+            // Header Right Window Controls
+            h('div', { className: 'dsh-preview-window-controls' },
+              h('button', {
+                type: 'button',
+                className: `dsh-win-ctrl-btn ${isTreeOpen ? 'active' : ''}`,
+                onClick: () => setIsTreeOpen(!globalIsTreeOpen),
+                title: isTreeOpen ? '收起目录树 (Ctrl/Cmd+B)' : '展开目录树 (Ctrl/Cmd+B)',
+              }, '🗂️ 目录树'),
+              tabs.length > 1 ? h('button', {
+                type: 'button',
+                className: 'dsh-win-ctrl-btn',
+                onClick: closeAllTabs,
+                title: '关闭所有标签页',
+              }, '✕ 全部') : null,
+              h('button', {
+                type: 'button',
+                className: 'dsh-win-ctrl-btn dsh-win-ctrl-close',
+                onClick: () => setPanelOpen(false),
+                title: '收起预览面板 (Esc)',
+              }, '✕')
+            )
+          ),
+
+          // Drawer Body (Split View between Workspace Tree & Preview View)
+          h('div', { className: 'dsh-preview-drawer-body-split' },
+            // Left: Workspace File Tree
+            isTreeOpen ? h(WorkspaceTreeSidebar, {
+              width: treeWidth,
+              activeFilePath: activeTab?.filePath,
+              onOpenFile: openPreviewFile,
+              onCloseSidebar: () => setIsTreeOpen(false),
+            }) : null,
+
+            // Resizer between Tree and Content
+            isTreeOpen ? h('div', {
+              className: `dsh-tree-splitter ${isTreeDragging ? 'dragging' : ''}`,
+              onPointerDown: onTreeResizePointerDown,
+              onPointerMove: onTreeResizePointerMove,
+              onPointerUp: onTreeResizePointerUp,
+              title: '拖拽调整目录树宽度',
+            }) : null,
+
+            // Right: Content View or Welcome View
+            activeTab ? h(MarkdownPreviewView, {
+              key: activeTab.id,
+              tab: activeTab,
+              fileInfo: currentFileInfo,
+              isLoading: currentLoading,
+              error: currentError,
+              isTreeOpen: isTreeOpen,
+              onToggleTree: () => setIsTreeOpen(!globalIsTreeOpen),
+              onRefresh: () => loadTabFile(activeTab, true),
+              onOpenNative: triggerOpenNative,
+              onReveal: triggerRevealInExplorer,
+            }) : h(WorkspaceWelcomeView, {
+              workspaceRoot: getCurrentWorkspaceRoot(),
+              workspaceName: getFileName(getCurrentWorkspaceRoot()),
+              onOpenFile: openPreviewFile,
+              onOpenTree: () => setIsTreeOpen(true),
+            })
+          )
+        ) : null
+      );
+    }
+
+    // =========================================================================
+    // Global Link Click Listener & Workspace Interceptor
+    // =========================================================================
+    function setupFileInterceptors(ctx) {
+      // 1. Intercept ctx.workspaces.openPath
+      if (ctx && ctx.workspaces && typeof ctx.workspaces.openPath === 'function') {
+        const originalOpenPath = ctx.workspaces.openPath.bind(ctx.workspaces);
+        ctx.workspaces.openPath = async function(targetPath) {
+          if (isPreviewableFile(targetPath)) {
+            console.log('[Preview] Intercepted workspaces.openPath ->', targetPath);
+            openPreviewFile(targetPath);
+            return Promise.resolve();
+          }
+          return originalOpenPath(targetPath);
+        };
+        console.log('[Preview] Successfully hooked ctx.workspaces.openPath');
+      }
+
+      // 2. Intercept DOM Clicks globally
+      if (typeof document !== 'undefined') {
+        document.addEventListener('click', (e) => {
+          const target = e.target;
+          if (!target || !target.closest) return;
+
+          // A. Click on ProducedFiles chip button or ToolRow summary button
+          const button = target.closest('button');
+          if (button) {
+            const title = button.getAttribute('title') || '';
+            const ariaLabel = button.getAttribute('aria-label') || '';
             const text = (button.textContent || '').trim();
 
             const candidate = title || ariaLabel || text;
@@ -1202,1023 +2558,1703 @@
             }
           }
 
-          // B. Click on <a> link pointing to .md or file://
-          const anchor = target.closest('a');
-          if (anchor) {
-            const href = anchor.getAttribute('href') || '';
-            if (href.startsWith('#') && !href.startsWith('#heading-')) return;
-            if (href.startsWith('file://') || isPreviewableFile(href)) {
-              e.preventDefault();
-              e.stopPropagation();
-              const fullPath = resolveAbsoluteFilePath(href);
-              console.log('[Preview] Intercepted link click ->', fullPath);
-              openPreviewFile(fullPath);
-            }
-          }
-        }, true); // Use capture phase to intercept early!
-      }
-    }
+          // B. Click on <a> link pointing to .md or file://
+          const anchor = target.closest('a');
+          if (anchor) {
+            const href = anchor.getAttribute('href') || '';
+            if (href.startsWith('#') && !href.startsWith('#heading-')) return;
+            if (href.startsWith('file://') || isPreviewableFile(href)) {
+              e.preventDefault();
+              e.stopPropagation();
+              const fullPath = resolveAbsoluteFilePath(href);
+              console.log('[Preview] Intercepted link click ->', fullPath);
+              openPreviewFile(fullPath);
+            }
+          }
+        }, true); // Use capture phase to intercept early!
+      }
+    }
+
+    // =========================================================================
+    // Inject Custom Stylesheet
+    // =========================================================================
+    function injectStyles() {
+      if (typeof document === 'undefined') return;
+      if (document.getElementById('dsh-plugin-preview-styles')) return;
+
+      const style = document.createElement('style');
+      style.id = 'dsh-plugin-preview-styles';
+      style.textContent = `
+        /* =====================================================================
+           DeepSeek Harness Preview Plugin Styles (WorkBuddy FileTabs Inspired)
+           ===================================================================== */
+        
+        /* Floating Pill Button */
+        .dsh-preview-float-pill {
+          position: fixed;
+          bottom: 84px;
+          right: 20px;
+          z-index: 9990;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 14px;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          border: 1px solid var(--dsw-alias-border-l3, #cbd5e1);
+          border-radius: 20px;
+          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+          cursor: pointer;
+          font-size: 13px;
+          font-weight: 500;
+          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          user-select: none;
+        }
+        body[data-ds-dark-theme] .dsh-preview-float-pill {
+          background: var(--dsw-alias-bg-layer-2, #1e222d);
+          color: var(--dsw-alias-label-primary, #e2e8f0);
+          border-color: var(--dsw-alias-border-l3, #334155);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+        }
+        .dsh-preview-float-pill:hover {
+          transform: translateY(-2px);
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+          box-shadow: 0 10px 24px rgba(65, 118, 230, 0.25);
+        }
+        .dsh-float-pill-badge {
+          background: var(--dsw-static-deepseek-500, #4176e6);
+          color: #fff;
+          font-size: 11px;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+        }
+
+        /* Right-Side Drawer Container */
+        .dsh-preview-drawer-container {
+          position: fixed;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          height: 100vh;
+          z-index: 9995;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          border-left: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.14);
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          overflow: hidden;
+          animation: dshPreviewSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        body[data-ds-dark-theme] .dsh-preview-drawer-container {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+          color: var(--dsw-alias-label-primary, #e2e8f0);
+          border-left-color: var(--dsw-alias-border-l3, #2d3748);
+          box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
+        }
+        .dsh-preview-drawer-container.dragging {
+          user-select: none;
+          transition: none;
+        }
+        @keyframes dshPreviewSlideIn {
+          from { transform: translateX(100%); }
+          to { transform: translateX(0); }
+        }
+
+        /* Left Resize Handle */
+        .dsh-preview-drag-handle {
+          position: absolute;
+          top: 0;
+          left: -4px;
+          bottom: 0;
+          width: 8px;
+          cursor: col-resize;
+          z-index: 100;
+          transition: background 0.15s;
+        }
+        .dsh-preview-drag-handle:hover,
+        .dsh-preview-drawer-container.dragging .dsh-preview-drag-handle {
+          background: var(--dsw-static-deepseek-500, #4176e6);
+        }
+
+        /* Header & FileTabs */
+        .dsh-preview-drawer-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 38px;
+          min-height: 38px;
+          flex-shrink: 0;
+          background: var(--dsw-alias-bg-layer-2, #f1f5f9);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          padding: 0 8px;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+        body[data-ds-dark-theme] .dsh-preview-drawer-header {
+          background: var(--dsw-alias-bg-layer-2, #12151d);
+          border-bottom-color: var(--dsw-alias-border-l2, #2d3748);
+        }
+        .dsh-preview-tabs-row {
+          display: flex;
+          align-items: flex-end;
+          gap: 4px;
+          overflow-x: auto;
+          scrollbar-width: none;
+          flex: 1;
+          height: 100%;
+          padding-top: 4px;
+        }
+        .dsh-preview-tabs-row::-webkit-scrollbar { display: none; }
+
+        .dsh-preview-tab-item {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 0 10px;
+          height: 30px;
+          border-radius: 6px 6px 0 0;
+          font-size: 12px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          background: transparent;
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          max-width: 180px;
+          transition: all 0.15s;
+          border: 1px solid transparent;
+          border-bottom: none;
+        }
+        .dsh-preview-tab-item:hover {
+          background: rgba(0, 0, 0, 0.04);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-preview-tab-item:hover {
+          background: rgba(255, 255, 255, 0.05);
+          color: var(--dsw-alias-label-primary, #f1f5f9);
+        }
+        .dsh-preview-tab-item.active {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          font-weight: 600;
+          border-color: var(--dsw-alias-border-l2, #e2e8f0);
+          border-bottom: 2px solid var(--dsw-static-deepseek-500, #4176e6);
+          box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03);
+        }
+        body[data-ds-dark-theme] .dsh-preview-tab-item.active {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+          border-color: var(--dsw-alias-border-l2, #2d3748);
+          border-bottom: 2px solid var(--dsw-static-deepseek-500, #4176e6);
+          box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
+        }
+        .dsh-tab-icon {
+          font-size: 12px;
+        }
+        .dsh-tab-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .dsh-tab-close-btn {
+          background: none;
+          border: none;
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+          font-size: 11px;
+          cursor: pointer;
+          padding: 2px 4px;
+          border-radius: 4px;
+          line-height: 1;
+        }
+        .dsh-tab-close-btn:hover {
+          background: rgba(239, 68, 68, 0.15);
+          color: #ef4444;
+        }
+
+        .dsh-preview-window-controls {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding-left: 8px;
+          height: 100%;
+        }
+        .dsh-win-ctrl-btn {
+          background: transparent;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          color: var(--dsw-alias-label-secondary, #64748b);
+          font-size: 11px;
+          padding: 3px 8px;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s;
+        }
+        .dsh-win-ctrl-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-win-ctrl-btn {
+          border-color: var(--dsw-alias-border-l2, #334155);
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        body[data-ds-dark-theme] .dsh-win-ctrl-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #283042);
+          color: var(--dsw-alias-label-primary, #f1f5f9);
+        }
+        .dsh-win-ctrl-close:hover {
+          background: #ef4444 !important;
+          border-color: #ef4444 !important;
+          color: #fff !important;
+        }
 
-    // =========================================================================
-    // Inject Custom Stylesheet
-    // =========================================================================
-    function injectStyles() {
-      if (typeof document === 'undefined') return;
-      if (document.getElementById('dsh-plugin-preview-styles')) return;
+        /* Content Container */
+        .dsh-preview-content-container {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          min-height: 0;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
 
-      const style = document.createElement('style');
-      style.id = 'dsh-plugin-preview-styles';
-      style.textContent = `
-        /* =====================================================================
-           DeepSeek Harness Preview Plugin Styles (WorkBuddy FileTabs Inspired)
-           ===================================================================== */
-        
-        /* Floating Pill Button */
-        .dsh-preview-float-pill {
-          position: fixed;
-          bottom: 84px;
-          right: 20px;
-          z-index: 9990;
+        /* Toolbar */
+        .dsh-preview-toolbar {
           display: flex;
           align-items: center;
-          gap: 8px;
-          padding: 8px 14px;
+          justify-content: space-between;
+          padding: 6px 12px;
+          height: 38px;
+          min-height: 38px;
+          flex-shrink: 0;
           background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          gap: 10px;
+          box-sizing: border-box;
+        }
+        body[data-ds-dark-theme] .dsh-preview-toolbar {
+          background: var(--dsw-alias-bg-layer-2, #161a24);
+          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-preview-toolbar-left,
+        .dsh-preview-toolbar-right {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          flex-shrink: 0;
+          white-space: nowrap;
+        }
+
+        .dsh-preview-mode-group {
+          display: flex;
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          padding: 2px;
+          border-radius: 6px;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-preview-mode-group {
+          background: var(--dsw-alias-bg-layer-3, #0d1017);
+          border-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-preview-mode-btn {
+          background: transparent;
+          border: none;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          font-size: 11px;
+          padding: 4px 9px;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-preview-mode-btn {
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        .dsh-preview-mode-btn.active {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
           color: var(--dsw-alias-label-primary, #0f172a);
-          border: 1px solid var(--dsw-alias-border-l3, #cbd5e1);
-          border-radius: 20px;
-          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+          font-weight: 600;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        body[data-ds-dark-theme] .dsh-preview-mode-btn.active {
+          background: var(--dsw-alias-bg-layer-2, #1e2433);
+          color: var(--dsw-alias-label-primary, #f8fafc);
+          box-shadow: 0 1px 4px rgba(0,0,0,0.25);
+        }
+        .dsh-preview-tool-btn {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          color: var(--dsw-alias-label-primary, #334155);
+          font-size: 11px;
+          padding: 4px 9px;
+          border-radius: 5px;
           cursor: pointer;
-          font-size: 13px;
+          transition: all 0.15s;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-preview-tool-btn {
+          background: var(--dsw-alias-bg-layer-2, #1e2433);
+          border-color: var(--dsw-alias-border-l2, #2d3748);
+          color: var(--dsw-alias-label-secondary, #cbd5e1);
+        }
+        .dsh-preview-tool-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+        }
+        body[data-ds-dark-theme] .dsh-preview-tool-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #293347);
+          color: #fff;
+        }
+        .dsh-preview-tool-btn.active {
+          background: rgba(65, 118, 230, 0.12);
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          font-weight: 600;
+        }
+        .dsh-preview-tool-btn-accent {
+          background: rgba(65, 118, 230, 0.1);
+          border-color: rgba(65, 118, 230, 0.35);
+          color: var(--dsw-static-deepseek-500, #2563eb);
           font-weight: 500;
-          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          user-select: none;
         }
-        body[data-ds-dark-theme] .dsh-preview-float-pill {
-          background: var(--dsw-alias-bg-layer-2, #1e222d);
-          color: var(--dsw-alias-label-primary, #e2e8f0);
+        body[data-ds-dark-theme] .dsh-preview-tool-btn-accent {
+          background: rgba(65, 118, 230, 0.15);
+          border-color: rgba(65, 118, 230, 0.4);
+          color: #60a5fa;
+        }
+        .dsh-preview-tool-btn-accent:hover {
+          background: var(--dsw-static-deepseek-500, #4176e6) !important;
+          color: #fff !important;
+        }
+
+        /* Search Bar */
+        .dsh-preview-search-bar {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 6px 12px;
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-preview-search-bar {
+          background: var(--dsw-alias-bg-layer-3, #0d1017);
+          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-preview-search-input {
+          flex: 1;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          border: 1px solid var(--dsw-alias-border-l3, #cbd5e1);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          font-size: 12px;
+          padding: 4px 10px;
+          border-radius: 4px;
+          outline: none;
+        }
+        body[data-ds-dark-theme] .dsh-preview-search-input {
+          background: var(--dsw-alias-bg-layer-2, #1a1f2c);
           border-color: var(--dsw-alias-border-l3, #334155);
-          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+          color: #f1f5f9;
         }
-        .dsh-preview-float-pill:hover {
-          transform: translateY(-2px);
+        .dsh-preview-search-input:focus {
           border-color: var(--dsw-static-deepseek-500, #4176e6);
-          box-shadow: 0 10px 24px rgba(65, 118, 230, 0.25);
         }
-        .dsh-float-pill-badge {
-          background: var(--dsw-static-deepseek-500, #4176e6);
-          color: #fff;
-          font-size: 11px;
-          padding: 1px 6px;
-          border-radius: 10px;
-          font-weight: 600;
+        .dsh-search-clear-btn {
+          background: none;
+          border: none;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          cursor: pointer;
+        }
+        mark.dsh-search-highlight {
+          background: #fde047;
+          color: #000;
+          padding: 1px 3px;
+          border-radius: 2px;
         }
 
-        /* Right-Side Drawer Container */
-        .dsh-preview-drawer-container {
-          position: fixed;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          height: 100vh;
-          z-index: 9995;
-          background: var(--dsw-alias-bg-layer-1, #ffffff);
-          color: var(--dsw-alias-label-primary, #0f172a);
-          border-left: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
-          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.14);
+        /* Body Layout & TOC */
+        .dsh-preview-body-layout {
           display: flex;
-          flex-direction: column;
-          box-sizing: border-box;
+          flex: 1;
           overflow: hidden;
-          animation: dshPreviewSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-        body[data-ds-dark-theme] .dsh-preview-drawer-container {
-          background: var(--dsw-alias-bg-layer-1, #161922);
-          color: var(--dsw-alias-label-primary, #e2e8f0);
-          border-left-color: var(--dsw-alias-border-l3, #2d3748);
-          box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
-        }
-        .dsh-preview-drawer-container.dragging {
-          user-select: none;
-          transition: none;
+          position: relative;
         }
-        @keyframes dshPreviewSlideIn {
-          from { transform: translateX(100%); }
-          to { transform: translateX(0); }
+        .dsh-preview-toc-sidebar {
+          width: 220px;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-right: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          display: flex;
+          flex-direction: column;
+          flex-shrink: 0;
+          animation: dshTocSlide 0.2s ease;
         }
-
-        /* Left Resize Handle */
-        .dsh-preview-drag-handle {
-          position: absolute;
-          top: 0;
-          left: -4px;
-          bottom: 0;
-          width: 8px;
-          cursor: col-resize;
-          z-index: 100;
-          transition: background 0.15s;
+        body[data-ds-dark-theme] .dsh-preview-toc-sidebar {
+          background: var(--dsw-alias-bg-layer-2, #161922);
+          border-right-color: var(--dsw-alias-border-l2, #262c3b);
         }
-        .dsh-preview-drag-handle:hover,
-        .dsh-preview-drawer-container.dragging .dsh-preview-drag-handle {
-          background: var(--dsw-static-deepseek-500, #4176e6);
+        @keyframes dshTocSlide {
+          from { width: 0; opacity: 0; }
+          to { width: 220px; opacity: 1; }
         }
-
-        /* Header & FileTabs */
-        .dsh-preview-drawer-header {
+        .dsh-preview-toc-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          height: 38px;
-          min-height: 38px;
-          flex-shrink: 0;
-          background: var(--dsw-alias-bg-layer-2, #f1f5f9);
+          padding: 10px 12px;
           border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          padding: 0 8px;
-          overflow: hidden;
-          box-sizing: border-box;
+          color: var(--dsw-alias-label-secondary, #64748b);
         }
-        body[data-ds-dark-theme] .dsh-preview-drawer-header {
-          background: var(--dsw-alias-bg-layer-2, #12151d);
-          border-bottom-color: var(--dsw-alias-border-l2, #2d3748);
+        body[data-ds-dark-theme] .dsh-preview-toc-header {
+          border-bottom-color: var(--dsw-alias-border-l2, #262c3b);
+          color: var(--dsw-alias-label-secondary, #94a3b8);
         }
-        .dsh-preview-tabs-row {
-          display: flex;
-          align-items: flex-end;
-          gap: 4px;
-          overflow-x: auto;
-          scrollbar-width: none;
+        .dsh-toc-close-btn {
+          background: none;
+          border: none;
+          color: #94a3b8;
+          cursor: pointer;
+        }
+        .dsh-preview-toc-list {
           flex: 1;
-          height: 100%;
-          padding-top: 4px;
+          overflow-y: auto;
+          padding: 8px 4px;
         }
-        .dsh-preview-tabs-row::-webkit-scrollbar { display: none; }
-
-        .dsh-preview-tab-item {
+        .dsh-toc-item {
           display: flex;
           align-items: center;
           gap: 6px;
-          padding: 0 10px;
-          height: 30px;
-          border-radius: 6px 6px 0 0;
+          padding: 5px 8px;
+          border-radius: 4px;
           font-size: 12px;
           color: var(--dsw-alias-label-secondary, #64748b);
-          background: transparent;
           cursor: pointer;
-          user-select: none;
           white-space: nowrap;
-          max-width: 180px;
-          transition: all 0.15s;
-          border: 1px solid transparent;
-          border-bottom: none;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
-        .dsh-preview-tab-item:hover {
-          background: rgba(0, 0, 0, 0.04);
+        body[data-ds-dark-theme] .dsh-toc-item {
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        .dsh-toc-item:hover {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+        }
+        body[data-ds-dark-theme] .dsh-toc-item:hover {
+          background: var(--dsw-alias-bg-layer-3, #222938);
+        }
+        .dsh-toc-level-1 { padding-left: 8px; font-weight: 600; color: var(--dsw-alias-label-primary, #0f172a); }
+        body[data-ds-dark-theme] .dsh-toc-level-1 { color: #f1f5f9; }
+        .dsh-toc-level-2 { padding-left: 18px; }
+        .dsh-toc-level-3 { padding-left: 28px; font-size: 11px; }
+        .dsh-toc-level-4 { padding-left: 36px; font-size: 11px; }
+        .dsh-toc-bullet { opacity: 0.5; }
+
+        /* Main Scroll Content */
+        .dsh-preview-main-scroll {
+          flex: 1;
+          overflow-y: auto;
+          padding: 24px 32px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+        }
+        body[data-ds-dark-theme] .dsh-preview-main-scroll {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+        }
+
+        /* Status Footer */
+        .dsh-preview-footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 28px;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-top: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          padding: 0 14px;
+          font-size: 11px;
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+        }
+        body[data-ds-dark-theme] .dsh-preview-footer {
+          background: var(--dsw-alias-bg-layer-2, #161922);
+          border-top-color: var(--dsw-alias-border-l2, #252d3d);
+          color: var(--dsw-alias-label-tertiary, #64748b);
+        }
+        .dsh-footer-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+        }
+        .dsh-footer-ext {
+          background: var(--dsw-alias-bg-layer-3, #e2e8f0);
+          color: var(--dsw-alias-label-secondary, #475569);
+          padding: 1px 4px;
+          border-radius: 3px;
+          font-size: 10px;
+          font-weight: 600;
+        }
+        body[data-ds-dark-theme] .dsh-footer-ext {
+          background: var(--dsw-alias-bg-layer-3, #262e3d);
+          color: #94a3b8;
+        }
+        .dsh-footer-path {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .dsh-footer-right {
+          display: flex;
+          gap: 12px;
+          flex-shrink: 0;
+        }
+        .dsh-footer-stat {
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+        body[data-ds-dark-theme] .dsh-footer-stat {
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+
+        /* Markdown Typography Styles */
+        .dsh-markdown-body {
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+          font-size: 14px;
+          line-height: 1.72;
+          color: var(--dsw-alias-label-primary, #1e293b);
+          word-break: break-word;
+        }
+        body[data-ds-dark-theme] .dsh-markdown-body {
+          color: var(--dsw-alias-label-primary, #e2e8f0);
+        }
+        .dsh-markdown-body h1,
+        .dsh-markdown-body h2,
+        .dsh-markdown-body h3,
+        .dsh-markdown-body h4,
+        .dsh-markdown-body h5,
+        .dsh-markdown-body h6 {
+          position: relative;
           color: var(--dsw-alias-label-primary, #0f172a);
+          font-weight: 600;
+          margin-top: 1.5em;
+          margin-bottom: 0.6em;
+          line-height: 1.35;
         }
-        body[data-ds-dark-theme] .dsh-preview-tab-item:hover {
-          background: rgba(255, 255, 255, 0.05);
-          color: var(--dsw-alias-label-primary, #f1f5f9);
+        body[data-ds-dark-theme] .dsh-markdown-body h1,
+        body[data-ds-dark-theme] .dsh-markdown-body h2,
+        body[data-ds-dark-theme] .dsh-markdown-body h3,
+        body[data-ds-dark-theme] .dsh-markdown-body h4,
+        body[data-ds-dark-theme] .dsh-markdown-body h5,
+        body[data-ds-dark-theme] .dsh-markdown-body h6 {
+          color: #f8fafc;
         }
-        .dsh-preview-tab-item.active {
-          background: var(--dsw-alias-bg-layer-1, #ffffff);
+        .dsh-markdown-body h1 { font-size: 1.85em; border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0); padding-bottom: 0.3em; }
+        .dsh-markdown-body h2 { font-size: 1.45em; border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0); padding-bottom: 0.25em; }
+        body[data-ds-dark-theme] .dsh-markdown-body h1 { border-bottom-color: var(--dsw-alias-border-l2, #334155); }
+        body[data-ds-dark-theme] .dsh-markdown-body h2 { border-bottom-color: var(--dsw-alias-border-l2, #273344); }
+        .dsh-markdown-body h3 { font-size: 1.25em; }
+        .dsh-markdown-body h4 { font-size: 1.1em; }
+        .dsh-markdown-body h5 { font-size: 0.95em; }
+        .dsh-markdown-body h6 { font-size: 0.88em; color: var(--dsw-alias-label-secondary, #64748b); }
+        .dsh-md-anchor {
+          position: absolute;
+          left: -18px;
+          opacity: 0;
           color: var(--dsw-static-deepseek-500, #4176e6);
-          font-weight: 600;
-          border-color: var(--dsw-alias-border-l2, #e2e8f0);
-          border-bottom: 2px solid var(--dsw-static-deepseek-500, #4176e6);
-          box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03);
-        }
-        body[data-ds-dark-theme] .dsh-preview-tab-item.active {
-          background: var(--dsw-alias-bg-layer-1, #161922);
-          border-color: var(--dsw-alias-border-l2, #2d3748);
-          border-bottom: 2px solid var(--dsw-static-deepseek-500, #4176e6);
-          box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
+          text-decoration: none;
+          transition: opacity 0.15s;
         }
-        .dsh-tab-icon {
-          font-size: 12px;
+        .dsh-markdown-body h1:hover .dsh-md-anchor,
+        .dsh-markdown-body h2:hover .dsh-md-anchor,
+        .dsh-markdown-body h3:hover .dsh-md-anchor {
+          opacity: 1;
         }
-        .dsh-tab-title {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+        .dsh-md-p {
+          margin-bottom: 1em;
         }
-        .dsh-tab-close-btn {
-          background: none;
+        .dsh-md-hr {
           border: none;
-          color: var(--dsw-alias-label-tertiary, #94a3b8);
-          font-size: 11px;
-          cursor: pointer;
-          padding: 2px 4px;
-          border-radius: 4px;
-          line-height: 1;
+          height: 1px;
+          background: var(--dsw-alias-border-l2, #e2e8f0);
+          margin: 2em 0;
         }
-        .dsh-tab-close-btn:hover {
-          background: rgba(239, 68, 68, 0.15);
-          color: #ef4444;
+        body[data-ds-dark-theme] .dsh-md-hr {
+          background: var(--dsw-alias-border-l2, #334155);
         }
-
-        .dsh-preview-window-controls {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          padding-left: 8px;
-          height: 100%;
+        .dsh-md-blockquote {
+          margin: 1.2em 0;
+          padding: 8px 16px;
+          border-left: 4px solid var(--dsw-static-deepseek-500, #4176e6);
+          background: rgba(65, 118, 230, 0.05);
+          border-radius: 0 6px 6px 0;
+          color: var(--dsw-alias-label-secondary, #475569);
         }
-        .dsh-win-ctrl-btn {
-          background: transparent;
-          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
-          color: var(--dsw-alias-label-secondary, #64748b);
-          font-size: 11px;
-          padding: 3px 8px;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: all 0.15s;
+        body[data-ds-dark-theme] .dsh-md-blockquote {
+          color: var(--dsw-alias-label-secondary, #cbd5e1);
+          background: rgba(65, 118, 230, 0.08);
         }
-        .dsh-win-ctrl-btn:hover {
-          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
-          color: var(--dsw-alias-label-primary, #0f172a);
+        .dsh-md-blockquote p { margin: 0.3em 0; }
+
+        /* Tables */
+        .dsh-md-table-wrapper {
+          width: 100%;
+          overflow-x: auto;
+          margin: 1.2em 0;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
         }
-        body[data-ds-dark-theme] .dsh-win-ctrl-btn {
+        body[data-ds-dark-theme] .dsh-md-table-wrapper {
           border-color: var(--dsw-alias-border-l2, #334155);
-          color: var(--dsw-alias-label-secondary, #94a3b8);
         }
-        body[data-ds-dark-theme] .dsh-win-ctrl-btn:hover {
-          background: var(--dsw-alias-bg-layer-3, #283042);
-          color: var(--dsw-alias-label-primary, #f1f5f9);
+        .dsh-md-table-wrapper table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: 13px;
         }
-        .dsh-win-ctrl-close:hover {
-          background: #ef4444 !important;
-          border-color: #ef4444 !important;
-          color: #fff !important;
+        .dsh-md-table-wrapper th,
+        .dsh-md-table-wrapper td {
+          padding: 8px 14px;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
         }
-
-        /* Content Container */
-        .dsh-preview-content-container {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          min-height: 0;
-          overflow: hidden;
-          box-sizing: border-box;
+        body[data-ds-dark-theme] .dsh-md-table-wrapper th,
+        body[data-ds-dark-theme] .dsh-md-table-wrapper td {
+          border-color: var(--dsw-alias-border-l2, #273344);
         }
-
-        /* Toolbar */
-        .dsh-preview-toolbar {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 6px 12px;
-          height: 38px;
-          min-height: 38px;
-          flex-shrink: 0;
+        .dsh-md-table-wrapper th {
           background: var(--dsw-alias-bg-layer-2, #f8fafc);
-          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          gap: 10px;
-          box-sizing: border-box;
-        }
-        body[data-ds-dark-theme] .dsh-preview-toolbar {
-          background: var(--dsw-alias-bg-layer-2, #161a24);
-          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
-        }
-        .dsh-preview-toolbar-left,
-        .dsh-preview-toolbar-right {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          flex-shrink: 0;
-          white-space: nowrap;
-        }
-
-        .dsh-preview-mode-group {
-          display: flex;
-          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
-          padding: 2px;
-          border-radius: 6px;
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          flex-shrink: 0;
+          font-weight: 600;
+          color: var(--dsw-alias-label-primary, #0f172a);
         }
-        body[data-ds-dark-theme] .dsh-preview-mode-group {
-          background: var(--dsw-alias-bg-layer-3, #0d1017);
-          border-color: var(--dsw-alias-border-l2, #252d3d);
+        body[data-ds-dark-theme] .dsh-md-table-wrapper th {
+          background: var(--dsw-alias-bg-layer-2, #1a202c);
+          color: #f1f5f9;
         }
-        .dsh-preview-mode-btn {
-          background: transparent;
-          border: none;
-          color: var(--dsw-alias-label-secondary, #64748b);
-          font-size: 11px;
-          padding: 4px 9px;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: all 0.15s;
-          white-space: nowrap;
-          flex-shrink: 0;
+        .dsh-md-table-wrapper tr:nth-child(even) {
+          background: rgba(0, 0, 0, 0.015);
         }
-        body[data-ds-dark-theme] .dsh-preview-mode-btn {
-          color: var(--dsw-alias-label-secondary, #94a3b8);
+        body[data-ds-dark-theme] .dsh-md-table-wrapper tr:nth-child(even) {
+          background: rgba(255, 255, 255, 0.02);
         }
-        .dsh-preview-mode-btn.active {
-          background: var(--dsw-alias-bg-layer-1, #ffffff);
-          color: var(--dsw-alias-label-primary, #0f172a);
-          font-weight: 600;
-          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+
+        /* Lists & Tasks */
+        .dsh-md-list {
+          padding-left: 24px;
+          margin: 0.8em 0 1.2em 0;
         }
-        body[data-ds-dark-theme] .dsh-preview-mode-btn.active {
-          background: var(--dsw-alias-bg-layer-2, #1e2433);
-          color: var(--dsw-alias-label-primary, #f8fafc);
-          box-shadow: 0 1px 4px rgba(0,0,0,0.25);
+        .dsh-md-list li { margin-bottom: 0.35em; }
+        .dsh-md-task-list {
+          list-style: none;
+          padding-left: 0;
         }
-        .dsh-preview-tool-btn {
-          background: var(--dsw-alias-bg-layer-1, #ffffff);
-          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
-          color: var(--dsw-alias-label-primary, #334155);
-          font-size: 11px;
-          padding: 4px 9px;
-          border-radius: 5px;
-          cursor: pointer;
-          transition: all 0.15s;
+        .dsh-md-task-item {
           display: flex;
           align-items: center;
-          gap: 4px;
-          white-space: nowrap;
-          flex-shrink: 0;
+          gap: 8px;
+          margin-bottom: 0.4em;
         }
-        body[data-ds-dark-theme] .dsh-preview-tool-btn {
-          background: var(--dsw-alias-bg-layer-2, #1e2433);
-          border-color: var(--dsw-alias-border-l2, #2d3748);
-          color: var(--dsw-alias-label-secondary, #cbd5e1);
+        .dsh-md-task-item input[type="checkbox"] {
+          accent-color: var(--dsw-static-deepseek-500, #4176e6);
+          cursor: pointer;
         }
-        .dsh-preview-tool-btn:hover {
+
+        /* Inline Code & Badges */
+        .dsh-md-inline-code {
           background: var(--dsw-alias-bg-layer-3, #f1f5f9);
-          color: var(--dsw-static-deepseek-500, #4176e6);
-          border-color: var(--dsw-static-deepseek-500, #4176e6);
-        }
-        body[data-ds-dark-theme] .dsh-preview-tool-btn:hover {
-          background: var(--dsw-alias-bg-layer-3, #293347);
-          color: #fff;
+          color: var(--dsw-static-deepseek-500, #2563eb);
+          padding: 2px 6px;
+          border-radius: 4px;
+          font-family: "Cascadia Code", Consolas, "Courier New", monospace;
+          font-size: 0.88em;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
         }
-        .dsh-preview-tool-btn.active {
-          background: rgba(65, 118, 230, 0.12);
-          border-color: var(--dsw-static-deepseek-500, #4176e6);
-          color: var(--dsw-static-deepseek-500, #4176e6);
-          font-weight: 600;
+        body[data-ds-dark-theme] .dsh-md-inline-code {
+          background: var(--dsw-alias-bg-layer-3, #1e2433);
+          color: #93c5fd;
+          border-color: rgba(147, 197, 253, 0.15);
         }
-        .dsh-preview-tool-btn-accent {
-          background: rgba(65, 118, 230, 0.1);
-          border-color: rgba(65, 118, 230, 0.35);
+        .dsh-md-link {
           color: var(--dsw-static-deepseek-500, #2563eb);
-          font-weight: 500;
+          text-decoration: none;
+          border-bottom: 1px solid rgba(37, 99, 235, 0.3);
+          transition: border-color 0.15s;
         }
-        body[data-ds-dark-theme] .dsh-preview-tool-btn-accent {
-          background: rgba(65, 118, 230, 0.15);
-          border-color: rgba(65, 118, 230, 0.4);
-          color: #60a5fa;
+        body[data-ds-dark-theme] .dsh-md-link {
+          color: var(--dsw-static-deepseek-500, #60a5fa);
+          border-bottom-color: rgba(96, 165, 250, 0.3);
         }
-        .dsh-preview-tool-btn-accent:hover {
-          background: var(--dsw-static-deepseek-500, #4176e6) !important;
-          color: #fff !important;
+        .dsh-md-link:hover {
+          border-color: currentColor;
         }
 
-        /* Search Bar */
-        .dsh-preview-search-bar {
+        /* Code Cards */
+        .dsh-code-card {
+          margin: 1.4em 0;
+          background: var(--dsw-alias-bg-layer-3, #f8fafc);
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
+          overflow: hidden;
+        }
+        body[data-ds-dark-theme] .dsh-code-card {
+          background: #0d1117;
+          border-color: #30363d;
+        }
+        .dsh-code-card-header {
           display: flex;
           align-items: center;
-          gap: 8px;
+          justify-content: space-between;
           padding: 6px 12px;
-          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          background: rgba(0, 0, 0, 0.03);
           border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
         }
-        body[data-ds-dark-theme] .dsh-preview-search-bar {
-          background: var(--dsw-alias-bg-layer-3, #0d1017);
-          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
-        }
-        .dsh-preview-search-input {
-          flex: 1;
-          background: var(--dsw-alias-bg-layer-1, #ffffff);
-          border: 1px solid var(--dsw-alias-border-l3, #cbd5e1);
-          color: var(--dsw-alias-label-primary, #0f172a);
-          font-size: 12px;
-          padding: 4px 10px;
-          border-radius: 4px;
-          outline: none;
+        body[data-ds-dark-theme] .dsh-code-card-header {
+          background: rgba(255, 255, 255, 0.04);
+          border-bottom-color: #21262d;
         }
-        body[data-ds-dark-theme] .dsh-preview-search-input {
-          background: var(--dsw-alias-bg-layer-2, #1a1f2c);
-          border-color: var(--dsw-alias-border-l3, #334155);
-          color: #f1f5f9;
+        .dsh-code-lang-badge {
+          font-family: monospace;
+          font-size: 11px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          font-weight: 600;
         }
-        .dsh-preview-search-input:focus {
-          border-color: var(--dsw-static-deepseek-500, #4176e6);
+        body[data-ds-dark-theme] .dsh-code-lang-badge {
+          color: #8b949e;
         }
-        .dsh-search-clear-btn {
-          background: none;
-          border: none;
-          color: var(--dsw-alias-label-secondary, #64748b);
+        .dsh-code-copy-btn {
+          background: transparent;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          color: var(--dsw-alias-label-secondary, #475569);
+          font-size: 11px;
+          padding: 2px 8px;
+          border-radius: 4px;
           cursor: pointer;
+          transition: all 0.15s;
         }
-        mark.dsh-search-highlight {
-          background: #fde047;
-          color: #000;
-          padding: 1px 3px;
-          border-radius: 2px;
+        body[data-ds-dark-theme] .dsh-code-copy-btn {
+          border-color: #30363d;
+          color: #c9d1d9;
         }
-
-        /* Body Layout & TOC */
-        .dsh-preview-body-layout {
-          display: flex;
-          flex: 1;
-          overflow: hidden;
-          position: relative;
+        .dsh-code-copy-btn:hover {
+          background: var(--dsw-alias-bg-layer-2, #e2e8f0);
+          color: var(--dsw-static-deepseek-500, #2563eb);
         }
-        .dsh-preview-toc-sidebar {
-          width: 220px;
-          background: var(--dsw-alias-bg-layer-2, #f8fafc);
-          border-right: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          display: flex;
-          flex-direction: column;
-          flex-shrink: 0;
-          animation: dshTocSlide 0.2s ease;
+        body[data-ds-dark-theme] .dsh-code-copy-btn:hover {
+          background: #21262d;
+          color: #58a6ff;
         }
-        body[data-ds-dark-theme] .dsh-preview-toc-sidebar {
-          background: var(--dsw-alias-bg-layer-2, #161922);
-          border-right-color: var(--dsw-alias-border-l2, #262c3b);
+        .dsh-code-pre {
+          margin: 0;
+          padding: 14px 16px;
+          overflow-x: auto;
+          font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
+          font-size: 13px;
+          line-height: 1.55;
+          color: var(--dsw-alias-label-primary, #0f172a);
         }
-        @keyframes dshTocSlide {
-          from { width: 0; opacity: 0; }
-          to { width: 220px; opacity: 1; }
+        body[data-ds-dark-theme] .dsh-code-pre {
+          color: #e6edf3;
         }
-        .dsh-preview-toc-header {
+        .dsh-token-keyword { color: #d73a49; font-weight: 500; }
+        body[data-ds-dark-theme] .dsh-token-keyword { color: #ff7b72; }
+        .dsh-token-string { color: #032f62; }
+        body[data-ds-dark-theme] .dsh-token-string { color: #a5d6ff; }
+        .dsh-token-comment { color: #6a737d; font-style: italic; }
+        body[data-ds-dark-theme] .dsh-token-comment { color: #8b949e; }
+        .dsh-token-number { color: #005cc5; }
+        body[data-ds-dark-theme] .dsh-token-number { color: #79c0ff; }
+
+        /* GitHub Alert Callouts */
+        .dsh-alert {
+          margin: 1.4em 0;
+          padding: 12px 16px;
+          border-left: 4px solid;
+          border-radius: 0 8px 8px 0;
+        }
+        .dsh-alert-title {
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          padding: 10px 12px;
-          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          color: var(--dsw-alias-label-secondary, #64748b);
+          gap: 6px;
+          font-weight: 600;
+          font-size: 13px;
+          margin-bottom: 6px;
         }
-        body[data-ds-dark-theme] .dsh-preview-toc-header {
-          border-bottom-color: var(--dsw-alias-border-l2, #262c3b);
-          color: var(--dsw-alias-label-secondary, #94a3b8);
+        .dsh-alert-note { background: rgba(59, 130, 246, 0.08); border-color: #3b82f6; }
+        .dsh-alert-note .dsh-alert-title { color: #2563eb; }
+        body[data-ds-dark-theme] .dsh-alert-note .dsh-alert-title { color: #60a5fa; }
+        .dsh-alert-tip { background: rgba(16, 185, 129, 0.08); border-color: #10b981; }
+        .dsh-alert-tip .dsh-alert-title { color: #059669; }
+        body[data-ds-dark-theme] .dsh-alert-tip .dsh-alert-title { color: #34d399; }
+        .dsh-alert-important { background: rgba(168, 85, 247, 0.08); border-color: #a855f7; }
+        .dsh-alert-important .dsh-alert-title { color: #7c3aed; }
+        body[data-ds-dark-theme] .dsh-alert-important .dsh-alert-title { color: #c084fc; }
+        .dsh-alert-warning { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; }
+        .dsh-alert-warning .dsh-alert-title { color: #d97706; }
+        body[data-ds-dark-theme] .dsh-alert-warning .dsh-alert-title { color: #fbbf24; }
+        .dsh-alert-caution { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; }
+        .dsh-alert-caution .dsh-alert-title { color: #dc2626; }
+        body[data-ds-dark-theme] .dsh-alert-caution .dsh-alert-title { color: #f87171; }
+        .dsh-alert-body { font-size: 13px; color: var(--dsw-alias-label-secondary, #475569); }
+        body[data-ds-dark-theme] .dsh-alert-body { color: #cbd5e1; }
+
+        /* Math Formulas */
+        .dsh-math-block {
+          margin: 1.2em 0;
+          padding: 12px 16px;
+          background: rgba(0, 0, 0, 0.02);
+          border-radius: 6px;
+          border: 1px dashed var(--dsw-alias-border-l2, #cbd5e1);
+          text-align: center;
+          font-family: "KaTeX_Math", "Times New Roman", serif;
+          font-size: 1.1em;
+          color: var(--dsw-alias-label-primary, #1e293b);
         }
-        .dsh-toc-close-btn {
-          background: none;
-          border: none;
-          color: #94a3b8;
-          cursor: pointer;
+        body[data-ds-dark-theme] .dsh-math-block {
+          background: rgba(255, 255, 255, 0.03);
+          border-color: var(--dsw-alias-border-l2, #334155);
+          color: #cbd5e1;
         }
-        .dsh-preview-toc-list {
-          flex: 1;
-          overflow-y: auto;
-          padding: 8px 4px;
+        .dsh-math-inline {
+          font-family: "KaTeX_Math", "Times New Roman", serif;
+          color: var(--dsw-static-deepseek-500, #2563eb);
+          padding: 0 3px;
         }
-        .dsh-toc-item {
+        body[data-ds-dark-theme] .dsh-math-inline {
+          color: #93c5fd;
+        }
+
+        /* Source View Mode */
+        .dsh-source-view {
           display: flex;
-          align-items: center;
-          gap: 6px;
-          padding: 5px 8px;
-          border-radius: 4px;
-          font-size: 12px;
-          color: var(--dsw-alias-label-secondary, #64748b);
-          cursor: pointer;
-          white-space: nowrap;
+          background: var(--dsw-alias-bg-layer-3, #f8fafc);
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
           overflow: hidden;
-          text-overflow: ellipsis;
+          font-family: "Fira Code", Consolas, monospace;
+          font-size: 13px;
+          line-height: 1.6;
         }
-        body[data-ds-dark-theme] .dsh-toc-item {
-          color: var(--dsw-alias-label-secondary, #94a3b8);
+        body[data-ds-dark-theme] .dsh-source-view {
+          background: var(--dsw-alias-bg-layer-3, #0d1017);
+          border-color: var(--dsw-alias-border-l2, #252d3d);
         }
-        .dsh-toc-item:hover {
-          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
-          color: var(--dsw-static-deepseek-500, #4176e6);
+        .dsh-source-line-numbers {
+          padding: 16px 8px;
+          background: rgba(0, 0, 0, 0.02);
+          border-right: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          color: #94a3b8;
+          text-align: right;
+          user-select: none;
         }
-        body[data-ds-dark-theme] .dsh-toc-item:hover {
-          background: var(--dsw-alias-bg-layer-3, #222938);
+        body[data-ds-dark-theme] .dsh-source-line-numbers {
+          background: rgba(255, 255, 255, 0.02);
+          border-right-color: var(--dsw-alias-border-l2, #252d3d);
+          color: #475569;
+        }
+        .dsh-source-pre {
+          margin: 0;
+          padding: 16px;
+          flex: 1;
+          overflow-x: auto;
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-source-pre {
+          color: #cbd5e1;
         }
-        .dsh-toc-level-1 { padding-left: 8px; font-weight: 600; color: var(--dsw-alias-label-primary, #0f172a); }
-        body[data-ds-dark-theme] .dsh-toc-level-1 { color: #f1f5f9; }
-        .dsh-toc-level-2 { padding-left: 18px; }
-        .dsh-toc-level-3 { padding-left: 28px; font-size: 11px; }
-        .dsh-toc-level-4 { padding-left: 36px; font-size: 11px; }
-        .dsh-toc-bullet { opacity: 0.5; }
 
-        /* Main Scroll Content */
-        .dsh-preview-main-scroll {
+        /* Split View Mode */
+        .dsh-split-view {
+          display: flex;
+          gap: 12px;
+          height: 100%;
+        }
+        .dsh-split-pane {
           flex: 1;
           overflow-y: auto;
-          padding: 24px 32px;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
+          padding: 12px;
           background: var(--dsw-alias-bg-layer-1, #ffffff);
         }
-        body[data-ds-dark-theme] .dsh-preview-main-scroll {
-          background: var(--dsw-alias-bg-layer-1, #161922);
+        body[data-ds-dark-theme] .dsh-split-pane {
+          border-color: var(--dsw-alias-border-l2, #252d3d);
+          background: var(--dsw-alias-bg-layer-1, #0d1017);
         }
-
-        /* Status Footer */
-        .dsh-preview-footer {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          height: 28px;
-          background: var(--dsw-alias-bg-layer-2, #f8fafc);
-          border-top: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          padding: 0 14px;
+        .dsh-split-pane-header {
           font-size: 11px;
-          color: var(--dsw-alias-label-tertiary, #94a3b8);
+          font-weight: 600;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          margin-bottom: 8px;
+          padding-bottom: 4px;
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
         }
-        body[data-ds-dark-theme] .dsh-preview-footer {
-          background: var(--dsw-alias-bg-layer-2, #161922);
-          border-top-color: var(--dsw-alias-border-l2, #252d3d);
-          color: var(--dsw-alias-label-tertiary, #64748b);
+        body[data-ds-dark-theme] .dsh-split-pane-header {
+          color: #94a3b8;
+          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
         }
-        .dsh-footer-left {
+
+        /* Loading & Error States */
+        .dsh-preview-loading {
           display: flex;
+          flex-direction: column;
           align-items: center;
-          gap: 8px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          flex: 1;
+          justify-content: center;
+          padding: 60px 0;
+          gap: 14px;
+          color: var(--dsw-alias-label-secondary, #64748b);
         }
-        .dsh-footer-ext {
-          background: var(--dsw-alias-bg-layer-3, #e2e8f0);
-          color: var(--dsw-alias-label-secondary, #475569);
-          padding: 1px 4px;
-          border-radius: 3px;
-          font-size: 10px;
-          font-weight: 600;
+        .dsh-preview-spinner {
+          width: 32px;
+          height: 32px;
+          border: 3px solid rgba(65, 118, 230, 0.2);
+          border-top-color: var(--dsw-static-deepseek-500, #4176e6);
+          border-radius: 50%;
+          animation: dshSpinner 0.8s linear infinite;
         }
-        body[data-ds-dark-theme] .dsh-footer-ext {
-          background: var(--dsw-alias-bg-layer-3, #262e3d);
-          color: #94a3b8;
+        @keyframes dshSpinner {
+          to { transform: rotate(360deg); }
         }
-        .dsh-footer-path {
-          overflow: hidden;
-          text-overflow: ellipsis;
+
+        .dsh-preview-error-card {
+          padding: 32px 24px;
+          background: rgba(239, 68, 68, 0.06);
+          border: 1px solid rgba(239, 68, 68, 0.25);
+          border-radius: 8px;
+          text-align: center;
+          margin: 30px auto;
+          max-width: 480px;
         }
-        .dsh-footer-right {
-          display: flex;
-          gap: 12px;
-          flex-shrink: 0;
+        .dsh-error-icon { font-size: 32px; margin-bottom: 10px; }
+        .dsh-error-title { font-size: 16px; font-weight: 600; color: #ef4444; margin-bottom: 6px; }
+        .dsh-error-desc { font-size: 13px; color: var(--dsw-alias-label-secondary, #64748b); margin-bottom: 16px; }
+        body[data-ds-dark-theme] .dsh-error-desc { color: #cbd5e1; }
+        .dsh-error-actions { display: flex; justify-content: center; gap: 10px; }
+        .dsh-btn-retry {
+          background: #ef4444; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
         }
-        .dsh-footer-stat {
-          color: var(--dsw-alias-label-secondary, #64748b);
+        .dsh-btn-native {
+          background: var(--dsw-alias-bg-layer-2, #f1f5f9); color: var(--dsw-alias-label-primary, #0f172a); border: 1px solid #cbd5e1; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
         }
-        body[data-ds-dark-theme] .dsh-footer-stat {
-          color: var(--dsw-alias-label-secondary, #94a3b8);
+        body[data-ds-dark-theme] .dsh-btn-native {
+          background: var(--dsw-alias-bg-layer-2, #1e2433); color: #e2e8f0; border-color: #334155;
         }
 
-        /* Markdown Typography Styles */
-        .dsh-markdown-body {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-          font-size: 14px;
-          line-height: 1.72;
-          color: var(--dsw-alias-label-primary, #1e293b);
-          word-break: break-word;
-        }
-        body[data-ds-dark-theme] .dsh-markdown-body {
-          color: var(--dsw-alias-label-primary, #e2e8f0);
-        }
-        .dsh-markdown-body h1,
-        .dsh-markdown-body h2,
-        .dsh-markdown-body h3,
-        .dsh-markdown-body h4,
-        .dsh-markdown-body h5,
-        .dsh-markdown-body h6 {
-          position: relative;
-          color: var(--dsw-alias-label-primary, #0f172a);
-          font-weight: 600;
-          margin-top: 1.5em;
-          margin-bottom: 0.6em;
-          line-height: 1.35;
+        /* Toast Popup */
+        .dsh-preview-toast-container {
+          position: fixed;
+          bottom: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 10000;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          pointer-events: none;
         }
-        body[data-ds-dark-theme] .dsh-markdown-body h1,
-        body[data-ds-dark-theme] .dsh-markdown-body h2,
-        body[data-ds-dark-theme] .dsh-markdown-body h3,
-        body[data-ds-dark-theme] .dsh-markdown-body h4,
-        body[data-ds-dark-theme] .dsh-markdown-body h5,
-        body[data-ds-dark-theme] .dsh-markdown-body h6 {
+        .dsh-preview-toast {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 16px;
+          background: #1e293b;
           color: #f8fafc;
-        }
-        .dsh-markdown-body h1 { font-size: 1.85em; border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0); padding-bottom: 0.3em; }
-        .dsh-markdown-body h2 { font-size: 1.45em; border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0); padding-bottom: 0.25em; }
-        body[data-ds-dark-theme] .dsh-markdown-body h1 { border-bottom-color: var(--dsw-alias-border-l2, #334155); }
-        body[data-ds-dark-theme] .dsh-markdown-body h2 { border-bottom-color: var(--dsw-alias-border-l2, #273344); }
-        .dsh-markdown-body h3 { font-size: 1.25em; }
-        .dsh-markdown-body h4 { font-size: 1.1em; }
-        .dsh-markdown-body h5 { font-size: 0.95em; }
-        .dsh-markdown-body h6 { font-size: 0.88em; color: var(--dsw-alias-label-secondary, #64748b); }
-        .dsh-md-anchor {
-          position: absolute;
-          left: -18px;
+          border: 1px solid #334155;
+          border-radius: 20px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+          font-size: 12px;
           opacity: 0;
-          color: var(--dsw-static-deepseek-500, #4176e6);
-          text-decoration: none;
-          transition: opacity 0.15s;
+          transform: translateY(10px);
+          transition: all 0.25s ease;
         }
-        .dsh-markdown-body h1:hover .dsh-md-anchor,
-        .dsh-markdown-body h2:hover .dsh-md-anchor,
-        .dsh-markdown-body h3:hover .dsh-md-anchor {
+        .dsh-preview-toast.dsh-preview-toast-show {
           opacity: 1;
+          transform: translateY(0);
         }
-        .dsh-md-p {
-          margin-bottom: 1em;
-        }
-        .dsh-md-hr {
-          border: none;
-          height: 1px;
-          background: var(--dsw-alias-border-l2, #e2e8f0);
-          margin: 2em 0;
-        }
-        body[data-ds-dark-theme] .dsh-md-hr {
-          background: var(--dsw-alias-border-l2, #334155);
+        .dsh-preview-toast-success { border-color: #22c55e; }
+        .dsh-preview-toast-success .dsh-preview-toast-icon { color: #22c55e; font-weight: bold; }
+        .dsh-preview-toast-error { border-color: #ef4444; }
+        .dsh-preview-toast-error .dsh-preview-toast-icon { color: #ef4444; font-weight: bold; }
+
+        /* Workspace Tree Sidebar & Split Layout */
+        .dsh-preview-drawer-body-split {
+          display: flex;
+          flex-direction: row;
+          flex: 1;
+          min-height: 0;
+          overflow: hidden;
+          width: 100%;
         }
-        .dsh-md-blockquote {
-          margin: 1.2em 0;
-          padding: 8px 16px;
-          border-left: 4px solid var(--dsw-static-deepseek-500, #4176e6);
-          background: rgba(65, 118, 230, 0.05);
-          border-radius: 0 6px 6px 0;
-          color: var(--dsw-alias-label-secondary, #475569);
+
+        .dsh-tree-sidebar {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          flex-shrink: 0;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-right: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          height: 100%;
+          user-select: none;
+          box-sizing: border-box;
         }
-        body[data-ds-dark-theme] .dsh-md-blockquote {
-          color: var(--dsw-alias-label-secondary, #cbd5e1);
-          background: rgba(65, 118, 230, 0.08);
+        body[data-ds-dark-theme] .dsh-tree-sidebar {
+          background: var(--dsw-alias-bg-layer-2, #151821);
+          border-right-color: var(--dsw-alias-border-l3, #2a3140);
         }
-        .dsh-md-blockquote p { margin: 0.3em 0; }
 
-        /* Tables */
-        .dsh-md-table-wrapper {
-          width: 100%;
-          overflow-x: auto;
-          margin: 1.2em 0;
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          border-radius: 8px;
-        }
-        body[data-ds-dark-theme] .dsh-md-table-wrapper {
-          border-color: var(--dsw-alias-border-l2, #334155);
+        .dsh-tree-sidebar-header {
+          height: 36px;
+          min-height: 36px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 8px;
+          border-bottom: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          font-weight: 600;
+          font-size: 12px;
+          color: var(--dsw-alias-label-primary, #0f172a);
+          background: rgba(0, 0, 0, 0.02);
+          box-sizing: border-box;
         }
-        .dsh-md-table-wrapper table {
-          width: 100%;
-          border-collapse: collapse;
-          font-size: 13px;
+        body[data-ds-dark-theme] .dsh-tree-sidebar-header {
+          border-bottom-color: var(--dsw-alias-border-l3, #2a3140);
+          background: rgba(255, 255, 255, 0.02);
+          color: #e2e8f0;
         }
-        .dsh-md-table-wrapper th,
-        .dsh-md-table-wrapper td {
-          padding: 8px 14px;
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+
+        .dsh-tree-sidebar-title {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
         }
-        body[data-ds-dark-theme] .dsh-md-table-wrapper th,
-        body[data-ds-dark-theme] .dsh-md-table-wrapper td {
-          border-color: var(--dsw-alias-border-l2, #273344);
+        .dsh-tree-header-icon { font-size: 13px; }
+        .dsh-tree-header-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
-        .dsh-md-table-wrapper th {
-          background: var(--dsw-alias-bg-layer-2, #f8fafc);
-          font-weight: 600;
-          color: var(--dsw-alias-label-primary, #0f172a);
+
+        .dsh-tree-header-actions {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          flex-shrink: 0;
         }
-        body[data-ds-dark-theme] .dsh-md-table-wrapper th {
-          background: var(--dsw-alias-bg-layer-2, #1a202c);
-          color: #f1f5f9;
+
+        .dsh-tree-action-btn {
+          width: 22px;
+          height: 22px;
+          border-radius: 4px;
+          border: none;
+          background: transparent;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          cursor: pointer;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 11px;
+          padding: 0;
+          transition: all 0.1s;
         }
-        .dsh-md-table-wrapper tr:nth-child(even) {
-          background: rgba(0, 0, 0, 0.015);
+        .dsh-tree-action-btn:hover {
+          background: rgba(0, 0, 0, 0.06);
+          color: var(--dsw-alias-label-primary, #0f172a);
         }
-        body[data-ds-dark-theme] .dsh-md-table-wrapper tr:nth-child(even) {
-          background: rgba(255, 255, 255, 0.02);
+        body[data-ds-dark-theme] .dsh-tree-action-btn:hover {
+          background: rgba(255, 255, 255, 0.08);
+          color: #ffffff;
         }
 
-        /* Lists & Tasks */
-        .dsh-md-list {
-          padding-left: 24px;
-          margin: 0.8em 0 1.2em 0;
+        .dsh-tree-sidebar-search {
+          padding: 6px 8px;
+          border-bottom: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          box-sizing: border-box;
         }
-        .dsh-md-list li { margin-bottom: 0.35em; }
-        .dsh-md-task-list {
-          list-style: none;
-          padding-left: 0;
+        body[data-ds-dark-theme] .dsh-tree-sidebar-search {
+          border-bottom-color: var(--dsw-alias-border-l3, #2a3140);
+          background: var(--dsw-alias-bg-layer-1, #161922);
         }
-        .dsh-md-task-item {
+
+        .dsh-tree-search-wrapper {
+          position: relative;
           display: flex;
           align-items: center;
-          gap: 8px;
-          margin-bottom: 0.4em;
-        }
-        .dsh-md-task-item input[type="checkbox"] {
-          accent-color: var(--dsw-static-deepseek-500, #4176e6);
-          cursor: pointer;
         }
 
-        /* Inline Code & Badges */
-        .dsh-md-inline-code {
-          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
-          color: var(--dsw-static-deepseek-500, #2563eb);
-          padding: 2px 6px;
+        .dsh-tree-search-input {
+          width: 100%;
+          height: 24px;
           border-radius: 4px;
-          font-family: "Cascadia Code", Consolas, "Courier New", monospace;
-          font-size: 0.88em;
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          padding: 0 20px 0 6px;
+          font-size: 11px;
+          background: var(--dsw-alias-bg-base, #f8fafc);
+          color: inherit;
+          box-sizing: border-box;
+          outline: none;
+          transition: border-color 0.15s;
         }
-        body[data-ds-dark-theme] .dsh-md-inline-code {
-          background: var(--dsw-alias-bg-layer-3, #1e2433);
-          color: #93c5fd;
-          border-color: rgba(147, 197, 253, 0.15);
+        .dsh-tree-search-input:focus {
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+          background: #ffffff;
         }
-        .dsh-md-link {
-          color: var(--dsw-static-deepseek-500, #2563eb);
-          text-decoration: none;
-          border-bottom: 1px solid rgba(37, 99, 235, 0.3);
-          transition: border-color 0.15s;
+        body[data-ds-dark-theme] .dsh-tree-search-input {
+          background: #1e2330;
+          border-color: #334155;
+          color: #f1f5f9;
         }
-        body[data-ds-dark-theme] .dsh-md-link {
-          color: var(--dsw-static-deepseek-500, #60a5fa);
-          border-bottom-color: rgba(96, 165, 250, 0.3);
+        body[data-ds-dark-theme] .dsh-tree-search-input:focus {
+          background: #181b24;
+          border-color: #60a5fa;
         }
-        .dsh-md-link:hover {
-          border-color: currentColor;
+
+        .dsh-tree-search-clear {
+          position: absolute;
+          right: 4px;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          border: none;
+          background: rgba(0, 0, 0, 0.1);
+          color: inherit;
+          font-size: 9px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          padding: 0;
         }
 
-        /* Code Cards */
-        .dsh-code-card {
-          margin: 1.4em 0;
-          background: var(--dsw-alias-bg-layer-3, #f8fafc);
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          border-radius: 8px;
-          overflow: hidden;
+        .dsh-tree-node-list {
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          overflow-x: hidden;
+          padding: 4px 2px;
+          box-sizing: border-box;
         }
-        body[data-ds-dark-theme] .dsh-code-card {
-          background: #0d1117;
-          border-color: #30363d;
+        .dsh-tree-node-list::-webkit-scrollbar {
+          width: 4px;
         }
-        .dsh-code-card-header {
+        .dsh-tree-node-list::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+          border-radius: 2px;
+        }
+
+        .dsh-tree-node-row {
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          padding: 6px 12px;
-          background: rgba(0, 0, 0, 0.03);
-          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          height: 24px;
+          min-height: 24px;
+          border-radius: 4px;
+          margin: 1px 4px;
+          cursor: pointer;
+          font-size: 12px;
+          color: var(--dsw-alias-label-secondary, #334155);
+          gap: 3px;
+          transition: background 0.1s ease, color 0.1s ease;
+          overflow: hidden;
+          box-sizing: border-box;
         }
-        body[data-ds-dark-theme] .dsh-code-card-header {
-          background: rgba(255, 255, 255, 0.04);
-          border-bottom-color: #21262d;
+        body[data-ds-dark-theme] .dsh-tree-node-row {
+          color: #94a3b8;
         }
-        .dsh-code-lang-badge {
-          font-family: monospace;
-          font-size: 11px;
-          color: var(--dsw-alias-label-secondary, #64748b);
+
+        .dsh-tree-node-row:hover {
+          background: var(--dsw-alias-bg-hover, rgba(0, 0, 0, 0.05));
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-tree-node-row:hover {
+          background: rgba(255, 255, 255, 0.06);
+          color: #f1f5f9;
+        }
+
+        .dsh-tree-node-row.active {
+          background: rgba(14, 165, 233, 0.14);
+          color: #0284c7;
           font-weight: 600;
         }
-        body[data-ds-dark-theme] .dsh-code-lang-badge {
-          color: #8b949e;
+        body[data-ds-dark-theme] .dsh-tree-node-row.active {
+          background: rgba(56, 189, 248, 0.16);
+          color: #38bdf8;
         }
-        .dsh-code-copy-btn {
-          background: transparent;
-          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
-          color: var(--dsw-alias-label-secondary, #475569);
-          font-size: 11px;
-          padding: 2px 8px;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: all 0.15s;
+
+        .dsh-tree-chevron {
+          width: 14px;
+          height: 14px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 8px;
+          color: #94a3b8;
+          flex-shrink: 0;
+          user-select: none;
         }
-        body[data-ds-dark-theme] .dsh-code-copy-btn {
-          border-color: #30363d;
-          color: #c9d1d9;
+
+        .dsh-tree-chevron-placeholder {
+          width: 14px;
+          height: 14px;
+          display: inline-flex;
+          flex-shrink: 0;
         }
-        .dsh-code-copy-btn:hover {
-          background: var(--dsw-alias-bg-layer-2, #e2e8f0);
-          color: var(--dsw-static-deepseek-500, #2563eb);
+
+        .dsh-tree-icon {
+          width: 16px;
+          height: 16px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          flex-shrink: 0;
+          font-family: ui-monospace, monospace;
+          font-weight: 700;
         }
-        body[data-ds-dark-theme] .dsh-code-copy-btn:hover {
-          background: #21262d;
-          color: #58a6ff;
+
+        .dsh-tree-name {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+          text-align: left;
         }
-        .dsh-code-pre {
-          margin: 0;
-          padding: 14px 16px;
-          overflow-x: auto;
-          font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
-          font-size: 13px;
-          line-height: 1.55;
-          color: var(--dsw-alias-label-primary, #0f172a);
+
+        .dsh-tree-badge {
+          font-size: 10px;
+          color: #94a3b8;
+          background: rgba(0, 0, 0, 0.05);
+          padding: 0 4px;
+          border-radius: 8px;
+          margin-right: 4px;
+          flex-shrink: 0;
         }
-        body[data-ds-dark-theme] .dsh-code-pre {
-          color: #e6edf3;
+        body[data-ds-dark-theme] .dsh-tree-badge {
+          background: rgba(255, 255, 255, 0.08);
+          color: #64748b;
         }
-        .dsh-token-keyword { color: #d73a49; font-weight: 500; }
-        body[data-ds-dark-theme] .dsh-token-keyword { color: #ff7b72; }
-        .dsh-token-string { color: #032f62; }
-        body[data-ds-dark-theme] .dsh-token-string { color: #a5d6ff; }
-        .dsh-token-comment { color: #6a737d; font-style: italic; }
-        body[data-ds-dark-theme] .dsh-token-comment { color: #8b949e; }
-        .dsh-token-number { color: #005cc5; }
-        body[data-ds-dark-theme] .dsh-token-number { color: #79c0ff; }
 
-        /* GitHub Alert Callouts */
-        .dsh-alert {
-          margin: 1.4em 0;
-          padding: 12px 16px;
-          border-left: 4px solid;
-          border-radius: 0 8px 8px 0;
+        .dsh-tree-size-badge {
+          font-size: 10px;
+          color: #94a3b8;
+          margin-right: 4px;
+          flex-shrink: 0;
         }
-        .dsh-alert-title {
+
+        .dsh-tree-loading, .dsh-tree-error, .dsh-tree-empty {
+          padding: 24px 12px;
+          text-align: center;
+          font-size: 12px;
+          color: #94a3b8;
+        }
+
+        .dsh-tree-retry-btn {
+          margin-top: 8px;
+          padding: 2px 10px;
+          border-radius: 4px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          background: transparent;
+          color: inherit;
+          cursor: pointer;
+        }
+
+        .dsh-tree-sidebar-footer {
+          height: 24px;
+          min-height: 24px;
+          border-top: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
           display: flex;
           align-items: center;
+          justify-content: center;
           gap: 6px;
-          font-weight: 600;
-          font-size: 13px;
-          margin-bottom: 6px;
+          font-size: 11px;
+          color: #94a3b8;
+          background: rgba(0, 0, 0, 0.015);
         }
-        .dsh-alert-note { background: rgba(59, 130, 246, 0.08); border-color: #3b82f6; }
-        .dsh-alert-note .dsh-alert-title { color: #2563eb; }
-        body[data-ds-dark-theme] .dsh-alert-note .dsh-alert-title { color: #60a5fa; }
-        .dsh-alert-tip { background: rgba(16, 185, 129, 0.08); border-color: #10b981; }
-        .dsh-alert-tip .dsh-alert-title { color: #059669; }
-        body[data-ds-dark-theme] .dsh-alert-tip .dsh-alert-title { color: #34d399; }
-        .dsh-alert-important { background: rgba(168, 85, 247, 0.08); border-color: #a855f7; }
-        .dsh-alert-important .dsh-alert-title { color: #7c3aed; }
-        body[data-ds-dark-theme] .dsh-alert-important .dsh-alert-title { color: #c084fc; }
-        .dsh-alert-warning { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; }
-        .dsh-alert-warning .dsh-alert-title { color: #d97706; }
-        body[data-ds-dark-theme] .dsh-alert-warning .dsh-alert-title { color: #fbbf24; }
-        .dsh-alert-caution { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; }
-        .dsh-alert-caution .dsh-alert-title { color: #dc2626; }
-        body[data-ds-dark-theme] .dsh-alert-caution .dsh-alert-title { color: #f87171; }
-        .dsh-alert-body { font-size: 13px; color: var(--dsw-alias-label-secondary, #475569); }
-        body[data-ds-dark-theme] .dsh-alert-body { color: #cbd5e1; }
+        body[data-ds-dark-theme] .dsh-tree-sidebar-footer {
+          border-top-color: var(--dsw-alias-border-l3, #2a3140);
+        }
+        .dsh-tree-footer-dot { font-size: 8px; }
 
-        /* Math Formulas */
-        .dsh-math-block {
-          margin: 1.2em 0;
-          padding: 12px 16px;
-          background: rgba(0, 0, 0, 0.02);
-          border-radius: 6px;
-          border: 1px dashed var(--dsw-alias-border-l2, #cbd5e1);
+        /* Splitter between Tree and Preview */
+        .dsh-tree-splitter {
+          width: 4px;
+          cursor: col-resize;
+          background: transparent;
+          transition: background 0.15s;
+          flex-shrink: 0;
+          z-index: 10;
+        }
+        .dsh-tree-splitter:hover, .dsh-tree-splitter.dragging {
+          background: var(--dsw-static-deepseek-500, #4176e6);
+        }
+
+        /* Welcome Empty View */
+        .dsh-preview-welcome-container {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 32px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          overflow: auto;
+        }
+        body[data-ds-dark-theme] .dsh-preview-welcome-container {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+          color: #e2e8f0;
+        }
+
+        .dsh-preview-welcome-card {
+          max-width: 420px;
           text-align: center;
-          font-family: "KaTeX_Math", "Times New Roman", serif;
-          font-size: 1.1em;
-          color: var(--dsw-alias-label-primary, #1e293b);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
         }
-        body[data-ds-dark-theme] .dsh-math-block {
-          background: rgba(255, 255, 255, 0.03);
-          border-color: var(--dsw-alias-border-l2, #334155);
-          color: #cbd5e1;
+        .dsh-welcome-icon { font-size: 40px; }
+        .dsh-welcome-title { margin: 0; font-size: 16px; font-weight: 600; }
+        .dsh-welcome-path {
+          margin: 0;
+          font-size: 11px;
+          color: #64748b;
+          background: rgba(0, 0, 0, 0.04);
+          padding: 4px 8px;
+          border-radius: 4px;
+          word-break: break-all;
         }
-        .dsh-math-inline {
-          font-family: "KaTeX_Math", "Times New Roman", serif;
-          color: var(--dsw-static-deepseek-500, #2563eb);
-          padding: 0 3px;
+        body[data-ds-dark-theme] .dsh-welcome-path {
+          background: rgba(255, 255, 255, 0.06);
+          color: #94a3b8;
         }
-        body[data-ds-dark-theme] .dsh-math-inline {
-          color: #93c5fd;
+        .dsh-welcome-desc {
+          margin: 0;
+          font-size: 12px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          line-height: 1.6;
         }
-
-        /* Source View Mode */
-        .dsh-source-view {
+        .dsh-welcome-actions {
           display: flex;
-          background: var(--dsw-alias-bg-layer-3, #f8fafc);
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          border-radius: 8px;
-          overflow: hidden;
-          font-family: "Fira Code", Consolas, monospace;
+          gap: 8px;
+          margin-top: 8px;
+        }
+        .dsh-welcome-btn {
+          padding: 6px 14px;
+          border-radius: 6px;
+          font-size: 12px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          background: transparent;
+          color: inherit;
+          cursor: pointer;
+          transition: all 0.15s;
+        }
+        .dsh-welcome-btn:hover {
+          background: rgba(0, 0, 0, 0.05);
+        }
+        .dsh-welcome-btn.primary {
+          background: var(--dsw-static-deepseek-500, #4176e6);
+          color: #ffffff;
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+        }
+        .dsh-welcome-btn.primary:hover {
+          opacity: 0.9;
+        }
+      
+        /* Syntax Highlighting Tokens (Light Theme) */
+        .tok-keyword { color: #0000ff; font-weight: 600; }
+        .tok-string { color: #a31515; }
+        .tok-number { color: #098658; }
+        .tok-boolean { color: #0000ff; font-weight: 600; }
+        .tok-null { color: #708090; font-style: italic; }
+        .tok-key { color: #001080; font-weight: 600; }
+        .tok-comment { color: #008000; font-style: italic; }
+        .tok-type { color: #267f99; }
+        .tok-func { color: #795e26; }
+        .tok-operator { color: #000000; font-weight: 500; }
+        .tok-punctuation, .tok-bracket { color: #333333; }
+        .tok-tag { color: #800000; font-weight: 600; }
+        .tok-attr { color: #e50000; }
+        .tok-prop { color: #001080; }
+        .tok-selector { color: #800000; }
+
+        /* Syntax Highlighting Tokens (Dark Theme) */
+        body[data-ds-dark-theme] .tok-keyword { color: #569cd6; }
+        body[data-ds-dark-theme] .tok-string { color: #ce9178; }
+        body[data-ds-dark-theme] .tok-number { color: #b5cea8; }
+        body[data-ds-dark-theme] .tok-boolean { color: #569cd6; font-weight: 600; }
+        body[data-ds-dark-theme] .tok-null { color: #808080; font-style: italic; }
+        body[data-ds-dark-theme] .tok-key { color: #9cdcfe; font-weight: 600; }
+        body[data-ds-dark-theme] .tok-comment { color: #6a9955; font-style: italic; }
+        body[data-ds-dark-theme] .tok-type { color: #4ec9b0; }
+        body[data-ds-dark-theme] .tok-func { color: #dcdcaa; }
+        body[data-ds-dark-theme] .tok-operator { color: #d4d4d4; }
+        body[data-ds-dark-theme] .tok-punctuation, body[data-ds-dark-theme] .tok-bracket { color: #d4d4d4; }
+        body[data-ds-dark-theme] .tok-tag { color: #569cd6; }
+        body[data-ds-dark-theme] .tok-attr { color: #9cdcfe; }
+        body[data-ds-dark-theme] .tok-prop { color: #9cdcfe; }
+        body[data-ds-dark-theme] .tok-selector { color: #d7ba7d; }
+
+        /* Code Editor Viewer */
+        .dsh-code-editor-view {
+          display: flex;
+          min-height: 100%;
+          font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, monospace;
           font-size: 13px;
-          line-height: 1.6;
+          line-height: 20px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #1e293b);
         }
-        body[data-ds-dark-theme] .dsh-source-view {
-          background: var(--dsw-alias-bg-layer-3, #0d1017);
-          border-color: var(--dsw-alias-border-l2, #252d3d);
+        body[data-ds-dark-theme] .dsh-code-editor-view {
+          background: #181b24;
+          color: #d4d4d4;
         }
-        .dsh-source-line-numbers {
-          padding: 16px 8px;
-          background: rgba(0, 0, 0, 0.02);
-          border-right: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          color: #94a3b8;
+
+        .dsh-code-gutter {
+          width: 44px;
+          min-width: 44px;
+          padding: 12px 6px 12px 0;
           text-align: right;
           user-select: none;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-right: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+          font-size: 12px;
+          line-height: 20px;
+          flex-shrink: 0;
         }
-        body[data-ds-dark-theme] .dsh-source-line-numbers {
-          background: rgba(255, 255, 255, 0.02);
-          border-right-color: var(--dsw-alias-border-l2, #252d3d);
-          color: #475569;
+        body[data-ds-dark-theme] .dsh-code-gutter {
+          background: #141720;
+          border-right-color: #2a3140;
+          color: #64748b;
         }
-        .dsh-source-pre {
-          margin: 0;
-          padding: 16px;
+
+        .dsh-gutter-line {
+          height: 20px;
+          cursor: pointer;
+          padding-right: 8px;
+        }
+        .dsh-gutter-line:hover {
+          color: var(--dsw-brand-primary, #0284c7);
+          font-weight: bold;
+        }
+        .dsh-gutter-line.dsh-line-highlight-flash {
+          background: rgba(14, 165, 233, 0.25);
+          color: #0284c7;
+        }
+
+        .dsh-code-content {
           flex: 1;
-          overflow-x: auto;
-          color: var(--dsw-alias-label-primary, #0f172a);
+          min-width: 0;
+          padding: 12px 16px;
+          overflow: auto;
         }
-        body[data-ds-dark-theme] .dsh-source-pre {
-          color: #cbd5e1;
+        .dsh-code-pre {
+          margin: 0;
+          font-family: inherit;
+          font-size: inherit;
+          line-height: 20px;
+          tab-size: 2;
+          white-space: pre;
+        }
+        .dsh-code-editor-view.word-wrap .dsh-code-pre {
+          white-space: pre-wrap;
+          word-break: normal;
+          overflow-wrap: break-word;
+        }
+        .dsh-code-editor-view {
+          display: flex;
+          min-height: 100%;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 12.5px;
+          line-height: 20px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #1e293b);
+        }
+        .dsh-code-pre code {
+          font-family: inherit;
         }
 
-        /* Split View Mode */
-        .dsh-split-view {
+        /* Interactive JSON Inspector */
+        .dsh-json-inspector {
           display: flex;
-          gap: 12px;
+          flex-direction: column;
           height: 100%;
+          overflow: hidden;
+          font-family: "Cascadia Code", Consolas, monospace;
+          font-size: 12px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
         }
-        .dsh-split-pane {
+        body[data-ds-dark-theme] .dsh-json-inspector {
+          background: #181b24;
+          color: #d4d4d4;
+        }
+
+        .dsh-json-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 12px;
+          border-bottom: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          gap: 12px;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-json-header {
+          border-bottom-color: #2a3140;
+          background: #141720;
+        }
+
+        .dsh-json-search-box {
+          position: relative;
+          display: flex;
+          align-items: center;
           flex: 1;
-          overflow-y: auto;
-          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
-          border-radius: 8px;
-          padding: 12px;
-          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          max-width: 280px;
         }
-        body[data-ds-dark-theme] .dsh-split-pane {
-          border-color: var(--dsw-alias-border-l2, #252d3d);
-          background: var(--dsw-alias-bg-layer-1, #0d1017);
+        .dsh-json-search-icon {
+          position: absolute;
+          left: 8px;
+          font-size: 11px;
+          pointer-events: none;
         }
-        .dsh-split-pane-header {
+        .dsh-json-search-input {
+          width: 100%;
+          height: 26px;
+          border-radius: 6px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          padding: 0 24px 0 26px;
+          font-size: 12px;
+          background: #ffffff;
+          color: inherit;
+          outline: none;
+        }
+        body[data-ds-dark-theme] .dsh-json-search-input {
+          background: #1e2330;
+          border-color: #334155;
+          color: #f1f5f9;
+        }
+        .dsh-json-actions {
+          display: flex;
+          gap: 6px;
+        }
+        .dsh-json-btn {
+          padding: 3px 8px;
+          border-radius: 4px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-secondary, #475569);
+          cursor: pointer;
           font-size: 11px;
-          font-weight: 600;
-          color: var(--dsw-alias-label-secondary, #64748b);
-          margin-bottom: 8px;
-          padding-bottom: 4px;
-          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          transition: all 0.15s;
         }
-        body[data-ds-dark-theme] .dsh-split-pane-header {
+        .dsh-json-btn:hover {
+          background: var(--dsw-alias-bg-hover, rgba(0, 0, 0, 0.05));
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-json-btn {
+          background: #1e2330;
+          border-color: #334155;
           color: #94a3b8;
-          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        body[data-ds-dark-theme] .dsh-json-btn:hover {
+          background: #283042;
+          color: #f1f5f9;
         }
 
-        /* Loading & Error States */
-        .dsh-preview-loading {
+        .dsh-json-tree-body {
+          flex: 1;
+          overflow: auto;
+          padding: 10px 12px;
+        }
+
+        .dsh-json-row {
           display: flex;
-          flex-direction: column;
           align-items: center;
-          justify-content: center;
-          padding: 60px 0;
-          gap: 14px;
-          color: var(--dsw-alias-label-secondary, #64748b);
+          min-height: 22px;
+          line-height: 22px;
+          gap: 6px;
+          border-radius: 4px;
+          padding-right: 8px;
+          transition: background 0.1s;
         }
-        .dsh-preview-spinner {
-          width: 32px;
-          height: 32px;
-          border: 3px solid rgba(65, 118, 230, 0.2);
-          border-top-color: var(--dsw-static-deepseek-500, #4176e6);
-          border-radius: 50%;
-          animation: dshSpinner 0.8s linear infinite;
+        .dsh-json-row:hover {
+          background: rgba(0, 0, 0, 0.03);
         }
-        @keyframes dshSpinner {
-          to { transform: rotate(360deg); }
+        body[data-ds-dark-theme] .dsh-json-row:hover {
+          background: rgba(255, 255, 255, 0.04);
+        }
+        .dsh-json-row-expandable {
+          cursor: pointer;
         }
 
-        .dsh-preview-error-card {
-          padding: 32px 24px;
-          background: rgba(239, 68, 68, 0.06);
-          border: 1px solid rgba(239, 68, 68, 0.25);
-          border-radius: 8px;
-          text-align: center;
-          margin: 30px auto;
-          max-width: 480px;
+        .dsh-json-chevron {
+          font-size: 9px;
+          color: #94a3b8;
+          width: 12px;
+          height: 12px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          user-select: none;
         }
-        .dsh-error-icon { font-size: 32px; margin-bottom: 10px; }
-        .dsh-error-title { font-size: 16px; font-weight: 600; color: #ef4444; margin-bottom: 6px; }
-        .dsh-error-desc { font-size: 13px; color: var(--dsw-alias-label-secondary, #64748b); margin-bottom: 16px; }
-        body[data-ds-dark-theme] .dsh-error-desc { color: #cbd5e1; }
-        .dsh-error-actions { display: flex; justify-content: center; gap: 10px; }
-        .dsh-btn-retry {
-          background: #ef4444; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
+        .dsh-json-key {
+          color: #001080;
+          font-weight: 600;
+          flex-shrink: 0;
         }
-        .dsh-btn-native {
-          background: var(--dsw-alias-bg-layer-2, #f1f5f9); color: var(--dsw-alias-label-primary, #0f172a); border: 1px solid #cbd5e1; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
+        body[data-ds-dark-theme] .dsh-json-key {
+          color: #9cdcfe;
         }
-        body[data-ds-dark-theme] .dsh-btn-native {
-          background: var(--dsw-alias-bg-layer-2, #1e2433); color: #e2e8f0; border-color: #334155;
+        .dsh-json-type-badge {
+          font-size: 10px;
+          color: #94a3b8;
+          background: rgba(0, 0, 0, 0.05);
+          padding: 0 5px;
+          border-radius: 6px;
+          user-select: none;
         }
-
-        /* Toast Popup */
-        .dsh-preview-toast-container {
-          position: fixed;
-          bottom: 24px;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 10000;
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          pointer-events: none;
+        body[data-ds-dark-theme] .dsh-json-type-badge {
+          background: rgba(255, 255, 255, 0.08);
+          color: #64748b;
         }
-        .dsh-preview-toast {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          padding: 8px 16px;
-          background: #1e293b;
-          color: #f8fafc;
-          border: 1px solid #334155;
-          border-radius: 20px;
-          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-          font-size: 12px;
+        .dsh-json-preview {
+          color: #64748b;
+          font-style: italic;
+          font-size: 11px;
+        }
+        body[data-ds-dark-theme] .dsh-json-preview {
+          color: #94a3b8;
+        }
+        .dsh-json-copy-btn {
           opacity: 0;
-          transform: translateY(10px);
-          transition: all 0.25s ease;
+          cursor: pointer;
+          font-size: 10px;
+          margin-left: auto;
+          padding: 1px 4px;
+          border-radius: 3px;
+          transition: opacity 0.15s;
         }
-        .dsh-preview-toast.dsh-preview-toast-show {
+        .dsh-json-row:hover .dsh-json-copy-btn {
+          opacity: 0.75;
+        }
+        .dsh-json-copy-btn:hover {
           opacity: 1;
-          transform: translateY(0);
+          background: rgba(0, 0, 0, 0.08);
+        }
+
+        .dsh-json-parse-error {
+          padding: 36px 16px;
+          text-align: center;
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+        .dsh-symbol-item {
+          padding-left: 10px;
         }
-        .dsh-preview-toast-success { border-color: #22c55e; }
-        .dsh-preview-toast-success .dsh-preview-toast-icon { color: #22c55e; font-weight: bold; }
-        .dsh-preview-toast-error { border-color: #ef4444; }
-        .dsh-preview-toast-error .dsh-preview-toast-icon { color: #ef4444; font-weight: bold; }
       `;
       document.head.appendChild(style);
     }