@rooode/dsh-plugin-preview 0.1.10 → 0.1.12

package/lib/client.js

@@ -494,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
     // =========================================================================
@@ -949,12 +1040,398 @@
     }
 
     // =========================================================================
-    // 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 IconNewFile() {
+      return h('svg', {
+        width: 14,
+        height: 14,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.3,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block', flexShrink: 0 }
+      },
+        h('path', { d: 'M9 1.5H3.5A1.5 1.5 0 0 0 2 3v10a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V6L9 1.5z' }),
+        h('polyline', { points: '9 1.5 9 6 13.5 6' }),
+        h('line', { x1: 5.5, y1: 10, x2: 9.5, y2: 10 }),
+        h('line', { x1: 7.5, y1: 8, x2: 7.5, y2: 12 })
+      );
+    }
+
+    function IconNewFolder() {
+      return h('svg', {
+        width: 14,
+        height: 14,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.3,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block', flexShrink: 0 }
+      },
+        h('path', { d: 'M1.5 3.5A1.5 1.5 0 0 1 3 2h3.2l1.4 1.5H13A1.5 1.5 0 0 1 14.5 5v7A1.5 1.5 0 0 1 13 13.5H3A1.5 1.5 0 0 1 1.5 12V3.5z' }),
+        h('line', { x1: 6, y1: 8.5, x2: 10, y2: 8.5 }),
+        h('line', { x1: 8, y1: 6.5, x2: 8, y2: 10.5 })
+      );
+    }
+
+    function IconRefresh() {
+      return h('svg', {
+        width: 13,
+        height: 13,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.4,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block', flexShrink: 0 }
+      },
+        h('path', { d: 'M13.5 2.5v3.5h-3.5' }),
+        h('path', { d: 'M2.5 13.5v-3.5h3.5' }),
+        h('path', { d: 'M3.5 6a5.5 5.5 0 0 1 8.8-1.5l1.2 1.5' }),
+        h('path', { d: 'M12.5 10a5.5 5.5 0 0 1-8.8 1.5l-1.2-1.5' })
+      );
+    }
+
+    function IconExpandAll() {
+      return h('svg', {
+        width: 13,
+        height: 13,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.4,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block', flexShrink: 0 }
+      },
+        h('polyline', { points: '3.5 5.5 8 2 12.5 5.5' }),
+        h('line', { x1: 2, y1: 8, x2: 14, y2: 8 }),
+        h('polyline', { points: '3.5 10.5 8 14 12.5 10.5' })
+      );
+    }
+
+    function IconCollapseAll() {
+      return h('svg', {
+        width: 13,
+        height: 13,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.4,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block', flexShrink: 0 }
+      },
+        h('polyline', { points: '3.5 3 8 6.5 12.5 3' }),
+        h('line', { x1: 2, y1: 8, x2: 14, y2: 8 }),
+        h('polyline', { points: '3.5 13 8 9.5 12.5 13' })
+      );
+    }
+
+    function IconChevronRight() {
+      return h('svg', {
+        width: 9,
+        height: 9,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2.2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block' }
+      }, h('polyline', { points: '5 3 10 8 5 13' }));
+    }
+
+    function IconChevronDown() {
+      return h('svg', {
+        width: 9,
+        height: 9,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2.2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        style: { display: 'block' }
+      }, h('polyline', { points: '3 5 8 10 13 5' }));
+    }
+
+    function IconClose() {
+      return h('svg', {
+        width: 12,
+        height: 12,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.6,
+        strokeLinecap: 'round',
+        style: { display: 'block', flexShrink: 0 }
+      },
+        h('line', { x1: 3, y1: 3, x2: 13, y2: 13 }),
+        h('line', { x1: 13, y1: 3, x2: 3, y2: 13 })
+      );
+    }
+
+    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` };
@@ -968,17 +1445,71 @@
         }
       };
 
+      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' : ''}`,
-          }, isExpanded ? '▼' : '▶') : h('span', { className: 'dsh-tree-chevron-placeholder' }),
+            onClick: (e) => { e.stopPropagation(); onToggleExpand(node.path); },
+          }, isExpanded ? h(IconChevronDown) : h(IconChevronRight)) : h('span', { className: 'dsh-tree-chevron-placeholder' }),
 
           // File / Directory Icon
           h('span', {
@@ -995,18 +1526,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
       );
     }
@@ -1060,6 +1620,15 @@
       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) => {
@@ -1121,6 +1690,17 @@
         }
       }, [searchQuery, treeData]);
 
+      // Listen to external workspace switch events (e.g. from Git plugin)
+      useEffect(() => {
+        const handleWsSwitch = (e) => {
+          if (e.detail?.path && e.detail.path !== globalManualWorkspace) {
+            setManualWorkspace(e.detail.path);
+          }
+        };
+        window.addEventListener('dsh:workspace:switch', handleWsSwitch);
+        return () => window.removeEventListener('dsh:workspace:switch', handleWsSwitch);
+      }, []);
+
       const availableWorkspaces = useMemo(() => {
         return getAllAvailableWorkspaces();
       }, [isSelectorOpen, globalManualWorkspace]);
