Upload 19 files

static/app.js

@@ -1,951 +1,457 @@
-// ═══════════════════════════════════════════════
-//  HugPanel — Frontend Controller
-// ═══════════════════════════════════════════════
-
-// ── State ─────────────────────────────────────
-let currentZone = null;
-let currentPath = "";
-let currentEditFile = null;
-let cmEditor = null; // CodeMirror instance
-let term = null;
-let termSocket = null;
-let fitAddon = null;
-let termDataDisposable = null;
-let termResizeDisposable = null;
-let termCurrentZone = null; // tracks which zone the terminal is connected to
-let promptResolve = null;
-let confirmResolve = null;
-const mobileQuery = "(max-width: 768px), (pointer: coarse)";
-let isMobile = window.matchMedia(mobileQuery).matches;
-let currentMobileTab = "files";
-
-// ── Init ──────────────────────────────────────
-document.addEventListener("DOMContentLoaded", () => {
-    lucide.createIcons();
-    loadZones();
-    initResizers();
-    bindEvents();
-
-    // Track mobile state on resize / input change
-    const mq = window.matchMedia(mobileQuery);
-    mq.addEventListener("change", (e) => {
-        isMobile = e.matches;
-        document.body.classList.toggle("is-mobile", isMobile);
-        if (!isMobile) {
-            // Exiting mobile: reset panel visibility
-            toggleSidebar(false);
-            document.getElementById("panel-files").classList.remove("m-active");
-            document.getElementById("pane-editor").classList.remove("m-active");
-            document.getElementById("pane-terminal").classList.remove("m-active");
-            document.getElementById("panel-right").classList.remove("m-active");
-        } else if (currentZone) {
-            switchMobileTab(currentMobileTab);
-        }
-    });
-
-    // Set initial class
-    document.body.classList.toggle("is-mobile", isMobile);
-
-    // Apply initial mobile tab if on mobile
-    if (isMobile && currentZone) {
-        switchMobileTab("files");
-    }
-});
-
-// ── API ───────────────────────────────────────
-async function api(url, opts = {}) {
-    const res = await fetch(url, opts);
-    if (!res.ok) {
-        const err = await res.json().catch(() => ({ detail: res.statusText }));
-        throw new Error(err.detail || "API Error");
-    }
-    return res.json();
-}
-
-// ── Toast ─────────────────────────────────────
-function toast(message, type = "info") {
-    const container = document.getElementById("toast-container");
-    const icons = {
-        success: "check-circle-2",
-        error: "alert-circle",
-        info: "info",
-    };
-    const el = document.createElement("div");
-    el.className = `toast toast-${type}`;
-    el.innerHTML = `<i data-lucide="${icons[type] || 'info'}"></i><span>${escapeHtml(message)}</span>`;
-    container.appendChild(el);
-    lucide.createIcons({ nodes: [el] });
-    setTimeout(() => { el.style.opacity = "0"; setTimeout(() => el.remove(), 200); }, 3000);
-}
-
-// ── Zone Management ──────────────────────────
-async function loadZones() {
-    const zones = await api("/api/zones");
-
-    // Sidebar zone list
-    const list = document.getElementById("zone-list");
-    if (zones.length === 0) {
-        list.innerHTML = `<li class="empty-hint" style="color:var(--text-3);font-size:12px;padding:8px 10px;cursor:default;opacity:0.6">No zones yet</li>`;
-    } else {
-        list.innerHTML = zones.map(z => `
-            <li data-zone="${escapeAttr(z.name)}" class="${currentZone === z.name ? 'active' : ''}">
-                <span class="zone-icon"><i data-lucide="box"></i></span>
-                <span class="zone-name">${escapeHtml(z.name)}</span>
-            </li>
-        `).join("");
-        lucide.createIcons({ nodes: [list] });
-    }
-
-    // Welcome page zone cards (so users can pick zone without sidebar)
-    const welcomeZones = document.getElementById("welcome-zones");
-    if (welcomeZones) {
-        if (zones.length === 0) {
-            welcomeZones.innerHTML = `<p class="welcome-hint">No zones yet — create one to get started</p>`;
-        } else {
-            welcomeZones.innerHTML = `<div class="zone-grid">${zones.map(z => `
-                <button class="zone-card" data-zone="${escapeAttr(z.name)}">
-                    <i data-lucide="box"></i>
-                    <span>${escapeHtml(z.name)}</span>
-                </button>
-            `).join("")}</div>`;
-            lucide.createIcons({ nodes: [welcomeZones] });
-        }
-    }
-}
-
-async function openZone(name) {
-    currentZone = name;
-    currentPath = "";
-    currentEditFile = null;
-
-    document.getElementById("zone-title").textContent = name;
-    document.getElementById("welcome").classList.remove("active");
-    document.getElementById("workspace").classList.add("active");
-
-    // Reset editor
-    const editorContainer = document.getElementById("editor-container");
-    editorContainer.innerHTML = `<div class="editor-empty"><i data-lucide="mouse-pointer-click"></i><p>Tap a file to open</p></div>`;
-    document.getElementById("editor-tabs").innerHTML = `<span class="tab-placeholder"><i data-lucide="code-2"></i> No file open</span>`;
-    lucide.createIcons({ nodes: [editorContainer, document.getElementById("editor-tabs")] });
-    cmEditor = null;
-
-    // Highlight
-    document.querySelectorAll(".zone-list li").forEach(li => {
-        li.classList.toggle("active", li.dataset.zone === name);
-    });
-
-    await loadFiles();
-    loadPorts();
-
-    // Mobile: close sidebar, show files tab
-    if (isMobile) {
-        toggleSidebar(false);
-        switchMobileTab("files");
-    }
-
-    // Auto-connect terminal
-    setTimeout(() => connectTerminal(), 200);
-}
-
-async function createZone() {
-    const name = document.getElementById("input-zone-name").value.trim();
-    const desc = document.getElementById("input-zone-desc").value.trim();
-    if (!name) return;
-    const form = new FormData();
-    form.append("name", name);
-    form.append("description", desc);
-    try {
-        await api("/api/zones", { method: "POST", body: form });
-        closeModal("modal-overlay");
-        document.getElementById("input-zone-name").value = "";
-        document.getElementById("input-zone-desc").value = "";
-        toast(`Zone "${name}" created`, "success");
-        await loadZones();
-        openZone(name);
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-async function deleteZone() {
-    if (!currentZone) return;
-    const ok = await customConfirm(`Delete zone "${currentZone}"?`, "All data will be lost!");
-    if (!ok) return;
-    try {
-        await api(`/api/zones/${currentZone}`, { method: "DELETE" });
-        disconnectTerminal();
-        toast(`Zone "${currentZone}" deleted`, "info");
-        currentZone = null;
-        document.getElementById("workspace").classList.remove("active");
-        document.getElementById("welcome").classList.add("active");
-        await loadZones();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-// ── File Manager ─────────────────────────────
-async function loadFiles() {
-    if (!currentZone) return;
-    const files = await api(`/api/zones/${currentZone}/files?path=${encodeURIComponent(currentPath)}`);
-    renderBreadcrumb();
-    renderFiles(files);
-}
-
-function renderBreadcrumb() {
-    const parts = currentPath ? currentPath.split("/").filter(Boolean) : [];
-    let html = `<span data-nav="">~</span>`;
-    let path = "";
-    for (const part of parts) {
-        path += (path ? "/" : "") + part;
-        html += `<span class="sep">/</span>`;
-        html += `<span data-nav="${escapeAttr(path)}">${escapeHtml(part)}</span>`;
-    }
-    // Update both desktop and mobile breadcrumbs
-    document.getElementById("breadcrumb").innerHTML = html;
-    const mbc = document.getElementById("breadcrumb-mobile");
-    if (mbc) mbc.innerHTML = html;
-}
-
-function renderFiles(files) {
-    const list = document.getElementById("file-list");
-    if (files.length === 0 && !currentPath) {
-        list.innerHTML = `<div class="empty-state"><i data-lucide="folder-open"></i><p>Empty zone — create a file or upload</p></div>`;
-        lucide.createIcons({ nodes: [list] });
-        return;
-    }
-    let html = "";
-    if (currentPath) {
-        html += `<div class="file-item" data-action="up">
-            <span class="fi-icon fi-icon-back"><i data-lucide="corner-left-up"></i></span>
-            <span class="fi-name">..</span>
-        </div>`;
-    }
-    const sorted = [...files].sort((a, b) => {
-        if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
-        return a.name.localeCompare(b.name);
-    });
-    for (const f of sorted) {
-        const relPath = currentPath ? `${currentPath}/${f.name}` : f.name;
-        const iconClass = f.is_dir ? "fi-icon-folder" : fileIconClass(f.name);
-        const iconName = f.is_dir ? "folder" : "file-text";
-        const size = f.is_dir ? "" : formatSize(f.size);
-        const action = f.is_dir ? "navigate" : "edit";
-
-        html += `<div class="file-item" data-action="${action}" data-path="${escapeAttr(relPath)}">
-            <span class="fi-icon ${iconClass}"><i data-lucide="${iconName}"></i></span>
-            <span class="fi-name">${escapeHtml(f.name)}</span>
-            <span class="fi-size">${size}</span>
-            <span class="fi-actions">
-                ${!f.is_dir ? `<button data-action="download" data-path="${escapeAttr(relPath)}" title="Download"><i data-lucide="download"></i></button>` : ''}
-                <button data-action="rename" data-path="${escapeAttr(relPath)}" data-name="${escapeAttr(f.name)}" title="Rename"><i data-lucide="pencil"></i></button>
-                <button data-action="delete" data-path="${escapeAttr(relPath)}" class="fi-del" title="Delete"><i data-lucide="trash-2"></i></button>
-            </span>
-        </div>`;
-    }
-    list.innerHTML = html;
-    lucide.createIcons({ nodes: [list] });
-}
-
-function navigateTo(path) { currentPath = path; loadFiles(); }
-
-function navigateUp() {
-    const parts = currentPath.split("/").filter(Boolean);
-    parts.pop();
-    currentPath = parts.join("/");
-    loadFiles();
-}
-
-// ── Editor (CodeMirror) ──────────────────────
-function getMode(filename) {
-    const ext = filename.split(".").pop().toLowerCase();
-    const modes = {
-        js: "javascript", mjs: "javascript", jsx: "javascript",
-        ts: "text/typescript", tsx: "text/typescript",
-        py: "python",
-        go: "go",
-        rs: "rust",
-        html: "htmlmixed", htm: "htmlmixed",
-        css: "css", scss: "css", less: "css",
-        json: { name: "javascript", json: true },
-        md: "markdown",
-        sh: "shell", bash: "shell", zsh: "shell",
-        yml: "yaml", yaml: "yaml",
-        toml: "toml",
-        xml: "xml", svg: "xml",
-        dockerfile: "dockerfile",
-    };
-    // Special filename matches
-    if (filename.toLowerCase() === "dockerfile") return "dockerfile";
-    return modes[ext] || "text/plain";
-}
-
-async function editFile(relPath) {
-    try {
-        const data = await api(`/api/zones/${currentZone}/files/read?path=${encodeURIComponent(relPath)}`);
-        currentEditFile = relPath;
-        const filename = relPath.split("/").pop();
-
-        // Update tab
-        document.getElementById("editor-tabs").innerHTML = `
-            <span class="pane-tab">
-                <i data-lucide="file-text"></i>
-                <span class="tab-name">${escapeHtml(filename)}</span>
-                <span class="tab-dot" id="editor-modified" style="display:none"></span>
-            </span>`;
-        lucide.createIcons({ nodes: [document.getElementById("editor-tabs")] });
-
-        // Init CodeMirror
-        const container = document.getElementById("editor-container");
-        container.innerHTML = "";
-        cmEditor = CodeMirror(container, {
-            value: data.content,
-            mode: getMode(filename),
-            theme: "material-darker",
-            lineNumbers: true,
-            lineWrapping: isMobile,
-            indentWithTabs: false,
-            indentUnit: 4,
-            tabSize: 4,
-            matchBrackets: true,
-            autoCloseBrackets: true,
-            styleActiveLine: true,
-            extraKeys: {
-                "Ctrl-S": () => saveFile(),
-                "Cmd-S": () => saveFile(),
-                "Tab": (cm) => {
-                    if (cm.somethingSelected()) cm.indentSelection("add");
-                    else cm.replaceSelection("    ", "end");
-                },
-            }
+function hugpanel() {
+  return {
+    // ── State ──
+    sidebarOpen: false,
+    zones: [],
+    currentZone: null,
+    activeTab: 'files',
+    tabs: [
+      { id: 'files', label: 'Files', icon: 'folder' },
+      { id: 'editor', label: 'Editor', icon: 'file-code' },
+      { id: 'terminal', label: 'Terminal', icon: 'terminal' },
+      { id: 'ports', label: 'Ports', icon: 'radio' },
+    ],
+
+    // Files
+    files: [],
+    currentPath: '',
+    filesLoading: false,
+    showNewFile: false,
+    showNewFolder: false,
+    newFileName: '',
+    newFolderName: '',
+
+    // Editor
+    editorFile: null,
+    editorContent: '',
+    editorOriginal: '',
+    editorDirty: false,
+
+    // Terminal
+    term: null,
+    termWs: null,
+    termFit: null,
+    termZone: null,
+
+    // Ports
+    ports: [],
+    newPort: null,
+    newPortLabel: '',
+
+    // Create Zone
+    showCreateZone: false,
+    createZoneName: '',
+    createZoneDesc: '',
+
+    // Rename
+    showRename: false,
+    renameOldPath: '',
+    renameNewName: '',
+
+    // Toast
+    toast: { show: false, message: '', type: 'info' },
+
+    // ── Computed ──
+    get currentPathParts() {
+      return this.currentPath ? this.currentPath.split('/').filter(Boolean) : [];
+    },
+
+    // ── Init ──
+    async init() {
+      await this.loadZones();
+      this.$nextTick(() => lucide.createIcons());
+
+      // Watch for icon updates
+      this.$watch('zones', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('files', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('activeTab', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('currentZone', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('ports', () => this.$nextTick(() => lucide.createIcons()));
+      this.$watch('showCreateZone', () => {
+        this.$nextTick(() => {
+          lucide.createIcons();
+          if (this.showCreateZone) this.$refs.zoneNameInput?.focus();
         });
-
-        // Track modifications
-        cmEditor.on("change", () => {
-            const dot = document.getElementById("editor-modified");
-            if (dot) dot.style.display = "block";
-            const mTab = document.querySelector('#mobile-tabs [data-tab="editor"]');
-            if (mTab) mTab.classList.add('has-dot');
+      });
+      this.$watch('showNewFile', () => {
+        this.$nextTick(() => { if (this.showNewFile) this.$refs.newFileInput?.focus(); });
+      });
+      this.$watch('showNewFolder', () => {
+        this.$nextTick(() => { if (this.showNewFolder) this.$refs.newFolderInput?.focus(); });
+      });
+      this.$watch('showRename', () => {
+        this.$nextTick(() => {
+          lucide.createIcons();
+          if (this.showRename) this.$refs.renameInput?.focus();
         });
+      });
 
-        // Auto-switch to editor tab on mobile
-        if (isMobile) switchMobileTab('editor');
-
-        // Focus editor
-        setTimeout(() => cmEditor.refresh(), 50);
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-async function saveFile() {
-    if (!currentEditFile || !currentZone || !cmEditor) return;
-    const content = cmEditor.getValue();
-    const form = new FormData();
-    form.append("path", currentEditFile);
-    form.append("content", content);
-    try {
-        await api(`/api/zones/${currentZone}/files/write`, { method: "POST", body: form });
-        const dot = document.getElementById("editor-modified");
-        if (dot) dot.style.display = "none";
-        const mTab = document.querySelector('#mobile-tabs [data-tab="editor"]');
-        if (mTab) mTab.classList.remove('has-dot');
-        toast("File saved", "success");
-    } catch (e) {
-        toast("Save failed: " + e.message, "error");
-    }
-}
-
-function downloadFile(relPath) {
-    window.open(`/api/zones/${currentZone}/files/download?path=${encodeURIComponent(relPath)}`);
-}
-
-async function deleteFile(relPath) {
-    const ok = await customConfirm(`Delete "${relPath}"?`);
-    if (!ok) return;
-    try {
-        await api(`/api/zones/${currentZone}/files?path=${encodeURIComponent(relPath)}`, { method: "DELETE" });
-        toast("Deleted", "info");
-        await loadFiles();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-async function renameFile(oldPath, oldName) {
-    const newName = await promptUser("Rename", oldName);
-    if (!newName || newName === oldName) return;
-    const form = new FormData();
-    form.append("old_path", oldPath);
-    form.append("new_name", newName);
-    try {
-        await api(`/api/zones/${currentZone}/files/rename`, { method: "POST", body: form });
-        toast("Renamed", "success");
-        await loadFiles();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-async function createNewFile() {
-    const name = await promptUser("New file name", "");
-    if (!name) return;
-    const path = currentPath ? `${currentPath}/${name}` : name;
-    const form = new FormData();
-    form.append("path", path);
-    form.append("content", "");
-    try {
-        await api(`/api/zones/${currentZone}/files/write`, { method: "POST", body: form });
-        toast("File created", "success");
-        await loadFiles();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-async function createNewFolder() {
-    const name = await promptUser("New folder name", "");
-    if (!name) return;
-    const path = currentPath ? `${currentPath}/${name}` : name;
-    const form = new FormData();
-    form.append("path", path);
-    try {
-        await api(`/api/zones/${currentZone}/files/mkdir`, { method: "POST", body: form });
-        toast("Folder created", "success");
-        await loadFiles();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-function uploadFiles() {
-    document.getElementById("file-upload-input").click();
-}
-
-async function handleUpload(event) {
-    const files = event.target.files;
-    if (!files.length) return;
-    for (const file of files) {
+      // Keyboard shortcut
+      document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.key === 's' && this.activeTab === 'editor') {
+          e.preventDefault();
+          this.saveFile();
+        }
+      });
+    },
+
+    // ── Toast ──
+    notify(message, type = 'info') {
+      this.toast = { show: true, message, type };
+      setTimeout(() => { this.toast.show = false; }, 3000);
+    },
+
+    // ── API Helper ──
+    async api(url, options = {}) {
+      try {
+        const resp = await fetch(url, options);
+        if (!resp.ok) {
+          const data = await resp.json().catch(() => ({ detail: resp.statusText }));
+          throw new Error(data.detail || resp.statusText);
+        }
+        return await resp.json();
+      } catch (err) {
+        this.notify(err.message, 'error');
+        throw err;
+      }
+    },
+
+    // ── Zones ──
+    async loadZones() {
+      try {
+        this.zones = await this.api('/api/zones');
+      } catch { this.zones = []; }
+    },
+
+    async selectZone(name) {
+      this.currentZone = name;
+      this.currentPath = '';
+      this.editorFile = null;
+      this.editorDirty = false;
+      this.activeTab = 'files';
+      this.disconnectTerminal();
+      await this.loadFiles();
+      await this.loadPorts();
+    },
+
+    async createZone() {
+      if (!this.createZoneName.trim()) return;
+      const form = new FormData();
+      form.append('name', this.createZoneName.trim());
+      form.append('description', this.createZoneDesc.trim());
+      try {
+        await this.api('/api/zones', { method: 'POST', body: form });
+        this.showCreateZone = false;
+        this.createZoneName = '';
+        this.createZoneDesc = '';
+        await this.loadZones();
+        this.notify('Zone đã được tạo');
+      } catch {}
+    },
+
+    async confirmDeleteZone() {
+      if (!this.currentZone) return;
+      if (!confirm(`Xoá zone "${this.currentZone}"? Toàn bộ dữ liệu sẽ bị mất.`)) return;
+      try {
+        await this.api(`/api/zones/${this.currentZone}`, { method: 'DELETE' });
+        this.disconnectTerminal();
+        this.currentZone = null;
+        await this.loadZones();
+        this.notify('Zone đã bị xoá');
+      } catch {}
+    },
+
+    // ── Files ──
+    async loadFiles() {
+      if (!this.currentZone) return;
+      this.filesLoading = true;
+      try {
+        this.files = await this.api(`/api/zones/${this.currentZone}/files?path=${encodeURIComponent(this.currentPath)}`);
+      } catch { this.files = []; }
+      this.filesLoading = false;
+    },
+
+    navigateTo(path) {
+      this.currentPath = path;
+      this.loadFiles();
+    },
+
+    navigateUp() {
+      const parts = this.currentPath.split('/').filter(Boolean);
+      parts.pop();
+      this.currentPath = parts.join('/');
+      this.loadFiles();
+    },
+
+    joinPath(base, name) {
+      return base ? `${base}/${name}` : name;
+    },
+
+    async openFile(path) {
+      if (this.editorDirty && !confirm('Bạn có thay đổi chưa lưu. Bỏ qua?')) return;
+      try {
+        const data = await this.api(`/api/zones/${this.currentZone}/files/read?path=${encodeURIComponent(path)}`);
+        this.editorFile = path;
+        this.editorContent = data.content;
+        this.editorOriginal = data.content;
+        this.editorDirty = false;
+        this.activeTab = 'editor';
+      } catch {}
+    },
+
+    async saveFile() {
+      if (!this.editorFile || !this.editorDirty) return;
+      const form = new FormData();
+      form.append('path', this.editorFile);
+      form.append('content', this.editorContent);
+      try {
+        await this.api(`/api/zones/${this.currentZone}/files/write`, { method: 'POST', body: form });
+        this.editorOriginal = this.editorContent;
+        this.editorDirty = false;
+        this.notify('Đã lưu');
+      } catch {}
+    },
+
+    async createFile() {
+      if (!this.newFileName.trim()) return;
+      const path = this.joinPath(this.currentPath, this.newFileName.trim());
+      const form = new FormData();
+      form.append('path', path);
+      form.append('content', '');
+      try {
+        await this.api(`/api/zones/${this.currentZone}/files/write`, { method: 'POST', body: form });
+        this.newFileName = '';
+        this.showNewFile = false;
+        await this.loadFiles();
+      } catch {}
+    },
+
+    async createFolder() {
+      if (!this.newFolderName.trim()) return;
+      const path = this.joinPath(this.currentPath, this.newFolderName.trim());
+      const form = new FormData();
+      form.append('path', path);
+      try {
+        await this.api(`/api/zones/${this.currentZone}/files/mkdir`, { method: 'POST', body: form });
+        this.newFolderName = '';
+        this.showNewFolder = false;
+        await this.loadFiles();
+      } catch {}
+    },
+
+    async uploadFile(event) {
+      const fileList = event.target.files;
+      if (!fileList || fileList.length === 0) return;
+      for (const file of fileList) {
         const form = new FormData();
-        form.append("path", currentPath);
-        form.append("file", file);
+        form.append('path', this.currentPath);
+        form.append('file', file);
         try {
-            await api(`/api/zones/${currentZone}/files/upload`, { method: "POST", body: form });
-            toast(`Uploaded ${file.name}`, "success");
-        } catch (e) {
-            toast(`Upload ${file.name} failed: ${e.message}`, "error");
+          await this.api(`/api/zones/${this.currentZone}/files/upload`, { method: 'POST', body: form });
+        } catch {}
+      }
+      event.target.value = '';
+      await this.loadFiles();
+      this.notify(`Đã upload ${fileList.length} file`);
+    },
+
+    async deleteFile(path, isDir) {
+      const label = isDir ? 'thư mục' : 'file';
+      if (!confirm(`Xoá ${label} "${path}"?`)) return;
+      try {
+        await this.api(`/api/zones/${this.currentZone}/files?path=${encodeURIComponent(path)}`, { method: 'DELETE' });
+        if (this.editorFile === path) {
+          this.editorFile = null;
+          this.editorDirty = false;
         }
-    }
-    event.target.value = "";
-    await loadFiles();
-}
-
-// ── Terminal ─────────────────────────────────
-function connectTerminal() {
-    if (!currentZone) return;
-
-    if (!term) {
-        term = new window.Terminal({
-            cursorBlink: true,
-            fontSize: isMobile ? 11 : 13,
-            fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace",
-            theme: {
-                background: "#09090b",
-                foreground: "#fafafa",
-                cursor: "#3b82f6",
-                selectionBackground: "rgba(59,130,246,0.3)",
-                black: "#27272a",
-                red: "#ef4444",
-                green: "#22c55e",
-                yellow: "#f59e0b",
-                blue: "#3b82f6",
-                magenta: "#a855f7",
-                cyan: "#06b6d4",
-                white: "#e4e4e7",
-                brightBlack: "#52525b",
-                brightRed: "#f87171",
-                brightGreen: "#4ade80",
-                brightYellow: "#fbbf24",
-                brightBlue: "#60a5fa",
-                brightMagenta: "#c084fc",
-                brightCyan: "#22d3ee",
-                brightWhite: "#fafafa",
-            }
+        await this.loadFiles();
+      } catch {}
+    },
+
+    downloadFile(path, name) {
+      const a = document.createElement('a');
+      a.href = `/api/zones/${this.currentZone}/files/download?path=${encodeURIComponent(path)}`;
+      a.download = name;
+      a.click();
+    },
+
+    startRename(file) {
+      this.renameOldPath = this.joinPath(this.currentPath, file.name);
+      this.renameNewName = file.name;
+      this.showRename = true;
+    },
+
+    async doRename() {
+      if (!this.renameNewName.trim()) return;
+      const form = new FormData();
+      form.append('old_path', this.renameOldPath);
+      form.append('new_name', this.renameNewName.trim());
+      try {
+        await this.api(`/api/zones/${this.currentZone}/files/rename`, { method: 'POST', body: form });
+        this.showRename = false;
+        await this.loadFiles();
+      } catch {}
+    },
+
+    getFileIcon(name) {
+      const ext = name.split('.').pop()?.toLowerCase();
+      const map = {
+        js: 'file-code', ts: 'file-code', py: 'file-code', go: 'file-code',
+        html: 'file-code', css: 'file-code', json: 'file-json',
+        md: 'file-text', txt: 'file-text', log: 'file-text',
+        jpg: 'image', jpeg: 'image', png: 'image', gif: 'image', svg: 'image',
+        zip: 'file-archive', tar: 'file-archive', gz: 'file-archive',
+      };
+      return map[ext] || 'file';
+    },
+
+    formatSize(bytes) {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    },
+
+    // ── Terminal ──
+    initTerminal() {
+      if (!this.currentZone) return;
+
+      // Already connected to same zone
+      if (this.termZone === this.currentZone && this.term) {
+        this.$nextTick(() => this.termFit?.fit());
+        return;
+      }
+
+      this.disconnectTerminal();
+
+      const container = document.getElementById('terminal-container');
+      if (!container) return;
+      container.innerHTML = '';
+
+      this.term = new Terminal({
+        cursorBlink: true,
+        fontSize: 14,
+        fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+        theme: {
+          background: '#000000',
+          foreground: '#e4e4e7',
+          cursor: '#8b5cf6',
+          selectionBackground: '#8b5cf644',
+          black: '#18181b',
+          red: '#ef4444',
+          green: '#22c55e',
+          yellow: '#eab308',
+          blue: '#3b82f6',
+          magenta: '#a855f7',
+          cyan: '#06b6d4',
+          white: '#e4e4e7',
+        },
+        allowProposedApi: true,
+      });
+
+      this.termFit = new FitAddon.FitAddon();
+      const webLinks = new WebLinksAddon.WebLinksAddon();
+      this.term.loadAddon(this.termFit);
+      this.term.loadAddon(webLinks);
+      this.term.open(container);
+      this.termFit.fit();
+      this.termZone = this.currentZone;
+
+      // WebSocket
+      const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = `${proto}//${location.host}/ws/terminal/${this.currentZone}`;
+      this.termWs = new WebSocket(wsUrl);
+      this.termWs.binaryType = 'arraybuffer';
+
+      this.termWs.onopen = () => {
+        this.term.onData((data) => {
+          if (this.termWs?.readyState === WebSocket.OPEN) {
+            this.termWs.send(JSON.stringify({ type: 'input', data }));
+          }
+        });
+        this.term.onResize(({ rows, cols }) => {
+          if (this.termWs?.readyState === WebSocket.OPEN) {
+            this.termWs.send(JSON.stringify({ type: 'resize', rows, cols }));
+          }
         });
-        fitAddon = new window.FitAddon.FitAddon();
-        term.loadAddon(fitAddon);
-        term.loadAddon(new window.WebLinksAddon.WebLinksAddon());
-        const container = document.getElementById("terminal-container");
-        container.innerHTML = "";
-        term.open(container);
-        fitAddon.fit();
-    }
-
-    if (termSocket) { termSocket.close(); termSocket = null; }
-    if (termDataDisposable) { termDataDisposable.dispose(); termDataDisposable = null; }
-    if (termResizeDisposable) { termResizeDisposable.dispose(); termResizeDisposable = null; }
-
-    // Only clear the terminal when switching to a different zone
-    const switchingZone = termCurrentZone !== currentZone;
-    if (switchingZone) {
-        term.reset();
-        termCurrentZone = currentZone;
-    }
-
-    const proto = location.protocol === "https:" ? "wss:" : "ws:";
-    termSocket = new WebSocket(`${proto}//${location.host}/ws/terminal/${currentZone}`);
-    termSocket.binaryType = "arraybuffer";
-
-    termSocket.onopen = () => {
-        termSocket.send(JSON.stringify({ type: "resize", rows: term.rows, cols: term.cols }));
-    };
-
-    termSocket.onmessage = (event) => {
-        if (event.data instanceof ArrayBuffer) term.write(new Uint8Array(event.data));
-        else term.write(event.data);
-    };
-
-    termSocket.onclose = () => {
-        term.writeln("\r\n\x1b[2m── disconnected ──\x1b[0m");
-    };
-
-    termSocket.onerror = () => {
-        term.writeln("\r\n\x1b[31m── connection error ──\x1b[0m");
-    };
-
-    termDataDisposable = term.onData((data) => {
-        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
-            termSocket.send(JSON.stringify({ type: "input", data }));
+        // Send initial size
+        const dims = this.termFit.proposeDimensions();
+        if (dims) {
+          this.termWs.send(JSON.stringify({ type: 'resize', rows: dims.rows, cols: dims.cols }));
         }
-    });
+      };
 
-    termResizeDisposable = term.onResize(({ rows, cols }) => {
-        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
-            termSocket.send(JSON.stringify({ type: "resize", rows, cols }));
-        }
-    });
-}
-
-function disconnectTerminal() {
-    if (termSocket) { termSocket.close(); termSocket = null; }
-}
-
-function reconnectTerminal() {
-    disconnectTerminal();
-    connectTerminal();
-}
-
-// ── Resizable Panels ─────────────────────────
-function initResizers() {
-    // Vertical resizer (file panel width)
-    const rv = document.getElementById("resizer-v");
-    const panelFiles = document.getElementById("panel-files");
-    if (rv && panelFiles) {
-        let startX, startW;
-        rv.addEventListener("mousedown", (e) => {
-            e.preventDefault();
-            startX = e.clientX;
-            startW = panelFiles.offsetWidth;
-            rv.classList.add("active");
-            const onMove = (e) => {
-                const w = Math.max(180, Math.min(500, startW + e.clientX - startX));
-                panelFiles.style.width = w + "px";
-            };
-            const onUp = () => {
-                rv.classList.remove("active");
-                document.removeEventListener("mousemove", onMove);
-                document.removeEventListener("mouseup", onUp);
-                if (fitAddon) fitAddon.fit();
-                if (cmEditor) cmEditor.refresh();
-            };
-            document.addEventListener("mousemove", onMove);
-            document.addEventListener("mouseup", onUp);
-        });
-    }
-
-    // Horizontal resizer (terminal height)
-    const rh = document.getElementById("resizer-h");
-    const paneTerminal = document.getElementById("pane-terminal");
-    if (rh && paneTerminal) {
-        let startY, startH;
-        rh.addEventListener("mousedown", (e) => {
-            e.preventDefault();
-            startY = e.clientY;
-            startH = paneTerminal.offsetHeight;
-            rh.classList.add("active");
-            const onMove = (e) => {
-                const h = Math.max(100, Math.min(600, startH - (e.clientY - startY)));
-                paneTerminal.style.height = h + "px";
-                paneTerminal.style.flex = "none";
-            };
-            const onUp = () => {
-                rh.classList.remove("active");
-                document.removeEventListener("mousemove", onMove);
-                document.removeEventListener("mouseup", onUp);
-                if (fitAddon) fitAddon.fit();
-                if (cmEditor) cmEditor.refresh();
-            };
-            document.addEventListener("mousemove", onMove);
-            document.addEventListener("mouseup", onUp);
-        });
-    }
-}
-
-// ── Modal / Prompt / Confirm ─────────────────
-function showModal(id) {
-    document.getElementById(id).classList.remove("hidden");
-    lucide.createIcons({ nodes: [document.getElementById(id)] });
-}
-
-function closeModal(id) {
-    document.getElementById(id).classList.add("hidden");
-}
-
-function promptUser(title, defaultValue) {
-    return new Promise((resolve) => {
-        document.getElementById("prompt-title").textContent = title;
-        document.getElementById("prompt-input").value = defaultValue || "";
-        showModal("modal-prompt");
-        setTimeout(() => document.getElementById("prompt-input").focus(), 100);
-        promptResolve = resolve;
-    });
-}
-
-function customConfirm(title, message) {
-    return new Promise((resolve) => {
-        document.getElementById("confirm-title").textContent = title || "Confirm";
-        document.getElementById("confirm-message").textContent = message || title || "Are you sure?";
-        showModal("modal-confirm");
-        confirmResolve = resolve;
-    });
-}
-
-function resolveConfirm(value) {
-    closeModal("modal-confirm");
-    if (confirmResolve) { confirmResolve(value); confirmResolve = null; }
-}
-
-// ── Port Management ──────────────────────────
-async function loadPorts() {
-    if (!currentZone) return;
-    try {
-        const ports = await api(`/api/zones/${currentZone}/ports`);
-        renderPorts(ports);
-        const badge = document.getElementById("port-count");
-        if (ports.length > 0) {
-            badge.textContent = ports.length;
-            badge.style.display = "inline";
+      this.termWs.onmessage = (e) => {
+        if (e.data instanceof ArrayBuffer) {
+          this.term.write(new Uint8Array(e.data));
         } else {
-            badge.style.display = "none";
-        }
-    } catch (e) {
-        // Zone might not exist yet
-    }
-}
-
-function renderPorts(ports) {
-    const list = document.getElementById("port-list");
-    if (ports.length === 0) {
-        list.innerHTML = `<div class="port-empty">No ports mapped yet</div>`;
-        return;
-    }
-    list.innerHTML = ports.map(p => `
-        <div class="port-item">
-            <span class="pi-port">:${p.port}</span>
-            <span class="pi-label">${escapeHtml(p.label)}</span>
-            <span class="pi-actions">
-                <button title="Open in new tab" data-action="open-port" data-port="${p.port}"><i data-lucide="external-link"></i></button>
-                <button title="Copy URL" data-action="copy-port" data-port="${p.port}"><i data-lucide="copy"></i></button>
-                <button class="pi-del" title="Remove" data-action="remove-port" data-port="${p.port}"><i data-lucide="trash-2"></i></button>
-            </span>
-        </div>
-    `).join("");
-    lucide.createIcons({ nodes: [list] });
-}
-
-function togglePortPanel() {
-    const panel = document.getElementById("port-panel");
-    if (panel.classList.contains("hidden")) {
-        // Position panel below the button
-        const btn = document.getElementById("btn-toggle-ports");
-        const rect = btn.getBoundingClientRect();
-        panel.style.top = (rect.bottom + 6) + "px";
-        panel.classList.remove("hidden");
-        lucide.createIcons({ nodes: [panel] });
-        loadPorts();
-    } else {
-        panel.classList.add("hidden");
-    }
-}
-
-async function addPort() {
-    const portInput = document.getElementById("input-port-number");
-    const labelInput = document.getElementById("input-port-label");
-    const port = parseInt(portInput.value);
-    const label = labelInput.value.trim();
-    if (!port) return;
-
-    const form = new FormData();
-    form.append("port", port);
-    form.append("label", label);
-    try {
-        await api(`/api/zones/${currentZone}/ports`, { method: "POST", body: form });
-        closeModal("modal-add-port");
-        portInput.value = "";
-        labelInput.value = "";
-        toast(`Port ${port} mapped`, "success");
-        await loadPorts();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-async function removePort(port) {
-    const ok = await customConfirm(`Remove port ${port} mapping?`);
-    if (!ok) return;
-    try {
-        await api(`/api/zones/${currentZone}/ports/${port}`, { method: "DELETE" });
-        toast(`Port ${port} removed`, "info");
-        await loadPorts();
-    } catch (e) {
-        toast(e.message, "error");
-    }
-}
-
-function openPort(port) {
-    window.open(`/port/${currentZone}/${port}/`, "_blank");
-}
-
-function copyPortUrl(port) {
-    const url = `${location.origin}/port/${currentZone}/${port}/`;
-    navigator.clipboard.writeText(url).then(() => {
-        toast("URL copied", "success");
-    }).catch(() => {
-        toast(url, "info");
-    });
-}
-
-// ── Utility ──────────────────────────────────
-function escapeHtml(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-}
-
-function escapeAttr(str) {
-    return str.replace(/'/g, "\\'").replace(/"/g, "&quot;");
-}
-
-function formatSize(bytes) {
-    if (bytes === 0) return "0 B";
-    const units = ["B", "KB", "MB", "GB"];
-    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-    return (bytes / Math.pow(1024, i)).toFixed(i ? 1 : 0) + " " + units[i];
-}
-
-function fileIconClass(name) {
-    const ext = name.split(".").pop().toLowerCase();
-    const classes = {
-        js: "fi-icon-js", mjs: "fi-icon-js", jsx: "fi-icon-js",
-        ts: "fi-icon-ts", tsx: "fi-icon-ts",
-        py: "fi-icon-py",
-        go: "fi-icon-go",
-        html: "fi-icon-html", htm: "fi-icon-html",
-        css: "fi-icon-css", scss: "fi-icon-css",
-        json: "fi-icon-json",
-        md: "fi-icon-md",
-        png: "fi-icon-img", jpg: "fi-icon-img", jpeg: "fi-icon-img", gif: "fi-icon-img", svg: "fi-icon-img",
-        yml: "fi-icon-config", yaml: "fi-icon-config", toml: "fi-icon-config",
-    };
-    return classes[ext] || "fi-icon-file";
-}
-
-// ── Mobile: Sidebar ─────────────────────────
-function toggleSidebar(open) {
-    const sidebar = document.getElementById("sidebar");
-    const backdrop = document.getElementById("sidebar-backdrop");
-    const hamburger = document.getElementById("btn-hamburger");
-    if (open) {
-        sidebar.classList.add("open");
-        backdrop.classList.add("open");
-        if (hamburger) hamburger.style.display = "none";
-    } else {
-        sidebar.classList.remove("open");
-        backdrop.classList.remove("open");
-        if (hamburger && isMobile) hamburger.style.display = "";
-    }
-}
-
-// ── Mobile: Tab Switching ───────────────────
-function switchMobileTab(tab) {
-    currentMobileTab = tab;
-
-    // Update tab bar highlighting
-    document.querySelectorAll(".mobile-tab").forEach(btn => {
-        btn.classList.toggle("active", btn.dataset.tab === tab);
-    });
-
-    const panelFiles = document.getElementById("panel-files");
-    const panelRight = document.getElementById("panel-right");
-    const paneEditor = document.getElementById("pane-editor");
-    const paneTerminal = document.getElementById("pane-terminal");
-
-    // Remove all active
-    panelFiles.classList.remove("m-active");
-    panelRight.classList.remove("m-active");
-    paneEditor.classList.remove("m-active");
-    paneTerminal.classList.remove("m-active");
-
-    if (tab === "files") {
-        panelFiles.classList.add("m-active");
-    } else if (tab === "editor") {
-        panelRight.classList.add("m-active");
-        paneEditor.classList.add("m-active");
-        setTimeout(() => { if (cmEditor) cmEditor.refresh(); }, 50);
-    } else if (tab === "terminal") {
-        panelRight.classList.add("m-active");
-        paneTerminal.classList.add("m-active");
-        setTimeout(() => {
-            if (fitAddon) fitAddon.fit();
-            if (!termSocket || termSocket.readyState !== WebSocket.OPEN) {
-                connectTerminal();
-            }
-        }, 50);
-    }
-}
-
-// ── Event Binding ────────────────────────────
-function bindEvents() {
-    // ── Static button bindings ────────────────
-    document.getElementById("btn-add-zone").addEventListener("click", () => showModal("modal-overlay"));
-    document.getElementById("form-create-zone").addEventListener("submit", (e) => { e.preventDefault(); createZone(); });
-    document.getElementById("btn-delete-zone").addEventListener("click", deleteZone);
-    document.getElementById("btn-new-file").addEventListener("click", createNewFile);
-    document.getElementById("btn-new-folder").addEventListener("click", createNewFolder);
-    document.getElementById("btn-upload").addEventListener("click", uploadFiles);
-    document.getElementById("file-upload-input").addEventListener("change", handleUpload);
-    document.getElementById("btn-save-file").addEventListener("click", saveFile);
-    document.getElementById("btn-reconnect").addEventListener("click", reconnectTerminal);
-    document.getElementById("btn-hamburger").addEventListener("click", () => toggleSidebar(true));
-    document.getElementById("sidebar-backdrop").addEventListener("click", () => toggleSidebar(false));
-    document.getElementById("btn-close-sidebar").addEventListener("click", () => toggleSidebar(false));
-    document.getElementById("btn-create-zone-welcome").addEventListener("click", () => document.getElementById("btn-add-zone").click());
-
-    // Port management
-    document.getElementById("btn-toggle-ports").addEventListener("click", togglePortPanel);
-    document.getElementById("btn-add-port").addEventListener("click", () => showModal("modal-add-port"));
-    document.getElementById("form-add-port").addEventListener("submit", (e) => { e.preventDefault(); addPort(); });
-
-    // Modal close/cancel buttons
-    document.getElementById("btn-close-create-modal").addEventListener("click", () => closeModal("modal-overlay"));
-    document.getElementById("btn-cancel-create-modal").addEventListener("click", () => closeModal("modal-overlay"));
-    document.getElementById("btn-close-prompt").addEventListener("click", () => {
-        closeModal("modal-prompt");
-        if (promptResolve) { promptResolve(null); promptResolve = null; }
-    });
-    document.getElementById("btn-close-port-modal").addEventListener("click", () => closeModal("modal-add-port"));
-    document.getElementById("btn-cancel-port-modal").addEventListener("click", () => closeModal("modal-add-port"));
-
-    // Confirm modal
-    document.getElementById("btn-close-confirm").addEventListener("click", () => resolveConfirm(false));
-    document.getElementById("btn-confirm-cancel").addEventListener("click", () => resolveConfirm(false));
-    document.getElementById("btn-confirm-ok").addEventListener("click", () => resolveConfirm(true));
-
-    // Prompt form
-    document.getElementById("btn-cancel-prompt").addEventListener("click", () => {
-        closeModal("modal-prompt");
-        if (promptResolve) { promptResolve(null); promptResolve = null; }
-    });
-    document.getElementById("form-prompt").addEventListener("submit", (e) => {
-        e.preventDefault();
-        const val = document.getElementById("prompt-input").value;
-        closeModal("modal-prompt");
-        if (promptResolve) { promptResolve(val); promptResolve = null; }
-    });
-
-    // Close port panel when clicking outside
-    document.addEventListener("click", (e) => {
-        const panel = document.getElementById("port-panel");
-        const toggle = document.getElementById("btn-toggle-ports");
-        if (!panel.classList.contains("hidden") && !panel.contains(e.target) && !toggle.contains(e.target)) {
-            panel.classList.add("hidden");
+          this.term.write(e.data);
         }
-    });
-
-    // ── Event delegation: file list ───────────
-    document.getElementById("file-list").addEventListener("click", (e) => {
-        // Check action buttons first (download, rename, delete)
-        const actionBtn = e.target.closest(".fi-actions [data-action]");
-        if (actionBtn) {
-            e.stopPropagation();
-            const action = actionBtn.dataset.action;
-            const path = actionBtn.dataset.path;
-            if (action === "download") downloadFile(path);
-            else if (action === "rename") renameFile(path, actionBtn.dataset.name);
-            else if (action === "delete") deleteFile(path);
-            return;
-        }
-        // File item click (open/navigate/up)
-        const item = e.target.closest(".file-item[data-action]");
-        if (!item) return;
-        const action = item.dataset.action;
-        const path = item.dataset.path;
-        if (action === "navigate") navigateTo(path);
-        else if (action === "edit") editFile(path);
-        else if (action === "up") navigateUp();
-    });
-
-    // ── Event delegation: zone list (sidebar) ─
-    document.getElementById("zone-list").addEventListener("click", (e) => {
-        const li = e.target.closest("li[data-zone]");
-        if (li) openZone(li.dataset.zone);
-    });
-
-    // ── Event delegation: welcome zone cards ──
-    document.getElementById("welcome-zones").addEventListener("click", (e) => {
-        const card = e.target.closest("[data-zone]");
-        if (card) openZone(card.dataset.zone);
-    });
-
-    // ── Event delegation: breadcrumbs ─────────
-    document.getElementById("breadcrumb").addEventListener("click", (e) => {
-        const span = e.target.closest("[data-nav]");
-        if (span) navigateTo(span.dataset.nav);
-    });
-    const mbc = document.getElementById("breadcrumb-mobile");
-    if (mbc) {
-        mbc.addEventListener("click", (e) => {
-            const span = e.target.closest("[data-nav]");
-            if (span) navigateTo(span.dataset.nav);
-        });
-    }
-
-    // ── Event delegation: mobile tabs ─────────
-    document.getElementById("mobile-tabs").addEventListener("click", (e) => {
-        const tab = e.target.closest("[data-tab]");
-        if (tab) switchMobileTab(tab.dataset.tab);
-    });
-
-    // ── Event delegation: port list ───────────
-    document.getElementById("port-list").addEventListener("click", (e) => {
-        const btn = e.target.closest("[data-action]");
-        if (!btn) return;
-        const port = parseInt(btn.dataset.port);
-        if (btn.dataset.action === "open-port") openPort(port);
-        else if (btn.dataset.action === "copy-port") copyPortUrl(port);
-        else if (btn.dataset.action === "remove-port") removePort(port);
-    });
-
-    // ── Keyboard shortcuts ────────────────────
-    document.addEventListener("keydown", (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.key === "s") {
-            e.preventDefault();
-            saveFile();
-        }
-    });
-
-    window.addEventListener("resize", () => {
-        if (fitAddon) fitAddon.fit();
-        if (cmEditor) cmEditor.refresh();
-    });
-}
+      };
+
+      this.termWs.onclose = () => {
+        this.term?.write('\r\n\x1b[90m[Disconnected]\x1b[0m\r\n');
+      };
+
+      // Resize handler
+      this._resizeHandler = () => this.termFit?.fit();
+      window.addEventListener('resize', this._resizeHandler);
+
+      // ResizeObserver for container
+      this._resizeObserver = new ResizeObserver(() => this.termFit?.fit());
+      this._resizeObserver.observe(container);
+    },
+
+    disconnectTerminal() {
+      if (this.termWs) {
+        this.termWs.close();
+        this.termWs = null;
+      }
+      if (this.term) {
+        this.term.dispose();
+        this.term = null;
+      }
+      if (this._resizeHandler) {
+        window.removeEventListener('resize', this._resizeHandler);
+        this._resizeHandler = null;
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.disconnect();
+        this._resizeObserver = null;
+      }
+      this.termFit = null;
+      this.termZone = null;
+    },
+
+    // ── Ports ──
+    async loadPorts() {
+      if (!this.currentZone) return;
+      try {
+        this.ports = await this.api(`/api/zones/${this.currentZone}/ports`);
+      } catch { this.ports = []; }
+    },
+
+    async addPort() {
+      if (!this.newPort) return;
+      const form = new FormData();
+      form.append('port', this.newPort);
+      form.append('label', this.newPortLabel);
+      try {
+        await this.api(`/api/zones/${this.currentZone}/ports`, { method: 'POST', body: form });
+        this.newPort = null;
+        this.newPortLabel = '';
+        await this.loadPorts();
+        this.notify('Port đã được thêm');
+      } catch {}
+    },
+
+    async removePort(port) {
+      if (!confirm(`Xoá port ${port}?`)) return;
+      try {
+        await this.api(`/api/zones/${this.currentZone}/ports/${port}`, { method: 'DELETE' });
+        await this.loadPorts();
+      } catch {}
+    },
+  };
+}

static/index.html

@@ -1,292 +1,387 @@
 <!DOCTYPE html>
-<html lang="vi">
+<html lang="vi" class="h-full">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>HugPanel</title>
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#09090b">
-    <link rel="stylesheet" href="/static/style.css">
-    <!-- Lucide Icons -->
-    <script src="https://cdn.jsdelivr.net/npm/lucide@0.344.0/dist/umd/lucide.min.js"></script>
-    <!-- xterm.js -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
-    <!-- CodeMirror 5 -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/theme/material-darker.css">
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/javascript/javascript.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/python/python.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/go/go.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/markdown/markdown.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/shell/shell.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/css/css.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/htmlmixed/htmlmixed.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/xml/xml.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/yaml/yaml.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/toml/toml.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/dockerfile/dockerfile.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/rust/rust.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/addon/edit/closebrackets.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/addon/edit/matchbrackets.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/addon/selection/active-line.min.js"></script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HugPanel</title>
+
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            brand: {
+              50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd',
+              400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9',
+              800: '#5b21b6', 900: '#4c1d95',
+            }
+          }
+        }
+      }
+    }
+  </script>
+
+  <!-- Alpine.js -->
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+  <!-- xterm.js -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
+
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="/static/style.css" />
 </head>
-<body>
-    <div id="app">
-        <!-- Sidebar Backdrop (mobile) -->
-        <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
-
-        <!-- Sidebar -->
-        <aside id="sidebar">
-            <div class="sidebar-brand">
-                <div class="brand-icon"><i data-lucide="layout-dashboard"></i></div>
-                <span class="brand-text">HugPanel</span>
-                <button id="btn-close-sidebar" class="icon-btn-sm sidebar-close-btn"><i data-lucide="x"></i></button>
+
+<body class="h-full bg-gray-950 text-gray-100 overflow-hidden" x-data="hugpanel()" x-init="init()">
+
+  <!-- ═══ Mobile Top Bar ═══ -->
+  <header class="lg:hidden fixed top-0 inset-x-0 z-50 bg-gray-900/95 backdrop-blur border-b border-gray-800 px-4 py-3 flex items-center justify-between">
+    <button @click="sidebarOpen = !sidebarOpen" class="p-1.5 rounded-lg hover:bg-gray-800 transition">
+      <i data-lucide="menu" class="w-5 h-5"></i>
+    </button>
+    <div class="flex items-center gap-2">
+      <div class="w-7 h-7 rounded-lg bg-brand-600 flex items-center justify-center text-sm font-bold">H</div>
+      <span class="font-semibold text-sm">HugPanel</span>
+    </div>
+    <div class="w-8"></div>
+  </header>
+
+  <!-- ═══ Sidebar Overlay (mobile) ═══ -->
+  <div x-show="sidebarOpen" x-transition:enter="transition-opacity duration-200"
+       x-transition:leave="transition-opacity duration-200"
+       @click="sidebarOpen = false"
+       class="lg:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"></div>
+
+  <div class="flex h-full">
+
+    <!-- ═══ Sidebar ═══ -->
+    <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+           class="fixed lg:static inset-y-0 left-0 z-50 lg:z-auto lg:translate-x-0 w-64 bg-gray-900 border-r border-gray-800 flex flex-col transition-transform duration-300 ease-in-out">
+
+      <!-- Logo -->
+      <div class="p-4 border-b border-gray-800 flex items-center gap-3">
+        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center text-lg font-bold shadow-lg shadow-brand-500/25">H</div>
+        <div>
+          <div class="font-bold text-sm">HugPanel</div>
+          <div class="text-xs text-gray-500">Workspace Manager</div>
+        </div>
+      </div>
+
+      <!-- Zone List -->
+      <div class="flex-1 overflow-y-auto p-3 space-y-1">
+        <div class="px-2 py-1.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Zones</div>
+
+        <template x-for="zone in zones" :key="zone.name">
+          <button @click="selectZone(zone.name); sidebarOpen = false"
+                  :class="currentZone === zone.name ? 'bg-brand-600/20 text-brand-400 border-brand-500/30' : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200 border-transparent'"
+                  class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all border">
+            <i data-lucide="box" class="w-4 h-4 flex-shrink-0"></i>
+            <span x-text="zone.name" class="truncate"></span>
+          </button>
+        </template>
+
+        <div x-show="zones.length === 0" class="text-center py-8 text-gray-600 text-sm">
+          Chưa có zone nào
+        </div>
+      </div>
+
+      <!-- Create Zone -->
+      <div class="p-3 border-t border-gray-800">
+        <button @click="showCreateZone = true"
+                class="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg bg-brand-600 hover:bg-brand-500 text-white text-sm font-medium transition shadow-lg shadow-brand-600/25">
+          <i data-lucide="plus" class="w-4 h-4"></i>
+          Tạo Zone
+        </button>
+      </div>
+    </aside>
+
+    <!-- ═══ Main Content ═══ -->
+    <main class="flex-1 flex flex-col min-w-0 pt-14 lg:pt-0">
+
+      <!-- No zone selected -->
+      <div x-show="!currentZone" class="flex-1 flex items-center justify-center p-6">
+        <div class="text-center max-w-sm">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gray-800 flex items-center justify-center">
+            <i data-lucide="layout-dashboard" class="w-8 h-8 text-gray-600"></i>
+          </div>
+          <h2 class="text-lg font-semibold text-gray-400 mb-2">Chọn hoặc tạo Zone</h2>
+          <p class="text-sm text-gray-600">Chọn zone từ sidebar hoặc tạo zone mới để bắt đầu.</p>
+        </div>
+      </div>
+
+      <!-- Zone Content -->
+      <div x-show="currentZone" class="flex-1 flex flex-col min-h-0">
+
+        <!-- Tab Bar -->
+        <div class="bg-gray-900/80 backdrop-blur border-b border-gray-800 px-4">
+          <div class="flex items-center gap-1 overflow-x-auto scrollbar-hide">
+            <template x-for="tab in tabs" :key="tab.id">
+              <button @click="activeTab = tab.id"
+                      :class="activeTab === tab.id ? 'text-brand-400 border-brand-500 bg-brand-500/10' : 'text-gray-500 border-transparent hover:text-gray-300 hover:bg-gray-800'"
+                      class="flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium border-b-2 transition whitespace-nowrap rounded-t-lg">
+                <i :data-lucide="tab.icon" class="w-4 h-4"></i>
+                <span x-text="tab.label"></span>
+              </button>
+            </template>
+
+            <!-- Zone Actions (right side) -->
+            <div class="ml-auto flex items-center gap-1">
+              <span x-text="currentZone" class="text-xs text-gray-500 font-mono mr-2 hidden sm:inline"></span>
+              <button @click="confirmDeleteZone()" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-400/10 transition" title="Xoá zone">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+              </button>
             </div>
+          </div>
+        </div>
 
-            <nav class="sidebar-nav">
-                <div class="nav-group">
-                    <div class="nav-group-header">
-                        <span>ZONES</span>
-                        <button id="btn-add-zone" class="icon-btn-sm" title="Tạo zone mới">
-                            <i data-lucide="plus"></i>
-                        </button>
-                    </div>
-                    <ul id="zone-list" class="zone-list"></ul>
-                </div>
-            </nav>
+        <!-- ═══ TAB: Files ═══ -->
+        <div x-show="activeTab === 'files'" class="flex-1 flex flex-col min-h-0">
 
-            <div class="sidebar-bottom">
-                <div class="env-badges">
-                    <span class="badge badge-green">Node 20</span>
-                    <span class="badge badge-cyan">Go 1.22</span>
-                    <span class="badge badge-yellow">Python 3.11</span>
+          <!-- File Toolbar -->
+          <div class="px-4 py-2 bg-gray-900/50 border-b border-gray-800 flex flex-wrap items-center gap-2">
+            <!-- Breadcrumb -->
+            <div class="flex items-center gap-1 text-sm flex-1 min-w-0 overflow-x-auto scrollbar-hide">
+              <button @click="navigateTo('')" class="text-brand-400 hover:text-brand-300 flex-shrink-0">
+                <i data-lucide="home" class="w-3.5 h-3.5"></i>
+              </button>
+              <template x-for="(part, i) in currentPathParts" :key="i">
+                <div class="flex items-center gap-1 flex-shrink-0">
+                  <i data-lucide="chevron-right" class="w-3 h-3 text-gray-600"></i>
+                  <button @click="navigateTo(currentPathParts.slice(0, i+1).join('/'))"
+                          class="text-gray-400 hover:text-brand-400 transition truncate max-w-[120px]"
+                          x-text="part"></button>
                 </div>
+              </template>
             </div>
-        </aside>
-
-        <!-- Main -->
-        <main id="main">
-            <!-- Global hamburger (visible on mobile for both views) -->
-            <button id="btn-hamburger" class="icon-btn-sm hamburger-global" title="Menu">
-                <i data-lucide="menu"></i>
-            </button>
-
-            <!-- Welcome -->
-            <div id="welcome" class="view active">
-                <div class="welcome-hero">
-                    <div class="welcome-glow"></div>
-                    <div class="welcome-icon"><i data-lucide="server"></i></div>
-                    <h1>HugPanel</h1>
-                    <p>Multi-zone workspace with file manager, code editor &amp; terminal.</p>
-                    <div id="welcome-zones" class="welcome-zones"></div>
-                    <button id="btn-create-zone-welcome" class="btn btn-accent btn-lg">
-                        <i data-lucide="plus"></i> Create Zone
-                    </button>
-                </div>
+
+            <!-- File Actions -->
+            <div class="flex items-center gap-1">
+              <button @click="showNewFile = true" class="p-1.5 rounded-lg text-gray-400 hover:text-brand-400 hover:bg-brand-400/10 transition" title="Tạo file">
+                <i data-lucide="file-plus" class="w-4 h-4"></i>
+              </button>
+              <button @click="showNewFolder = true" class="p-1.5 rounded-lg text-gray-400 hover:text-brand-400 hover:bg-brand-400/10 transition" title="Tạo thư mục">
+                <i data-lucide="folder-plus" class="w-4 h-4"></i>
+              </button>
+              <label class="p-1.5 rounded-lg text-gray-400 hover:text-brand-400 hover:bg-brand-400/10 transition cursor-pointer" title="Upload">
+                <i data-lucide="upload" class="w-4 h-4"></i>
+                <input type="file" class="hidden" @change="uploadFile($event)" multiple />
+              </label>
+              <button @click="loadFiles()" class="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-800 transition" title="Refresh">
+                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+              </button>
             </div>
+          </div>
 
-            <!-- Workspace -->
-            <div id="workspace" class="view">
-                <div class="topbar">
-                    <div class="topbar-left">
-                        <span class="zone-indicator" id="zone-badge">
-                            <i data-lucide="box"></i>
-                            <span id="zone-title"></span>
-                        </span>
-                        <span class="topbar-sep desktop-only"></span>
-                        <div class="breadcrumb desktop-only" id="breadcrumb"></div>
-                    </div>
-                    <div class="topbar-right">
-                        <div class="port-controls" id="port-controls">
-                            <button class="btn btn-sm btn-ghost" id="btn-toggle-ports" title="Virtual Ports">
-                                <i data-lucide="network"></i>
-                                <span>Ports</span>
-                                <span class="port-count" id="port-count" style="display:none">0</span>
-                            </button>
-                        </div>
-                        <button id="btn-delete-zone" class="icon-btn icon-btn-danger" title="Delete zone">
-                            <i data-lucide="trash-2"></i>
-                        </button>
-                    </div>
-                </div>
+          <!-- New File/Folder Inputs -->
+          <div x-show="showNewFile" class="px-4 py-2 bg-gray-800/50 border-b border-gray-800 flex items-center gap-2">
+            <i data-lucide="file" class="w-4 h-4 text-gray-500"></i>
+            <input x-ref="newFileInput" x-model="newFileName" @keydown.enter="createFile()" @keydown.escape="showNewFile = false"
+                   placeholder="filename.txt" class="flex-1 bg-transparent text-sm outline-none placeholder-gray-600" />
+            <button @click="createFile()" class="px-3 py-1 text-xs bg-brand-600 hover:bg-brand-500 rounded-md transition">Tạo</button>
+            <button @click="showNewFile = false" class="px-2 py-1 text-xs text-gray-500 hover:text-gray-300">Huỷ</button>
+          </div>
+          <div x-show="showNewFolder" class="px-4 py-2 bg-gray-800/50 border-b border-gray-800 flex items-center gap-2">
+            <i data-lucide="folder" class="w-4 h-4 text-gray-500"></i>
+            <input x-ref="newFolderInput" x-model="newFolderName" @keydown.enter="createFolder()" @keydown.escape="showNewFolder = false"
+                   placeholder="folder-name" class="flex-1 bg-transparent text-sm outline-none placeholder-gray-600" />
+            <button @click="createFolder()" class="px-3 py-1 text-xs bg-brand-600 hover:bg-brand-500 rounded-md transition">Tạo</button>
+            <button @click="showNewFolder = false" class="px-2 py-1 text-xs text-gray-500 hover:text-gray-300">Huỷ</button>
+          </div>
 
-                <div class="workspace-body">
-                    <!-- File Panel -->
-                    <div class="panel panel-files" id="panel-files">
-                        <div class="panel-header">
-                            <span class="panel-title"><i data-lucide="folder-open"></i> Explorer</span>
-                            <div class="panel-actions">
-                                <button class="icon-btn-sm" id="btn-new-file" title="New File"><i data-lucide="file-plus"></i></button>
-                                <button class="icon-btn-sm" id="btn-new-folder" title="New Folder"><i data-lucide="folder-plus"></i></button>
-                                <button class="icon-btn-sm" id="btn-upload" title="Upload"><i data-lucide="upload"></i></button>
-                            </div>
-                        </div>
-                        <div class="breadcrumb mobile-breadcrumb mobile-only" id="breadcrumb-mobile"></div>
-                        <div id="file-list" class="file-tree"></div>
-                        <input type="file" id="file-upload-input" style="display:none" multiple>
-                    </div>
+          <!-- File List -->
+          <div class="flex-1 overflow-y-auto">
+            <div x-show="filesLoading" class="flex items-center justify-center py-12">
+              <div class="w-6 h-6 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+            </div>
 
-                    <div class="resizer-v" id="resizer-v"></div>
-
-                    <!-- Right: Editor + Terminal -->
-                    <div class="panel panel-right" id="panel-right">
-                        <div class="pane pane-editor" id="pane-editor">
-                            <div class="pane-header">
-                                <div class="pane-tabs" id="editor-tabs">
-                                    <span class="tab-placeholder"><i data-lucide="code-2"></i> No file open</span>
-                                </div>
-                                <div class="pane-actions">
-                                    <button class="icon-btn-sm" id="btn-save-file" title="Save (Ctrl+S)"><i data-lucide="save"></i></button>
-                                </div>
-                            </div>
-                            <div id="editor-container" class="editor-container">
-                                <div class="editor-empty">
-                                    <i data-lucide="mouse-pointer-click"></i>
-                                    <p>Tap a file to open</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="resizer-h" id="resizer-h"></div>
-
-                        <div class="pane pane-terminal" id="pane-terminal">
-                            <div class="pane-header">
-                                <span class="pane-title"><i data-lucide="terminal-square"></i> Terminal</span>
-                                <div class="pane-actions">
-                                    <button class="icon-btn-sm" id="btn-reconnect" title="Reconnect"><i data-lucide="refresh-cw"></i></button>
-                                </div>
-                            </div>
-                            <div id="terminal-container" class="terminal-container"></div>
-                        </div>
-                    </div>
-                </div>
+            <div x-show="!filesLoading && files.length === 0" class="text-center py-12 text-gray-600 text-sm">
+              Thư mục trống
+            </div>
+
+            <div x-show="!filesLoading" class="divide-y divide-gray-800/50">
+              <!-- Back button -->
+              <button x-show="currentPath !== ''"
+                      @click="navigateUp()"
+                      class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-800/50 transition text-gray-400">
+                <i data-lucide="corner-left-up" class="w-4 h-4"></i>
+                <span class="text-sm">..</span>
+              </button>
 
-                <!-- Mobile Bottom Tab Bar -->
-                <nav id="mobile-tabs" class="mobile-tabs">
-                    <button class="mobile-tab active" data-tab="files">
-                        <i data-lucide="folder"></i>
-                        <span>Files</span>
+              <template x-for="file in files" :key="file.name">
+                <div class="group flex items-center gap-3 px-4 py-2.5 hover:bg-gray-800/50 transition cursor-pointer"
+                     @click="file.is_dir ? navigateTo(joinPath(currentPath, file.name)) : openFile(joinPath(currentPath, file.name))">
+                  <i :data-lucide="file.is_dir ? 'folder' : getFileIcon(file.name)"
+                     :class="file.is_dir ? 'text-brand-400' : 'text-gray-500'"
+                     class="w-4 h-4 flex-shrink-0"></i>
+                  <span class="flex-1 text-sm truncate" x-text="file.name"></span>
+                  <span x-show="!file.is_dir" class="text-xs text-gray-600 hidden sm:inline" x-text="formatSize(file.size)"></span>
+
+                  <!-- File Actions -->
+                  <div class="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition">
+                    <button x-show="!file.is_dir" @click.stop="downloadFile(joinPath(currentPath, file.name), file.name)"
+                            class="p-1 rounded text-gray-500 hover:text-brand-400 hover:bg-brand-400/10" title="Download">
+                      <i data-lucide="download" class="w-3.5 h-3.5"></i>
                     </button>
-                    <button class="mobile-tab" data-tab="editor">
-                        <i data-lucide="code-2"></i>
-                        <span>Editor</span>
+                    <button @click.stop="startRename(file)" class="p-1 rounded text-gray-500 hover:text-yellow-400 hover:bg-yellow-400/10" title="Đổi tên">
+                      <i data-lucide="pencil" class="w-3.5 h-3.5"></i>
                     </button>
-                    <button class="mobile-tab" data-tab="terminal">
-                        <i data-lucide="terminal-square"></i>
-                        <span>Terminal</span>
+                    <button @click.stop="deleteFile(joinPath(currentPath, file.name), file.is_dir)"
+                            class="p-1 rounded text-gray-500 hover:text-red-400 hover:bg-red-400/10" title="Xoá">
+                      <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                     </button>
-                </nav>
+                  </div>
+                </div>
+              </template>
             </div>
-        </main>
-    </div>
-
-    <!-- Toasts -->
-    <div id="toast-container" class="toast-container"></div>
+          </div>
+        </div>
 
-    <!-- Modal: Create Zone -->
-    <div id="modal-overlay" class="modal-overlay hidden">
-        <div class="modal">
-            <div class="modal-header">
-                <h3><i data-lucide="plus-circle"></i> Create Zone</h3>
-                <button class="icon-btn-sm" id="btn-close-create-modal"><i data-lucide="x"></i></button>
+        <!-- ═══ TAB: Editor ═══ -->
+        <div x-show="activeTab === 'editor'" class="flex-1 flex flex-col min-h-0">
+          <div x-show="!editorFile" class="flex-1 flex items-center justify-center text-gray-600 text-sm">
+            Chọn file để chỉnh sửa
+          </div>
+          <div x-show="editorFile" class="flex-1 flex flex-col min-h-0">
+            <div class="px-4 py-2 bg-gray-900/50 border-b border-gray-800 flex items-center gap-2">
+              <i data-lucide="file-code" class="w-4 h-4 text-brand-400"></i>
+              <span class="text-sm text-gray-300 truncate" x-text="editorFile"></span>
+              <div class="ml-auto flex items-center gap-2">
+                <span x-show="editorDirty" class="text-xs text-yellow-500">Chưa lưu</span>
+                <button @click="saveFile()" :disabled="!editorDirty"
+                        :class="editorDirty ? 'bg-brand-600 hover:bg-brand-500 text-white' : 'bg-gray-800 text-gray-600 cursor-not-allowed'"
+                        class="px-3 py-1 text-xs rounded-md transition font-medium">
+                  Lưu
+                </button>
+              </div>
             </div>
-            <form id="form-create-zone">
-                <div class="form-group">
-                    <label for="input-zone-name">Zone name</label>
-                    <input type="text" id="input-zone-name" placeholder="my-project" pattern="[a-zA-Z0-9_-]+" required autocomplete="off">
-                    <span class="form-hint">Only a-z, 0-9, hyphens and underscores</span>
-                </div>
-                <div class="form-group">
-                    <label for="input-zone-desc">Description <span class="optional">(optional)</span></label>
-                    <input type="text" id="input-zone-desc" placeholder="Short description...">
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-ghost" id="btn-cancel-create-modal">Cancel</button>
-                    <button type="submit" class="btn btn-accent"><i data-lucide="plus"></i> Create</button>
-                </div>
-            </form>
+            <div class="flex-1 min-h-0">
+              <textarea x-model="editorContent" @input="editorDirty = true"
+                        @keydown.ctrl.s.prevent="saveFile()"
+                        class="w-full h-full p-4 bg-gray-950 text-gray-200 text-sm font-mono resize-none outline-none leading-relaxed"
+                        spellcheck="false"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══ TAB: Terminal ═══ -->
+        <div x-show="activeTab === 'terminal'" x-effect="if(activeTab==='terminal') initTerminal()" class="flex-1 flex flex-col min-h-0">
+          <div id="terminal-container" class="flex-1 min-h-0 p-1 bg-black"></div>
         </div>
-    </div>
 
-    <!-- Modal: Prompt -->
-    <div id="modal-prompt" class="modal-overlay hidden">
-        <div class="modal modal-sm">
-            <div class="modal-header">
-                <h3 id="prompt-title">Enter name</h3>
-                <button class="icon-btn-sm" id="btn-close-prompt"><i data-lucide="x"></i></button>
+        <!-- ═══ TAB: Ports ═══ -->
+        <div x-show="activeTab === 'ports'" class="flex-1 overflow-y-auto">
+          <div class="p-4 space-y-4">
+            <!-- Add Port -->
+            <div class="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 class="text-sm font-medium text-gray-300 mb-3">Thêm Port</h3>
+              <div class="flex flex-col sm:flex-row gap-2">
+                <input x-model.number="newPort" type="number" min="1024" max="65535" placeholder="Port (1024-65535)"
+                       class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm outline-none focus:border-brand-500 transition" />
+                <input x-model="newPortLabel" placeholder="Label (tuỳ chọn)"
+                       class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm outline-none focus:border-brand-500 transition" />
+                <button @click="addPort()" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 rounded-lg text-sm font-medium transition">
+                  Thêm
+                </button>
+              </div>
             </div>
-            <form id="form-prompt">
-                <div class="form-group">
-                    <input type="text" id="prompt-input" required autocomplete="off">
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-ghost" id="btn-cancel-prompt">Cancel</button>
-                    <button type="submit" class="btn btn-accent">OK</button>
+
+            <!-- Port List -->
+            <div class="space-y-2">
+              <template x-for="port in ports" :key="port.port">
+                <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 flex items-center gap-3">
+                  <div class="w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center flex-shrink-0">
+                    <i data-lucide="radio" class="w-5 h-5 text-green-400"></i>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium" x-text="port.label || 'Port ' + port.port"></div>
+                    <div class="text-xs text-gray-500">
+                      Port: <span x-text="port.port" class="text-gray-400 font-mono"></span>
+                    </div>
+                  </div>
+                  <a :href="'/port/' + currentZone + '/' + port.port + '/'"
+                     target="_blank"
+                     class="p-2 rounded-lg text-gray-400 hover:text-brand-400 hover:bg-brand-400/10 transition" title="Mở">
+                    <i data-lucide="external-link" class="w-4 h-4"></i>
+                  </a>
+                  <button @click="removePort(port.port)"
+                          class="p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-400/10 transition" title="Xoá">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                  </button>
                 </div>
-            </form>
+              </template>
+
+              <div x-show="ports.length === 0" class="text-center py-8 text-gray-600 text-sm">
+                Chưa có port nào
+              </div>
+            </div>
+          </div>
         </div>
-    </div>
+      </div>
+    </main>
+  </div>
 
-    <!-- Port Panel (dropdown) -->
-    <div id="port-panel" class="port-panel hidden">
-        <div class="port-panel-header">
-            <span><i data-lucide="network"></i> Virtual Ports</span>
-            <button class="icon-btn-sm" id="btn-add-port" title="Add port"><i data-lucide="plus"></i></button>
+  <!-- ═══ MODAL: Create Zone ═══ -->
+  <div x-show="showCreateZone" x-transition:enter="transition duration-200" x-transition:leave="transition duration-150"
+       class="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+    <div @click.outside="showCreateZone = false"
+         class="w-full max-w-md bg-gray-900 rounded-2xl border border-gray-800 shadow-2xl overflow-hidden">
+      <div class="p-5 border-b border-gray-800">
+        <h2 class="text-lg font-semibold">Tạo Zone mới</h2>
+      </div>
+      <div class="p-5 space-y-4">
+        <div>
+          <label class="block text-xs text-gray-500 mb-1.5">Tên Zone</label>
+          <input x-model="createZoneName" x-ref="zoneNameInput" @keydown.enter="createZone()"
+                 placeholder="my-project" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" />
         </div>
-        <div class="port-panel-hint">
-            Run a server in terminal, map its port here, then click Open to view it through HugPanel's single exposed port.
+        <div>
+          <label class="block text-xs text-gray-500 mb-1.5">Mô tả (tuỳ chọn)</label>
+          <input x-model="createZoneDesc" @keydown.enter="createZone()"
+                 placeholder="Mô tả ngắn..." class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" />
         </div>
-        <div id="port-list" class="port-list"></div>
+      </div>
+      <div class="p-5 border-t border-gray-800 flex gap-2 justify-end">
+        <button @click="showCreateZone = false" class="px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition">Huỷ</button>
+        <button @click="createZone()" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 rounded-lg text-sm font-medium transition">Tạo</button>
+      </div>
     </div>
+  </div>
 
-    <!-- Modal: Confirm -->
-    <div id="modal-confirm" class="modal-overlay hidden">
-        <div class="modal modal-sm">
-            <div class="modal-header">
-                <h3 id="confirm-title">Confirm</h3>
-                <button class="icon-btn-sm" id="btn-close-confirm"><i data-lucide="x"></i></button>
-            </div>
-            <div style="padding:16px">
-                <p id="confirm-message" style="font-size:14px;color:var(--text-2)"></p>
-            </div>
-            <div class="modal-footer" style="padding:0 16px 16px">
-                <button type="button" class="btn btn-ghost" id="btn-confirm-cancel">Cancel</button>
-                <button type="button" class="btn btn-danger" id="btn-confirm-ok">Delete</button>
-            </div>
-        </div>
+  <!-- ═══ MODAL: Rename ═══ -->
+  <div x-show="showRename" x-transition class="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+    <div @click.outside="showRename = false" class="w-full max-w-sm bg-gray-900 rounded-2xl border border-gray-800 shadow-2xl overflow-hidden">
+      <div class="p-5 border-b border-gray-800">
+        <h2 class="text-base font-semibold">Đổi tên</h2>
+      </div>
+      <div class="p-5">
+        <input x-model="renameNewName" x-ref="renameInput" @keydown.enter="doRename()" @keydown.escape="showRename = false"
+               class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-brand-500 transition" />
+      </div>
+      <div class="p-5 border-t border-gray-800 flex gap-2 justify-end">
+        <button @click="showRename = false" class="px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition">Huỷ</button>
+        <button @click="doRename()" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 rounded-lg text-sm font-medium transition">Đổi tên</button>
+      </div>
     </div>
+  </div>
 
-    <!-- Modal: Add Port -->
-    <div id="modal-add-port" class="modal-overlay hidden">
-        <div class="modal modal-sm">
-            <div class="modal-header">
-                <h3><i data-lucide="network"></i> Map Port</h3>
-                <button class="icon-btn-sm" id="btn-close-port-modal"><i data-lucide="x"></i></button>
-            </div>
-            <form id="form-add-port">
-                <div class="form-group">
-                    <label for="input-port-number">Port number</label>
-                    <input type="number" id="input-port-number" min="1024" max="65535" placeholder="3000" required>
-                    <span class="form-hint">The internal port your server listens on (1024–65535)</span>
-                </div>
-                <div class="form-group">
-                    <label for="input-port-label">Label <span class="optional">(optional)</span></label>
-                    <input type="text" id="input-port-label" placeholder="e.g. React Dev Server">
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-ghost" id="btn-cancel-port-modal">Cancel</button>
-                    <button type="submit" class="btn btn-accent"><i data-lucide="plus"></i> Map Port</button>
-                </div>
-            </form>
-        </div>
-    </div>
+  <!-- ═══ Toast ═══ -->
+  <div x-show="toast.show" x-transition:enter="transition transform duration-300"
+       x-transition:enter-start="translate-y-4 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
+       x-transition:leave="transition transform duration-200"
+       x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-4 opacity-0"
+       :class="toast.type === 'error' ? 'bg-red-900/90 border-red-700' : 'bg-gray-800/90 border-gray-700'"
+       class="fixed bottom-4 right-4 z-[110] max-w-sm px-4 py-3 rounded-xl border backdrop-blur shadow-2xl text-sm">
+    <span x-text="toast.message"></span>
+  </div>
 
-    <script src="/static/app.js"></script>
+  <script src="/static/app.js"></script>
 </body>
-</html>
+</html>

static/style.css

@@ -1,1300 +1,92 @@
-/* ═══════════════════════════════════════════════
-   HugPanel — Modern IDE-style Dashboard
-   ═══════════════════════════════════════════════ */
+/* ═══ HugPanel Custom Styles ═══ */
 
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-:root {
-    --bg-0: #09090b;
-    --bg-1: #0f0f12;
-    --bg-2: #18181b;
-    --bg-3: #1e1e22;
-    --bg-4: #27272a;
-    --bg-hover: #2a2a2f;
-    --bg-active: #323238;
-
-    --border: #27272a;
-    --border-subtle: #1e1e22;
-    --border-focus: #3b82f6;
-
-    --text: #fafafa;
-    --text-2: #a1a1aa;
-    --text-3: #71717a;
-
-    --accent: #3b82f6;
-    --accent-hover: #60a5fa;
-    --accent-glow: rgba(59, 130, 246, 0.15);
-    --danger: #ef4444;
-    --danger-hover: #f87171;
-    --success: #22c55e;
-    --warning: #f59e0b;
-
-    --radius-sm: 4px;
-    --radius: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-
-    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
-    --shadow: 0 4px 16px rgba(0,0,0,0.4);
-    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
-
-    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
-
-    --sidebar-w: 240px;
-    --topbar-h: 44px;
-    --panel-header-h: 36px;
-
-    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
-
-html, body { height: 100%; overflow: hidden; }
-
-body {
-    background: var(--bg-0);
-    color: var(--text);
-    font-family: var(--font);
-    font-size: 13px;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
+::-webkit-scrollbar-track {
+  background: transparent;
 }
-
-/* ── Scrollbar ──────────────── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
-
-/* ── Layout ─────────────────── */
-#app { display: flex; height: 100vh; }
-
-/* ── Sidebar ────────────────── */
-#sidebar {
-    width: var(--sidebar-w);
-    min-width: var(--sidebar-w);
-    background: var(--bg-1);
-    border-right: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    z-index: 10;
+::-webkit-scrollbar-thumb {
+  background: #374151;
+  border-radius: 3px;
 }
-
-.sidebar-brand {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px 16px 12px;
+::-webkit-scrollbar-thumb:hover {
+  background: #4b5563;
 }
 
-.brand-icon {
-    width: 32px; height: 32px;
-    background: linear-gradient(135deg, var(--accent), #8b5cf6);
-    border-radius: var(--radius);
-    display: flex; align-items: center; justify-content: center;
-    color: #fff;
+/* Hide scrollbar utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
-
-.brand-icon svg { width: 18px; height: 18px; }
-.brand-text { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
-
-.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 0; }
-
-.nav-group { padding: 0 8px; }
-
-.nav-group-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 8px 6px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.8px;
-    color: var(--text-3);
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
 }
 
-.zone-list { list-style: none; }
-
-.zone-list li {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 10px;
-    margin: 1px 0;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    color: var(--text-2);
-    font-size: 13px;
-    transition: all var(--transition);
+/* Terminal container */
+#terminal-container {
+  min-height: 200px;
 }
-
-.zone-list li:hover { background: var(--bg-hover); color: var(--text); }
-
-.zone-list li.active {
-    background: var(--accent-glow);
-    color: var(--accent-hover);
+#terminal-container .xterm {
+  height: 100%;
+  padding: 4px;
 }
-
-.zone-list li .zone-icon {
-    width: 18px; height: 18px; flex-shrink: 0;
-    opacity: 0.6;
+#terminal-container .xterm-viewport {
+  scrollbar-width: thin;
+  scrollbar-color: #374151 transparent;
 }
-
-.zone-list li.active .zone-icon { opacity: 1; color: var(--accent); }
-
-.zone-list li .zone-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.zone-list li .zone-desc { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.sidebar-bottom {
-    padding: 12px 16px;
-    border-top: 1px solid var(--border);
+#terminal-container .xterm-viewport::-webkit-scrollbar {
+  width: 6px;
 }
-
-.env-badges { display: flex; gap: 6px; flex-wrap: wrap; }
-
-.badge {
-    padding: 2px 8px;
-    border-radius: 20px;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.3px;
+#terminal-container .xterm-viewport::-webkit-scrollbar-thumb {
+  background: #374151;
+  border-radius: 3px;
 }
 
-.badge-green { background: rgba(34,197,94,0.12); color: #4ade80; }
-.badge-cyan { background: rgba(56,189,248,0.12); color: #38bdf8; }
-.badge-yellow { background: rgba(245,158,11,0.12); color: #fbbf24; }
-
-/* ── Icon Buttons ──────────── */
-.icon-btn-sm {
-    width: 26px; height: 26px;
-    display: inline-flex; align-items: center; justify-content: center;
-    background: transparent;
-    border: none;
-    border-radius: var(--radius-sm);
-    color: var(--text-3);
-    cursor: pointer;
-    transition: all var(--transition);
+/* Textarea editor */
+textarea {
+  tab-size: 4;
+  -moz-tab-size: 4;
 }
 
-.icon-btn-sm svg { width: 14px; height: 14px; }
-.icon-btn-sm:hover { background: var(--bg-hover); color: var(--text); }
-
-.icon-btn {
-    width: 32px; height: 32px;
-    display: inline-flex; align-items: center; justify-content: center;
-    background: transparent;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text-2);
-    cursor: pointer;
-    transition: all var(--transition);
+/* Smooth transitions */
+* {
+  -webkit-tap-highlight-color: transparent;
 }
 
-.icon-btn svg { width: 16px; height: 16px; }
-.icon-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-3); }
-.icon-btn-danger:hover { background: rgba(239,68,68,0.1); color: var(--danger); border-color: var(--danger); }
-
-/* ── Buttons ───────────────── */
-.btn {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 8px 16px;
-    border: none;
-    border-radius: var(--radius);
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--transition);
-    white-space: nowrap;
+/* Mobile touch improvements */
+@media (max-width: 1023px) {
+  .group:hover .group-hover\:opacity-100 {
+    opacity: 1;
+  }
+  /* Always show file actions on mobile */
+  .group .opacity-0 {
+    opacity: 1 !important;
+  }
 }
 
-.btn svg { width: 14px; height: 14px; }
-
-.btn-accent {
-    background: var(--accent);
-    color: #fff;
-    box-shadow: 0 0 20px var(--accent-glow);
+/* Focus ring */
+input:focus, textarea:focus, button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
 }
 
-.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 0 30px var(--accent-glow); }
-
-.btn-ghost {
-    background: transparent;
-    color: var(--text-2);
-    border: 1px solid var(--border);
+/* Animation for loading spinner */
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
-
-.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
-
-.btn-danger {
-    background: var(--danger);
-    color: #fff;
-    border: none;
-}
-.btn-danger:hover { background: #dc2626; }
-
-.btn-lg { padding: 12px 24px; font-size: 14px; border-radius: var(--radius-lg); }
-.btn-lg svg { width: 16px; height: 16px; }
-
-/* ── Main ──────────────────── */
-#main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: var(--bg-0);
-}
-
-.view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
-.view.active { display: flex; }
-
-/* ── Welcome ───────────────── */
-.welcome-hero {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    gap: 16px;
-}
-
-.welcome-glow {
-    position: absolute;
-    width: 300px; height: 300px;
-    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
-    border-radius: 50%;
-    filter: blur(60px);
-    pointer-events: none;
-}
-
-.welcome-icon {
-    width: 80px; height: 80px;
-    background: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-xl);
-    display: flex; align-items: center; justify-content: center;
-    color: var(--accent);
-    position: relative;
-}
-
-.welcome-icon svg { width: 36px; height: 36px; }
-
-.welcome-hero h1 {
-    font-size: 28px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-}
-
-.welcome-hero p {
-    color: var(--text-2);
-    font-size: 15px;
-    max-width: 360px;
-    text-align: center;
-}
-
-/* ── Welcome Zone Grid ─────── */
-.welcome-zones {
-    max-width: 480px;
-    width: 100%;
-    padding: 0 16px;
-}
-
-.welcome-hint {
-    color: var(--text-3);
-    font-size: 13px;
-    text-align: center;
-}
-
-.zone-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    justify-content: center;
-}
-
-.zone-card {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 18px;
-    background: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text);
-    font-size: 14px;
-    font-weight: 500;
-    font-family: var(--font);
-    cursor: pointer;
-    transition: all var(--transition);
-    -webkit-tap-highlight-color: transparent;
-    min-height: 44px;
-}
-
-.zone-card svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
-.zone-card:hover { background: var(--bg-hover); border-color: var(--accent); }
-.zone-card:active { background: var(--bg-active); transform: scale(0.97); }
-
-/* ── Global Hamburger ──────── */
-.hamburger-global {
-    display: none;
-    position: fixed;
-    top: 10px;
-    left: 10px;
-    z-index: 40;
-    width: 40px;
-    height: 40px;
-    background: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-}
-
-.hamburger-global svg { width: 20px; height: 20px; }
-
-/* ── Topbar ────────────────── */
-.topbar {
-    height: var(--topbar-h);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 12px;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg-1);
-    flex-shrink: 0;
-}
-
-.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
-.topbar-right { display: flex; align-items: center; gap: 6px; }
-
-.zone-indicator {
-    display: flex; align-items: center; gap: 6px;
-    padding: 4px 10px;
-    background: var(--accent-glow);
-    border-radius: var(--radius-sm);
-    color: var(--accent-hover);
-    font-weight: 600;
-    font-size: 12px;
-    flex-shrink: 0;
-}
-
-.zone-indicator svg { width: 13px; height: 13px; }
-
-.topbar-sep {
-    width: 1px; height: 16px;
-    background: var(--border);
-    flex-shrink: 0;
-}
-
-.breadcrumb {
-    display: flex; align-items: center; gap: 2px;
-    font-size: 12px;
-    overflow-x: auto;
-    min-width: 0;
-}
-
-.breadcrumb span {
-    color: var(--text-3);
-    cursor: pointer;
-    padding: 2px 5px;
-    border-radius: var(--radius-sm);
-    white-space: nowrap;
-    transition: all var(--transition);
-}
-
-.breadcrumb span:hover { color: var(--text); background: var(--bg-hover); }
-.breadcrumb .sep { cursor: default; color: var(--text-3); padding: 0 1px; }
-.breadcrumb .sep:hover { background: none; color: var(--text-3); }
-
-/* ── Workspace Body ────────── */
-.workspace-body {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-}
-
-/* ── Panels ────────────────── */
-.panel { display: flex; flex-direction: column; overflow: hidden; }
-
-.panel-files {
-    width: 260px;
-    min-width: 180px;
-    max-width: 500px;
-    border-right: 1px solid var(--border);
-    background: var(--bg-1);
-}
-
-.panel-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
-
-.panel-header {
-    height: var(--panel-header-h);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-}
-
-.panel-title {
-    display: flex; align-items: center; gap: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-3);
-}
-
-.panel-title svg { width: 13px; height: 13px; }
-
-.panel-actions { display: flex; gap: 2px; }
-
-/* ── File Tree ─────────────── */
-.file-tree {
-    flex: 1;
-    overflow-y: auto;
-    padding: 4px 0;
-}
-
-.file-item {
-    display: flex;
-    align-items: center;
-    padding: 4px 12px;
-    gap: 8px;
-    cursor: pointer;
-    transition: background var(--transition);
-    height: 30px;
-}
-
-.file-item:hover { background: var(--bg-hover); }
-.file-item:active { background: var(--bg-active); }
-
-.file-item .fi-icon {
-    width: 16px; height: 16px;
-    flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-}
-
-.file-item .fi-icon svg { width: 14px; height: 14px; }
-
-.fi-icon-folder { color: var(--accent); }
-.fi-icon-file { color: var(--text-3); }
-.fi-icon-js { color: #f7df1e; }
-.fi-icon-ts { color: #3178c6; }
-.fi-icon-py { color: #3572a5; }
-.fi-icon-go { color: #00add8; }
-.fi-icon-html { color: #e34c26; }
-.fi-icon-css { color: #563d7c; }
-.fi-icon-json { color: #f59e0b; }
-.fi-icon-md { color: var(--text-2); }
-.fi-icon-img { color: #22c55e; }
-.fi-icon-config { color: var(--text-3); }
-.fi-icon-back { color: var(--text-3); }
-
-.file-item .fi-name {
-    flex: 1;
-    font-size: 13px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-2);
-}
-
-.file-item:hover .fi-name { color: var(--text); }
-
-.file-item .fi-size {
-    font-size: 11px;
-    color: var(--text-3);
-    white-space: nowrap;
-    font-family: var(--font-mono);
-}
-
-.file-item .fi-actions {
-    display: flex; gap: 1px;
-    opacity: 0.4;
-    transition: opacity var(--transition);
-}
-
-.file-item:hover .fi-actions { opacity: 1; }
-
-.fi-actions button {
-    width: 22px; height: 22px;
-    display: flex; align-items: center; justify-content: center;
-    background: none; border: none;
-    color: var(--text-3);
-    cursor: pointer;
-    border-radius: var(--radius-sm);
-    transition: all var(--transition);
-}
-
-.fi-actions button svg { width: 12px; height: 12px; }
-.fi-actions button:hover { background: var(--bg-active); color: var(--text); }
-.fi-actions button.fi-del:hover { color: var(--danger); }
-
-/* ── Resizers ──────────────── */
-.resizer-v {
-    width: 4px;
-    cursor: col-resize;
-    background: transparent;
-    transition: background var(--transition);
-    flex-shrink: 0;
-    position: relative;
-}
-
-.resizer-v:hover, .resizer-v.active { background: var(--accent); }
-
-.resizer-h {
-    height: 4px;
-    cursor: row-resize;
-    background: transparent;
-    transition: background var(--transition);
-    flex-shrink: 0;
-}
-
-.resizer-h:hover, .resizer-h.active { background: var(--accent); }
-
-/* ── Panes ─────────────────── */
-.pane { display: flex; flex-direction: column; overflow: hidden; }
-.pane-editor { flex: 1; min-height: 100px; }
-.pane-terminal { height: 260px; min-height: 100px; }
-
-.pane-header {
-    height: var(--panel-header-h);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-    background: var(--bg-2);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-}
-
-.pane-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; overflow-x: auto; }
-
-.pane-tab {
-    display: flex; align-items: center; gap: 5px;
-    padding: 4px 12px;
-    border-radius: var(--radius-sm);
-    background: var(--bg-3);
-    color: var(--text-2);
-    font-size: 12px;
-    white-space: nowrap;
-    max-width: 200px;
-}
-
-.pane-tab svg { width: 12px; height: 12px; flex-shrink: 0; }
-.pane-tab .tab-name { overflow: hidden; text-overflow: ellipsis; }
-
-.pane-tab .tab-dot {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: var(--accent);
-    flex-shrink: 0;
-}
-
-.tab-placeholder {
-    display: flex; align-items: center; gap: 6px;
-    color: var(--text-3);
-    font-size: 12px;
-}
-
-.tab-placeholder svg { width: 13px; height: 13px; }
-
-.pane-title {
-    display: flex; align-items: center; gap: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-3);
-}
-
-.pane-title svg { width: 13px; height: 13px; }
-
-.pane-actions { display: flex; gap: 2px; }
-
-/* ── Editor ────────────────── */
-.editor-container { flex: 1; overflow: hidden; position: relative; }
-
-.editor-empty {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    color: var(--text-3);
-}
-
-.editor-empty svg { width: 28px; height: 28px; opacity: 0.3; }
-.editor-empty p { font-size: 13px; }
-
-/* CodeMirror overrides */
-.editor-container .CodeMirror {
-    height: 100%;
-    font-family: var(--font-mono);
-    font-size: 13px;
-    line-height: 1.6;
-    background: var(--bg-0);
-}
-
-.CodeMirror-gutters {
-    background: var(--bg-1) !important;
-    border-right: 1px solid var(--border) !important;
-}
-
-.CodeMirror-linenumber { color: var(--text-3) !important; }
-.CodeMirror-activeline-background { background: var(--bg-hover) !important; }
-.CodeMirror-selected { background: rgba(59,130,246,0.2) !important; }
-.CodeMirror-cursor { border-left-color: var(--accent) !important; }
-
-/* ── Terminal ──────────────── */
-.terminal-container {
-    flex: 1;
-    background: var(--bg-0);
-    overflow: hidden;
-}
-
-.terminal-container .xterm { padding: 4px 0 4px 4px; }
-
-/* ── Empty State ───────────── */
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px 20px;
-    color: var(--text-3);
-    gap: 8px;
-}
-
-.empty-state svg { width: 32px; height: 32px; opacity: 0.3; }
-.empty-state p { font-size: 13px; }
-
-/* ── Modal ─────────────────── */
-.modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    animation: fadeIn 150ms ease;
-}
-
-.modal-overlay.hidden { display: none; }
-
-@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-
-.modal {
-    background: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    padding: 0;
-    width: 420px;
-    max-width: 90vw;
-    box-shadow: var(--shadow-lg);
-    animation: slideUp 200ms ease;
-}
-
-.modal-sm { width: 360px; }
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px 12px;
-    border-bottom: 1px solid var(--border);
-}
-
-.modal-header h3 {
-    display: flex; align-items: center; gap: 8px;
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.modal-header h3 svg { width: 18px; height: 18px; color: var(--accent); }
-
-.modal form { padding: 16px 20px; }
-
-.form-group { margin-bottom: 14px; }
-
-.form-group label {
-    display: block;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-2);
-    margin-bottom: 5px;
-}
-
-.form-group .optional { color: var(--text-3); font-weight: 400; }
-
-.form-group input[type="text"] {
-    width: 100%;
-    padding: 8px 12px;
-    background: var(--bg-0);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text);
-    font-size: 13px;
-    outline: none;
-    transition: border-color var(--transition);
-    font-family: var(--font);
-}
-
-.form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
-
-.form-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; display: block; }
-
-.modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    padding-top: 8px;
-}
-
-/* ── Toast ─────────────────── */
-.toast-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    z-index: 2000;
-    pointer-events: none;
-}
-
-.toast {
-    display: flex; align-items: center; gap: 8px;
-    padding: 10px 16px;
-    background: var(--bg-3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    font-size: 13px;
-    color: var(--text);
-    animation: slideUp 200ms ease;
-    pointer-events: auto;
-    max-width: 360px;
-}
-
-.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
-.toast-success svg { color: var(--success); }
-.toast-error svg { color: var(--danger); }
-.toast-info svg { color: var(--accent); }
-
-/* ── Port Panel ────────────── */
-.port-controls { position: relative; }
-
-.btn-sm {
-    padding: 4px 10px;
-    font-size: 12px;
-    border-radius: var(--radius-sm);
-}
-
-.btn-sm svg { width: 14px; height: 14px; }
-
-.port-count {
-    background: var(--accent);
-    color: var(--bg-0);
-    font-size: 10px;
-    font-weight: 700;
-    padding: 1px 6px;
-    border-radius: 10px;
-    min-width: 16px;
-    text-align: center;
-}
-
-.port-panel {
-    position: fixed;
-    top: auto;
-    right: 16px;
-    width: 340px;
-    background: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    z-index: 900;
-    animation: slideUp 150ms ease;
-}
-
-.port-panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 14px;
-    border-bottom: 1px solid var(--border);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text);
-}
-
-.port-panel-header span { display: flex; align-items: center; gap: 6px; }
-.port-panel-header svg { width: 14px; height: 14px; color: var(--accent); }
-
-.port-panel-hint {
-    padding: 8px 14px;
-    font-size: 11px;
-    color: var(--text-3);
-    line-height: 1.4;
-    border-bottom: 1px solid var(--border);
-}
-
-.port-list { max-height: 260px; overflow-y: auto; }
-
-.port-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 14px;
-    border-bottom: 1px solid var(--border);
-    transition: background var(--transition);
-}
-
-.port-item:last-child { border-bottom: none; }
-.port-item:hover { background: var(--bg-hover); }
-
-.port-item .pi-port {
-    font-family: var(--font-mono);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--accent);
-    min-width: 48px;
-}
-
-.port-item .pi-label {
-    flex: 1;
-    font-size: 12px;
-    color: var(--text-2);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.port-item .pi-actions {
-    display: flex;
-    gap: 4px;
-}
-
-.port-item .pi-actions button {
-    width: 24px; height: 24px;
-    display: inline-flex; align-items: center; justify-content: center;
-    background: transparent;
-    border: none;
-    border-radius: var(--radius-sm);
-    color: var(--text-3);
-    cursor: pointer;
-    transition: all var(--transition);
-}
-
-.port-item .pi-actions button svg { width: 13px; height: 13px; }
-.port-item .pi-actions button:hover { background: var(--bg-3); color: var(--text); }
-.port-item .pi-actions .pi-del:hover { color: var(--danger); }
-
-.port-empty {
-    padding: 20px 14px;
-    text-align: center;
-    color: var(--text-3);
-    font-size: 12px;
-}
-
-/* ── Mobile Infrastructure ─── */
-.sidebar-backdrop {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.5);
-    z-index: 49;
-    -webkit-tap-highlight-color: transparent;
-}
-
-.sidebar-close-btn { display: none; }
-.mobile-only { display: none !important; }
-.mobile-tabs { display: none; }
-
-/* ── Mobile Breakpoint (width OR touch device) ── */
-@media (max-width: 768px), (pointer: coarse) {
-    :root {
-        --sidebar-w: 280px;
-        --topbar-h: 48px;
-        --panel-header-h: 44px;
-        --mobile-tab-h: 56px;
-    }
-
-    .desktop-only { display: none !important; }
-    .mobile-only { display: flex !important; }
-
-    /* Sidebar → slide-out drawer */
-    #sidebar {
-        position: fixed;
-        left: 0; top: 0; bottom: 0;
-        width: var(--sidebar-w);
-        transform: translateX(-100%);
-        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 50;
-        box-shadow: none;
-    }
-
-    #sidebar.open {
-        transform: translateX(0);
-        box-shadow: var(--shadow-lg);
-    }
-
-    .sidebar-backdrop.open {
-        display: block;
-    }
-
-    .sidebar-close-btn {
-        display: inline-flex;
-        margin-left: auto;
-    }
-
-    .hamburger-global { display: inline-flex; }
-
-    /* Sidebar brand spacing */
-    .sidebar-brand { padding: 12px 14px 10px; }
-    .brand-text { font-size: 14px; }
-
-    /* Sidebar items bigger touch targets */
-    .zone-list li {
-        padding: 10px 12px;
-        font-size: 14px;
-        min-height: 44px;
-    }
-
-    .zone-list li .zone-icon { width: 20px; height: 20px; }
-
-    /* Welcome zones on mobile */
-    .welcome-zones { max-width: 100%; padding: 0 12px; }
-    .zone-card { flex: 1; min-width: 120px; justify-content: center; }
-
-    /* Main takes full width */
-    #main { width: 100%; }
-
-    /* Topbar mobile */
-    .topbar {
-        height: var(--topbar-h);
-        padding: 0 8px;
-        gap: 4px;
-    }
-
-    .topbar-left { gap: 6px; }
-
-    .zone-indicator {
-        font-size: 11px;
-        padding: 3px 8px;
-        max-width: 120px;
-        overflow: hidden;
-    }
-
-    .zone-indicator #zone-title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    /* Port button compact */
-    .btn-toggle-ports span:not(.port-count) { display: none; }
-    #btn-toggle-ports { padding: 4px 8px; }
-
-    /* Mobile breadcrumb (inside files panel) */
-    .mobile-breadcrumb {
-        display: flex !important;
-        padding: 6px 12px;
-        border-bottom: 1px solid var(--border);
-        background: var(--bg-1);
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        flex-shrink: 0;
-    }
-
-    .mobile-breadcrumb span {
-        font-size: 13px;
-        padding: 4px 8px;
-        min-height: 32px;
-        display: flex;
-        align-items: center;
-    }
-
-    /* Workspace body → stacked full-screen */
-    .workspace-body {
-        flex-direction: column;
-        position: relative;
-    }
-
-    /* Hide resizers on mobile */
-    .resizer-v, .resizer-h { display: none; }
-
-    /* Each panel = absolute full screen, switch via class */
-    .panel-files {
-        width: 100% !important;
-        max-width: 100%;
-        min-width: 100%;
-        border-right: none;
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-    }
-
-    .panel-right {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-    }
-
-    .pane-editor {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-    }
-
-    .pane-terminal {
-        position: absolute;
-        inset: 0;
-        height: 100% !important;
-        z-index: 1;
-    }
-
-    /* Only show active mobile panel */
-    .panel-files,
-    .pane-editor,
-    .pane-terminal {
-        display: none;
-    }
-
-    .panel-files.m-active { display: flex; }
-    .pane-editor.m-active { display: flex; }
-    .pane-terminal.m-active { display: flex; }
-
-    /* When editor or terminal is active, show panel-right as container */
-    .panel-right.m-active { display: flex; }
-
-    /* File items — bigger touch targets, always show actions */
-    .file-item {
-        min-height: 48px;
-        height: auto;
-        padding: 8px 12px;
-        gap: 10px;
-    }
-
-    .file-item .fi-icon { width: 20px; height: 20px; }
-    .file-item .fi-icon svg { width: 18px; height: 18px; }
-    .file-item .fi-name { font-size: 14px; }
-    .file-item .fi-size { font-size: 12px; }
-
-    /* Always show file actions on touch */
-    .file-item .fi-actions {
-        opacity: 1;
-    }
-
-    .fi-actions button {
-        width: 34px; height: 34px;
-    }
-
-    .fi-actions button svg { width: 16px; height: 16px; }
-
-    /* Panel headers bigger */
-    .panel-header, .pane-header {
-        height: var(--panel-header-h);
-        padding: 0 12px;
-    }
-
-    .panel-title { font-size: 12px; }
-    .panel-title svg { width: 15px; height: 15px; }
-
-    .icon-btn-sm {
-        width: 36px; height: 36px;
-    }
-
-    .icon-btn-sm svg { width: 18px; height: 18px; }
-
-    /* Editor mobile */
-    .editor-container .CodeMirror {
-        font-size: 12px;
-    }
-
-    .pane-tab {
-        padding: 6px 12px;
-        font-size: 13px;
-    }
-
-    /* Terminal mobile */
-    .terminal-container .xterm {
-        padding: 2px 0 2px 2px;
-    }
-
-    /* Bottom Tab Bar */
-    .mobile-tabs {
-        display: flex;
-        height: var(--mobile-tab-h);
-        background: var(--bg-1);
-        border-top: 1px solid var(--border);
-        flex-shrink: 0;
-        z-index: 10;
-    }
-
-    .mobile-tab {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 2px;
-        background: none;
-        border: none;
-        color: var(--text-3);
-        cursor: pointer;
-        font-size: 10px;
-        font-weight: 500;
-        font-family: var(--font);
-        padding: 6px 0;
-        -webkit-tap-highlight-color: transparent;
-        transition: color var(--transition);
-        position: relative;
-    }
-
-    .mobile-tab svg { width: 20px; height: 20px; }
-
-    .mobile-tab.active {
-        color: var(--accent);
-    }
-
-    .mobile-tab.active::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 25%; right: 25%;
-        height: 2px;
-        background: var(--accent);
-        border-radius: 0 0 2px 2px;
-    }
-
-    .mobile-tab.has-dot::before {
-        content: '';
-        position: absolute;
-        top: 6px;
-        right: calc(50% - 16px);
-        width: 6px; height: 6px;
-        background: var(--accent);
-        border-radius: 50%;
-    }
-
-    /* Modals full-width on mobile */
-    .modal {
-        width: 100%;
-        max-width: 100vw;
-        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-        margin: 0;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        animation: slideUpModal 250ms ease;
-    }
-
-    .modal-sm { width: 100%; }
-
-    .modal form { padding: 16px; }
-
-    .form-group input[type="text"],
-    .form-group input[type="number"] {
-        padding: 12px 14px;
-        font-size: 16px; /* prevents iOS zoom */
-    }
-
-    .modal-overlay {
-        align-items: flex-end;
-    }
-
-    @keyframes slideUpModal {
-        from { transform: translateY(100%); }
-        to { transform: translateY(0); }
-    }
-
-    /* Port panel on mobile */
-    .port-panel {
-        position: fixed;
-        top: auto !important;
-        bottom: var(--mobile-tab-h);
-        left: 8px;
-        right: 8px;
-        width: auto;
-        border-radius: var(--radius-lg);
-    }
-
-    /* Toast at top on mobile (avoid keyboard) */
-    .toast-container {
-        top: 12px;
-        bottom: auto;
-        left: 12px;
-        right: 12px;
-    }
-
-    .toast { max-width: 100%; }
-
-    /* Welcome page mobile */
-    .welcome-hero { padding: 20px; }
-    .welcome-hero h1 { font-size: 22px; }
-    .welcome-hero p { font-size: 13px; max-width: 280px; }
-    .welcome-icon { width: 64px; height: 64px; }
-    .welcome-icon svg { width: 28px; height: 28px; }
-    .welcome-glow { width: 200px; height: 200px; }
-
-    /* Empty state mobile */
-    .empty-state { padding: 30px 16px; }
-    .editor-empty svg { width: 24px; height: 24px; }
-
-    /* Icon buttons bigger for touch */
-    .icon-btn {
-        width: 40px; height: 40px;
-    }
-
-    .icon-btn svg { width: 20px; height: 20px; }
-
-    /* Environment badges in sidebar */
-    .sidebar-bottom { padding: 10px 14px; }
-    .badge { font-size: 9px; padding: 3px 8px; }
-}
-
-/* ── Small phones (< 380px) ── */
-@media (max-width: 380px) {
-    :root {
-        --sidebar-w: 260px;
-    }
-
-    .zone-indicator { max-width: 90px; font-size: 10px; }
-    .mobile-tab span { font-size: 9px; }
-    .mobile-tab svg { width: 18px; height: 18px; }
-}
-
-/* ── Form input number (port) ── */
-.form-group input[type="number"] {
-    width: 100%;
-    padding: 8px 12px;
-    background: var(--bg-0);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text);
-    font-size: 13px;
-    outline: none;
-    transition: border-color var(--transition);
-    font-family: var(--font);
-}
-
-.form-group input[type="number"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
-
-/* Safe area for notch devices */
-@supports (padding: env(safe-area-inset-bottom)) {
-    .mobile-tabs {
-        padding-bottom: env(safe-area-inset-bottom);
-    }
-
-    .modal {
-        padding-bottom: env(safe-area-inset-bottom);
-    }
+.animate-spin {
+  animation: spin 1s linear infinite;
 }
 
-/* ── Utility ───────────────── */
-.hidden { display: none !important; }
+/* Bottom sheet modal on mobile */
+@media (max-width: 639px) {
+  [x-show="showCreateZone"] > div,
+  [x-show="showRename"] > div {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-bottom: 0;
+  }
+}