diff --git a/.gitignore b/.gitignore
index 42a6339..0de9358 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,8 +33,4 @@ coverage
 /cypress/screenshots/
 
 # Vitest
-__screenshots__/
-
-# Local AI instructions
-.github/copilot-instructions.md
-*.agent.md
\ No newline at end of file
+__screenshots__/
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a63d533..bfa6e01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,14 +12,15 @@
         "@tanstack/vue-table": "^8.21.3",
         "@unyt/datex": "0.0.13",
         "@unyt/speck": "0.0.12",
-        "@vueuse/core": "^14.1.0",
+        "@vueuse/core": "^14.2.1",
         "ag-grid-community": "^35.0.0",
         "ag-grid-vue3": "^35.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.548.0",
         "markdown-it": "^14.1.1",
-        "reka-ui": "^2.7.0",
+        "modern-monaco": "^0.3.7",
+        "reka-ui": "^2.8.2",
         "search-query-parser": "^1.6.0",
         "shadcn": "^3.5.0",
         "shadcn-ui": "^0.9.5",
@@ -7214,6 +7215,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/modern-monaco": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/modern-monaco/-/modern-monaco-0.3.8.tgz",
+      "integrity": "sha512-vQ6tlYorvHJs9FzlOBOqErDyJ3D1sAkm9EcOUUASvpqpUaAsj71vh8kH5WruC+jNQAD2BlTsyw04m0Eo0+RpqA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">= 5.0.0"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -9385,7 +9395,6 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/package.json b/package.json
index cfa4dfb..eb3b962 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,18 @@
     "@tanstack/vue-table": "^8.21.3",
     "@unyt/datex": "0.0.13",
     "@unyt/speck": "0.0.12",
-    "@vueuse/core": "^14.1.0",
     "ag-grid-community": "^35.0.0",
     "ag-grid-vue3": "^35.0.0",
+    "@vueuse/core": "^14.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.548.0",
     "markdown-it": "^14.1.1",
-    "reka-ui": "^2.7.0",
     "search-query-parser": "^1.6.0",
     "shadcn": "^3.5.0",
     "shadcn-ui": "^0.9.5",
+    "modern-monaco": "^0.3.7",
+    "reka-ui": "^2.8.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.16",
     "tw-animate-css": "^1.4.0",
