@rooode/dsh-plugin-preview 0.1.9 → 0.1.11

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) {}
+      }
+
+      // 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) {}
       }
-      if (typeof location !== 'undefined' && location.hash) {
-        const m = location.hash.match(/workspace=([^&]+)/);
-        if (m) return decodeURIComponent(m[1]);
+
+      // 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 '';
     }
 
@@ -352,6 +494,97 @@
       }
     }
 
+    function renameOpenTabPaths(oldPath, newPath, isDir = false) {
+      if (!oldPath || !newPath) return;
+      let changed = false;
+      const oldNorm = oldPath.replace(/\\/g, '/').toLowerCase();
+      const newNorm = newPath.replace(/\\/g, '/');
+
+      globalTabs = globalTabs.map(tab => {
+        const tabNorm = tab.filePath.replace(/\\/g, '/').toLowerCase();
+        if (!isDir) {
+          if (tabNorm === oldNorm) {
+            changed = true;
+            const newFileName = getFileName(newPath);
+            const newExt = getFileExtension(newPath);
+            const newCat = getFileTypeCategory(newPath);
+            return {
+              ...tab,
+              id: 'tab:' + newPath.toLowerCase(),
+              filePath: newPath,
+              title: newFileName,
+              extension: newExt,
+              category: newCat,
+            };
+          }
+        } else {
+          if (tabNorm === oldNorm || tabNorm.startsWith(oldNorm + '/')) {
+            changed = true;
+            const subPath = tab.filePath.replace(/\\/g, '/').slice(oldNorm.length);
+            const updatedFilePath = newNorm + subPath;
+            const newFileName = getFileName(updatedFilePath);
+            const newExt = getFileExtension(updatedFilePath);
+            const newCat = getFileTypeCategory(updatedFilePath);
+            return {
+              ...tab,
+              id: 'tab:' + updatedFilePath.toLowerCase(),
+              filePath: updatedFilePath,
+              title: newFileName,
+              extension: newExt,
+              category: newCat,
+            };
+          }
+        }
+        return tab;
+      });
+
+      if (changed) {
+        if (globalActiveTabId) {
+          const activeNorm = globalActiveTabId.toLowerCase();
+          const targetPrefix = 'tab:' + oldNorm;
+          if (activeNorm === targetPrefix) {
+            globalActiveTabId = 'tab:' + newPath.toLowerCase();
+          } else if (isDir && activeNorm.startsWith(targetPrefix + '/')) {
+            const sub = activeNorm.slice(targetPrefix.length);
+            globalActiveTabId = 'tab:' + newNorm.toLowerCase() + sub;
+          }
+        }
+        saveTabsToStorage();
+        notifyStateChange();
+      }
+    }
+
+    function removeOpenTabsForPath(targetPath, isDir = false) {
+      if (!targetPath) return;
+      let changed = false;
+      const delNorm = targetPath.replace(/\\/g, '/').toLowerCase();
+      const nextTabs = globalTabs.filter(tab => {
+        const tabNorm = tab.filePath.replace(/\\/g, '/').toLowerCase();
+        if (!isDir) {
+          if (tabNorm === delNorm) {
+            changed = true;
+            return false;
+          }
+        } else {
+          if (tabNorm === delNorm || tabNorm.startsWith(delNorm + '/')) {
+            changed = true;
+            return false;
+          }
+        }
+        return true;
+      });
+
+      if (changed) {
+        globalTabs = nextTabs;
+        if (!globalTabs.some(t => t.id === globalActiveTabId)) {
+          globalActiveTabId = globalTabs.length > 0 ? globalTabs[0].id : null;
+        }
+        saveTabsToStorage();
+        notifyStateChange();
+      }
+    }
+
+
     // =========================================================================
     // Toast Notification Utility
     // =========================================================================
@@ -807,12 +1040,262 @@
     }
 
     // =========================================================================
-    // React Components: Workspace File Tree Explorer
+    // React Components: Workspace File Tree Explorer (with DnD, Create & Move)
     // =========================================================================
