Upload 9 files

Dockerfile

@@ -0,0 +1,42 @@
+FROM python:3.11-slim
+
+# Cài system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl wget git build-essential procps htop nano vim \
+    && rm -rf /var/lib/apt/lists/*
+
+# Cài Node.js 20
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && rm -rf /var/lib/apt/lists/*
+
+# Cài Go 1.22
+RUN wget -q https://go.dev/dl/go1.22.5.linux-amd64.tar.gz \
+    && tar -C /usr/local -xzf go1.22.5.linux-amd64.tar.gz \
+    && rm go1.22.5.linux-amd64.tar.gz
+ENV PATH="/usr/local/go/bin:${PATH}"
+ENV GOPATH="/data/go"
+
+# Tạo user (HF Spaces yêu cầu user 1000)
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user
+ENV PATH="/home/user/.local/bin:${PATH}"
+
+WORKDIR /app
+
+# Cài Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy source code
+COPY . .
+
+# Tạo thư mục data
+RUN mkdir -p /data/zones && chown -R user:user /data
+
+# Mở port 7860 (mặc định HF Spaces)
+EXPOSE 7860
+
+USER user
+
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,19 @@
----
-title: Huhuh
-emoji: 🚀
-colorFrom: blue
-colorTo: green
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: HugPanel
+emoji: 🖥️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: false
+---
+
+# HugPanel
+
+Panel quản lý đa vùng (zones) với file manager và terminal riêng cho từng zone.
+
+## Tính năng
+- Tạo/xoá các zone (vùng con) độc lập
+- File manager cho từng zone (tạo, sửa, xoá, upload, download file)
+- Terminal riêng cho từng zone (xterm.js + WebSocket PTY)
+- Cài sẵn Node.js, Go, Python
+- Persistent storage

app.py

@@ -0,0 +1,151 @@
+import os
+import json
+import shutil
+from pathlib import Path
+from contextlib import asynccontextmanager
+
+import uvicorn
+from fastapi import FastAPI, WebSocket, UploadFile, File, Form, HTTPException, Query
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+
+import zones
+from terminal import terminal_ws, kill_terminal, active_terminals
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    yield
+    # Cleanup terminals khi shutdown
+    for zone_name in list(active_terminals.keys()):
+        kill_terminal(zone_name)
+
+
+app = FastAPI(title="HugPanel", lifespan=lifespan)
+
+
+# ── Zone API ──────────────────────────────────────────────
+
+@app.get("/api/zones")
+def api_list_zones():
+    return zones.list_zones()
+
+
+@app.post("/api/zones")
+def api_create_zone(name: str = Form(...), description: str = Form("")):
+    try:
+        result = zones.create_zone(name, description)
+        return result
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.delete("/api/zones/{zone_name}")
+def api_delete_zone(zone_name: str):
+    try:
+        kill_terminal(zone_name)
+        zones.delete_zone(zone_name)
+        return {"ok": True}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+# ── File Manager API ─────────────────────────────────────
+
+@app.get("/api/zones/{zone_name}/files")
+def api_list_files(zone_name: str, path: str = Query("")):
+    try:
+        return zones.list_files(zone_name, path)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.get("/api/zones/{zone_name}/files/read")
+def api_read_file(zone_name: str, path: str = Query(...)):
+    try:
+        content = zones.read_file(zone_name, path)
+        return {"content": content, "path": path}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.get("/api/zones/{zone_name}/files/download")
+def api_download_file(zone_name: str, path: str = Query(...)):
+    try:
+        zone_path = zones.get_zone_path(zone_name)
+        target = zones._safe_path(zone_path, path)
+        if not target.is_file():
+            raise HTTPException(404, "File không tồn tại")
+        return FileResponse(target, filename=target.name)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.post("/api/zones/{zone_name}/files/write")
+def api_write_file(zone_name: str, path: str = Form(...), content: str = Form(...)):
+    try:
+        zones.write_file(zone_name, path, content)
+        return {"ok": True}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.post("/api/zones/{zone_name}/files/mkdir")
+def api_create_folder(zone_name: str, path: str = Form(...)):
+    try:
+        zones.create_folder(zone_name, path)
+        return {"ok": True}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.post("/api/zones/{zone_name}/files/upload")
+async def api_upload_file(zone_name: str, path: str = Form(""), file: UploadFile = File(...)):
+    try:
+        zone_path = zones.get_zone_path(zone_name)
+        dest = zones._safe_path(zone_path, os.path.join(path, file.filename))
+        dest.parent.mkdir(parents=True, exist_ok=True)
+        content = await file.read()
+        dest.write_bytes(content)
+        return {"ok": True, "path": str(dest.relative_to(zone_path))}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.delete("/api/zones/{zone_name}/files")
+def api_delete_file(zone_name: str, path: str = Query(...)):
+    try:
+        zones.delete_file(zone_name, path)
+        return {"ok": True}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.post("/api/zones/{zone_name}/files/rename")
+def api_rename_file(zone_name: str, old_path: str = Form(...), new_name: str = Form(...)):
+    try:
+        zones.rename_item(zone_name, old_path, new_name)
+        return {"ok": True}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+# ── Terminal WebSocket ────────────────────────────────────
+
+@app.websocket("/ws/terminal/{zone_name}")
+async def ws_terminal(websocket: WebSocket, zone_name: str):
+    await terminal_ws(websocket, zone_name)
+
+
+# ── Static Files & SPA ──────────────────────────────────
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+@app.get("/")
+def index():
+    return FileResponse("static/index.html")
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+websockets==14.1
+python-multipart==0.0.18
+aiofiles==24.1.0

static/app.js

@@ -0,0 +1,611 @@
+// ═══════════════════════════════════════════════
+//  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 promptResolve = null;
+
+// ── Init ──────────────────────────────────────
+document.addEventListener("DOMContentLoaded", () => {
+    lucide.createIcons();
+    loadZones();
+    initResizers();
+    bindEvents();
+});
+
+// ── 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");
+    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>`;
+        return;
+    }
+    list.innerHTML = zones.map(z => `
+        <li data-zone="${escapeAttr(z.name)}" class="${currentZone === z.name ? 'active' : ''}" onclick="openZone('${escapeAttr(z.name)}')">
+            <span class="zone-icon"><i data-lucide="box"></i></span>
+            <span class="zone-name">${escapeHtml(z.name)}</span>
+        </li>
+    `).join("");
+    lucide.createIcons({ nodes: [list] });
+}
+
+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>Double-click 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();
+
+    // 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;
+    if (!confirm(`Delete zone "${currentZone}"? All data will be lost!`)) 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 bc = document.getElementById("breadcrumb");
+    const parts = currentPath ? currentPath.split("/").filter(Boolean) : [];
+    let html = `<span onclick="navigateTo('')">~</span>`;
+    let path = "";
+    for (const part of parts) {
+        path += (path ? "/" : "") + part;
+        html += `<span class="sep">/</span>`;
+        html += `<span onclick="navigateTo('${escapeAttr(path)}')">${escapeHtml(part)}</span>`;
+    }
+    bc.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" ondblclick="navigateUp()">
+            <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);
+
+        html += `<div class="file-item" ondblclick="${f.is_dir ? `navigateTo('${escapeAttr(relPath)}')` : `editFile('${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 title="Download" onclick="event.stopPropagation();downloadFile('${escapeAttr(relPath)}')"><i data-lucide="download"></i></button>` : ''}
+                <button title="Rename" onclick="event.stopPropagation();renameFile('${escapeAttr(relPath)}','${escapeAttr(f.name)}')"><i data-lucide="pencil"></i></button>
+                <button class="fi-del" title="Delete" onclick="event.stopPropagation();deleteFile('${escapeAttr(relPath)}')"><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: false,
+            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");
+                },
+            }
+        });
+
+        // Track modifications
+        cmEditor.on("change", () => {
+            const dot = document.getElementById("editor-modified");
+            if (dot) dot.style.display = "block";
+        });
+
+        // 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";
+        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) {
+    if (!confirm(`Delete "${relPath}"?`)) 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) {
+        const form = new FormData();
+        form.append("path", 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");
+        }
+    }
+    event.target.value = "";
+    await loadFiles();
+}
+
+// ── Terminal ─────────────────────────────────
+function connectTerminal() {
+    if (!currentZone) return;
+
+    if (!term) {
+        term = new window.Terminal({
+            cursorBlink: true,
+            fontSize: 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",
+            }
+        });
+        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; }
+
+    term.reset();
+
+    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 }));
+        }
+    });
+
+    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 ───────────────────────────
+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;
+    });
+}
+
+// ── 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";
+}
+
+// ── Event Binding ────────────────────────────
+function bindEvents() {
+    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-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; }
+    });
+
+    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();
+    });
+}

static/index.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HugPanel</title>
+    <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>
+</head>
+<body>
+    <div id="app">
+        <!-- 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>
+            </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>
+
+            <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>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main -->
+        <main id="main">
+            <!-- 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>
+                    <button class="btn btn-accent btn-lg" onclick="document.getElementById('btn-add-zone').click()">
+                        <i data-lucide="plus"></i> Create Zone
+                    </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"></span>
+                        <div class="breadcrumb" id="breadcrumb"></div>
+                    </div>
+                    <div class="topbar-right">
+                        <button id="btn-delete-zone" class="icon-btn icon-btn-danger" title="Delete zone">
+                            <i data-lucide="trash-2"></i>
+                        </button>
+                    </div>
+                </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 id="file-list" class="file-tree"></div>
+                        <input type="file" id="file-upload-input" style="display:none" multiple>
+                    </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>Double-click 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>
+        </main>
+    </div>
+
+    <!-- Toasts -->
+    <div id="toast-container" class="toast-container"></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" onclick="closeModal('modal-overlay')"><i data-lucide="x"></i></button>
+            </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" onclick="closeModal('modal-overlay')">Cancel</button>
+                    <button type="submit" class="btn btn-accent"><i data-lucide="plus"></i> Create</button>
+                </div>
+            </form>
+        </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" onclick="closeModal('modal-prompt');if(promptResolve){promptResolve(null);promptResolve=null}"><i data-lucide="x"></i></button>
+            </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>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,723 @@
+/* ═══════════════════════════════════════════════
+   HugPanel — Modern IDE-style Dashboard
+   ═══════════════════════════════════════════════ */
+
+* { 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);
+}
+
+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;
+}
+
+/* ── 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;
+}
+
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px 16px 12px;
+}
+
+.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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.zone-list li:hover { background: var(--bg-hover); color: var(--text); }
+
+.zone-list li.active {
+    background: var(--accent-glow);
+    color: var(--accent-hover);
+}
+
+.zone-list li .zone-icon {
+    width: 18px; height: 18px; flex-shrink: 0;
+    opacity: 0.6;
+}
+
+.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);
+}
+
+.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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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;
+}
+
+.btn svg { width: 14px; height: 14px; }
+
+.btn-accent {
+    background: var(--accent);
+    color: #fff;
+    box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.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);
+}
+
+.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
+
+.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;
+}
+
+/* ── 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 .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;
+    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); }
+
+/* ── Utility ───────────────── */
+.hidden { display: none !important; }