diff --git a/src/components/Editor/EditorSidebar.vue b/src/components/Editor/EditorSidebar.vue
new file mode 100644
index 0000000..c1f5857
--- /dev/null
+++ b/src/components/Editor/EditorSidebar.vue
@@ -0,0 +1,479 @@
+<script setup lang="ts">
+import { FilePlus, FolderPlus, TriangleAlert, File as FileIcon, Folder } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+import { ref, nextTick, computed, onMounted, onUnmounted } from 'vue';
+import type { FileTreeNode } from '@/types/FileTree';
+import type { CreatingState } from './FileTreeItem.vue';
+import FileTreeItem from './FileTreeItem.vue';
+import FolderContextMenu from './FolderContextMenu.vue';
+import { useFileSelection } from '@/composable/useFileSelection';
+import { useFileClipboard } from '@/composable/useFileClipboard';
+import { isMac } from '@/composable/usePlatform';
+import { getFileDragPath, isInvalidDrop, clearFileDragOver } from '@/composable/useFileDragDrop';
+
+// ── Props ──────────────────────────────────────────────────────────
+interface Props {
+  tree: FileTreeNode[];
+  currentFile?: string;
+}
+
+const props = defineProps<Props>();
+
+// ── Emits ──────────────────────────────────────────────────────────
+const emit = defineEmits<{
+  'file-click': [path: string];
+  'file-dblclick': [path: string];
+  'toggle-folder': [path: string];
+  'ensure-expand': [path: string];
+  'create-file': [filename: string];
+  'create-folder': [foldername: string];
+  'create-file-in-folder': [folderPath: string, filename: string];
+  'create-folder-in-folder': [folderPath: string, foldername: string];
+  'rename-item': [oldPath: string, newName: string];
+  'delete-item': [path: string];
+  'paste-items': [targetPath: string, sourcePaths: string[], mode: 'cut' | 'copy'];
+  'move-item': [srcPath: string, targetDir: string];
+}>();
+
+// ── Composables ────────────────────────────────────────────────────
+const {
+  selectedPaths,
+  handleItemClick: handleSelectionClick,
+  ensureSelected,
+  clearSelection,
+} = useFileSelection();
+
+const {
+  clipboardPaths,
+  clipboardMode,
+  hasClipboard,
+  cut,
+  copy,
+  consumeForPaste,
+  copyPathToClipboard,
+  copyRelativePathToClipboard,
+} = useFileClipboard();
+
+// ── Centralized creation/rename state ──────────────────────────────
+const creatingIn = ref<CreatingState | null>(null);
+const renamingPath = ref<string | null>(null);
+
+// ── Context menu state ─────────────────────────────────────────────
+// node is null when right-clicking on empty sidebar space
+const contextMenu = ref<{ x: number; y: number; node: FileTreeNode | null } | null>(null);
+
+// ── Root-level creation state ──────────────────────────────────────
+const isCreatingAtRoot = ref(false);
+const rootCreationType = ref<'file' | 'folder'>('file');
+const newItemName = ref('');
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// ── Sidebar container ref (for keyboard focus) ─────────────────────
+const sidebarRef = ref<HTMLDivElement | null>(null);
+
+const rootNames = computed(() => props.tree.map((n) => n.name));
+const isRootDuplicate = computed(() => {
+  const name = newItemName.value.trim();
+  if (!name) return false;
+  return rootNames.value.some((n) => n.toLowerCase() === name.toLowerCase());
+});
+
+// ── Root-level creation actions ────────────────────────────────────
+async function startCreateFileAtRoot() {
+  isCreatingAtRoot.value = true;
+  rootCreationType.value = 'file';
+  newItemName.value = '';
+  await nextTick();
+  inputRef.value?.focus();
+}
+
+async function startCreateFolderAtRoot() {
+  isCreatingAtRoot.value = true;
+  rootCreationType.value = 'folder';
+  newItemName.value = '';
+  await nextTick();
+  inputRef.value?.focus();
+}
+
+let isConfirmingRoot = false;
+
+function confirmRootCreate() {
+  const name = newItemName.value.trim();
+  if (!name || isRootDuplicate.value) return;
+
+  isConfirmingRoot = true;
+  if (rootCreationType.value === 'file') {
+    emit('create-file', name);
+  } else {
+    emit('create-folder', name);
+  }
+  cancelRootCreate();
+  isConfirmingRoot = false;
+}
+
+function cancelRootCreate() {
+  isCreatingAtRoot.value = false;
+  newItemName.value = '';
+}
+
+function handleRootBlur() {
+  if (!isConfirmingRoot) cancelRootCreate();
+}
+
+function handleRootKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') confirmRootCreate();
+  else if (e.key === 'Escape') cancelRootCreate();
+}
+
+// ── Item click handler (selection + file open) ─────────────────────
+function handleItemClick(event: MouseEvent, node: FileTreeNode) {
+  const isSingleClick = handleSelectionClick(node.path, event, props.tree);
+
+  // Only open file on plain single-click (no modifiers)
+  if (isSingleClick && node.type === 'file') {
+    emit('file-click', node.path);
+  }
+}
+
+function handleItemDblClick(event: MouseEvent, node: FileTreeNode) {
+  if (node.type === 'file') {
+    emit('file-dblclick', node.path);
+  }
+}
+
+// ── Context menu handlers ──────────────────────────────────────────
+
+/** Right-click on a file/folder node */
+function handleNodeContextMenu(e: MouseEvent, node: FileTreeNode) {
+  e.stopPropagation(); // prevent bubbling to the root @contextmenu handler
+  ensureSelected(node.path);
+  contextMenu.value = { x: e.clientX, y: e.clientY, node };
+}
+
+/** Right-click on empty sidebar space (background) */
+function handleBackgroundContextMenu(e: MouseEvent) {
+  const target = e.target as HTMLElement;
+  if (target.closest('[data-tree-item]')) return;
+  e.preventDefault();
+  clearSelection();
+  contextMenu.value = { x: e.clientX, y: e.clientY, node: null };
+}
+
+/** Dragover on background: allow drop if a file is being dragged */
+function handleBackgroundDragOver(e: DragEvent) {
+  const src = getFileDragPath(e);
+  if (src) e.preventDefault();
+}
+
+/** Drop on background: move dragged file/folder to root */
+function handleBackgroundDrop(e: DragEvent) {
+  e.preventDefault();
+  clearFileDragOver();
+  const src = getFileDragPath(e);
+  if (!src || isInvalidDrop(src, '/')) return;
+  emit('move-item', src, '/');
+}
+
+function closeContextMenu() {
+  contextMenu.value = null;
+}
+
+function handleContextNewFile() {
+  closeContextMenu();
+  if (contextMenu.value?.node) {
+    // Create inside a specific folder
+    const folderPath = contextMenu.value.node.path;
+    emit('ensure-expand', folderPath);
+    nextTick(() => { creatingIn.value = { folderPath, type: 'file' }; });
+  } else {
+    // Background right-click → create at root
+    startCreateFileAtRoot();
+  }
+}
+
+function handleContextNewFolder() {
+  closeContextMenu();
+  if (contextMenu.value?.node) {
+    const folderPath = contextMenu.value.node.path;
+    emit('ensure-expand', folderPath);
+    nextTick(() => { creatingIn.value = { folderPath, type: 'folder' }; });
+  } else {
+    startCreateFolderAtRoot();
+  }
+}
+
+function handleContextRename() {
+  if (!contextMenu.value?.node) return;
+  const path = contextMenu.value.node.path;
+  closeContextMenu();
+  renamingPath.value = path;
+}
+
+function handleContextDelete() {
+  if (!contextMenu.value?.node) return;
+  const pathsToDelete = selectedPaths.value.size > 0
+    ? [...selectedPaths.value]
+    : [contextMenu.value.node.path];
+
+  closeContextMenu();
+  for (const p of pathsToDelete) {
+    emit('delete-item', p);
+  }
+  clearSelection();
+}
+
+// ── Context menu clipboard handlers ────────────────────────────────
+function handleContextCut() {
+  if (!contextMenu.value?.node) return;
+  const paths = selectedPaths.value.size > 0
+    ? [...selectedPaths.value]
+    : [contextMenu.value.node.path];
+  cut(paths);
+  closeContextMenu();
+}
+
+function handleContextCopy() {
+  if (!contextMenu.value?.node) return;
+  const paths = selectedPaths.value.size > 0
+    ? [...selectedPaths.value]
+    : [contextMenu.value.node.path];
+  copy(paths);
+  closeContextMenu();
+}
+
+function handleContextPaste() {
+  if (!contextMenu.value) return;
+  const clip = consumeForPaste();
+  if (!clip) return;
+
+  // Determine target: folder node → paste inside, file node → parent dir, background → root
+  const node = contextMenu.value.node;
+  let targetPath = '/';
+  if (node) {
+    targetPath = node.type === 'folder'
+      ? node.path
+      : node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+  }
+
+  closeContextMenu();
+  emit('paste-items', targetPath, clip.paths, clip.mode);
+}
+
+function handleContextCopyPath() {
+  if (!contextMenu.value?.node) return;
+  copyPathToClipboard(contextMenu.value.node.path);
+  closeContextMenu();
+}
+
+function handleContextCopyRelativePath() {
+  if (!contextMenu.value?.node) return;
+  copyRelativePathToClipboard(contextMenu.value.node.path);
+  closeContextMenu();
+}
+
+// ── Centralized creation confirm/cancel from FileTreeItem ──────────
+function handleConfirmCreate(folderPath: string, name: string, type: 'file' | 'folder') {
+  creatingIn.value = null;
+  if (type === 'file') {
+    emit('create-file-in-folder', folderPath, name);
+  } else {
+    emit('create-folder-in-folder', folderPath, name);
+  }
+}
+
+function handleCancelCreate() {
+  creatingIn.value = null;
+}
+
+// ── Centralized rename confirm/cancel from FileTreeItem ────────────
+function handleConfirmRename(oldPath: string, newName: string) {
+  renamingPath.value = null;
+  emit('rename-item', oldPath, newName);
+}
+
+function handleCancelRename() {
+  renamingPath.value = null;
+}
+
+// ── Toggle folder ──────────────────────────────────────────────────
+function handleToggleFolder(folderPath: string) {
+  emit('toggle-folder', folderPath);
+}
+
+// ── Keyboard shortcuts ─────────────────────────────────────────────
+function handleKeydown(e: KeyboardEvent) {
+  const metaKey = isMac ? e.metaKey : e.ctrlKey;
+  if (!metaKey) return;
+
+  const key = e.key.toLowerCase();
+
+  // ⌘X / Ctrl+X → Cut
+  if (key === 'x' && !e.altKey && !e.shiftKey) {
+    if (selectedPaths.value.size > 0) {
+      e.preventDefault();
+      cut([...selectedPaths.value]);
+    }
+    return;
+  }
+
+  // ⌘C / Ctrl+C → Copy (but not ⌥⌘C which is Copy Path)
+  if (key === 'c' && !e.altKey && !e.shiftKey) {
+    if (selectedPaths.value.size > 0) {
+      e.preventDefault();
+      copy([...selectedPaths.value]);
+    }
+    return;
+  }
+
+  // ⌘V / Ctrl+V → Paste
+  if (key === 'v' && !e.altKey && !e.shiftKey) {
+    const clip = consumeForPaste();
+    if (clip) {
+      e.preventDefault();
+      const selected = [...selectedPaths.value];
+      const targetPath = selected.length === 1 ? selected[0]! : '/';
+      emit('paste-items', targetPath, clip.paths, clip.mode);
+    }
+    return;
+  }
+
+  // ⌥⌘C / Alt+Ctrl+C → Copy Path
+  if (key === 'c' && e.altKey && !e.shiftKey) {
+    if (selectedPaths.value.size > 0) {
+      e.preventDefault();
+      const firstPath = [...selectedPaths.value][0]!;
+      copyPathToClipboard(firstPath);
+    }
+    return;
+  }
+
+  // ⇧⌥⌘C / Shift+Alt+Ctrl+C → Copy Relative Path
+  if (key === 'c' && e.altKey && e.shiftKey) {
+    if (selectedPaths.value.size > 0) {
+      e.preventDefault();
+      const firstPath = [...selectedPaths.value][0]!;
+      copyRelativePathToClipboard(firstPath);
+    }
+    return;
+  }
+}
+
+onMounted(() => {
+  sidebarRef.value?.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  sidebarRef.value?.removeEventListener('keydown', handleKeydown);
+});
+</script>
+
+<template>
+  <div
+    ref="sidebarRef"
+    class="h-full bg-sidebar border-r border-sidebar-border flex flex-col focus:outline-none"
+    tabindex="0"
+    @contextmenu="handleBackgroundContextMenu"
+  >
+    <!-- Header with Actions -->
+    <div class="px-4 py-3 border-b border-sidebar-border flex items-center justify-between">
+      <h2 class="text-sm font-semibold text-sidebar-foreground">Files</h2>
+      <div class="flex items-center gap-1">
+        <button
+          @click="startCreateFileAtRoot"
+          class="p-1.5 rounded hover:bg-sidebar-accent transition-colors"
+          title="New File"
+        >
+          <FilePlus class="w-4 h-4 text-sidebar-foreground" />
+        </button>
+        <button
+          @click="startCreateFolderAtRoot"
+          class="p-1.5 rounded hover:bg-sidebar-accent transition-colors"
+          title="New Folder"
+        >
+          <FolderPlus class="w-4 h-4 text-sidebar-foreground" />
+        </button>
+      </div>
+    </div>
+
+    <!-- File Tree: flex-1 min-h-0 constrains height; overflow-y auto scrolls cleanly -->
+    <div
+      class="flex-1 min-h-0 overflow-y-auto"
+      @dragover="handleBackgroundDragOver"
+      @drop="handleBackgroundDrop"
+    >
+      <div class="p-2 pb-20">
+        <!-- Root-level New Item Input -->
+        <div v-if="isCreatingAtRoot" class="mb-1">
+          <div class="flex items-center gap-1 py-1 px-2">
+            <span class="w-4 flex-shrink-0" />
+            <FileIcon v-if="rootCreationType === 'file'" class="w-4 h-4 flex-shrink-0 text-sidebar-foreground" />
+            <Folder v-else class="w-4 h-4 flex-shrink-0 text-sidebar-foreground" />
+            <input
+              ref="inputRef"
+              v-model="newItemName"
+              @keydown="handleRootKeydown"
+              @blur="handleRootBlur"
+              type="text"
+              :placeholder="rootCreationType === 'file' ? 'filename.ext' : 'foldername'"
+              :class="cn(
+                'flex-1 bg-sidebar-accent text-sidebar-accent-foreground text-sm px-2 py-0.5 rounded outline-none focus:ring-1',
+                isRootDuplicate ? 'ring-1 ring-red-500 focus:ring-red-500' : 'focus:ring-primary'
+              )"
+            />
+          </div>
+          <div
+            v-if="isRootDuplicate"
+            class="mx-3 mt-0.5 px-2 py-1 bg-[#5a1d1d] border border-red-500 rounded text-xs text-red-200 flex items-start gap-1.5"
+          >
+            <TriangleAlert class="w-3.5 h-3.5 flex-shrink-0 text-red-400 mt-0.5" />
+            <span>A file or folder <strong>{{ newItemName.trim() }}</strong> already exists. Please choose a different name.</span>
+          </div>
+        </div>
+
+        <!-- Tree Items -->
+        <FileTreeItem
+          v-for="node in tree"
+          :key="node.path"
+          :node="node"
+          :depth="0"
+          :current-file="currentFile"
+          :sibling-names="tree.map(n => n.name)"
+          :creating-in="creatingIn"
+          :renaming-path="renamingPath"
+          :selected-paths="selectedPaths"
+          :clipboard-paths="clipboardPaths"
+          :clipboard-mode="clipboardMode"
+          @item-click="handleItemClick"
+          @item-dblclick="handleItemDblClick"
+          @toggle-folder="handleToggleFolder"
+          @context-menu="handleNodeContextMenu"
+          @move-item="(src, dir) => emit('move-item', src, dir)"
+          @confirm-create="handleConfirmCreate"
+          @cancel-create="handleCancelCreate"
+          @confirm-rename="handleConfirmRename"
+          @cancel-rename="handleCancelRename"
+          @delete-item="emit('delete-item', $event)"
+        />
+      </div>
+    </div>
+
+    <!-- Context Menu -->
+    <FolderContextMenu
+      v-if="contextMenu"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      :node-type="contextMenu.node?.type ?? null"
+      :has-clipboard="hasClipboard"
+      @cut="handleContextCut"
+      @copy="handleContextCopy"
+      @paste="handleContextPaste"
+      @copy-path="handleContextCopyPath"
+      @copy-relative-path="handleContextCopyRelativePath"
+      @new-file="handleContextNewFile"
+      @new-folder="handleContextNewFolder"
+      @rename="handleContextRename"
+      @delete="handleContextDelete"
+      @close="closeContextMenu"
+    />
+  </div>
+</template>
diff --git a/src/components/Editor/EditorTabs.vue b/src/components/Editor/EditorTabs.vue
new file mode 100644
index 0000000..1378931
--- /dev/null
+++ b/src/components/Editor/EditorTabs.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { X } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+// ── Props ──────────────────────────────────────────────────────────
+interface Props {
+  openFiles: string[];
+  activeFile: string;
+  previewTab?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'tab-click': [path: string];
+  'tab-close': [path: string];
+}>();
+
+// ── Helpers ────────────────────────────────────────────────────────
+function fileName(path: string): string {
+  return path.split('/').pop() ?? path;
+}
+
+function getExtension(path: string): string {
+  const name = fileName(path);
+  const dot = name.lastIndexOf('.');
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+}
+
+/** Very simple language color dots — matches common file types */
+function extColor(path: string): string {
+  const ext = getExtension(path);
+  const map: Record<string, string> = {
+    ts: '#3178c6', tsx: '#3178c6',
+    js: '#f7df1e', jsx: '#f7df1e',
+    vue: '#42b883',
+    css: '#56a8f5', scss: '#c76494',
+    html: '#e44d26',
+    json: '#a8c061',
+    md: '#ccc',
+  };
+  return map[ext] ?? '#888';
+}
+
+function handleMiddleClick(e: MouseEvent, path: string) {
+  if (e.button === 1) {
+    e.preventDefault();
+    emit('tab-close', path);
+  }
+}
+</script>
+
+<template>
+  <div class="editor-tabs">
+    <div
+      v-for="path in props.openFiles"
+      :key="path"
+      :class="cn(
+        'editor-tab',
+        props.activeFile === path && 'editor-tab--active',
+        props.previewTab === path && 'editor-tab--preview'
+      )"
+      @click="emit('tab-click', path)"
+      @dblclick="emit('tab-click', path)"
+      @mousedown="handleMiddleClick($event, path)"
+    >
+      <!-- Language dot -->
+      <span
+        class="editor-tab__dot"
+        :style="{ background: extColor(path) }"
+      />
+
+      <!-- Filename -->
+      <span class="editor-tab__name">{{ fileName(path) }}</span>
+
+      <!-- Close button -->
+      <button
+        class="editor-tab__close"
+        title="Close"
+        @click.stop="emit('tab-close', path)"
+      >
+        <X class="w-3 h-3" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.editor-tabs {
+  display: flex;
+  align-items: stretch;
+  height: 36px;
+  background: var(--color-sidebar);
+  border-bottom: 1px solid var(--color-sidebar-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex-shrink: 0;
+}
+
+.editor-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.editor-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  min-width: 0;
+  max-width: 180px;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-right: 1px solid var(--color-sidebar-border);
+  color: var(--color-muted-foreground);
+  font-size: 13px;
+  white-space: nowrap;
+  position: relative;
+  transition: background 0.1s, color 0.1s;
+  user-select: none;
+}
+
+.editor-tab:hover {
+  background: var(--color-sidebar-accent);
+  color: var(--color-sidebar-accent-foreground);
+}
+
+.editor-tab--active {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--color-sidebar-foreground);
+  border-top: 1px solid var(--color-primary, #3b82f6);
+}
+
+.editor-tab--active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: transparent;
+}
+
+.editor-tab--preview {
+  font-style: italic;
+}
+
+.editor-tab__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.editor-tab__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editor-tab__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0;
+  flex-shrink: 0;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.editor-tab:hover .editor-tab__close,
+.editor-tab--active .editor-tab__close {
+  opacity: 0.6;
+}
+
+.editor-tab__close:hover {
+  opacity: 1 !important;
+  background: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/src/components/Editor/FileTreeItem.vue b/src/components/Editor/FileTreeItem.vue
new file mode 100644
index 0000000..8aa1107
--- /dev/null
+++ b/src/components/Editor/FileTreeItem.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import { File, Folder, FolderOpen, ChevronRight, ChevronDown, TriangleAlert } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+import { ref, nextTick, computed, watch } from 'vue';
+import type { FileTreeNode } from '@/types/FileTree';
+import {
+  draggedPath,
+  dragOverPath,
+  startFileDrag,
+  endFileDrag,
+  setFileDragOver,
+  clearFileDragOver,
+  isInvalidDrop,
+  getFileDragPath,
+} from '@/composable/useFileDragDrop';
+
+// ── Types ──────────────────────────────────────────────────────────
+export interface CreatingState {
+  folderPath: string; // which folder is showing the inline input
+  type: 'file' | 'folder'; // what kind of item is being created
+}
+
+// ── Props ──────────────────────────────────────────────────────────
+interface Props {
+  node: FileTreeNode;
+  depth?: number;
+  currentFile?: string;
+  siblingNames?: string[];
+  /** Centralized creation state from parent */
+  creatingIn?: CreatingState | null;
+  /** Path of the node currently being renamed */
+  renamingPath?: string | null;
+  /** Currently selected paths for multi-select */
+  selectedPaths?: Set<string>;
+  /** Paths in the internal clipboard */
+  clipboardPaths?: string[];
+  /** Clipboard operation mode */
+  clipboardMode?: 'cut' | 'copy' | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  depth: 0,
+  siblingNames: () => [],
+  creatingIn: null,
+  renamingPath: null,
+  selectedPaths: () => new Set<string>(),
+  clipboardPaths: () => [],
+  clipboardMode: null,
+});
+
+// ── Emits ──────────────────────────────────────────────────────────
+const emit = defineEmits<{
+  'item-click': [event: MouseEvent, node: FileTreeNode];
+  'item-dblclick': [event: MouseEvent, node: FileTreeNode];
+  'toggle-folder': [path: string];
+  'context-menu': [event: MouseEvent, node: FileTreeNode];
+  'move-item': [srcPath: string, targetDir: string];
+  'confirm-create': [folderPath: string, name: string, type: 'file' | 'folder'];
+  'cancel-create': [];
+  'confirm-rename': [oldPath: string, newName: string];
+  'cancel-rename': [];
+  'delete-item': [path: string];
+}>();
+
+// ── Computed: is THIS node currently creating? ─────────────────────
+const isCreating = computed(
+  () => props.node.type === 'folder' && props.creatingIn?.folderPath === props.node.path,
+);
+const creatingType = computed(() => props.creatingIn?.type ?? 'file');
+
+// ── Computed: is THIS node currently being renamed? ────────────────
+const isRenaming = computed(() => props.renamingPath === props.node.path);
+
+// ── Computed: selection & clipboard state ──────────────────────────
+const isSelected = computed(() => props.selectedPaths.has(props.node.path));
+const isCut = computed(
+  () => props.clipboardMode === 'cut' && props.clipboardPaths.includes(props.node.path),
+);
+
+// ── Computed: drag state ───────────────────────────────────────────
+const isDragging = computed(() => draggedPath.value === props.node.path);
+const isDragOver = computed(
+  () => props.node.type === 'folder' && dragOverPath.value === props.node.path,
+);
+
+// ── Inline creation state ──────────────────────────────────────────
+const newItemName = ref('');
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// Computed: names of children for duplicate check during creation
+const childNames = computed(() =>
+  (props.node.children || []).map((c) => c.name.toLowerCase()),
+);
+const isCreateDuplicate = computed(() => {
+  const name = newItemName.value.trim().toLowerCase();
+  if (!name) return false;
+  return childNames.value.includes(name);
+});
+
+// ── Rename state ───────────────────────────────────────────────────
+const renameValue = ref('');
+const renameInputRef = ref<HTMLInputElement | null>(null);
+
+const isRenameDuplicate = computed(() => {
+  const name = renameValue.value.trim().toLowerCase();
+  if (!name) return false;
+  if (name === props.node.name.toLowerCase()) return false;
+  return props.siblingNames.some((s) => s.toLowerCase() === name);
+});
+
+// ── Layout helpers ─────────────────────────────────────────────────
+const paddingLeft = computed(() => `${props.depth * 16 + 8}px`);
+const childPaddingLeft = computed(() => `${(props.depth + 1) * 16 + 8}px`);
+
+// ── Event handlers ─────────────────────────────────────────────────
+function handleClick(e: MouseEvent) {
+  emit('item-click', e, props.node);
+  if (props.node.type === 'folder') {
+    emit('toggle-folder', props.node.path);
+  }
+}
+
+function handleDblClick(e: MouseEvent) {
+  emit('item-dblclick', e, props.node);
+}
+
+function handleContextMenu(e: MouseEvent) {
+  e.preventDefault();
+  emit('context-menu', e, props.node);
+}
+
+// ── Drag & Drop handlers ───────────────────────────────────────────
+function handleDragStart(e: DragEvent) {
+  startFileDrag(props.node.path, e);
+}
+
+function handleDragEnd() {
+  endFileDrag();
+}
+
+function handleDragOver(e: DragEvent) {
+  if (props.node.type !== 'folder') return;
+  if (!draggedPath.value) return;
+  setFileDragOver(props.node.path, e);
+}
+
+function handleDragLeave() {
+  if (dragOverPath.value === props.node.path) clearFileDragOver();
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault();
+  clearFileDragOver();
+
+  const src = getFileDragPath(e);
+  if (!src) return;
+
+  // Determine target directory
+  const targetDir = props.node.type === 'folder'
+    ? props.node.path
+    : props.node.path.substring(0, props.node.path.lastIndexOf('/')) || '/';
+
+  if (isInvalidDrop(src, targetDir)) return;
+
+  emit('move-item', src, targetDir);
+  endFileDrag();
+}
+
+// ── Creation input lifecycle ───────────────────────────────────────
+watch(isCreating, async (val) => {
+  if (val) {
+    newItemName.value = '';
+    await nextTick();
+    inputRef.value?.focus();
+  }
+});
+
+let isConfirmingCreate = false;
+
+function confirmCreate() {
+  const name = newItemName.value.trim();
+  if (!name || isCreateDuplicate.value) return;
+  isConfirmingCreate = true;
+  emit('confirm-create', props.node.path, name, creatingType.value);
+  isConfirmingCreate = false;
+}
+
+function cancelCreate() {
+  emit('cancel-create');
+}
+
+function handleCreateBlur() {
+  if (!isConfirmingCreate) cancelCreate();
+}
+
+function handleCreateKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') confirmCreate();
+  else if (e.key === 'Escape') cancelCreate();
+}
+
+// ── Rename input lifecycle ─────────────────────────────────────────
+watch(isRenaming, async (val) => {
+  if (val) {
+    renameValue.value = props.node.name;
+    await nextTick();
+    renameInputRef.value?.focus();
+    renameInputRef.value?.select();
+  }
+});
+
+let isConfirmingRename = false;
+
+function confirmRename() {
+  const newName = renameValue.value.trim();
+  if (!newName || isRenameDuplicate.value) return;
+  if (newName === props.node.name) {
+    cancelRename();
+    return;
+  }
+  isConfirmingRename = true;
+  emit('confirm-rename', props.node.path, newName);
+  isConfirmingRename = false;
+}
+
+function cancelRename() {
+  emit('cancel-rename');
+}
+
+function handleRenameBlur() {
+  if (!isConfirmingRename) cancelRename();
+}
+
+function handleRenameKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') confirmRename();
+  else if (e.key === 'Escape') cancelRename();
+}
+</script>
+
+<template>
+  <div data-tree-item>
+    <!-- Normal node row (displayed when NOT renaming this node) -->
+    <div
+      v-if="!isRenaming"
+      :draggable="true"
+      :class="cn(
+        'flex items-center gap-1 py-1 px-1 rounded-md text-sm cursor-pointer select-none transition-colors',
+        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        isSelected
+          ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+          : node.type === 'file' && node.path === currentFile
+            ? 'bg-sidebar-accent/60 text-sidebar-accent-foreground'
+            : 'text-sidebar-foreground',
+        isCut && 'opacity-50',
+        isDragging && 'opacity-30',
+        isDragOver && 'ring-1 ring-inset ring-blue-500/60 bg-blue-500/10',
+      )"
+      :style="{ paddingLeft }"
+      @click="handleClick"
+      @dblclick="handleDblClick"
+      @contextmenu="handleContextMenu"
+      @dragstart="handleDragStart"
+      @dragend="handleDragEnd"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
+      <!-- Chevron + icon for folders -->
+      <template v-if="node.type === 'folder'">
+        <ChevronDown v-if="node.isExpanded" class="w-4 h-4 flex-shrink-0 opacity-70" />
+        <ChevronRight v-else class="w-4 h-4 flex-shrink-0 opacity-70" />
+        <FolderOpen v-if="node.isExpanded" class="w-4 h-4 flex-shrink-0" />
+        <Folder v-else class="w-4 h-4 flex-shrink-0" />
+      </template>
+      <template v-else>
+        <span class="w-4 flex-shrink-0" />
+        <File class="w-4 h-4 flex-shrink-0" />
+      </template>
+      <span class="truncate">{{ node.name }}</span>
+    </div>
+
+    <!-- Rename input (replaces node row when renaming this node) -->
+    <div
+      v-if="isRenaming"
+      class="flex items-center gap-1 py-1 px-1"
+      :style="{ paddingLeft }"
+    >
+      <template v-if="node.type === 'folder'">
+        <ChevronRight class="w-4 h-4 flex-shrink-0 opacity-70" />
+        <Folder class="w-4 h-4 flex-shrink-0 text-sidebar-foreground" />
+      </template>
+      <template v-else>
+        <span class="w-4 flex-shrink-0" />
+        <File class="w-4 h-4 flex-shrink-0 text-sidebar-foreground" />
+      </template>
+      <input
+        ref="renameInputRef"
+        v-model="renameValue"
+        @keydown="handleRenameKeydown"
+        @blur="handleRenameBlur"
+        type="text"
+        :class="cn(
+          'flex-1 bg-sidebar-accent text-sidebar-accent-foreground text-sm px-2 py-0.5 rounded outline-none focus:ring-1',
+          isRenameDuplicate ? 'ring-1 ring-red-500 focus:ring-red-500' : 'focus:ring-primary'
+        )"
+      />
+    </div>
+    <!-- Rename duplicate error -->
+    <div
+      v-if="isRenaming && isRenameDuplicate"
+      class="mx-3 mt-0.5 px-2 py-1 bg-[#5a1d1d] border border-red-500 rounded text-xs text-red-200 flex items-start gap-1.5"
+      :style="{ marginLeft: paddingLeft }"
+    >
+      <TriangleAlert class="w-3.5 h-3.5 flex-shrink-0 text-red-400 mt-0.5" />
+      <span>A file or folder <strong>{{ renameValue.trim() }}</strong> already exists. Please choose a different name.</span>
+    </div>
+
+    <!-- Children (only rendered for expanded folders) -->
+    <template v-if="node.type === 'folder' && node.isExpanded">
+      <!-- Inline creation input (first child position) -->
+      <div v-if="isCreating" class="mt-0.5">
+        <div
+          class="flex items-center gap-1 py-1 px-1"
+          :style="{ paddingLeft: childPaddingLeft }"
+        >
+          <span class="w-4 flex-shrink-0" />
+          <File v-if="creatingType === 'file'" class="w-4 h-4 flex-shrink-0 text-sidebar-foreground" />
+          <Folder v-else class="w-4 h-4 flex-shrink-0 text-sidebar-foreground" />
+          <input
+            ref="inputRef"
+            v-model="newItemName"
+            @keydown="handleCreateKeydown"
+            @blur="handleCreateBlur"
+            type="text"
+            :placeholder="creatingType === 'file' ? 'filename.ext' : 'foldername'"
+            :class="cn(
+              'flex-1 bg-sidebar-accent text-sidebar-accent-foreground text-sm px-2 py-0.5 rounded outline-none focus:ring-1',
+              isCreateDuplicate ? 'ring-1 ring-red-500 focus:ring-red-500' : 'focus:ring-primary'
+            )"
+          />
+        </div>
+        <!-- Duplicate error -->
+        <div
+          v-if="isCreateDuplicate"
+          class="mx-3 mt-0.5 px-2 py-1 bg-[#5a1d1d] border border-red-500 rounded text-xs text-red-200 flex items-start gap-1.5"
+          :style="{ marginLeft: childPaddingLeft }"
+        >
+          <TriangleAlert class="w-3.5 h-3.5 flex-shrink-0 text-red-400 mt-0.5" />
+          <span>A file or folder <strong>{{ newItemName.trim() }}</strong> already exists. Please choose a different name.</span>
+        </div>
+      </div>
+
+      <!-- Recursive children -->
+      <FileTreeItem
+        v-for="child in node.children"
+        :key="child.path"
+        :node="child"
+        :depth="depth + 1"
+        :current-file="currentFile"
+        :sibling-names="(node.children || []).map(c => c.name)"
+        :creating-in="creatingIn"
+        :renaming-path="renamingPath"
+        :selected-paths="selectedPaths"
+        :clipboard-paths="clipboardPaths"
+        :clipboard-mode="clipboardMode"
+        @item-click="(e, n) => emit('item-click', e, n)"
+        @item-dblclick="(e, n) => emit('item-dblclick', e, n)"
+        @toggle-folder="emit('toggle-folder', $event)"
+        @context-menu="(e, n) => emit('context-menu', e, n)"
+        @move-item="(src, dir) => emit('move-item', src, dir)"
+        @confirm-create="(fp, name, type) => emit('confirm-create', fp, name, type)"
+        @cancel-create="emit('cancel-create')"
+        @confirm-rename="(op, nn) => emit('confirm-rename', op, nn)"
+        @cancel-rename="emit('cancel-rename')"
+        @delete-item="emit('delete-item', $event)"
+      />
+    </template>
+  </div>
+</template>
diff --git a/src/components/Editor/FolderContextMenu.vue b/src/components/Editor/FolderContextMenu.vue
new file mode 100644
index 0000000..15dcdcf
--- /dev/null
+++ b/src/components/Editor/FolderContextMenu.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import {
+  FilePlus,
+  FolderPlus,
+  Pencil,
+  Trash2,
+  Scissors,
+  Copy,
+  ClipboardPaste,
+  Link,
+} from 'lucide-vue-next';
+import { shortcuts } from '@/composable/usePlatform';
+import { ref, onMounted, nextTick } from 'vue';
+
+// ── Props ──────────────────────────────────────────────────────────
+interface Props {
+  x: number;
+  y: number;
+  /** null when right-clicking on empty sidebar space (background context) */
+  nodeType: 'file' | 'folder' | null;
+  hasClipboard?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hasClipboard: false,
+});
+
+const emit = defineEmits<{
+  'cut': [];
+  'copy': [];
+  'paste': [];
+  'copy-path': [];
+  'copy-relative-path': [];
+  'new-file': [];
+  'new-folder': [];
+  'rename': [];
+  'delete': [];
+  'close': [];
+}>();
+
+// ── Viewport-aware positioning ─────────────────────────────────────
+const menuRef = ref<HTMLDivElement | null>(null);
+const adjustedX = ref(props.x);
+const adjustedY = ref(props.y);
+
+onMounted(async () => {
+  await nextTick();
+  if (!menuRef.value) return;
+
+  const rect = menuRef.value.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const padding = 8;
+
+  // Flip left if menu overflows right edge
+  if (props.x + rect.width + padding > vw) {
+    adjustedX.value = Math.max(padding, props.x - rect.width);
+  }
+
+  // Flip up if menu overflows bottom edge
+  if (props.y + rect.height + padding > vh) {
+    adjustedY.value = Math.max(padding, props.y - rect.height);
+  }
+});
+
+// ── Helpers ────────────────────────────────────────────────────────
+/** Whether the menu was opened on a specific file/folder node */
+const hasNode = props.nodeType !== null;
+
+type Action = 'cut' | 'copy' | 'paste' | 'copy-path' | 'copy-relative-path'
+  | 'new-file' | 'new-folder' | 'rename' | 'delete';
+
+function handleAction(action: Action) {
+  emit(action as 'cut');
+  emit('close');
+}
+
+function handleClickOutside(e: MouseEvent) {
+  if ((e.target as HTMLElement).classList.contains('context-menu-backdrop')) {
+    emit('close');
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="context-menu-backdrop"
+      @mousedown="handleClickOutside"
+      @contextmenu.prevent="emit('close')"
+    >
+      <div
+        ref="menuRef"
+        class="context-menu"
+        :style="{ left: adjustedX + 'px', top: adjustedY + 'px' }"
+        @keydown.escape="emit('close')"
+      >
+        <!-- File/folder-specific items (hidden for background context menu) -->
+        <template v-if="hasNode">
+          <!-- Cut / Copy -->
+          <button class="context-menu-item" @click="handleAction('cut')">
+            <Scissors class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Cut</span>
+            <span class="context-menu-shortcut">{{ shortcuts.cut }}</span>
+          </button>
+          <button class="context-menu-item" @click="handleAction('copy')">
+            <Copy class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Copy</span>
+            <span class="context-menu-shortcut">{{ shortcuts.copy }}</span>
+          </button>
+
+          <div class="context-menu-separator" />
+
+          <!-- Copy Path / Copy Relative Path -->
+          <button class="context-menu-item" @click="handleAction('copy-path')">
+            <Link class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Copy Path</span>
+            <span class="context-menu-shortcut">{{ shortcuts.copyPath }}</span>
+          </button>
+          <button class="context-menu-item" @click="handleAction('copy-relative-path')">
+            <Link class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Copy Relative Path</span>
+            <span class="context-menu-shortcut">{{ shortcuts.copyRelativePath }}</span>
+          </button>
+
+          <div class="context-menu-separator" />
+
+          <!-- Folder-only: New File / New Folder -->
+          <template v-if="nodeType === 'folder'">
+            <button class="context-menu-item" @click="handleAction('new-file')">
+              <FilePlus class="w-4 h-4 flex-shrink-0" />
+              <span class="context-menu-label">New File</span>
+            </button>
+            <button class="context-menu-item" @click="handleAction('new-folder')">
+              <FolderPlus class="w-4 h-4 flex-shrink-0" />
+              <span class="context-menu-label">New Folder</span>
+            </button>
+            <div class="context-menu-separator" />
+          </template>
+        </template>
+
+        <!-- New File / New Folder for background (root-level creation) -->
+        <template v-if="!hasNode">
+          <button class="context-menu-item" @click="handleAction('new-file')">
+            <FilePlus class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">New File</span>
+          </button>
+          <button class="context-menu-item" @click="handleAction('new-folder')">
+            <FolderPlus class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">New Folder</span>
+          </button>
+          <div v-if="hasClipboard" class="context-menu-separator" />
+        </template>
+
+        <!-- Paste (always shown if clipboard has content) -->
+        <template v-if="hasClipboard">
+          <button class="context-menu-item" @click="handleAction('paste')">
+            <ClipboardPaste class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Paste</span>
+            <span class="context-menu-shortcut">{{ shortcuts.paste }}</span>
+          </button>
+          <div v-if="hasNode" class="context-menu-separator" />
+        </template>
+
+        <!-- Rename / Delete (only for file/folder nodes) -->
+        <template v-if="hasNode">
+          <button class="context-menu-item" @click="handleAction('rename')">
+            <Pencil class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Rename</span>
+          </button>
+          <button class="context-menu-item context-menu-item--danger" @click="handleAction('delete')">
+            <Trash2 class="w-4 h-4 flex-shrink-0" />
+            <span class="context-menu-label">Delete</span>
+          </button>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.context-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.context-menu {
+  position: fixed;
+  min-width: 220px;
+  background: var(--color-sidebar);
+  border: 1px solid var(--color-sidebar-border);
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 1001;
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-sidebar-foreground);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.context-menu-item:hover {
+  background: var(--color-sidebar-accent);
+  color: var(--color-sidebar-accent-foreground);
+}
+
+.context-menu-item--danger:hover {
+  background: rgba(220, 38, 38, 0.2);
+  color: #f87171;
+}
+
+.context-menu-label {
+  flex: 1;
+  text-align: left;
+}
+
+.context-menu-shortcut {
+  font-size: 12px;
+  color: var(--color-muted-foreground);
+  opacity: 0.6;
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.context-menu-separator {
+  height: 1px;
+  background: var(--color-sidebar-border);
+  margin: 4px 0;
+}
+</style>
diff --git a/src/components/ui/resizable/ResizableHandle.vue b/src/components/ui/resizable/ResizableHandle.vue
new file mode 100644
index 0000000..1ba7af1
--- /dev/null
+++ b/src/components/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { GripVertical } from "lucide-vue-next"
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/src/components/ui/resizable/ResizablePanelGroup.vue b/src/components/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 0000000..a555d40
--- /dev/null
+++ b/src/components/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/src/components/ui/resizable/index.ts b/src/components/ui/resizable/index.ts
new file mode 100644
index 0000000..c2826b7
--- /dev/null
+++ b/src/components/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from "./ResizableHandle.vue"
+export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"
+export { SplitterPanel as ResizablePanel } from "reka-ui"
diff --git a/src/components/ui/scroll-area/ScrollArea.vue b/src/components/ui/scroll-area/ScrollArea.vue
index 4bae71b..ef4126e 100644
--- a/src/components/ui/scroll-area/ScrollArea.vue
+++ b/src/components/ui/scroll-area/ScrollArea.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 import { reactiveOmit } from "@vueuse/core"
+import type { ScrollAreaRootProps } from "reka-ui"
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
-
   ScrollAreaViewport,
 } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue"
 import ScrollBar from "./ScrollBar.vue"
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
diff --git a/src/composable/useEditorTabs.ts b/src/composable/useEditorTabs.ts
new file mode 100644
index 0000000..52db1fd
--- /dev/null
+++ b/src/composable/useEditorTabs.ts
@@ -0,0 +1,123 @@
+import { ref, computed } from 'vue';
+
+// ── State ──────────────────────────────────────────────────────────
+const openFiles = ref<string[]>([]);
+const _activeFile = ref<string>('');
+const _previewFile = ref<string>(''); // The path of the currently active "preview" tab
+
+// ── Derived ────────────────────────────────────────────────────────
+export const activeFile = computed(() => _activeFile.value);
+export const openFilesList = computed(() => openFiles.value);
+export const previewFile = computed(() => _previewFile.value);
+
+// ── Actions ────────────────────────────────────────────────────────
+
+/**
+ * Open a file in the tab bar.
+ * @param path The file path to open
+ * @param asPreview If true, it replaces the existing preview tab.
+ *                  If false, it pins the tab.
+ * @returns the path opened
+ */
+export function openFile(path: string, asPreview = true): string {
+  const index = openFiles.value.indexOf(path);
+
+  if (index !== -1) {
+    // Already open. Just make it active.
+    _activeFile.value = path;
+    // If opened permanently (e.g. via drag), un-preview it if it was a preview.
+    if (!asPreview && _previewFile.value === path) {
+      _previewFile.value = '';
+    }
+    return path;
+  }
+
+  // File is not open yet.
+  if (asPreview) {
+    if (_previewFile.value) {
+      // Replace existing preview tab
+      const pIdx = openFiles.value.indexOf(_previewFile.value);
+      if (pIdx !== -1) {
+        openFiles.value.splice(pIdx, 1, path);
+      } else {
+        openFiles.value.push(path);
+      }
+    } else {
+      openFiles.value.push(path);
+    }
+    _previewFile.value = path;
+  } else {
+    // Open as pinned
+    openFiles.value.push(path);
+  }
+
+  _activeFile.value = path;
+  return path;
+}
+
+/**
+ * Pins the currently active preview tab, making it permanent.
+ */
+export function pinCurrentTab() {
+  if (_activeFile.value && _previewFile.value === _activeFile.value) {
+    _previewFile.value = '';
+  }
+}
+
+/**
+ * Close a tab. Switches focus to the nearest remaining tab.
+ * Returns the new active file path (empty string if no tabs remain).
+ */
+export function closeFile(path: string): string {
+  if (_previewFile.value === path) _previewFile.value = '';
+  const idx = openFiles.value.indexOf(path);
+  if (idx === -1) return _activeFile.value;
+
+  openFiles.value.splice(idx, 1);
+
+  if (openFiles.value.length === 0) {
+    _activeFile.value = '';
+  } else if (_activeFile.value === path) {
+    // Prefer the tab to the right, fall back to the one to the left
+    const nextIdx = Math.min(idx, openFiles.value.length - 1);
+    _activeFile.value = openFiles.value[nextIdx]!;
+  }
+
+  return _activeFile.value;
+}
+
+/**
+ * Switch which tab is visible without changing the open files list.
+ */
+export function setActiveFile(path: string) {
+  if (openFiles.value.includes(path)) {
+    _activeFile.value = path;
+  }
+}
+
+/**
+ * When a file is renamed/moved, update the open tab.
+ */
+export function renameOpenFile(oldPath: string, newPath: string) {
+  const idx = openFiles.value.indexOf(oldPath);
+  if (idx !== -1) {
+    openFiles.value[idx] = newPath;
+    if (_activeFile.value === oldPath) _activeFile.value = newPath;
+  }
+}
+
+/**
+ * When a file is deleted, close its tab if open.
+ */
+export function closeFileIfOpen(path: string): string {
+  if (openFiles.value.includes(path)) return closeFile(path);
+  return _activeFile.value;
+}
+
+/** Initialise from persisted state (called once on mount) */
+export function initTabs(files: string[], active: string) {
+  openFiles.value = files;
+  _activeFile.value = active;
+  // Assume saved tabs are pinned
+  _previewFile.value = '';
+}
diff --git a/src/composable/useFileClipboard.ts b/src/composable/useFileClipboard.ts
new file mode 100644
index 0000000..852eb34
--- /dev/null
+++ b/src/composable/useFileClipboard.ts
@@ -0,0 +1,82 @@
+import { ref, computed } from 'vue';
+
+/**
+ * Composable for internal file clipboard operations (Cut / Copy / Paste)
+ * and system clipboard path copying.
+ */
+export function useFileClipboard() {
+  const clipboardPaths = ref<string[]>([]);
+  const clipboardMode = ref<'cut' | 'copy' | null>(null);
+
+  const hasClipboard = computed(() => clipboardPaths.value.length > 0 && clipboardMode.value !== null);
+
+  // ── Internal clipboard (Cut / Copy / Paste) ────────────────────
+
+  function cut(paths: string[]) {
+    clipboardPaths.value = [...paths];
+    clipboardMode.value = 'cut';
+  }
+
+  function copy(paths: string[]) {
+    clipboardPaths.value = [...paths];
+    clipboardMode.value = 'copy';
+  }
+
+  function clearClipboard() {
+    clipboardPaths.value = [];
+    clipboardMode.value = null;
+  }
+
+  /**
+   * Consume clipboard for a paste operation.
+   * Returns the paths and mode, then clears clipboard if it was a cut.
+   */
+  function consumeForPaste(): { paths: string[]; mode: 'cut' | 'copy' } | null {
+    if (!clipboardMode.value || clipboardPaths.value.length === 0) return null;
+
+    const result = {
+      paths: [...clipboardPaths.value],
+      mode: clipboardMode.value,
+    };
+
+    // After pasting a cut, clear the clipboard (one-time move)
+    if (clipboardMode.value === 'cut') {
+      clearClipboard();
+    }
+    // After pasting a copy, keep clipboard (can paste again)
+
+    return result;
+  }
+
+  // ── System clipboard (Copy Path) ───────────────────────────────
+
+  async function copyPathToClipboard(path: string) {
+    try {
+      await navigator.clipboard.writeText(path);
+    } catch (err) {
+      console.error('Failed to copy path to clipboard:', err);
+    }
+  }
+
+  async function copyRelativePathToClipboard(path: string) {
+    // Remove leading "/" to make it relative
+    const relative = path.startsWith('/') ? path.slice(1) : path;
+    try {
+      await navigator.clipboard.writeText(relative);
+    } catch (err) {
+      console.error('Failed to copy relative path to clipboard:', err);
+    }
+  }
+
+  return {
+    clipboardPaths,
+    clipboardMode,
+    hasClipboard,
+    cut,
+    copy,
+    clearClipboard,
+    consumeForPaste,
+    copyPathToClipboard,
+    copyRelativePathToClipboard,
+  };
+}
diff --git a/src/composable/useFileDragDrop.ts b/src/composable/useFileDragDrop.ts
new file mode 100644
index 0000000..4df3692
--- /dev/null
+++ b/src/composable/useFileDragDrop.ts
@@ -0,0 +1,51 @@
+import { ref } from 'vue';
+
+const DRAG_DATA_KEY = 'text/x-file-path';
+
+// ── Module-level singleton drag state ──────────────────────────────
+// Shared across all FileTreeItem instances so any item can see who is
+// being dragged and which folder is currently hovered as drop target.
+export const draggedPath = ref<string | null>(null);
+export const dragOverPath = ref<string | null>(null);
+
+// ── Drop guard ─────────────────────────────────────────────────────
+
+/**
+ * Returns true when dropping srcPath onto targetDir would be a no-op or
+ * illegal operation (dropping into the same parent dir, or a folder into
+ * itself / one of its own descendants).
+ */
+export function isInvalidDrop(srcPath: string, targetDir: string): boolean {
+  const srcDir = srcPath.substring(0, srcPath.lastIndexOf('/')) || '/';
+  if (srcDir === targetDir) return true; // already there
+  if (targetDir === srcPath) return true; // dropping onto itself
+  if (targetDir.startsWith(srcPath + '/')) return true; // into a descendant
+  return false;
+}
+
+// ── Drag lifecycle helpers ─────────────────────────────────────────
+
+export function startFileDrag(path: string, event: DragEvent) {
+  draggedPath.value = path;
+  event.dataTransfer!.effectAllowed = 'move';
+  event.dataTransfer!.setData(DRAG_DATA_KEY, path);
+}
+
+export function endFileDrag() {
+  draggedPath.value = null;
+  dragOverPath.value = null;
+}
+
+export function setFileDragOver(path: string, event: DragEvent) {
+  event.preventDefault();
+  event.dataTransfer!.dropEffect = 'move';
+  dragOverPath.value = path;
+}
+
+export function clearFileDragOver() {
+  dragOverPath.value = null;
+}
+
+export function getFileDragPath(event: DragEvent): string | null {
+  return event.dataTransfer?.getData(DRAG_DATA_KEY) ?? null;
+}
diff --git a/src/composable/useFileSelection.ts b/src/composable/useFileSelection.ts
new file mode 100644
index 0000000..c01e266
--- /dev/null
+++ b/src/composable/useFileSelection.ts
@@ -0,0 +1,137 @@
+import { ref, computed } from 'vue';
+import type { FileTreeNode } from '@/types/FileTree';
+import { isMac } from './usePlatform';
+
+/**
+ * Composable for VS Code-style multi-file selection.
+ *
+ * Supports:
+ * - Single click → select one item (clears previous)
+ * - Cmd/Ctrl+Click → toggle individual item (additive)
+ * - Shift+Click → select contiguous range from anchor
+ */
+export function useFileSelection() {
+  const selectedPaths = ref<Set<string>>(new Set());
+  const lastClickedPath = ref<string | null>(null);
+
+  // ── Helpers ────────────────────────────────────────────────────────
+
+  /**
+   * Flatten the visible tree into an ordered path list.
+   * Only children of expanded folders are included.
+   */
+  function getVisiblePaths(tree: FileTreeNode[]): string[] {
+    const paths: string[] = [];
+    function walk(nodes: FileTreeNode[]) {
+      for (const node of nodes) {
+        paths.push(node.path);
+        if (node.type === 'folder' && node.isExpanded && node.children) {
+          walk(node.children);
+        }
+      }
+    }
+    walk(tree);
+    return paths;
+  }
+
+  // ── Selection API ──────────────────────────────────────────────────
+
+  function isSelected(path: string): boolean {
+    return selectedPaths.value.has(path);
+  }
+
+  function clearSelection() {
+    selectedPaths.value = new Set();
+    lastClickedPath.value = null;
+  }
+
+  function selectSingle(path: string) {
+    selectedPaths.value = new Set([path]);
+    lastClickedPath.value = path;
+  }
+
+  function selectAll(tree: FileTreeNode[]) {
+    const all = getVisiblePaths(tree);
+    selectedPaths.value = new Set(all);
+  }
+
+  /**
+   * Core click handler — call this from the item click event.
+   * Returns `true` if this was a plain single-click (caller may open file).
+   */
+  function handleItemClick(
+    path: string,
+    event: MouseEvent,
+    tree: FileTreeNode[],
+  ): boolean {
+    const isMetaKey = isMac ? event.metaKey : event.ctrlKey;
+
+    // ── Cmd/Ctrl+Click: toggle individual ────────────────────────
+    if (isMetaKey && !event.shiftKey) {
+      const next = new Set(selectedPaths.value);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      selectedPaths.value = next;
+      lastClickedPath.value = path;
+      return false; // multi-select — don't open file
+    }
+
+    // ── Shift+Click: range selection ─────────────────────────────
+    if (event.shiftKey && !isMetaKey) {
+      const anchor = lastClickedPath.value;
+      if (!anchor) {
+        selectSingle(path);
+        return false;
+      }
+
+      const visible = getVisiblePaths(tree);
+      const anchorIdx = visible.indexOf(anchor);
+      const targetIdx = visible.indexOf(path);
+
+      if (anchorIdx === -1 || targetIdx === -1) {
+        selectSingle(path);
+        return false;
+      }
+
+      const start = Math.min(anchorIdx, targetIdx);
+      const end = Math.max(anchorIdx, targetIdx);
+      const range = visible.slice(start, end + 1);
+
+      selectedPaths.value = new Set(range);
+      // Keep the original anchor (don't update lastClickedPath)
+      return false;
+    }
+
+    // ── Plain click: single select ───────────────────────────────
+    selectSingle(path);
+    return true; // single click — caller may open file
+  }
+
+  /**
+   * Call when the context menu opens on a specific node.
+   * If the node isn't already selected, select only that node.
+   */
+  function ensureSelected(path: string) {
+    if (!selectedPaths.value.has(path)) {
+      selectSingle(path);
+    }
+  }
+
+  const selectedCount = computed(() => selectedPaths.value.size);
+
+  return {
+    selectedPaths,
+    lastClickedPath,
+    selectedCount,
+    isSelected,
+    clearSelection,
+    selectSingle,
+    selectAll,
+    handleItemClick,
+    ensureSelected,
+    getVisiblePaths,
+  };
+}
diff --git a/src/composable/usePlatform.ts b/src/composable/usePlatform.ts
new file mode 100644
index 0000000..732ef16
--- /dev/null
+++ b/src/composable/usePlatform.ts
@@ -0,0 +1,44 @@
+/**
+ * Platform detection helper for keyboard shortcut display.
+ * Uses Mac symbols (⌘, ⌥, ⇧) on macOS, text labels (Ctrl, Alt, Shift) elsewhere.
+ */
+
+export const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+export interface ShortcutKeys {
+  meta?: boolean;   // ⌘ / Ctrl
+  alt?: boolean;    // ⌥ / Alt
+  shift?: boolean;  // ⇧ / Shift
+  key: string;      // The actual key (e.g. 'X', 'C', 'V')
+}
+
+/**
+ * Format a keyboard shortcut for display.
+ * On Mac: ⌥⇧⌘C  |  On Windows/Linux: Ctrl+Shift+Alt+C
+ */
+export function formatShortcut(keys: ShortcutKeys): string {
+  if (isMac) {
+    let result = '';
+    if (keys.alt) result += '⌥';
+    if (keys.shift) result += '⇧';
+    if (keys.meta) result += '⌘';
+    result += keys.key;
+    return result;
+  }
+
+  const parts: string[] = [];
+  if (keys.meta) parts.push('Ctrl');
+  if (keys.shift) parts.push('Shift');
+  if (keys.alt) parts.push('Alt');
+  parts.push(keys.key);
+  return parts.join('+');
+}
+
+/** Pre-formatted shortcuts for common actions */
+export const shortcuts = {
+  cut:              formatShortcut({ meta: true, key: 'X' }),
+  copy:             formatShortcut({ meta: true, key: 'C' }),
+  paste:            formatShortcut({ meta: true, key: 'V' }),
+  copyPath:         formatShortcut({ meta: true, alt: true, key: 'C' }),
+  copyRelativePath: formatShortcut({ meta: true, alt: true, shift: true, key: 'C' }),
+} as const;
diff --git a/src/router/index.ts b/src/router/index.ts
index 1c6fba1..6832c8b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,10 @@ const router = createRouter({
       name: 'network',
       component: () => import('@/views/NetworkInspector/NetworkInspectorView.vue'),
     },
+    { path: '/editor',
+      name: 'editor',
+      component: () => import('@/views/Editor/EditorViewWrapper.vue'),
+    },
     {
       path: '',
       name: 'Editor',
diff --git a/src/types/FileTree.ts b/src/types/FileTree.ts
new file mode 100644
index 0000000..4042078
--- /dev/null
+++ b/src/types/FileTree.ts
@@ -0,0 +1,7 @@
+export interface FileTreeNode {
+  name: string;
+  path: string;
+  type: 'file' | 'folder';
+  children?: FileTreeNode[];
+  isExpanded?: boolean;
+}
diff --git a/src/views/Editor/EditorView.vue b/src/views/Editor/EditorView.vue
new file mode 100644
index 0000000..1608e76
--- /dev/null
+++ b/src/views/Editor/EditorView.vue
@@ -0,0 +1,517 @@
+<script setup lang="ts">
+import { lazy, Workspace } from 'modern-monaco';
+import { ref, onMounted } from 'vue';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '@/components/ui/resizable';
+import EditorSidebar from '@/components/Editor/EditorSidebar.vue';
+import EditorTabs from '@/components/Editor/EditorTabs.vue';
+import type { FileTreeNode } from '@/types/FileTree';
+import { getFileDragPath } from '@/composable/useFileDragDrop';
+import * as tabs from '@/composable/useEditorTabs';
+
+// ── Workspace setup ────────────────────────────────────────────────
+const workspace = new Workspace({
+  initialFiles: {
+    "index.html": `<html><body>...</body></html>`,
+    "main.js": `console.log("Hello, world!")`,
+  },
+  entryFile: "main.js",
+});
+
+// ── Expanded state persistence ─────────────────────────────────────
+const EXPANDED_KEY = 'editor-expanded-folders';
+
+function getExpandedPaths(): Set<string> {
+  try {
+    const raw = localStorage.getItem(EXPANDED_KEY);
+    return raw ? new Set(JSON.parse(raw)) : new Set();
+  } catch {
+    return new Set();
+  }
+}
+
+function saveExpandedPaths() {
+  const paths: string[] = [];
+  function collect(nodes: FileTreeNode[]) {
+    for (const n of nodes) {
+      if (n.type === 'folder' && n.isExpanded) paths.push(n.path);
+      if (n.children) collect(n.children);
+    }
+  }
+  collect(tree.value);
+  localStorage.setItem(EXPANDED_KEY, JSON.stringify(paths));
+}
+
+// ── Reactive state ─────────────────────────────────────────────────
+const tree = ref<FileTreeNode[]>([]);
+const isEditorDragOver = ref(false);
+
+const EDITOR_OPEN_FILES_KEY = 'editor-open-files';
+const EDITOR_CURRENT_FILE_KEY = 'editor-current-file';
+
+function saveTabs() {
+  localStorage.setItem(EDITOR_OPEN_FILES_KEY, JSON.stringify(tabs.openFilesList.value));
+  localStorage.setItem(EDITOR_CURRENT_FILE_KEY, tabs.activeFile.value);
+}
+
+// ── Tree utilities ─────────────────────────────────────────────────
+function findNode(nodes: FileTreeNode[], path: string): FileTreeNode | undefined {
+  for (const node of nodes) {
+    if (node.path === path) return node;
+    if (node.children) {
+      const found = findNode(node.children, path);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+function findFirstFile(nodes: FileTreeNode[]): string | null {
+  for (const node of nodes) {
+    if (node.type === 'file') return node.path;
+    if (node.children) {
+      const found = findFirstFile(node.children);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/** Expand all parent folders for a given path and persist */
+function expandParents(filePath: string) {
+  const parts = filePath.split('/').filter(Boolean);
+  let currentPath = '';
+  for (let i = 0; i < parts.length - 1; i++) {
+    currentPath += '/' + parts[i];
+    const node = findNode(tree.value, currentPath);
+    if (node && node.type === 'folder') node.isExpanded = true;
+  }
+  saveExpandedPaths();
+}
+
+// ── Tree loading ───────────────────────────────────────────────────
+async function loadTree(dirPath: string, expandedPaths: Set<string>): Promise<FileTreeNode[]> {
+  try {
+    const entries = await workspace.fs.readDirectory(dirPath);
+    const nodes: FileTreeNode[] = [];
+
+    for (const [rawName, type] of entries) {
+      const name = decodeURIComponent(rawName);
+      const path = dirPath === '/' ? `/${name}` : `${dirPath}/${name}`;
+
+      if (type === 2) {
+        const children = await loadTree(path, expandedPaths);
+        const existing = findNode(tree.value, path);
+        nodes.push({
+          name,
+          path,
+          type: 'folder',
+          children,
+          isExpanded: existing?.isExpanded ?? expandedPaths.has(path),
+        });
+      } else if (type === 1) {
+        nodes.push({ name, path, type: 'file' });
+      }
+    }
+
+    // Sort: folders first, then files, alphabetically
+    nodes.sort((a, b) => {
+      if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    return nodes;
+  } catch (error) {
+    console.error(`Failed to load tree for ${dirPath}:`, error);
+    return [];
+  }
+}
+
+async function reloadTree() {
+  const expandedPaths = getExpandedPaths();
+  tree.value = await loadTree('/', expandedPaths);
+}
+
+// ── Event handlers ─────────────────────────────────────────────────
+
+async function handleFileClick(filePath: string) {
+  tabs.openFile(filePath, true); // true = open as preview
+  await workspace.openTextDocument(filePath);
+  saveTabs();
+}
+
+async function handleFileDblClick(filePath: string) {
+  // Opening again as 'not preview' pins it
+  tabs.openFile(filePath, false);
+  await workspace.openTextDocument(filePath);
+  saveTabs();
+}
+
+async function handleTabClick(filePath: string) {
+  tabs.setActiveFile(filePath);
+  await workspace.openTextDocument(filePath);
+  saveTabs();
+}
+
+async function handleTabDblClick() {
+  tabs.pinCurrentTab();
+  saveTabs();
+}
+
+async function handleTabClose(filePath: string) {
+  const previousActive = tabs.activeFile.value;
+  const newActive = tabs.closeFile(filePath);
+  saveTabs();
+
+  if (previousActive !== newActive) {
+    if (newActive) {
+      await workspace.openTextDocument(newActive);
+    } else {
+      // Clear the editor or handle no open files appropriately
+      // (modern-monaco defaults to empty if the path is invalid or we could just open nothing)
+      // For now, if no tabs are open, it stays on the last view, which is standard.
+    }
+  }
+}
+
+function handleEditorDragOver(e: DragEvent) {
+  if (getFileDragPath(e)) {
+    e.preventDefault();
+    isEditorDragOver.value = true;
+  }
+}
+
+function handleEditorDragLeave() {
+  isEditorDragOver.value = false;
+}
+
+async function handleEditorDrop(e: DragEvent) {
+  e.preventDefault();
+  isEditorDragOver.value = false;
+
+  const path = getFileDragPath(e);
+  if (path && !path.endsWith('/')) { // Only open files
+    const node = findNode(tree.value, path);
+    if (node && node.type === 'file') {
+      tabs.openFile(path, false); // false = open as pinned
+      await workspace.openTextDocument(path);
+      saveTabs();
+    }
+  }
+}
+
+function handleToggleFolder(folderPath: string) {
+  const node = findNode(tree.value, folderPath);
+  if (node && node.type === 'folder') {
+    node.isExpanded = !node.isExpanded;
+    saveExpandedPaths();
+  }
+}
+
+/** Ensure a folder is expanded (no toggle — used by context menu creation) */
+function handleEnsureExpand(folderPath: string) {
+  const node = findNode(tree.value, folderPath);
+  if (node && node.type === 'folder' && !node.isExpanded) {
+    node.isExpanded = true;
+    saveExpandedPaths();
+  }
+}
+
+async function handleCreateFile(filename: string) {
+  try {
+    const path = `/${filename}`;
+    await workspace.fs.writeFile(path, '');
+    await reloadTree();
+
+    tabs.openFile(path);
+    await workspace.openTextDocument(path);
+    saveTabs();
+  } catch (error) {
+    console.error('Failed to create file:', error);
+  }
+}
+
+async function handleCreateFolder(foldername: string) {
+  try {
+    const path = `/${foldername}`;
+    await workspace.fs.createDirectory(path);
+    await reloadTree();
+    const node = findNode(tree.value, path);
+    if (node) node.isExpanded = true;
+    saveExpandedPaths();
+  } catch (error) {
+    console.error('Failed to create folder:', error);
+  }
+}
+
+async function handleCreateFileInFolder(folderPath: string, filename: string) {
+  try {
+    const filePath = `${folderPath}/${filename}`;
+    await workspace.fs.writeFile(filePath, '');
+    await reloadTree();
+    // Keep parent expanded
+    const parent = findNode(tree.value, folderPath);
+    if (parent) parent.isExpanded = true;
+    saveExpandedPaths();
+
+    // Open the new file
+    tabs.openFile(filePath);
+    await workspace.openTextDocument(filePath);
+    saveTabs();
+  } catch (error) {
+    console.error('Failed to create file in folder:', error);
+  }
+}
+
+async function handleCreateFolderInFolder(folderPath: string, foldername: string) {
+  try {
+    const newPath = `${folderPath}/${foldername}`;
+    await workspace.fs.createDirectory(newPath);
+    await reloadTree();
+    // Keep parent expanded + expand new folder
+    const parent = findNode(tree.value, folderPath);
+    if (parent) parent.isExpanded = true;
+    const newFolder = findNode(tree.value, newPath);
+    if (newFolder) newFolder.isExpanded = true;
+    saveExpandedPaths();
+  } catch (error) {
+    console.error('Failed to create folder in folder:', error);
+  }
+}
+
+async function handleRenameItem(oldPath: string, newName: string) {
+  try {
+    const parts = oldPath.split('/');
+    parts[parts.length - 1] = newName;
+    const newPath = parts.join('/');
+
+    await workspace.fs.rename(oldPath, newPath);
+    await reloadTree();
+
+    tabs.renameOpenFile(oldPath, newPath);
+    saveTabs();
+
+    if (tabs.activeFile.value === newPath) {
+      await workspace.openTextDocument(newPath);
+    }
+  } catch (error) {
+    console.error('Failed to rename:', error);
+  }
+}
+
+async function handleDeleteItem(path: string) {
+  try {
+    await workspace.fs.delete(path, { recursive: true });
+    await reloadTree();
+    saveExpandedPaths();
+
+    // If it's a folder, we might need to close multiple tabs
+    // For now, let's close exactly the path or any paths under it
+    const openFilesCopy = [...tabs.openFilesList.value];
+    let changedActive = false;
+    for (const openPath of openFilesCopy) {
+      if (openPath === path || openPath.startsWith(path + '/')) {
+        const oldActive = tabs.activeFile.value;
+        const newActive = tabs.closeFile(openPath);
+        if (oldActive !== newActive) {
+          changedActive = true;
+        }
+      }
+    }
+
+    saveTabs();
+    if (changedActive && tabs.activeFile.value) {
+      await workspace.openTextDocument(tabs.activeFile.value);
+    }
+  } catch (error) {
+    console.error('Failed to delete:', error);
+  }
+}
+
+async function handlePasteItems(targetPath: string, sourcePaths: string[], mode: 'cut' | 'copy') {
+  try {
+    const targetNode = findNode(tree.value, targetPath);
+    const targetDir = targetNode?.type === 'folder'
+      ? targetPath
+      : targetPath.substring(0, targetPath.lastIndexOf('/')) || '/';
+
+    for (const srcPath of sourcePaths) {
+      const destPath = await resolveDestPath(srcPath, targetDir, mode);
+      if (!destPath) continue;
+
+      if (mode === 'cut') {
+        await workspace.fs.rename(srcPath, destPath);
+
+        tabs.renameOpenFile(srcPath, destPath);
+        if (tabs.activeFile.value === destPath) {
+          await workspace.openTextDocument(destPath);
+        }
+      } else {
+        try {
+          const content = await workspace.fs.readFile(srcPath);
+          await workspace.fs.writeFile(destPath, content);
+        } catch {
+          await workspace.fs.createDirectory(destPath);
+        }
+      }
+    }
+
+    saveTabs();
+    await reloadTree();
+    const target = findNode(tree.value, targetDir);
+    if (target?.type === 'folder') target.isExpanded = true;
+    saveExpandedPaths();
+  } catch (error) {
+    console.error('Failed to paste items:', error);
+  }
+}
+
+async function handleMoveItem(srcPath: string, targetDir: string) {
+  await handlePasteItems(targetDir, [srcPath], 'cut');
+}
+
+/**
+ * Resolve a unique destination path for a paste.
+ * Cut to same location → skip (returns null).
+ * Name conflict → appends " copy", " copy 2", etc. with extension preserved.
+ */
+async function resolveDestPath(
+  srcPath: string,
+  targetDir: string,
+  mode: 'cut' | 'copy',
+): Promise<string | null> {
+  const fileName = srcPath.split('/').pop() ?? '';
+  const base = (targetDir === '/' ? '' : targetDir) + '/' + fileName;
+
+  if (mode === 'cut' && srcPath === base) return null;
+  if (!(await pathExists(base))) return base;
+
+  const dotIdx = fileName.lastIndexOf('.');
+  const stem = dotIdx > 0 ? fileName.slice(0, dotIdx) : fileName;
+  const ext  = dotIdx > 0 ? fileName.slice(dotIdx)  : '';
+
+  for (let n = 0; ; n++) {
+    const suffix = n === 0 ? ' copy' : ` copy ${n + 1}`;
+    const candidate = (targetDir === '/' ? '' : targetDir) + '/' + stem + suffix + ext;
+    if (!(await pathExists(candidate))) return candidate;
+  }
+}
+
+async function pathExists(path: string): Promise<boolean> {
+  try { await workspace.fs.stat(path); return true; }
+  catch { return false; }
+}
+
+// ── Initialize ─────────────────────────────────────────────────────
+lazy({ workspace });
+
+onMounted(async () => {
+  await reloadTree();
+
+  // Load tabs config
+  let savedFiles: string[] = [];
+  try {
+    const raw = localStorage.getItem(EDITOR_OPEN_FILES_KEY);
+    if (raw) savedFiles = JSON.parse(raw);
+  } catch {}
+
+  const savedActive = localStorage.getItem(EDITOR_CURRENT_FILE_KEY) || '';
+
+  // Filter out any tabs that no longer exist
+  savedFiles = savedFiles.filter(p => findNode(tree.value, p));
+  let finalActive = (savedActive && findNode(tree.value, savedActive)) ? savedActive : '';
+
+  if (savedFiles.length === 0) {
+    const firstFile = findFirstFile(tree.value);
+    const fileToOpen = workspace.entryFile ? `/${workspace.entryFile}` : firstFile;
+    if (fileToOpen && findNode(tree.value, fileToOpen)) {
+      savedFiles.push(fileToOpen);
+      finalActive = fileToOpen;
+    }
+  } else if (!finalActive) {
+    finalActive = savedFiles[0]!;
+  }
+
+  tabs.initTabs(savedFiles, finalActive);
+  if (finalActive) {
+    await workspace.openTextDocument(finalActive);
+    expandParents(finalActive);
+  }
+  saveTabs();
+});
+</script>
+
+<template>
+  <ResizablePanelGroup direction="horizontal" class="h-full">
+    <ResizablePanel :default-size="20" :min-size="15" :max-size="40">
+      <EditorSidebar
+        :tree="tree"
+        :current-file="tabs.activeFile.value"
+        @file-click="handleFileClick"
+        @file-dblclick="handleFileDblClick"
+        @toggle-folder="handleToggleFolder"
+        @ensure-expand="handleEnsureExpand"
+        @create-file="handleCreateFile"
+        @create-folder="handleCreateFolder"
+        @create-file-in-folder="handleCreateFileInFolder"
+        @create-folder-in-folder="handleCreateFolderInFolder"
+        @rename-item="handleRenameItem"
+        @delete-item="handleDeleteItem"
+        @paste-items="handlePasteItems"
+        @move-item="handleMoveItem"
+      />
+    </ResizablePanel>
+
+    <ResizableHandle />
+
+    <ResizablePanel :default-size="80">
+      <div
+        class="editor-area-wrapper flex flex-col h-full bg-[#1e1e1e] relative"
+        @dragover="handleEditorDragOver"
+        @dragleave="handleEditorDragLeave"
+        @drop="handleEditorDrop"
+      >
+        <!-- Overlay when dragging a file over the editor -->
+        <div
+          v-if="isEditorDragOver"
+          class="absolute inset-0 z-50 bg-blue-500/10 border-2 border-blue-500/50 border-dashed flex items-center justify-center pointer-events-none"
+        >
+          <div class="bg-sidebar px-4 py-2 rounded shadow-lg text-sm text-sidebar-foreground">
+            Drop to open file
+          </div>
+        </div>
+
+        <EditorTabs
+          v-if="tabs.openFilesList.value.length > 0"
+          :open-files="tabs.openFilesList.value"
+          :active-file="tabs.activeFile.value"
+          :preview-tab="tabs.previewFile.value"
+          @tab-click="handleTabClick"
+          @tab-dblclick="handleTabDblClick"
+          @tab-close="handleTabClose"
+        />
+
+        <div
+          class="flex-1 min-h-0 editor-container"
+          :style="{ visibility: tabs.activeFile.value ? 'visible' : 'hidden' }"
+        >
+          <monaco-editor></monaco-editor>
+        </div>
+
+        <div v-show="!tabs.activeFile.value" class="absolute inset-0 top-[37px] flex items-center justify-center pointer-events-none opacity-50 select-none bg-[#1e1e1e]">
+           No file is open
+        </div>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>
+
+<style scoped>
+.editor-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/Editor/EditorViewWrapper.vue b/src/views/Editor/EditorViewWrapper.vue
new file mode 100644
index 0000000..8abad79
--- /dev/null
+++ b/src/views/Editor/EditorViewWrapper.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import EditorView from './EditorView.vue';
+</script>
+
+<template>
+  <EditorView />
+</template>