@@ -1129,6 +1709,9 @@
         setManualWorkspace(wsPath);
         setIsSelectorOpen(false);
         showToast(`已切换工作区: ${getFileName(wsPath)}`, 'success');
+        if (typeof window !== 'undefined') {
+          window.dispatchEvent(new CustomEvent('dsh:workspace:switch', { detail: { path: wsPath } }));
+        }
       };
 
       const handleCustomSubmit = async (e) => {
@@ -1148,6 +1731,9 @@
             setCustomPathInput('');
             setIsSelectorOpen(false);
             showToast(`已切换工作空间: ${json.name}`, 'success');
+            if (typeof window !== 'undefined') {
+              window.dispatchEvent(new CustomEvent('dsh:workspace:switch', { detail: { path: json.path } }));
+            }
           } else {
             showToast(json?.error?.message || '指定目录不存在或不是文件夹', 'error');
           }
@@ -1164,6 +1750,168 @@
         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` },
@@ -1180,30 +1928,42 @@
             h('span', { className: 'dsh-tree-header-chevron' }, isSelectorOpen ? '▲' : '▼')
           ),
           h('div', { className: 'dsh-tree-header-actions' },
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: () => handleStartCreate(rootPath, 'file'),
+              title: '新建文件 (在根目录)',
+            }, h(IconNewFile)),
+            h('button', {
+              type: 'button',
+              className: 'dsh-tree-action-btn',
+              onClick: () => handleStartCreate(rootPath, 'dir'),
+              title: '新建文件夹 (在根目录)',
+            }, h(IconNewFolder)),
             h('button', {
               type: 'button',
               className: 'dsh-tree-action-btn',
               onClick: () => loadTree(true),
               title: '刷新文件树',
-            }, '🔄'),
+            }, h(IconRefresh)),
             h('button', {
               type: 'button',
               className: 'dsh-tree-action-btn',
               onClick: handleExpandAll,
               title: '全部展开',
-            }, '📂'),
+            }, h(IconExpandAll)),
             h('button', {
               type: 'button',
               className: 'dsh-tree-action-btn',
               onClick: handleCollapseAll,
               title: '全部折叠',
-            }, '📁'),
+            }, h(IconCollapseAll)),
             onCloseSidebar ? h('button', {
               type: 'button',
               className: 'dsh-tree-action-btn',
               onClick: onCloseSidebar,
               title: '收起目录树 (快捷键 Ctrl/Cmd+B)',
-            }, '✕') : null
+            }, h(IconClose)) : null
           )
         ),
 
@@ -1283,7 +2043,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 ? (
@@ -1295,7 +2088,7 @@
                 onClick: () => loadTree(true),
               }, '重试')
             )
-          ) : displayTree.length === 0 ? (
+          ) : displayTree.length === 0 && !isCreatingAtRoot ? (
             h('div', { className: 'dsh-tree-empty' }, searchQuery ? '未匹配到相关文件' : '工作区暂无文件')
           ) : (
             displayTree.map(node => h(FileTreeNodeItem, {
@@ -1307,10 +2100,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} 目录`),
@@ -2242,22 +3067,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() });
+          }
+        }
+
+        let suffix = '';
+        if (openTags.length > 0) {
+          suffix = openTags.slice().reverse().map(t => '</' + t.name + '>').join('');
+        }
 
-      const highlightedHtml = useMemo(() => {
+        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());
@@ -2265,27 +3130,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 : ' ' },
             })
-          )
-        )
+          );
+        })
       );
     }
 
@@ -2387,7 +3259,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');
@@ -4505,6 +5379,7 @@
           align-items: center;
           gap: 2px;
           flex-shrink: 0;
+          white-space: nowrap;
         }
 
         .dsh-tree-action-btn {
@@ -4518,16 +5393,25 @@
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          font-size: 11px;
           padding: 0;
-          transition: all 0.1s;
+          flex-shrink: 0;
+          white-space: nowrap;
+          transition: background 0.12s ease, color 0.12s ease;
+        }
+        body[data-ds-dark-theme] .dsh-tree-action-btn {
+          color: #94a3b8;
+        }
+        .dsh-tree-action-btn svg {
+          display: block;
+          flex-shrink: 0;
+          pointer-events: none;
         }
         .dsh-tree-action-btn:hover {
-          background: rgba(0, 0, 0, 0.06);
+          background: var(--dsw-alias-bg-hover, rgba(0, 0, 0, 0.07));
           color: var(--dsw-alias-label-primary, #0f172a);
         }
         body[data-ds-dark-theme] .dsh-tree-action-btn:hover {
-          background: rgba(255, 255, 255, 0.08);
+          background: rgba(255, 255, 255, 0.1);
           color: #ffffff;
         }
 
@@ -4741,6 +5625,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;
@@ -4860,85 +5862,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 {