terminal.py

@@ -0,0 +1,146 @@
+import asyncio
+import fcntl
+import os
+import pty
+import select
+import struct
+import termios
+from fastapi import WebSocket, WebSocketDisconnect
+from zones import get_zone_path
+
+# Lưu các terminal process đang chạy: {zone_name: {fd, pid}}
+active_terminals: dict[str, dict] = {}
+
+
+def _spawn_shell(zone_name: str) -> dict:
+    """Tạo PTY shell mới cho zone."""
+    zone_path = get_zone_path(zone_name)
+    master_fd, slave_fd = pty.openpty()
+
+    child_pid = os.fork()
+    if child_pid == 0:
+        # Child process
+        os.setsid()
+        os.dup2(slave_fd, 0)
+        os.dup2(slave_fd, 1)
+        os.dup2(slave_fd, 2)
+        os.close(master_fd)
+        os.close(slave_fd)
+        os.chdir(str(zone_path))
+        env = os.environ.copy()
+        env["TERM"] = "xterm-256color"
+        env["HOME"] = str(zone_path)
+        env["PS1"] = f"[{zone_name}] \\w $ "
+        os.execvpe("/bin/bash", ["/bin/bash", "--norc"], env)
+    else:
+        os.close(slave_fd)
+        # Set non-blocking on master
+        flag = fcntl.fcntl(master_fd, fcntl.F_GETFL)
+        fcntl.fcntl(master_fd, fcntl.F_SETFL, flag | os.O_NONBLOCK)
+        return {"fd": master_fd, "pid": child_pid}
+
+
+def resize_terminal(zone_name: str, rows: int, cols: int):
+    """Resize terminal PTY."""
+    if zone_name in active_terminals:
+        fd = active_terminals[zone_name]["fd"]
+        winsize = struct.pack("HHHH", rows, cols, 0, 0)
+        fcntl.ioctl(fd, termios.TIOCSWINSZ, winsize)
+
+
+def kill_terminal(zone_name: str):
+    """Kill terminal process cho zone."""
+    if zone_name in active_terminals:
+        info = active_terminals.pop(zone_name)
+        try:
+            os.kill(info["pid"], 9)
+            os.waitpid(info["pid"], os.WNOHANG)
+        except (ProcessLookupError, ChildProcessError):
+            pass
+        try:
+            os.close(info["fd"])
+        except OSError:
+            pass
+
+
+def _is_alive(zone_name: str) -> bool:
+    """Kiểm tra terminal process còn sống không."""
+    if zone_name not in active_terminals:
+        return False
+    try:
+        pid = active_terminals[zone_name]["pid"]
+        result = os.waitpid(pid, os.WNOHANG)
+        return result == (0, 0)
+    except ChildProcessError:
+        active_terminals.pop(zone_name, None)
+        return False
+
+
+async def terminal_ws(websocket: WebSocket, zone_name: str):
+    """WebSocket handler cho terminal."""
+    await websocket.accept()
+
+    # Kiểm tra zone tồn tại
+    try:
+        get_zone_path(zone_name)
+    except ValueError as e:
+        await websocket.send_json({"error": str(e)})
+        await websocket.close()
+        return
+
+    # Spawn hoặc reuse terminal
+    if not _is_alive(zone_name):
+        kill_terminal(zone_name)  # Cleanup nếu cần
+        try:
+            info = _spawn_shell(zone_name)
+            active_terminals[zone_name] = info
+        except Exception as e:
+            await websocket.send_json({"error": f"Không tạo được terminal: {e}"})
+            await websocket.close()
+            return
+
+    fd = active_terminals[zone_name]["fd"]
+
+    async def read_output():
+        """Đọc output từ PTY và gửi qua WebSocket."""
+        loop = asyncio.get_event_loop()
+        try:
+            while True:
+                await asyncio.sleep(0.02)
+                if not _is_alive(zone_name):
+                    break
+                try:
+                    r, _, _ = select.select([fd], [], [], 0)
+                    if r:
+                        data = os.read(fd, 4096)
+                        if data:
+                            await websocket.send_bytes(data)
+                except (OSError, BlockingIOError):
+                    pass
+        except (WebSocketDisconnect, Exception):
+            pass
+
+    reader_task = asyncio.create_task(read_output())
+
+    try:
+        while True:
+            msg = await websocket.receive()
+            if msg.get("type") == "websocket.disconnect":
+                break
+
+            if "text" in msg:
+                import json
+                data = json.loads(msg["text"])
+                if data.get("type") == "resize":
+                    resize_terminal(zone_name, data.get("rows", 24), data.get("cols", 80))
+                elif data.get("type") == "input":
+                    os.write(fd, data["data"].encode("utf-8"))
+            elif "bytes" in msg:
+                os.write(fd, msg["bytes"])
+    except WebSocketDisconnect:
+        pass
+    except Exception:
+        pass
+    finally:
+        reader_task.cancel()
+        # Không kill terminal khi disconnect — giữ nó chạy

