@rooode/dsh-plugin-preview 0.1.9 → 0.1.10

package/lib/client.js

@@ -25,7 +25,8 @@
     const STORAGE_KEY_WIDTH = 'dsh:preview:panel_width:v1';
     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 STORAGE_KEY_MANUAL_WS = 'dsh:preview:manual_workspace:v1';
+    const DEFAULT_PANEL_WIDTH = 620;
     const MIN_PANEL_WIDTH = 380;
     const DEFAULT_TREE_WIDTH = 240;
     const MIN_TREE_WIDTH = 180;
@@ -50,11 +51,20 @@
     let globalActiveTabId = null;
     let globalIsPanelOpen = false;
     let globalIsTreeOpen = true;
+    let globalIsMaximized = false;
+    let globalManualWorkspace = null;
     let globalPanelWidth = DEFAULT_PANEL_WIDTH;
     let globalTreeWidth = DEFAULT_TREE_WIDTH;
     let globalLastOpenTime = 0;
     const stateListeners = new Set();
 
+    try {
+      const savedManualWs = localStorage.getItem(STORAGE_KEY_MANUAL_WS);
+      if (savedManualWs && savedManualWs.trim()) {
+        globalManualWorkspace = savedManualWs.trim();
+      }
+    } catch (e) {}
+
     try {
       const savedWidth = localStorage.getItem(STORAGE_KEY_WIDTH);
       if (savedWidth) {
@@ -121,6 +131,26 @@
       notifyStateChange();
     }
 
+    function setIsMaximized(maximized) {
+      globalIsMaximized = maximized;
+      notifyStateChange();
+    }
+
+    function setManualWorkspace(dirPath) {
+      if (dirPath && typeof dirPath === 'string' && dirPath.trim()) {
+        globalManualWorkspace = dirPath.trim();
+        try {
+          localStorage.setItem(STORAGE_KEY_MANUAL_WS, globalManualWorkspace);
+        } catch (e) {}
+      } else {
+        globalManualWorkspace = null;
+        try {
+          localStorage.removeItem(STORAGE_KEY_MANUAL_WS);
+        } catch (e) {}
+      }
+      notifyStateChange();
+    }
+
     function setTreeWidth(width) {
       globalTreeWidth = Math.max(MIN_TREE_WIDTH, Math.min(width, MAX_TREE_WIDTH));
       try {
@@ -220,31 +250,143 @@
       return 'code';
     }
 
-    function getCurrentWorkspaceRoot() {
-      if (clientCtx && clientCtx.workspaces) {
+    function getAllAvailableWorkspaces() {
+      const map = new Map();
+      const currentRoot = getCurrentWorkspaceRoot().replace(/[\\/]+$/, '').toLowerCase();
+
+      // 1. Collect from active & historical sessions in clientCtx.sessions
+      if (clientCtx && clientCtx.sessions) {
         try {
-          if (clientCtx.workspaces.current?.directory) {
-            return clientCtx.workspaces.current.directory;
+          const sSnap = clientCtx.sessions.list?.getSnapshot();
+          if (sSnap && sSnap.byId) {
+            for (const sid of Object.keys(sSnap.byId)) {
+              const s = sSnap.byId[sid];
+              if (s && s.cwd && typeof s.cwd === 'string' && s.cwd.trim()) {
+                const norm = s.cwd.trim().replace(/[\\/]+$/, '');
+                const key = norm.toLowerCase();
+                if (!map.has(key)) {
+                  map.set(key, {
+                    id: s.workspaceId || norm,
+                    path: norm,
+                    name: s.workspaceTitle || getFileName(norm) || norm,
+                    isCurrent: key === currentRoot,
+                    source: 'session',
+                  });
+                }
+              }
+            }
           }
-          const snapshot = clientCtx.workspaces.list?.getSnapshot();
-          if (snapshot?.items?.length > 0) {
-            return snapshot.items[0].directory || snapshot.items[0].path || '';
+        } catch (e) {}
+      }
+
+      // 2. Collect from workspaces store in clientCtx.workspaces
+      if (clientCtx && clientCtx.workspaces) {
+        try {
+          const wSnap = clientCtx.workspaces.list?.getSnapshot();
+          if (wSnap) {
+            const rawList = wSnap.workspaces || wSnap.items || wSnap.byId || [];
+            const list = Array.isArray(rawList) ? rawList : Object.values(rawList);
+            for (const w of list) {
+              const dir = (w && (w.directory || w.path || w.cwd)) || '';
+              if (dir && typeof dir === 'string' && dir.trim()) {
+                const norm = dir.trim().replace(/[\\/]+$/, '');
+                const key = norm.toLowerCase();
+                if (!map.has(key)) {
+                  map.set(key, {
+                    id: w.id || norm,
+                    path: norm,
+                    name: w.title || w.name || getFileName(norm) || norm,
+                    isCurrent: key === currentRoot,
+                    source: 'workspace',
+                  });
+                }
+              }
+            }
           }
         } catch (e) {}
       }
+
+      // 3. Collect from globalManualWorkspace if set
+      if (globalManualWorkspace && typeof globalManualWorkspace === 'string' && globalManualWorkspace.trim()) {
+        const norm = globalManualWorkspace.trim().replace(/[\\/]+$/, '');
+        const key = norm.toLowerCase();
+        if (!map.has(key)) {
+          map.set(key, {
+            id: 'manual',
+            path: norm,
+            name: getFileName(norm) || norm,
+            isCurrent: true,
+            source: 'manual',
+          });
+        }
+      }
+
+      const result = Array.from(map.values());
+      // Update isCurrent flags
+      result.forEach(ws => {
+        ws.isCurrent = ws.path.replace(/[\\/]+$/, '').toLowerCase() === currentRoot;
+      });
+
+      return result;
+    }
+
+    function getCurrentWorkspaceRoot() {
+      // Priority 1: User manual override selection
+      if (globalManualWorkspace && typeof globalManualWorkspace === 'string' && globalManualWorkspace.trim()) {
+        return globalManualWorkspace.trim();
+      }
+
+      // Priority 2: Active session working directory (cwd)
       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;
+          const sSnap = clientCtx.sessions.list?.getSnapshot();
+          const currentSessionId = sSnap?.current;
+          if (currentSessionId && sSnap?.byId?.[currentSessionId]?.cwd) {
+            const cwd = sSnap.byId[currentSessionId].cwd;
+            if (cwd && typeof cwd === 'string' && cwd.trim()) {
+              return cwd.trim();
+            }
           }
         } catch (e) {}
       }
-      if (typeof location !== 'undefined' && location.hash) {
-        const m = location.hash.match(/workspace=([^&]+)/);
-        if (m) return decodeURIComponent(m[1]);
+
+      // Priority 3: Current workspace in workspaces store
+      if (clientCtx && clientCtx.workspaces) {
+        try {
+          const wSnap = clientCtx.workspaces.list?.getSnapshot();
+          if (wSnap) {
+            const curId = wSnap.current;
+            if (curId && wSnap.workspaces && wSnap.workspaces[curId]) {
+              const w = wSnap.workspaces[curId];
+              const dir = w.directory || w.path || w.cwd;
+              if (dir) return dir.trim();
+            }
+            if (wSnap.byId && curId && wSnap.byId[curId]) {
+              const w = wSnap.byId[curId];
+              const dir = w.directory || w.path || w.cwd;
+              if (dir) return dir.trim();
+            }
+            if (Array.isArray(wSnap.items) && wSnap.items.length > 0) {
+              const first = wSnap.items[0];
+              const dir = first.directory || first.path || first.cwd;
+              if (dir) return dir.trim();
+            }
+          }
+        } catch (e) {}
+      }
+
+      // Priority 4: URL hash or search parameter
+      if (typeof location !== 'undefined') {
+        if (location.hash) {
+          const m = location.hash.match(/workspace=([^&]+)/);
+          if (m) return decodeURIComponent(m[1]);
+        }
+        if (location.search) {
+          const m = location.search.match(/workspace=([^&]+)/);
+          if (m) return decodeURIComponent(m[1]);
+        }
       }
+
       return '';
     }
 
@@ -915,6 +1057,9 @@
       const [error, setError] = useState(null);
       const [searchQuery, setSearchQuery] = useState('');
       const [expandedPaths, setExpandedPaths] = useState(new Set());
+      const [isSelectorOpen, setIsSelectorOpen] = useState(false);
+      const [customPathInput, setCustomPathInput] = useState('');
+      const [validating, setValidating] = useState(false);
       const currentWs = getCurrentWorkspaceRoot();
 
       const loadTree = useCallback(async (force = false) => {
@@ -942,7 +1087,7 @@
 
       useEffect(() => {
         loadTree();
-      }, [loadTree]);
+      }, [loadTree, globalManualWorkspace]);
 
       const handleToggleExpand = (dirPath) => {
         setExpandedPaths(prev => {
@@ -976,15 +1121,63 @@
         }
       }, [searchQuery, treeData]);
 
+      const availableWorkspaces = useMemo(() => {
+        return getAllAvailableWorkspaces();
+      }, [isSelectorOpen, globalManualWorkspace]);
+
+      const handleSelectWs = (wsPath) => {
+        setManualWorkspace(wsPath);
+        setIsSelectorOpen(false);
+        showToast(`已切换工作区: ${getFileName(wsPath)}`, 'success');
+      };
+
+      const handleCustomSubmit = async (e) => {
+        if (e) e.preventDefault();
+        const target = customPathInput.trim();
+        if (!target) return;
+        setValidating(true);
+        try {
+          const res = await fetch('/api/preview/validate-dir', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: target }),
+          });
+          const json = await res.json();
+          if (json.ok && json.path) {
+            setManualWorkspace(json.path);
+            setCustomPathInput('');
+            setIsSelectorOpen(false);
+            showToast(`已切换工作空间: ${json.name}`, 'success');
+          } else {
+            showToast(json?.error?.message || '指定目录不存在或不是文件夹', 'error');
+          }
+        } catch (err) {
+          showToast('验证目录路径失败', 'error');
+        } finally {
+          setValidating(false);
+        }
+      };
+
+      const handleResetAuto = () => {
+        setManualWorkspace(null);
+        setIsSelectorOpen(false);
+        showToast('已恢复根据当前会话自动识别工作空间', 'info');
+      };
+
       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('div', {
+            className: 'dsh-tree-sidebar-title dsh-tree-title-clickable',
+            onClick: () => setIsSelectorOpen(!isSelectorOpen),
+            title: `当前工作空间: ${treeData?.workspaceRoot || currentWs || '未指定'}\n点击切换工作空间`,
+          },
             h('span', { className: 'dsh-tree-header-icon' }, '📁'),
-            h('span', { className: 'dsh-tree-header-text' }, treeData?.workspaceName || getFileName(currentWs) || '工作区')
+            h('span', { className: 'dsh-tree-header-text' }, treeData?.workspaceName || getFileName(currentWs) || '工作区'),
+            h('span', { className: 'dsh-tree-header-chevron' }, isSelectorOpen ? '▲' : '▼')
           ),
           h('div', { className: 'dsh-tree-header-actions' },
             h('button', {
@@ -1014,6 +1207,62 @@
           )
         ),
 
+        // Workspace Selector Dropdown Popover
+        isSelectorOpen ? h('div', { className: 'dsh-ws-selector-popover' },
+          h('div', { className: 'dsh-ws-popover-header' },
+            h('span', { style: { fontWeight: 600, fontSize: 12 } }, '选择工作空间'),
+            h('button', {
+              type: 'button',
+              className: 'dsh-ws-popover-close',
+              onClick: () => setIsSelectorOpen(false),
+            }, '✕')
+          ),
+
+          // List of detected workspaces
+          h('div', { className: 'dsh-ws-list' },
+            availableWorkspaces.length > 0 ? availableWorkspaces.map(ws => (
+              h('div', {
+                key: ws.path,
+                className: `dsh-ws-item ${ws.isCurrent ? 'active' : ''}`,
+                onClick: () => handleSelectWs(ws.path),
+                title: ws.path,
+              },
+                h('div', { className: 'dsh-ws-item-info' },
+                  h('span', { className: 'dsh-ws-item-icon' }, '📁'),
+                  h('span', { className: 'dsh-ws-item-name' }, ws.name),
+                  h('span', { className: 'dsh-ws-item-path' }, ws.path)
+                ),
+                ws.isCurrent ? h('span', { className: 'dsh-ws-item-check' }, '✓') : null
+              )
+            )) : h('div', { className: 'dsh-ws-empty' }, '暂无其他检测到的工作空间')
+          ),
+
+          // Custom Path Input
+          h('form', { className: 'dsh-ws-custom-form', onSubmit: handleCustomSubmit },
+            h('div', { className: 'dsh-ws-input-row' },
+              h('input', {
+                type: 'text',
+                className: 'dsh-ws-input',
+                placeholder: '输入或粘贴本地目录路径...',
+                value: customPathInput,
+                onChange: (e) => setCustomPathInput(e.target.value),
+              }),
+              h('button', {
+                type: 'submit',
+                className: 'dsh-ws-btn',
+                disabled: validating || !customPathInput.trim(),
+              }, validating ? '验证...' : '切换')
+            )
+          ),
+
+          // Auto-detect reset link
+          globalManualWorkspace ? h('button', {
+            type: 'button',
+            className: 'dsh-ws-reset-btn',
+            onClick: handleResetAuto,
+          }, '🔄 恢复自动识别当前会话工作区') : null
+        ) : null,
+
         // Search Input
         h('div', { className: 'dsh-tree-sidebar-search' },
           h('div', { className: 'dsh-tree-search-wrapper' },
@@ -2463,6 +2712,7 @@
       const [activeTabId, setActiveTabId] = useState(globalActiveTabId);
       const [isOpen, setIsOpen] = useState(globalIsPanelOpen);
       const [width, setWidth] = useState(globalPanelWidth);
+      const [isMaximized, setLocalIsMaximized] = useState(globalIsMaximized);
       const [isTreeOpen, setLocalIsTreeOpen] = useState(globalIsTreeOpen);
       const [treeWidth, setLocalTreeWidth] = useState(globalTreeWidth);
       const [isTreeDragging, setIsTreeDragging] = useState(false);
@@ -2482,6 +2732,7 @@
           setActiveTabId(globalActiveTabId);
           setIsOpen(globalIsPanelOpen);
           setWidth(globalPanelWidth);
+          setLocalIsMaximized(globalIsMaximized);
           setLocalIsTreeOpen(globalIsTreeOpen);
           setLocalTreeWidth(globalTreeWidth);
         };
@@ -2489,6 +2740,30 @@
         return () => stateListeners.delete(update);
       }, []);
 
+      // Synchronize side-by-side layout CSS variables with document.body
+      useEffect(() => {
+        if (typeof document === 'undefined') return;
+        if (isOpen) {
+          document.body.classList.add('dsh-preview-sidebar-active');
+          if (isMaximized) {
+            document.body.classList.add('dsh-preview-maximized');
+            document.body.style.setProperty('--dsh-preview-width', '100vw');
+          } else {
+            document.body.classList.remove('dsh-preview-maximized');
+            document.body.style.setProperty('--dsh-preview-width', `${width}px`);
+          }
+        } else {
+          document.body.classList.remove('dsh-preview-sidebar-active');
+          document.body.classList.remove('dsh-preview-maximized');
+          document.body.style.removeProperty('--dsh-preview-width');
+        }
+        return () => {
+          document.body.classList.remove('dsh-preview-sidebar-active');
+          document.body.classList.remove('dsh-preview-maximized');
+          document.body.style.removeProperty('--dsh-preview-width');
+        };
+      }, [isOpen, width, isMaximized]);
+
       const activeTab = useMemo(() => {
         return tabs.find(t => t.id === activeTabId) || tabs[0] || null;
       }, [tabs, activeTabId]);
@@ -2567,54 +2842,6 @@
 
       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 right activity rail, preview drawer or git drawer, do not close
-          if (target.closest && target.closest('.dsh-right-activity-rail, .dsh-rail-tab-item, .dsh-preview-drawer-container, .dsh-git-drawer-container')) {
-            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]);
-
       // Mutual exclusion with other tool windows (e.g. Git modal)
       useEffect(() => {
         const handleToolWindowOpen = (e) => {
@@ -2679,17 +2906,17 @@
         null,
         isOpen ? h('div', {
           ref: drawerRef,
-          className: `dsh-preview-drawer-container ${isDragging || isTreeDragging ? 'dragging' : ''}`,
-          style: { width: `${width}px` },
+          className: `dsh-preview-drawer-container ${isDragging || isTreeDragging ? 'dragging' : ''} ${isMaximized ? 'maximized' : ''}`,
+          style: { width: isMaximized ? '100vw' : `${width}px` },
         },
-          // Drag Handle on Left Border
-          h('div', {
+          // Drag Handle on Left Border (only when not maximized)
+          !isMaximized ? h('div', {
             className: 'dsh-preview-drag-handle',
             onPointerDown: onResizePointerDown,
             onPointerMove: onResizePointerMove,
             onPointerUp: onResizePointerUp,
             title: '左右拖拽调整预览面板宽度',
-          }),
+          }) : null,
 
           // Drawer Header with FileTabs
           h('div', { className: 'dsh-preview-drawer-header' },
@@ -2734,11 +2961,17 @@
                 onClick: closeAllTabs,
                 title: '关闭所有标签页',
               }, '✕ 全部') : null,
+              h('button', {
+                type: 'button',
+                className: 'dsh-win-ctrl-btn',
+                onClick: () => setIsMaximized(!globalIsMaximized),
+                title: isMaximized ? '还原为分栏并排模式' : '最大化窗口',
+              }, isMaximized ? '🗗 还原' : '🗖 最大化'),
               h('button', {
                 type: 'button',
                 className: 'dsh-win-ctrl-btn dsh-win-ctrl-close',
                 onClick: () => setPanelOpen(false),
-                title: '收起预览面板 (Esc)',
+                title: '收起预览侧边栏 (Esc)',
               }, '✕')
             )
           ),
@@ -3041,33 +3274,251 @@
           color: #2563eb;
         }
 
-        /* Right-Side Drawer Container */
+        /* Side-by-Side Right Sidebar Layout Integration */
+        body.dsh-preview-sidebar-active div[class*="centerCol"] {
+          margin-right: var(--dsh-preview-width, 620px) !important;
+          max-width: calc(100% - var(--dsh-preview-width, 620px)) !important;
+          box-sizing: border-box !important;
+          transition: margin-right 0.18s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
+        }
+        body.dsh-preview-sidebar-active.dsh-preview-maximized div[class*="centerCol"] {
+          display: none !important;
+        }
+        body.dsh-preview-sidebar-active.dsh-preview-maximized .dsh-preview-drawer-container {
+          width: 100vw !important;
+        }
+
+        /* Workspace Switcher Header & Popover */
+        .dsh-tree-sidebar-title.dsh-tree-title-clickable {
+          cursor: pointer;
+          padding: 2px 6px;
+          border-radius: 4px;
+          transition: background 0.15s;
+          gap: 4px;
+        }
+        .dsh-tree-sidebar-title.dsh-tree-title-clickable:hover {
+          background: rgba(0, 0, 0, 0.06);
+        }
+        body[data-ds-dark-theme] .dsh-tree-sidebar-title.dsh-tree-title-clickable:hover {
+          background: rgba(255, 255, 255, 0.08);
+        }
+        .dsh-tree-header-chevron {
+          font-size: 8px;
+          opacity: 0.6;
+          margin-left: 2px;
+        }
+
+        .dsh-ws-selector-popover {
+          position: absolute;
+          top: 38px;
+          left: 6px;
+          right: 6px;
+          max-width: 380px;
+          z-index: 1000;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          border-radius: 8px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          box-sizing: border-box;
+          animation: dshPopoverFadeIn 0.15s ease;
+        }
+        body[data-ds-dark-theme] .dsh-ws-selector-popover {
+          background: var(--dsw-alias-bg-layer-2, #1b202c);
+          border-color: var(--dsw-alias-border-l2, #334155);
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+        }
+        @keyframes dshPopoverFadeIn {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        .dsh-ws-popover-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-bottom: 6px;
+          border-bottom: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-ws-popover-header {
+          border-bottom-color: var(--dsw-alias-border-l3, #2d3748);
+          color: #f1f5f9;
+        }
+        .dsh-ws-popover-close {
+          background: none;
+          border: none;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          cursor: pointer;
+          font-size: 11px;
+          padding: 2px 4px;
+          border-radius: 3px;
+        }
+        .dsh-ws-popover-close:hover {
+          background: rgba(0, 0, 0, 0.06);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+
+        .dsh-ws-list {
+          display: flex;
+          flex-direction: column;
+          gap: 3px;
+          max-height: 180px;
+          overflow-y: auto;
+          padding: 2px 0;
+        }
+        .dsh-ws-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 8px;
+          border-radius: 6px;
+          cursor: pointer;
+          transition: background 0.12s;
+          font-size: 12px;
+        }
+        .dsh-ws-item:hover {
+          background: var(--dsw-alias-bg-hover, rgba(0, 0, 0, 0.05));
+        }
+        body[data-ds-dark-theme] .dsh-ws-item:hover {
+          background: rgba(255, 255, 255, 0.06);
+        }
+        .dsh-ws-item.active {
+          background: rgba(14, 165, 233, 0.12);
+          color: #0284c7;
+          font-weight: 600;
+        }
+        body[data-ds-dark-theme] .dsh-ws-item.active {
+          background: rgba(56, 189, 248, 0.16);
+          color: #38bdf8;
+        }
+        .dsh-ws-item-info {
+          display: flex;
+          flex-direction: column;
+          gap: 1px;
+          overflow: hidden;
+          flex: 1;
+        }
+        .dsh-ws-item-name {
+          font-size: 12px;
+          font-weight: 600;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .dsh-ws-item-path {
+          font-size: 10px;
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .dsh-ws-item-check {
+          color: #0284c7;
+          font-weight: bold;
+          margin-left: 6px;
+        }
+        .dsh-ws-empty {
+          padding: 12px;
+          text-align: center;
+          font-size: 11px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+
+        .dsh-ws-custom-form {
+          margin-top: 4px;
+          padding-top: 6px;
+          border-top: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-ws-custom-form {
+          border-top-color: var(--dsw-alias-border-l3, #2d3748);
+        }
+        .dsh-ws-input-row {
+          display: flex;
+          gap: 6px;
+          align-items: center;
+        }
+        .dsh-ws-input {
+          flex: 1;
+          height: 26px;
+          border-radius: 4px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          padding: 0 8px;
+          font-size: 11px;
+          background: var(--dsw-alias-bg-base, #ffffff);
+          color: inherit;
+          outline: none;
+        }
+        body[data-ds-dark-theme] .dsh-ws-input {
+          background: #141720;
+          border-color: #334155;
+          color: #f1f5f9;
+        }
+        .dsh-ws-btn {
+          height: 26px;
+          padding: 0 10px;
+          border-radius: 4px;
+          border: none;
+          background: var(--dsw-static-deepseek-500, #4176e6);
+          color: #ffffff;
+          font-size: 11px;
+          font-weight: 500;
+          cursor: pointer;
+          white-space: nowrap;
+        }
+        .dsh-ws-btn:hover {
+          opacity: 0.9;
+        }
+        .dsh-ws-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .dsh-ws-reset-btn {
+          font-size: 11px;
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 4px 0 0;
+          text-align: left;
+          text-decoration: underline;
+        }
+        body[data-ds-dark-theme] .dsh-ws-reset-btn {
+          color: #60a5fa;
+        }
+
+        /* Right-Side Persistent / Split Sidebar Container */
         .dsh-preview-drawer-container {
           position: fixed;
           top: 0;
           right: 0;
           bottom: 0;
+          width: var(--dsh-preview-width, 620px);
           height: 100vh;
-          z-index: 9995;
+          z-index: 990;
           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);
+          box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
           display: flex;
           flex-direction: column;
           box-sizing: border-box;
           overflow: hidden;
+          transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1);
           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);
+          box-shadow: -6px 0 20px rgba(0, 0, 0, 0.35);
         }
         .dsh-preview-drawer-container.dragging {
           user-select: none;
-          transition: none;
+          transition: none !important;
         }
         @keyframes dshPreviewSlideIn {
           from { transform: translateX(100%); }

package/lib/index.js

@@ -354,6 +354,42 @@ export class PreviewService extends Service {
         res.end(JSON.stringify({ ok: true }));
         return;
       }
+      if (pathname === '/api/preview/workspaces' && req.method === 'GET') {
+        const currentCwd = process.cwd();
+        const workspaces = [
+          {
+            id: 'cwd',
+            path: currentCwd,
+            name: path.basename(currentCwd) || currentCwd,
+            isCurrent: true,
+          }
+        ];
+        res.statusCode = 200;
+        res.end(JSON.stringify({ ok: true, workspaces }));
+        return;
+      }
+      if (pathname === '/api/preview/validate-dir' && req.method === 'POST') {
+        const body = await this.parseRequestBody(req);
+        const targetPath = body.path;
+        if (!targetPath) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: { code: 'MISSING_PARAM', message: '缺少 path 参数' } }));
+          return;
+        }
+        const normalized = path.resolve(targetPath);
+        if (fs.existsSync(normalized) && fs.statSync(normalized).isDirectory()) {
+          res.statusCode = 200;
+          res.end(JSON.stringify({
+            ok: true,
+            path: normalized,
+            name: path.basename(normalized) || normalized,
+          }));
+        } else {
+          res.statusCode = 404;
+          res.end(JSON.stringify({ ok: false, error: { code: 'NOT_FOUND', message: '指定目录不存在或不是文件夹' } }));
+        }
+        return;
+      }
       res.statusCode = 404;
       res.end(JSON.stringify({ ok: false, error: { code: 'NOT_FOUND', message: '未找到路由: ' + pathname } }));
     } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rooode/dsh-plugin-preview",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "DeepSeek Harness Markdown 文档与工作空间文件浏览器右侧预览插件 (支持工作区文件树、JSON 交互结构树/格式化、Java/C++/Python/JS/TS/YAML/Go/Rust 多语言语法高亮与符号大纲、自动换行与多标签 FileTabs)",
   "type": "module",
   "main": "lib/index.js",