-    function FileTreeNodeItem({ node, depth = 0, expandedPaths, onToggleExpand, activeFilePath, onOpenFile, searchQuery }) {
+
+    function isValidDropTarget(draggedItem, targetNode) {
+      if (!draggedItem || !targetNode) return false;
+      if (!targetNode.isDir) return false;
+      const src = draggedItem.path.replace(/\\/g, '/').toLowerCase();
+      const dest = targetNode.path.replace(/\\/g, '/').toLowerCase();
+      // Cannot drop on itself
+      if (src === dest) return false;
+      // Cannot drop into current parent directory (already there)
+      const lastSlash = src.lastIndexOf('/');
+      const srcParent = lastSlash > 0 ? src.substring(0, lastSlash) : '';
+      if (srcParent && srcParent === dest) return false;
+      // If dragged is a dir, cannot drop into its own children or itself
+      if (draggedItem.isDir) {
+        if (dest.startsWith(src + '/')) return false;
+      }
+      return true;
+    }
+
+    function InlineCreateInputNode({ depth = 0, type, onConfirm, onCancel }) {
+      const [val, setVal] = useState('');
+      const inputRef = useRef(null);
+
+      useEffect(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          inputRef.current.select();
+        }
+      }, []);
+
+      const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (val.trim()) onConfirm(val.trim());
+          else onCancel();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          onCancel();
+        }
+      };
+
+      const handleBlur = () => {
+        if (!val.trim()) onCancel();
+      };
+
+      return h('div', {
+        className: 'dsh-tree-inline-input-row',
+        style: { paddingLeft: `${depth * 14 + 6}px` },
+        onClick: (e) => e.stopPropagation(),
+      },
+        h('span', { className: 'dsh-tree-chevron-placeholder' }),
+        h('span', {
+          className: 'dsh-tree-icon',
+          style: { color: type === 'dir' ? '#eab308' : '#38bdf8' },
+        }, type === 'dir' ? '📁' : '📄'),
+        h('input', {
+          ref: inputRef,
+          type: 'text',
+          className: 'dsh-tree-inline-input',
+          value: val,
+          placeholder: type === 'dir' ? '新文件夹名称...' : '新文件名 (如 doc.md)...',
+          onChange: (e) => setVal(e.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+        })
+      );
+    }
+
+    function InlineRenameInputNode({ node, depth = 0, onConfirm, onCancel }) {
+      const [val, setVal] = useState(node.name);
+      const inputRef = useRef(null);
+
+      useEffect(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          if (!node.isDir && node.name.includes('.')) {
+            const lastDot = node.name.lastIndexOf('.');
+            if (lastDot > 0) {
+              inputRef.current.setSelectionRange(0, lastDot);
+              return;
+            }
+          }
+          inputRef.current.select();
+        }
+      }, [node]);
+
+      const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (val.trim() && val.trim() !== node.name) {
+            onConfirm(val.trim());
+          } else {
+            onCancel();
+          }
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          onCancel();
+        }
+      };
+
+      const handleBlur = () => {
+        onCancel();
+      };
+
+      const iconInfo = getFileIcon(node);
+
+      return h('div', {
+        className: 'dsh-tree-inline-input-row',
+        style: { paddingLeft: `${depth * 14 + 6}px` },
+        onClick: (e) => e.stopPropagation(),
+      },
+        h('span', { className: 'dsh-tree-chevron-placeholder' }),
+        h('span', {
+          className: 'dsh-tree-icon',
+          style: { color: node.isDir ? '#eab308' : iconInfo.color },
+        }, node.isDir ? '📁' : iconInfo.icon),
+        h('input', {
+          ref: inputRef,
+          type: 'text',
+          className: 'dsh-tree-inline-input',
+          value: val,
+          onChange: (e) => setVal(e.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+        })
+      );
+    }
+
+    function TreeContextMenu({ x, y, node, isRoot, clipboard, onAction, onClose }) {
+      const menuRef = useRef(null);
+      useEffect(() => {
+        const handleDown = (e) => {
+          if (menuRef.current && !menuRef.current.contains(e.target)) {
+            onClose();
+          }
+        };
+        window.addEventListener('mousedown', handleDown, true);
+        window.addEventListener('scroll', onClose, true);
+        return () => {
+          window.removeEventListener('mousedown', handleDown, true);
+          window.removeEventListener('scroll', onClose, true);
+        };
+      }, [onClose]);
+
+      const style = {
+        position: 'fixed',
+        top: `${Math.min(Math.max(10, y), window.innerHeight - 300)}px`,
+        left: `${Math.min(Math.max(10, x), window.innerWidth - 210)}px`,
+        zIndex: 99999,
+      };
+
+      const isDir = isRoot || (node && node.isDir);
+
+      return h('div', { ref: menuRef, className: 'dsh-tree-context-menu', style },
+        isDir ? [
+          h('div', { key: 'new-file', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('new-file', node); } },
+            h('span', { className: 'dsh-menu-icon' }, '📄'),
+            h('span', null, '新建文件')
+          ),
+          h('div', { key: 'new-dir', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('new-dir', node); } },
+            h('span', { className: 'dsh-menu-icon' }, '📁'),
+            h('span', null, '新建文件夹')
+          ),
+          h('div', { key: 'div-1', className: 'dsh-menu-divider' }),
+        ] : null,
+
+        !isRoot && !isDir ? h('div', { key: 'preview', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('preview', node); } },
+          h('span', { className: 'dsh-menu-icon' }, '📖'),
+          h('span', null, '打开预览')
+        ) : null,
+
+        !isRoot ? h('div', { key: 'cut', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('cut', node); } },
+          h('span', { className: 'dsh-menu-icon' }, '✂️'),
+          h('span', null, '剪切')
+        ) : null,
+
+        isDir && clipboard && clipboard.action === 'cut' ? h('div', {
+          key: 'paste',
+          className: 'dsh-menu-item',
+          onClick: () => { onClose(); onAction('paste', node); }
+        },
+          h('span', { className: 'dsh-menu-icon' }, '📋'),
+          h('span', null, `粘贴 "${clipboard.name}" 到此处`)
+        ) : null,
+
+        !isRoot ? h('div', { key: 'rename', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('rename', node); } },
+          h('span', { className: 'dsh-menu-icon' }, '🏷️'),
+          h('span', null, '重命名')
+        ) : null,
+
+        !isRoot ? h('div', { key: 'div-2', className: 'dsh-menu-divider' }) : null,
+
+        !isRoot ? h('div', { key: 'reveal', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('reveal', node); } },
+          h('span', { className: 'dsh-menu-icon' }, '📂'),
+          h('span', null, '在文件管理器中定位')
+        ) : null,
+
+        !isRoot && !isDir ? h('div', { key: 'native', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('native', node); } },
+          h('span', { className: 'dsh-menu-icon' }, '🌐'),
+          h('span', null, '系统默认应用打开')
+        ) : null,
+
+        !isRoot ? [
+          h('div', { key: 'div-3', className: 'dsh-menu-divider' }),
+          h('div', { key: 'delete', className: 'dsh-menu-item dsh-menu-item-danger', onClick: () => { onClose(); onAction('delete', node); } },
+            h('span', { className: 'dsh-menu-icon' }, '🗑️'),
+            h('span', null, '删除')
+          )
+        ] : null,
+
+        isRoot ? [
+          h('div', { key: 'refresh', className: 'dsh-menu-item', onClick: () => { onClose(); onAction('refresh'); } },
+            h('span', { className: 'dsh-menu-icon' }, '🔄'),
+            h('span', null, '刷新目录树')
+          )
+        ] : null
+      );
+    }
+
+    function FileTreeNodeItem({
+      node,
+      depth = 0,
+      expandedPaths,
+      onToggleExpand,
+      activeFilePath,
+      onOpenFile,
+      searchQuery,
+      creatingItem,
+      onConfirmCreate,
+      onCancelCreate,
+      renamingPath,
+      onConfirmRename,
+      onCancelRename,
+      onContextMenu,
+      draggedNode,
+      dragOverNode,
+      onDragStart,
+      onDragEnd,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      clipboard,
+    }) {
       const isDir = node.isDir;
       const isExpanded = expandedPaths.has(node.path);
       const isActive = !isDir && activeFilePath && activeFilePath.toLowerCase() === node.path.toLowerCase();
+      const isRenaming = renamingPath && renamingPath.toLowerCase() === node.path.toLowerCase();
+      const isDragged = draggedNode && draggedNode.path && draggedNode.path.toLowerCase() === node.path.toLowerCase();
+      const isDropTarget = isDir && dragOverNode && dragOverNode.path && dragOverNode.path.toLowerCase() === node.path.toLowerCase();
+      const isCut = clipboard && clipboard.action === 'cut' && clipboard.path && clipboard.path.toLowerCase() === node.path.toLowerCase();
       const iconInfo = getFileIcon(node);
 
       const indentStyle = { paddingLeft: `${depth * 14 + 6}px` };
@@ -826,16 +1309,70 @@
         }
       };
 
