@rooode/dsh-plugin-preview 0.1.1 → 0.1.3

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,10 @@
     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();
 
     try {
@@ -52,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) {
@@ -83,8 +108,27 @@
       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) {
+        globalLastOpenTime = Date.now();
+      }
       notifyStateChange();
     }
 
@@ -108,6 +152,61 @@
       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 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();
@@ -122,24 +221,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 ? '\\' : '/';
@@ -179,6 +261,7 @@
         globalTabs = [newTab, ...globalTabs];
         globalActiveTabId = tabId;
       }
+      globalLastOpenTime = Date.now();
       globalIsPanelOpen = true;
       saveTabsToStorage();
       notifyStateChange();
@@ -196,7 +279,6 @@
           globalActiveTabId = nextTabs[nextIdx].id;
         } else {
           globalActiveTabId = null;
-          globalIsPanelOpen = false;
         }
       }
       saveTabsToStorage();
@@ -206,7 +288,6 @@
     function closeAllTabs() {
       globalTabs = [];
       globalActiveTabId = null;
-      globalIsPanelOpen = false;
       saveTabsToStorage();
       notifyStateChange();
     }
@@ -681,10 +762,300 @@
       };
     }
 
+    // =========================================================================
+    // React Components: Workspace File Tree Explorer
+    // =========================================================================
+    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);
+        }
+      };
+
+      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
+          )
+        ),
+
+        // 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);
+          }
+        }
+      };
+      traverse(tree);
+      return paths;
+    }
+
+    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 handleExpandAll = () => {
+        if (treeData?.tree) {
+          setExpandedPaths(new Set(collectAllDirPaths(treeData.tree)));
+        }
+      };
+
+      const handleCollapseAll = () => {
+        setExpandedPaths(new Set());
+      };
+
+      const displayTree = useMemo(() => {
+        if (!treeData?.tree) return [];
+        return filterTree(treeData.tree, searchQuery.trim());
+      }, [treeData, searchQuery]);
+
+      // 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) || '工作区')
+          ),
+          h('div', { className: 'dsh-tree-header-actions' },
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: () => loadTree(true),
+              title: '刷新文件树',
+            }, '🔄'),
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: handleExpandAll,
+              title: '全部展开',
+            }, '📂'),
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: handleCollapseAll,
+              title: '全部折叠',
+            }, '📁'),
+            onCloseSidebar ? h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: onCloseSidebar,
+              title: '收起目录树 (快捷键 Ctrl/Cmd+B)',
+            }, '✕') : 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
+          )
+        ),
+
+        // 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-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,
+            }))
+          )
+        ),
+
+        // 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-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: MarkdownPreviewView
     // =========================================================================
-    function MarkdownPreviewView({ tab, fileInfo, isLoading, error, onRefresh, onOpenNative, onReveal }) {
+    function MarkdownPreviewView({ tab, fileInfo, isLoading, error, isTreeOpen, onToggleTree, onRefresh, onOpenNative, onReveal }) {
       const [viewMode, setViewMode] = useState(tab.viewMode || 'preview');
       const [isTocOpen, setIsTocOpen] = useState(false);
       const [searchQuery, setSearchQuery] = useState('');
@@ -735,6 +1106,13 @@
         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)',
+            }, '🗂️ 目录树'),
+
             h('div', { className: 'dsh-preview-mode-group' },
               h('button', {
                 type: 'button',
@@ -928,6 +1306,11 @@
       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({});
@@ -942,6 +1325,8 @@
           setActiveTabId(globalActiveTabId);
           setIsOpen(globalIsPanelOpen);
           setWidth(globalPanelWidth);
+          setLocalIsTreeOpen(globalIsTreeOpen);
+          setLocalTreeWidth(globalTreeWidth);
         };
         stateListeners.add(update);
         return () => stateListeners.delete(update);
@@ -977,7 +1362,7 @@
         }
       }, [activeTab, loadTabFile]);
 
-      // Drag Resize Handlers
+      // Drag Resize Handlers (Panel Width)
       const onResizePointerDown = useCallback((e) => {
         e.preventDefault();
         e.currentTarget.setPointerCapture(e.pointerId);
@@ -1000,39 +1385,116 @@
         }
       }, [isDragging]);
 