zones.py

@@ -0,0 +1,156 @@
+import os
+import json
+import shutil
+import re
+from pathlib import Path
+from datetime import datetime
+
+DATA_DIR = Path(os.environ.get("DATA_DIR", "/data/zones"))
+ZONES_META = DATA_DIR.parent / "zones_meta.json"
+
+# Đảm bảo thư mục tồn tại
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+
+ZONE_NAME_PATTERN = re.compile(r"^[a-zA-Z0-9_-]{1,50}$")
+
+
+def _load_meta() -> dict:
+    if ZONES_META.exists():
+        return json.loads(ZONES_META.read_text(encoding="utf-8"))
+    return {}
+
+
+def _save_meta(meta: dict):
+    ZONES_META.write_text(json.dumps(meta, indent=2, default=str), encoding="utf-8")
+
+
+def list_zones() -> list[dict]:
+    meta = _load_meta()
+    zones = []
+    for name, info in meta.items():
+        zone_path = DATA_DIR / name
+        zones.append({
+            "name": name,
+            "created": info.get("created", ""),
+            "description": info.get("description", ""),
+            "exists": zone_path.is_dir(),
+        })
+    return zones
+
+
+def create_zone(name: str, description: str = "") -> dict:
+    if not ZONE_NAME_PATTERN.match(name):
+        raise ValueError("Tên zone chỉ chứa a-z, A-Z, 0-9, _, - (tối đa 50 ký tự)")
+
+    zone_path = DATA_DIR / name
+    if zone_path.exists():
+        raise ValueError(f"Zone '{name}' đã tồn tại")
+
+    zone_path.mkdir(parents=True)
+
+    # Tạo file README mặc định
+    (zone_path / "README.md").write_text(f"# {name}\n\nZone được tạo lúc {datetime.now().isoformat()}\n")
+
+    meta = _load_meta()
+    meta[name] = {
+        "created": datetime.now().isoformat(),
+        "description": description,
+    }
+    _save_meta(meta)
+
+    return {"name": name, "path": str(zone_path)}
+
+
+def delete_zone(name: str):
+    if not ZONE_NAME_PATTERN.match(name):
+        raise ValueError("Tên zone không hợp lệ")
+
+    zone_path = DATA_DIR / name
+    if not zone_path.exists():
+        raise ValueError(f"Zone '{name}' không tồn tại")
+
+    shutil.rmtree(zone_path)
+
+    meta = _load_meta()
+    meta.pop(name, None)
+    _save_meta(meta)
+
+
+def get_zone_path(name: str) -> Path:
+    if not ZONE_NAME_PATTERN.match(name):
+        raise ValueError("Tên zone không hợp lệ")
+    zone_path = DATA_DIR / name
+    if not zone_path.is_dir():
+        raise ValueError(f"Zone '{name}' không tồn tại")
+    return zone_path
+
+
+def _safe_path(zone_path: Path, rel_path: str) -> Path:
+    """Kiểm tra path traversal — đảm bảo không thoát ra ngoài zone."""
+    target = (zone_path / rel_path).resolve()
+    zone_resolved = zone_path.resolve()
+    # Dùng os.sep để tránh prefix attack: zone "a" không truy cập được zone "ab"
+    if target != zone_resolved and not str(target).startswith(str(zone_resolved) + os.sep):
+        raise ValueError("Truy cập ngoài zone không được phép")
+    return target
+
+
+def list_files(zone_name: str, rel_path: str = "") -> list[dict]:
+    zone_path = get_zone_path(zone_name)
+    target = _safe_path(zone_path, rel_path)
+    if not target.is_dir():
+        raise ValueError("Không phải thư mục")
+
+    items = []
+    for item in sorted(target.iterdir()):
+        stat = item.stat()
+        items.append({
+            "name": item.name,
+            "is_dir": item.is_dir(),
+            "size": stat.st_size if item.is_file() else 0,
+            "modified": datetime.fromtimestamp(stat.st_mtime).isoformat(),
+        })
+    return items
+
+
+def read_file(zone_name: str, rel_path: str) -> str:
+    zone_path = get_zone_path(zone_name)
+    target = _safe_path(zone_path, rel_path)
+    if not target.is_file():
+        raise ValueError("File không tồn tại")
+    return target.read_text(encoding="utf-8", errors="replace")
+
+
+def write_file(zone_name: str, rel_path: str, content: str):
+    zone_path = get_zone_path(zone_name)
+    target = _safe_path(zone_path, rel_path)
+    target.parent.mkdir(parents=True, exist_ok=True)
+    target.write_text(content, encoding="utf-8")
+
+
+def delete_file(zone_name: str, rel_path: str):
+    zone_path = get_zone_path(zone_name)
+    target = _safe_path(zone_path, rel_path)
+    if target == zone_path.resolve():
+        raise ValueError("Không thể xoá thư mục gốc zone")
+    if target.is_dir():
+        shutil.rmtree(target)
+    elif target.is_file():
+        target.unlink()
+    else:
+        raise ValueError("File/thư mục không tồn tại")
+
+
+def create_folder(zone_name: str, rel_path: str):
+    zone_path = get_zone_path(zone_name)
+    target = _safe_path(zone_path, rel_path)
+    target.mkdir(parents=True, exist_ok=True)
+
+
+def rename_item(zone_name: str, old_path: str, new_name: str):
+    zone_path = get_zone_path(zone_name)
+    source = _safe_path(zone_path, old_path)
+    if not source.exists():
+        raise ValueError("File/thư mục nguồn không tồn tại")
+    dest = _safe_path(zone_path, str(Path(old_path).parent / new_name))
+    source.rename(dest)