+      const handleContextMenu = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(node, e);
+      };
+
+      const handleDragStart = (e) => {
+        e.stopPropagation();
+        e.dataTransfer.setData('text/plain', node.path);
+        e.dataTransfer.effectAllowed = 'move';
+        onDragStart(node);
+      };
+
+      const handleDragOver = (e) => {
+        if (isDir && isValidDropTarget(draggedNode, node)) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.dataTransfer.dropEffect = 'move';
+          onDragOver(node);
+        }
+      };
+
+      const handleDragLeave = (e) => {
+        if (isDir) {
+          e.stopPropagation();
+          onDragLeave(node);
+        }
+      };
+
+      const handleDrop = (e) => {
+        if (isDir && isValidDropTarget(draggedNode, node)) {
+          e.preventDefault();
+          e.stopPropagation();
+          onDrop(draggedNode, node);
+        }
+      };
+
+      if (isRenaming) {
+        return h(InlineRenameInputNode, {
+          node,
+          depth,
+          onConfirm: (newName) => onConfirmRename(node, newName),
+          onCancel: onCancelRename,
+        });
+      }
+
       return h(Fragment, null,
         h('div', {
-          className: `dsh-tree-node-row ${isDir ? 'is-dir' : 'is-file'} ${isActive ? 'active' : ''}`,
+          className: `dsh-tree-node-row ${isDir ? 'is-dir' : 'is-file'} ${isActive ? 'active' : ''} ${isDropTarget ? 'drop-target' : ''} ${isDragged ? 'is-dragged' : ''} ${isCut ? 'is-cut' : ''}`,
           style: indentStyle,
           onClick: handleClick,
+          onContextMenu: handleContextMenu,
+          draggable: true,
+          onDragStart: handleDragStart,
+          onDragEnd: onDragEnd,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
           title: `${node.name}\n${node.path}${node.size ? ' (' + formatBytes(node.size) + ')' : ''}`,
         },
           // Chevron indicator for directory
           isDir ? h('span', {
             className: `dsh-tree-chevron ${isExpanded ? 'expanded' : ''}`,
+            onClick: (e) => { e.stopPropagation(); onToggleExpand(node.path); },
           }, isExpanded ? '▼' : '▶') : h('span', { className: 'dsh-tree-chevron-placeholder' }),
 
           // File / Directory Icon
@@ -853,18 +1390,47 @@
           )
         ),
 
-        // 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,
-          }))
+        // Children or Inline creation node if expanded
+        isDir && isExpanded ? (
+          h(Fragment, null,
+            // If creating inside this directory, render inline creation node first
+            creatingItem && creatingItem.parentPath && creatingItem.parentPath.replace(/\\/g, '/').toLowerCase() === node.path.replace(/\\/g, '/').toLowerCase() ? (
+              h(InlineCreateInputNode, {
+                depth: depth + 1,
+                type: creatingItem.type,
+                onConfirm: onConfirmCreate,
+                onCancel: onCancelCreate,
+              })
+            ) : null,
+
+            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,
+                creatingItem,
+                onConfirmCreate,
+                onCancelCreate,
+                renamingPath,
+                onConfirmRename,
+                onCancelRename,
+                onContextMenu,
+                draggedNode,
+                dragOverNode,
+                onDragStart,
+                onDragEnd,
+                onDragOver,
+                onDragLeave,
+                onDrop,
+                clipboard,
+              }))
+            ) : null
+          )
         ) : null
       );
     }
@@ -915,6 +1481,18 @@
       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);