-      // Hotkey: Esc closes preview
+      // 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);
       }, []);
 
-      if (!isOpen && tabs.length === 0) return null;
-
       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 but tabs exist)
-        !isOpen && tabs.length > 0 ? h('div', {
+        // Floating Mini Button to Reopen (when closed)
+        !isOpen ? h('div', {
           className: 'dsh-preview-float-pill',
           onClick: () => setPanelOpen(true),
-          title: `重新展开文档预览 (${tabs.length} 个标签)`,
+          title: tabs.length > 0 ? `展开文档与工作区文件浏览 (${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)
+          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', {
-          className: `dsh-preview-drawer-container ${isDragging ? 'dragging' : ''}`,
+          ref: drawerRef,
+          className: `dsh-preview-drawer-container ${isDragging || isTreeDragging ? 'dragging' : ''}`,
           style: { width: `${width}px` },
         },
           // Drag Handle on Left Border
@@ -1048,7 +1510,7 @@
           h('div', { className: 'dsh-preview-drawer-header' },
             // Tabs Bar
             h('div', { className: 'dsh-preview-tabs-row' },
-              tabs.map(tab => {
+              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' : '📝');
@@ -1067,11 +1529,20 @@
                     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',
@@ -1087,16 +1558,43 @@
             )
           ),
 
-          // 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' }, '暂无打开的文件')
+          // 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, {
+              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
       );
     }
@@ -2162,6 +2660,394 @@
         .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-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-tree-sidebar {
+          background: var(--dsw-alias-bg-layer-2, #151821);
+          border-right-color: var(--dsw-alias-border-l3, #2a3140);
+        }
+
+        .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;
+        }
+        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-tree-sidebar-title {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+        }
+        .dsh-tree-header-icon { font-size: 13px; }
+        .dsh-tree-header-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .dsh-tree-header-actions {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          flex-shrink: 0;
+        }
+
+        .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-tree-action-btn:hover {
+          background: rgba(0, 0, 0, 0.06);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-tree-action-btn:hover {
+          background: rgba(255, 255, 255, 0.08);
+          color: #ffffff;
+        }
+
+        .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;
+        }
+        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-tree-search-wrapper {
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+
+        .dsh-tree-search-input {
+          width: 100%;
+          height: 24px;
+          border-radius: 4px;
+          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;
+        }
+        .dsh-tree-search-input:focus {
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+          background: #ffffff;
+        }
+        body[data-ds-dark-theme] .dsh-tree-search-input {
+          background: #1e2330;
+          border-color: #334155;
+          color: #f1f5f9;
+        }
+        body[data-ds-dark-theme] .dsh-tree-search-input:focus {
+          background: #181b24;
+          border-color: #60a5fa;
+        }
+
+        .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;
+        }
+
+        .dsh-tree-node-list {
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          overflow-x: hidden;
+          padding: 4px 2px;
+          box-sizing: border-box;
+        }
+        .dsh-tree-node-list::-webkit-scrollbar {
+          width: 4px;
+        }
+        .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;
+          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-tree-node-row {
+          color: #94a3b8;
+        }
+
+        .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-tree-node-row.active {
+          background: rgba(56, 189, 248, 0.16);
+          color: #38bdf8;
+        }
+
+        .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;
+        }
+
+        .dsh-tree-chevron-placeholder {
+          width: 14px;
+          height: 14px;
+          display: inline-flex;
+          flex-shrink: 0;
+        }
+
+        .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;
+        }
+
+        .dsh-tree-name {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+          text-align: left;
+        }
+
+        .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-tree-badge {
+          background: rgba(255, 255, 255, 0.08);
+          color: #64748b;
+        }
+
+        .dsh-tree-size-badge {
+          font-size: 10px;
+          color: #94a3b8;
+          margin-right: 4px;
+          flex-shrink: 0;
+        }
+
+        .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-size: 11px;
+          color: #94a3b8;
+          background: rgba(0, 0, 0, 0.015);
+        }
+        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; }
+
+        /* 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;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
+        }
+        .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;
+        }
+        body[data-ds-dark-theme] .dsh-welcome-path {
+          background: rgba(255, 255, 255, 0.06);
+          color: #94a3b8;
+        }
+        .dsh-welcome-desc {
+          margin: 0;
+          font-size: 12px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          line-height: 1.6;
+        }
+        .dsh-welcome-actions {
+          display: flex;
+          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;
+        }
       `;
       document.head.appendChild(style);
     }

package/lib/index.js

@@ -130,6 +130,146 @@ export class PreviewService extends Service {
     });
   }
 
+  readWorkspaceTree(targetDir, maxDepth = 4, includeAll = false) {
+    try {
+      const normalizedRoot = path.resolve(targetDir);
+      if (!fs.existsSync(normalizedRoot)) {
+        return { ok: false, error: { code: 'DIR_NOT_FOUND', message: '工作区目录不存在: ' + normalizedRoot } };
+      }
+      const stat = fs.statSync(normalizedRoot);
+      if (!stat.isDirectory()) {
+        return { ok: false, error: { code: 'NOT_A_DIRECTORY', message: '目标路径不是目录: ' + normalizedRoot } };
+      }
+      const ignoreDirs = new Set([
+        'node_modules', '.git', '.dsh', '.gemini', '.tempmediastorage', '.idea', '.vscode',
+        'dist', 'build', 'coverage', '.next', '.nuxt', '.output', '.turbo', '.cache',
+        '__pycache__', '.pytest_cache', 'target', 'vendor'
+      ]);
+      let totalFiles = 0;
+      let totalDirs = 0;
+
+      const buildTree = (dirPath, currentDepth) => {
+        if (currentDepth > maxDepth) return [];
+        let entries = [];
+        try {
+          entries = fs.readdirSync(dirPath, { withFileTypes: true });
+        } catch (e) {
+          return [];
+        }
+        const nodes = [];
+        for (const entry of entries) {
+          const entryName = entry.name;
+          const lowerName = entryName.toLowerCase();
+          if (!includeAll) {
+            if (ignoreDirs.has(lowerName)) continue;
+            if (entryName.startsWith('.') && entryName !== '.env' && entryName !== '.gitignore') continue;
+          }
+          const fullPath = path.join(dirPath, entryName);
+          const relPath = path.relative(normalizedRoot, fullPath).replace(/\\/g, '/');
+          try {
+            if (entry.isDirectory()) {
+              totalDirs++;
+              const children = buildTree(fullPath, currentDepth + 1);
+              nodes.push({
+                name: entryName,
+                path: fullPath,
+                relativePath: relPath,
+                isDir: true,
+                children,
+                childCount: children.length,
+              });
+            } else if (entry.isFile()) {
+              totalFiles++;
+              const ext = path.extname(entryName).toLowerCase();
+              let size = 0;
+              let mtime = 0;
+              try {
+                const s = fs.statSync(fullPath);
+                size = s.size;
+                mtime = s.mtimeMs;
+              } catch (e) {}
+              nodes.push({
+                name: entryName,
+                path: fullPath,
+                relativePath: relPath,
+                isDir: false,
+                extension: ext,
+                size,
+                mtime,
+              });
+            }
+          } catch (e) {}
+        }
+        nodes.sort((a, b) => {
+          if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+          return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
+        });
+        return nodes;
+      };
+
+      const tree = buildTree(normalizedRoot, 1);
+      const workspaceName = path.basename(normalizedRoot) || normalizedRoot;
+      return {
+        ok: true,
+        workspaceRoot: normalizedRoot,
+        workspaceName,
+        tree,
+        totalFiles,
+        totalDirs,
+      };
+    } catch (err) {
+      return { ok: false, error: { code: 'SCAN_ERROR', message: err.message || '扫描工作区文件树失败' } };
+    }
+  }
+
+  listDirectoryEntries(targetDir, includeAll = false) {
+    try {
+      const normalized = path.resolve(targetDir);
+      if (!fs.existsSync(normalized) || !fs.statSync(normalized).isDirectory()) {
+        return { ok: false, error: { code: 'DIR_NOT_FOUND', message: '目录不存在' } };
+      }
+      const ignoreDirs = new Set(['node_modules', '.git', '.dsh', '.gemini', '.tempmediastorage', '.idea', '.vscode']);
+      const rawEntries = fs.readdirSync(normalized, { withFileTypes: true });
+      const nodes = [];
+      for (const entry of rawEntries) {
+        const name = entry.name;
+        if (!includeAll) {
+          if (ignoreDirs.has(name.toLowerCase())) continue;
+          if (name.startsWith('.') && name !== '.env' && name !== '.gitignore') continue;
+        }
+        const fullPath = path.join(normalized, name);
+        const isDir = entry.isDirectory();
+        let size = 0;
+        let mtime = 0;
+        let ext = '';
+        if (!isDir) {
+          ext = path.extname(name).toLowerCase();
+          try {
+            const s = fs.statSync(fullPath);
+            size = s.size;
+            mtime = s.mtimeMs;
+          } catch (e) {}
+        }
+        nodes.push({
+          name,
+          path: fullPath,
+          relativePath: name,
+          isDir,
+          extension: ext,
+          size,
+          mtime,
+        });
+      }
+      nodes.sort((a, b) => {
+        if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+        return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
+      });
+      return { ok: true, entries: nodes };
+    } catch (err) {
+      return { ok: false, error: { code: 'LIST_ERROR', message: err.message || '读取目录失败' } };
+    }
+  }
+
   async handleHttpRequest(req, res) {
     this.setCorsHeaders(res);
     if (req.method === 'OPTIONS') {
@@ -144,7 +284,7 @@ export class PreviewService extends Service {
     try {
       if (pathname === '/api/preview/status') {
         res.statusCode = 200;
-        res.end(JSON.stringify({ ok: true, version: '0.1.0', service: 'preview' }));
+        res.end(JSON.stringify({ ok: true, version: '0.1.3', service: 'preview' }));
         return;
       }
       if (pathname === '/api/preview/read' && req.method === 'GET') {
@@ -159,6 +299,37 @@ export class PreviewService extends Service {
         res.end(JSON.stringify(result));
         return;
       }
+      if (pathname === '/api/preview/workspace-tree' && req.method === 'GET') {
+        const targetPath = url.searchParams.get('path') || process.cwd();
+        const depth = parseInt(url.searchParams.get('depth') || '4', 10);
+        const includeAll = url.searchParams.get('includeAll') === 'true';
+        const result = this.readWorkspaceTree(targetPath, isNaN(depth) ? 4 : depth, includeAll);
+        res.statusCode = result.ok ? 200 : 404;
+        res.end(JSON.stringify(result));
+        return;
+      }
+      if (pathname === '/api/preview/list-dir' && req.method === 'GET') {
+        const targetPath = url.searchParams.get('path') || process.cwd();
+        const includeAll = url.searchParams.get('includeAll') === 'true';
+        const result = this.listDirectoryEntries(targetPath, includeAll);
+        res.statusCode = result.ok ? 200 : 404;
+        res.end(JSON.stringify(result));
+        return;
+      }
+      if (pathname === '/api/preview/save' && req.method === 'POST') {
+        const body = await this.parseRequestBody(req);
+        if (!body.path || typeof body.content !== 'string') {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: { code: 'INVALID_PARAMS', message: '参数格式错误' } }));
+          return;
+        }
+        const normalized = path.resolve(body.path);
+        fs.writeFileSync(normalized, body.content, 'utf-8');
+        const stat = fs.statSync(normalized);
+        res.statusCode = 200;
+        res.end(JSON.stringify({ ok: true, size: stat.size, mtime: stat.mtimeMs }));
+        return;
+      }
       if (pathname === '/api/preview/reveal' && req.method === 'POST') {
         const body = await this.parseRequestBody(req);
         if (!body.path) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rooode/dsh-plugin-preview",
-  "version": "0.1.1",
-  "description": "DeepSeek Harness Markdown 文档右侧预览插件 (参考 WorkBuddy FileTabs 实现，支持多标签、GFM 渲染、TOC 大纲、源码分栏)",
+  "version": "0.1.3",
+  "description": "DeepSeek Harness Markdown 文档与工作空间文件浏览器右侧预览插件 (参考 WorkBuddy FileTabs 实现，支持工作区文件树、多标签、GFM 渲染、TOC 大纲、源码分栏)",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",