+
+      // File operations state
+      const [creatingItem, setCreatingItem] = useState(null); // { parentPath: string, type: 'dir' | 'file' } | null
+      const [renamingPath, setRenamingPath] = useState(null); // string | null
+      const [contextMenu, setContextMenu] = useState(null); // { x: number, y: number, node: any, isRoot: boolean } | null
+      const [draggedNode, setDraggedNode] = useState(null);
+      const [dragOverNode, setDragOverNode] = useState(null);
+      const [clipboard, setClipboard] = useState(null); // { action: 'cut', path: string, name: string, isDir: boolean } | null
+
       const currentWs = getCurrentWorkspaceRoot();
 
       const loadTree = useCallback(async (force = false) => {
@@ -942,7 +1520,7 @@
 
       useEffect(() => {
         loadTree();
-      }, [loadTree]);
+      }, [loadTree, globalManualWorkspace]);
 
       const handleToggleExpand = (dirPath) => {
         setExpandedPaths(prev => {
@@ -976,15 +1554,225 @@
         }
       }, [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');
+      };
+
+      // =========================================================================
+      // File Operations Handlers
+      // =========================================================================
+      const handleStartCreate = (parentPath, type) => {
+        const root = treeData?.workspaceRoot || currentWs;
+        const target = parentPath || root;
+        setCreatingItem({ parentPath: target, type });
+        if (target) {
+          setExpandedPaths(prev => new Set(prev).add(target));
+        }
+      };
+
+      const handleConfirmCreate = async (name) => {
+        if (!creatingItem || !name) return;
+        const isDir = creatingItem.type === 'dir';
+        const endpoint = isDir ? '/api/preview/create-dir' : '/api/preview/create-file';
+        try {
+          const res = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              parentPath: creatingItem.parentPath,
+              name: name.trim(),
+            }),
+          });
+          const json = await res.json();
+          if (json.ok) {
+            setCreatingItem(null);
+            setExpandedPaths(prev => new Set(prev).add(creatingItem.parentPath));
+            await loadTree(true);
+            showToast(`已创建${isDir ? '文件夹' : '文件'}: ${json.name}`, 'success');
+            if (!isDir && json.path) {
+              openPreviewFile(json.path);
+            }
+          } else {
+            showToast(json?.error?.message || `创建${isDir ? '文件夹' : '文件'}失败`, 'error');
+          }
+        } catch (err) {
+          showToast(`创建失败: ${err.message}`, 'error');
+        }
+      };
+
+      const handleConfirmRename = async (node, newName) => {
+        if (!node || !newName || newName.trim() === node.name) {
+          setRenamingPath(null);
+          return;
+        }
+        try {
+          const res = await fetch('/api/preview/rename', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              path: node.path,
+              newName: newName.trim(),
+            }),
+          });
+          const json = await res.json();
+          if (json.ok) {
+            setRenamingPath(null);
+            renameOpenTabPaths(json.sourcePath, json.targetPath, node.isDir);
+            await loadTree(true);
+            showToast(`已重命名为: ${json.name}`, 'success');
+          } else {
+            showToast(json?.error?.message || '重命名失败', 'error');
+          }
+        } catch (err) {
+          showToast(`重命名失败: ${err.message}`, 'error');
+        }
+      };
+
+      const handleMove = async (sourcePath, targetDirPath) => {
+        if (!sourcePath || !targetDirPath) return;
+        try {
+          const res = await fetch('/api/preview/move', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              sourcePath,
+              targetPath: targetDirPath,
+            }),
+          });
+          const json = await res.json();
+          if (json.ok) {
+            if (json.noop) {
+              showToast('目标路径与源路径相同', 'info');
+              return;
+            }
+            renameOpenTabPaths(json.sourcePath, json.targetPath, json.isDir);
+            setExpandedPaths(prev => new Set(prev).add(targetDirPath));
+            await loadTree(true);
+            showToast(`已移动 ${json.name} 到 ${getFileName(targetDirPath)}`, 'success');
+          } else {
+            showToast(json?.error?.message || '移动文件失败', 'error');
+          }
+        } catch (err) {
+          showToast(`移动失败: ${err.message}`, 'error');
+        }
+      };
+
+      const handleDelete = async (node) => {
+        if (!node) return;
+        const isDir = node.isDir;
+        const msg = `确定要永久删除${isDir ? '文件夹' : '文件'} "${node.name}" 吗？此操作不可恢复。`;
+        if (typeof window !== 'undefined' && !window.confirm(msg)) return;
+
+        try {
+          const res = await fetch('/api/preview/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: node.path }),
+          });
+          const json = await res.json();
+          if (json.ok) {
+            removeOpenTabsForPath(node.path, isDir);
+            await loadTree(true);
+            showToast(`已删除${isDir ? '文件夹' : '文件'}: ${node.name}`, 'info');
+          } else {
+            showToast(json?.error?.message || '删除失败', 'error');
+          }
+        } catch (err) {
+          showToast(`删除失败: ${err.message}`, 'error');
+        }
+      };
+
+      const handleContextMenuAction = (action, node) => {
+        const rootPath = treeData?.workspaceRoot || currentWs;
+        if (action === 'new-file') {
+          const target = node ? (node.isDir ? node.path : (node.path.substring(0, Math.max(node.path.lastIndexOf('/'), node.path.lastIndexOf('\\'))))) : rootPath;
+          handleStartCreate(target, 'file');
+        } else if (action === 'new-dir') {
+          const target = node ? (node.isDir ? node.path : (node.path.substring(0, Math.max(node.path.lastIndexOf('/'), node.path.lastIndexOf('\\'))))) : rootPath;
+          handleStartCreate(target, 'dir');
+        } else if (action === 'preview') {
+          if (node && !node.isDir) onOpenFile(node.path);
+        } else if (action === 'cut') {
+          if (node) {
+            setClipboard({ action: 'cut', path: node.path, name: node.name, isDir: node.isDir });
+            showToast(`已剪切: ${node.name}`, 'info');
+          }
+        } else if (action === 'paste') {
+          if (clipboard && clipboard.action === 'cut') {
+            const target = node ? (node.isDir ? node.path : (node.path.substring(0, Math.max(node.path.lastIndexOf('/'), node.path.lastIndexOf('\\'))))) : rootPath;
+            handleMove(clipboard.path, target);
+            setClipboard(null);
+          }
+        } else if (action === 'rename') {
+          if (node) setRenamingPath(node.path);
+        } else if (action === 'reveal') {
+          if (node) triggerRevealInExplorer(node.path);
+        } else if (action === 'native') {
+          if (node) triggerOpenNative(node.path);
+        } else if (action === 'delete') {
+          if (node) handleDelete(node);
+        } else if (action === 'refresh') {
+          loadTree(true);
+        }
+      };
+
+      const rootPath = treeData?.workspaceRoot || currentWs;
+      const isCreatingAtRoot = creatingItem && creatingItem.parentPath && rootPath && creatingItem.parentPath.replace(/\\/g, '/').toLowerCase() === rootPath.replace(/\\/g, '/').toLowerCase();
+      const isRootDropTarget = dragOverNode && rootPath && dragOverNode.path && dragOverNode.path.replace(/\\/g, '/').toLowerCase() === rootPath.replace(/\\/g, '/').toLowerCase();
+
       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', {
@@ -996,8 +1784,20 @@
             h('button', {
               type: 'button',
               className: 'dsh-tree-action-btn',
-              onClick: handleExpandAll,
-              title: '全部展开',
+              onClick: () => handleStartCreate(rootPath, 'file'),
+              title: '在根目录新建文件',
+            }, '📄➕'),
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: () => handleStartCreate(rootPath, 'dir'),
+              title: '在根目录新建文件夹',
+            }, '📁➕'),
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: handleExpandAll,
+              title: '全部展开',
             }, '📂'),
             h('button', {
               type: 'button',
@@ -1014,6 +1814,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' },
@@ -1034,7 +1890,40 @@
         ),
 
         // Tree Content
-        h('div', { className: 'dsh-tree-node-list' },
+        h('div', {
+          className: `dsh-tree-node-list ${isRootDropTarget ? 'drop-target-root' : ''}`,
+          onContextMenu: (e) => {
+            e.preventDefault();
+            setContextMenu({ x: e.clientX, y: e.clientY, node: null, isRoot: true });
+          },
+          onDragOver: (e) => {
+            if (draggedNode && isValidDropTarget(draggedNode, { path: rootPath, isDir: true })) {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = 'move';
+              setDragOverNode({ path: rootPath, isDir: true });
+            }
+          },
+          onDragLeave: () => {
+            if (dragOverNode && dragOverNode.path === rootPath) {
+              setDragOverNode(null);
+            }
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            setDragOverNode(null);
+            if (draggedNode && isValidDropTarget(draggedNode, { path: rootPath, isDir: true })) {
+              handleMove(draggedNode.path, rootPath);
+            }
+          },
+        },
+          // If creating at root level, render inline create input at top
+          isCreatingAtRoot ? h(InlineCreateInputNode, {
+            depth: 0,
+            type: creatingItem.type,
+            onConfirm: handleConfirmCreate,
+            onCancel: () => setCreatingItem(null),
+          }) : null,
+
           isLoading ? (
             h('div', { className: 'dsh-tree-loading' }, '正在扫描工作区文件...')
           ) : error ? (
@@ -1046,7 +1935,7 @@
                 onClick: () => loadTree(true),
               }, '重试')
             )
-          ) : displayTree.length === 0 ? (
+          ) : displayTree.length === 0 && !isCreatingAtRoot ? (
             h('div', { className: 'dsh-tree-empty' }, searchQuery ? '未匹配到相关文件' : '工作区暂无文件')
           ) : (
             displayTree.map(node => h(FileTreeNodeItem, {
@@ -1058,10 +1947,42 @@
               activeFilePath,
               onOpenFile,
               searchQuery,
+              creatingItem,
+              onConfirmCreate: handleConfirmCreate,
+              onCancelCreate: () => setCreatingItem(null),
+              renamingPath,
+              onConfirmRename: handleConfirmRename,
+              onCancelRename: () => setRenamingPath(null),
+              onContextMenu: (targetNode, e) => {
+                setContextMenu({ x: e.clientX, y: e.clientY, node: targetNode, isRoot: false });
+              },
+              draggedNode,
+              dragOverNode,
+              onDragStart: (targetNode) => setDraggedNode(targetNode),
+              onDragEnd: () => { setDraggedNode(null); setDragOverNode(null); },
+              onDragOver: (targetNode) => setDragOverNode(targetNode),
+              onDragLeave: () => setDragOverNode(null),
+              onDrop: (source, target) => {
+                setDraggedNode(null);
+                setDragOverNode(null);
+                handleMove(source.path, target.path);
+              },
+              clipboard,
             }))
           )
         ),
 
+        // Context Menu Overlay
+        contextMenu ? h(TreeContextMenu, {
+          x: contextMenu.x,
+          y: contextMenu.y,
+          node: contextMenu.node,
+          isRoot: contextMenu.isRoot,
+          clipboard,
+          onAction: handleContextMenuAction,
+          onClose: () => setContextMenu(null),
+        }) : null,
+
         // Sidebar Footer with file count stats
         treeData ? h('div', { className: 'dsh-tree-sidebar-footer' },
           h('span', null, `${treeData.totalDirs || 0} 目录`),
@@ -1993,22 +2914,62 @@
     }
 
     // =========================================================================
-    // React Component: CodeEditorView
+    // React Component: CodeEditorView (Unified line-row architecture)
     // =========================================================================
-    function CodeEditorView({ content, category, isHighlighted = true, isWordWrap = true, searchQuery = '', onLineClick }) {
-      const lines = useMemo(() => (content ? content.split('\n') : []), [content]);
+    function splitHighlightedHtmlIntoLines(html) {
+      if (!html) return [];
+      const rawLines = html.split('\n');
+      const lines = [];
+      const openTags = [];
+
+      for (let i = 0; i < rawLines.length; i++) {
+        let line = rawLines[i];
+        let prefix = '';
+        if (openTags.length > 0) {
+          prefix = openTags.map(t => '<' + t.name + (t.attrs ? ' ' + t.attrs : '') + '>').join('');
+        }
+
+        const tagRegex = /<\/?([a-zA-Z0-9\-]+)([^>]*)>/g;
+        let match;
+        while ((match = tagRegex.exec(line)) !== null) {
+          const isClosing = match[0].startsWith('</');
+          const tagName = match[1];
+          const attrs = match[2];
+          if (isClosing) {
+            const lastIdx = openTags.map(t => t.name).lastIndexOf(tagName);
+            if (lastIdx !== -1) {
+              openTags.splice(lastIdx, 1);
+            }
+          } else if (!match[0].endsWith('/>')) {
+            openTags.push({ name: tagName, attrs: attrs.trim() });
+          }
+        }
 
-      const highlightedHtml = useMemo(() => {
+        let suffix = '';
+        if (openTags.length > 0) {
+          suffix = openTags.slice().reverse().map(t => '</' + t.name + '>').join('');
+        }
+
+        lines.push(prefix + line + suffix);
+      }
+
+      return lines;
+    }
+
+    function CodeEditorView({ content, category, isHighlighted = true, isWordWrap = true, searchQuery = '', onLineClick }) {
+      const normalizedContent = useMemo(() => {
         if (!content) return '';
+        return content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+      }, [content]);
+
+      const highlightedLines = useMemo(() => {
+        if (!normalizedContent) return [];
+        let html = '';
         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;
+          html = escapeHtml(normalizedContent);
+        } else {
+          html = highlightCode(normalizedContent, category);
         }
-        let html = highlightCode(content, category);
         if (searchQuery.trim()) {
           try {
             const q = escapeHtml(searchQuery.trim());
@@ -2016,27 +2977,34 @@
             html = html.replace(regex, '<mark class="dsh-search-highlight">$1</mark>');
           } catch (e) {}
         }
-        return html;
-      }, [content, category, isHighlighted, searchQuery]);
+        return splitHighlightedHtmlIntoLines(html);
+      }, [normalizedContent, category, isHighlighted, searchQuery]);
+
+      const lineCount = highlightedLines.length;
+      const digitCount = Math.max(2, String(lineCount).length);
+      const gutterWidth = Math.max(24, digitCount * 7.5 + 12);
 
       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 }
+        highlightedLines.map((lineHtml, i) => {
+          const lineNum = i + 1;
+          return h('div', {
+            key: lineNum,
+            id: `line-row-${lineNum}`,
+            className: 'dsh-code-line',
+          },
+            h('span', {
+              id: `line-gutter-${lineNum}`,
+              className: 'dsh-line-gutter',
+              style: { minWidth: `${gutterWidth}px` },
+              onClick: () => onLineClick && onLineClick(lineNum),
+              title: `第 ${lineNum} 行 (点击定位)`,
+            }, lineNum),
+            h('span', {
+              className: 'dsh-line-code',
+              dangerouslySetInnerHTML: { __html: lineHtml ? lineHtml : ' ' },
             })
-          )
-        )
+          );
+        })
       );
     }
 
@@ -2138,7 +3106,9 @@
           const el = contentRef.current.querySelector(`#${item.id}`);
           if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
         } else {
-          const el = document.getElementById(`line-gutter-${item.line}`);
+          const rowEl = document.getElementById(`line-row-${item.line}`);
+          const gutterEl = document.getElementById(`line-gutter-${item.line}`);
+          const el = rowEl || gutterEl;
           if (el) {
             el.scrollIntoView({ behavior: 'smooth', block: 'center' });
             el.classList.add('dsh-line-highlight-flash');
@@ -2463,6 +3433,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 +3453,7 @@
           setActiveTabId(globalActiveTabId);
           setIsOpen(globalIsPanelOpen);
           setWidth(globalPanelWidth);
+          setLocalIsMaximized(globalIsMaximized);
           setLocalIsTreeOpen(globalIsTreeOpen);
           setLocalTreeWidth(globalTreeWidth);
         };
@@ -2489,6 +3461,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 +3563,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 +3627,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 +3682,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)',
               }, '✕')
             )
           ),
@@ -2923,151 +3877,369 @@
           transform: translateX(-4px);
           box-shadow: -5px 5px 18px rgba(59, 130, 246, 0.22);
         }
-        body[data-ds-dark-theme] .dsh-rail-tab-item:hover,
-        body[data-ds-dark-theme] .dsh-preview-right-rail-tab:hover,
-        body[data-ds-dark-theme] .dsh-preview-float-pill:hover,
-        body[data-ds-dark-theme] .dsh-git-right-rail-tab:hover {
-          background: var(--dsw-alias-bg-layer-1, #252a36);
-          color: #60a5fa;
-          border-color: #3b82f6;
+        body[data-ds-dark-theme] .dsh-rail-tab-item:hover,
+        body[data-ds-dark-theme] .dsh-preview-right-rail-tab:hover,
+        body[data-ds-dark-theme] .dsh-preview-float-pill:hover,
+        body[data-ds-dark-theme] .dsh-git-right-rail-tab:hover {
+          background: var(--dsw-alias-bg-layer-1, #252a36);
+          color: #60a5fa;
+          border-color: #3b82f6;
+        }
+        .dsh-rail-tab-item.active,
+        .dsh-preview-right-rail-tab.active,
+        .dsh-git-right-rail-tab.active {
+          background: #2563eb;
+          color: #ffffff;
+          border-color: #1d4ed8;
+          transform: translateX(-3px);
+          box-shadow: -5px 5px 18px rgba(37, 99, 235, 0.35);
+        }
+
+        .dsh-rail-tab-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: 16px;
+          min-width: 16px;
+          min-height: 16px;
+          max-width: 16px;
+          max-height: 16px;
+          line-height: 1;
+          flex-shrink: 0;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+        .dsh-rail-tab-icon svg {
+          width: 14px !important;
+          height: 14px !important;
+          min-width: 14px !important;
+          min-height: 14px !important;
+          max-width: 14px !important;
+          max-height: 14px !important;
+          flex-shrink: 0 !important;
+          display: block !important;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+
+        .dsh-rail-tab-title, .dsh-preview-rail-title, .dsh-git-rail-title {
+          writing-mode: vertical-rl;
+          text-orientation: mixed;
+          font-size: 11.5px;
+          font-weight: 600;
+          letter-spacing: 2px;
+          line-height: 1;
+          flex-shrink: 0;
+          user-select: none;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+
+        .dsh-rail-tab-badge, .dsh-float-pill-badge, .dsh-preview-rail-badge, .dsh-git-rail-badge {
+          writing-mode: horizontal-tb;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 17px;
+          height: 17px;
+          min-height: 17px;
+          max-height: 17px;
+          padding: 0 4px;
+          border-radius: 9px;
+          background: #2563eb;
+          color: #ffffff;
+          font-size: 10px;
+          font-weight: 700;
+          line-height: 1;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          flex-shrink: 0;
+          box-sizing: border-box;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+        body[data-ds-dark-theme] .dsh-rail-tab-badge,
+        body[data-ds-dark-theme] .dsh-float-pill-badge,
+        body[data-ds-dark-theme] .dsh-preview-rail-badge,
+        body[data-ds-dark-theme] .dsh-git-rail-badge {
+          background: #3b82f6;
+        }
+        .dsh-rail-tab-item.active .dsh-rail-tab-badge,
+        .dsh-preview-right-rail-tab.active .dsh-preview-rail-badge,
+        .dsh-git-right-rail-tab.active .dsh-git-rail-badge {
+          background: #ffffff;
+          color: #2563eb;
+        }
+
+        .dsh-rail-tab-badge-placeholder {
+          width: 17px;
+          height: 17px;
+          min-height: 17px;
+          max-height: 17px;
+          flex-shrink: 0;
+          visibility: hidden;
+        }
+        body[data-ds-dark-theme] .dsh-rail-tab-badge,
+        body[data-ds-dark-theme] .dsh-float-pill-badge,
+        body[data-ds-dark-theme] .dsh-preview-rail-badge {
+          background: #3b82f6;
+        }
+        .dsh-rail-tab-item.active .dsh-rail-tab-badge,
+        .dsh-preview-right-rail-tab.active .dsh-float-pill-badge,
+        .dsh-preview-right-rail-tab.active .dsh-preview-rail-badge {
+          background: #ffffff;
+          color: #2563eb;
+        }
+
+        /* 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-rail-tab-item.active,
-        .dsh-preview-right-rail-tab.active,
-        .dsh-git-right-rail-tab.active {
-          background: #2563eb;
-          color: #ffffff;
-          border-color: #1d4ed8;
-          transform: translateX(-3px);
-          box-shadow: -5px 5px 18px rgba(37, 99, 235, 0.35);
+        .dsh-ws-empty {
+          padding: 12px;
+          text-align: center;
+          font-size: 11px;
+          color: var(--dsw-alias-label-secondary, #64748b);
         }
 
-        .dsh-rail-tab-icon {
+        .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;
-          justify-content: center;
-          width: 16px;
-          height: 16px;
-          min-width: 16px;
-          min-height: 16px;
-          max-width: 16px;
-          max-height: 16px;
-          line-height: 1;
-          flex-shrink: 0;
-          transition: none !important;
-          animation: none !important;
-          transform: none !important;
         }
-        .dsh-rail-tab-icon svg {
-          width: 14px !important;
-          height: 14px !important;
-          min-width: 14px !important;
-          min-height: 14px !important;
-          max-width: 14px !important;
-          max-height: 14px !important;
-          flex-shrink: 0 !important;
-          display: block !important;
-          transition: none !important;
-          animation: none !important;
-          transform: none !important;
+        .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;
         }
-
-        .dsh-rail-tab-title, .dsh-preview-rail-title, .dsh-git-rail-title {
-          writing-mode: vertical-rl;
-          text-orientation: mixed;
-          font-size: 11.5px;
-          font-weight: 600;
-          letter-spacing: 2px;
-          line-height: 1;
-          flex-shrink: 0;
-          user-select: none;
-          transition: none !important;
-          animation: none !important;
-          transform: none !important;
+        body[data-ds-dark-theme] .dsh-ws-input {
+          background: #141720;
+          border-color: #334155;
+          color: #f1f5f9;
         }
-
-        .dsh-rail-tab-badge, .dsh-float-pill-badge, .dsh-preview-rail-badge, .dsh-git-rail-badge {
-          writing-mode: horizontal-tb;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          min-width: 17px;
-          height: 17px;
-          min-height: 17px;
-          max-height: 17px;
-          padding: 0 4px;
-          border-radius: 9px;
-          background: #2563eb;
+        .dsh-ws-btn {
+          height: 26px;
+          padding: 0 10px;
+          border-radius: 4px;
+          border: none;
+          background: var(--dsw-static-deepseek-500, #4176e6);
           color: #ffffff;
-          font-size: 10px;
-          font-weight: 700;
-          line-height: 1;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-          flex-shrink: 0;
-          box-sizing: border-box;
-          transition: none !important;
-          animation: none !important;
-          transform: none !important;
-        }
-        body[data-ds-dark-theme] .dsh-rail-tab-badge,
-        body[data-ds-dark-theme] .dsh-float-pill-badge,
-        body[data-ds-dark-theme] .dsh-preview-rail-badge,
-        body[data-ds-dark-theme] .dsh-git-rail-badge {
-          background: #3b82f6;
+          font-size: 11px;
+          font-weight: 500;
+          cursor: pointer;
+          white-space: nowrap;
         }
-        .dsh-rail-tab-item.active .dsh-rail-tab-badge,
-        .dsh-preview-right-rail-tab.active .dsh-preview-rail-badge,
-        .dsh-git-right-rail-tab.active .dsh-git-rail-badge {
-          background: #ffffff;
-          color: #2563eb;
+        .dsh-ws-btn:hover {
+          opacity: 0.9;
         }
-
-        .dsh-rail-tab-badge-placeholder {
-          width: 17px;
-          height: 17px;
-          min-height: 17px;
-          max-height: 17px;
-          flex-shrink: 0;
-          visibility: hidden;
+        .dsh-ws-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
         }
-        body[data-ds-dark-theme] .dsh-rail-tab-badge,
-        body[data-ds-dark-theme] .dsh-float-pill-badge,
-        body[data-ds-dark-theme] .dsh-preview-rail-badge {
-          background: #3b82f6;
+        .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;
         }
-        .dsh-rail-tab-item.active .dsh-rail-tab-badge,
-        .dsh-preview-right-rail-tab.active .dsh-float-pill-badge,
-        .dsh-preview-right-rail-tab.active .dsh-preview-rail-badge {
-          background: #ffffff;
-          color: #2563eb;
+        body[data-ds-dark-theme] .dsh-ws-reset-btn {
+          color: #60a5fa;
         }
 
-        /* Right-Side Drawer Container */
+        /* 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%); }
@@ -4290,6 +5462,124 @@
         }
         .dsh-tree-footer-dot { font-size: 8px; }
 
+        /* Drag & Drop & Cut Styles */
+        .dsh-tree-node-row.drop-target {
+          background: rgba(14, 165, 233, 0.22) !important;
+          outline: 1px dashed #0284c7 !important;
+          color: #0284c7 !important;
+        }
+        body[data-ds-dark-theme] .dsh-tree-node-row.drop-target {
+          background: rgba(56, 189, 248, 0.25) !important;
+          outline-color: #38bdf8 !important;
+          color: #38bdf8 !important;
+        }
+        .dsh-tree-node-list.drop-target-root {
+          background: rgba(14, 165, 233, 0.08) !important;
+          outline: 2px dashed #0284c7 !important;
+          outline-offset: -4px;
+        }
+        body[data-ds-dark-theme] .dsh-tree-node-list.drop-target-root {
+          background: rgba(56, 189, 248, 0.1) !important;
+          outline-color: #38bdf8 !important;
+        }
+        .dsh-tree-node-row.is-dragged {
+          opacity: 0.45;
+          filter: grayscale(0.6);
+        }
+        .dsh-tree-node-row.is-cut {
+          opacity: 0.5;
+          filter: grayscale(0.5);
+          border: 1px dashed #94a3b8;
+        }
+
+        /* Inline Creation & Rename Input */
+        .dsh-tree-inline-input-row {
+          display: flex;
+          align-items: center;
+          height: 24px;
+          margin: 1px 4px;
+          gap: 3px;
+          box-sizing: border-box;
+        }
+        .dsh-tree-inline-input {
+          flex: 1;
+          height: 20px;
+          border-radius: 3px;
+          border: 1px solid #38bdf8;
+          background: var(--dsw-alias-bg-base, #ffffff);
+          color: inherit;
+          font-size: 11px;
+          padding: 0 4px;
+          outline: none;
+          box-sizing: border-box;
+          box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
+        }
+        body[data-ds-dark-theme] .dsh-tree-inline-input {
+          background: #1e2330;
+          color: #f1f5f9;
+          border-color: #38bdf8;
+        }
+
+        /* Tree Context Menu */
+        .dsh-tree-context-menu {
+          position: fixed;
+          min-width: 170px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          border: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          border-radius: 6px;
+          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
+          padding: 4px;
+          user-select: none;
+          font-family: inherit;
+        }
+        body[data-ds-dark-theme] .dsh-tree-context-menu {
+          background: #1a1e29;
+          border-color: #2e384d;
+          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+        }
+        .dsh-menu-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 5px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          cursor: pointer;
+          color: var(--dsw-alias-label-primary, #1e293b);
+          transition: background 0.1s;
+        }
+        body[data-ds-dark-theme] .dsh-menu-item {
+          color: #e2e8f0;
+        }
+        .dsh-menu-item:hover {
+          background: var(--dsw-alias-bg-hover, rgba(0, 0, 0, 0.06));
+        }
+        body[data-ds-dark-theme] .dsh-menu-item:hover {
+          background: rgba(255, 255, 255, 0.09);
+        }
+        .dsh-menu-item-danger {
+          color: #ef4444 !important;
+        }
+        .dsh-menu-item-danger:hover {
+          background: rgba(239, 68, 68, 0.12) !important;
+        }
+        .dsh-menu-icon {
+          font-size: 13px;
+          width: 16px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+        .dsh-menu-divider {
+          height: 1px;
+          background: var(--dsw-alias-border-l3, #e2e8f0);
+          margin: 3px 4px;
+        }
+        body[data-ds-dark-theme] .dsh-menu-divider {
+          background: #2a3140;
+        }
+
         /* Splitter between Tree and Preview */
         .dsh-tree-splitter {
           width: 4px;
@@ -4409,85 +5699,89 @@
         body[data-ds-dark-theme] .tok-prop { color: #9cdcfe; }
         body[data-ds-dark-theme] .tok-selector { color: #d7ba7d; }
 
-        /* Code Editor Viewer */
+        /* Code Editor Viewer (with unified line row architecture for 100% perfect alignment) */
         .dsh-code-editor-view {
           display: flex;
+          flex-direction: column;
+          width: 100%;
           min-height: 100%;
-          font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, monospace;
-          font-size: 13px;
+          overflow: auto;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Cascadia Code", "Fira Code", monospace;
+          font-size: 12px;
           line-height: 20px;
           background: var(--dsw-alias-bg-layer-1, #ffffff);
           color: var(--dsw-alias-label-primary, #1e293b);
+          padding: 8px 0;
+          box-sizing: border-box;
+          user-select: text;
         }
         body[data-ds-dark-theme] .dsh-code-editor-view {
-          background: #181b24;
+          background: #161922;
           color: #d4d4d4;
         }
 
-        .dsh-code-gutter {
-          width: 44px;
-          min-width: 44px;
-          padding: 12px 6px 12px 0;
+        .dsh-code-line {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          min-height: 20px;
+          line-height: 20px;
+          width: 100%;
+          box-sizing: border-box;
+          transition: background 0.1s;
+        }
+        .dsh-code-line:hover {
+          background: rgba(0, 0, 0, 0.035);
+        }
+        body[data-ds-dark-theme] .dsh-code-line:hover {
+          background: rgba(255, 255, 255, 0.035);
+        }
+        .dsh-code-line.dsh-line-highlight-flash {
+          background: rgba(14, 165, 233, 0.22) !important;
+        }
+
+        .dsh-line-gutter {
+          display: inline-block;
+          box-sizing: border-box;
+          padding: 0 8px 0 6px;
           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;
+          font-size: 11px;
           line-height: 20px;
           flex-shrink: 0;
+          border-right: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          cursor: pointer;
+          transition: color 0.1s;
         }
-        body[data-ds-dark-theme] .dsh-code-gutter {
-          background: #141720;
+        body[data-ds-dark-theme] .dsh-line-gutter {
           border-right-color: #2a3140;
-          color: #64748b;
-        }
-
-        .dsh-gutter-line {
-          height: 20px;
-          cursor: pointer;
-          padding-right: 8px;
+          color: #55637a;
         }
-        .dsh-gutter-line:hover {
+        .dsh-line-gutter:hover {
           color: var(--dsw-brand-primary, #0284c7);
-          font-weight: bold;
+          font-weight: 600;
         }
-        .dsh-gutter-line.dsh-line-highlight-flash {
-          background: rgba(14, 165, 233, 0.25);
-          color: #0284c7;
+        body[data-ds-dark-theme] .dsh-line-gutter:hover {
+          color: #38bdf8;
         }
 
-        .dsh-code-content {
+        .dsh-line-code {
           flex: 1;
           min-width: 0;
-          padding: 12px 16px;
-          overflow: auto;
-        }
-        .dsh-code-pre {
-          margin: 0;
+          padding: 0 12px 0 10px;
+          white-space: pre;
           font-family: inherit;
           font-size: inherit;
           line-height: 20px;
           tab-size: 2;
-          white-space: pre;
+          box-sizing: border-box;
         }
-        .dsh-code-editor-view.word-wrap .dsh-code-pre {
+        .dsh-code-editor-view.word-wrap .dsh-line-code {
           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;
-        }
 
         /* Interactive JSON Inspector */
         .dsh-json-inspector {