Upload 10 files

app.py

@@ -5,11 +5,12 @@ from pathlib import Path
 from contextlib import asynccontextmanager
 
 import uvicorn
-from fastapi import FastAPI, WebSocket, UploadFile, File, Form, HTTPException, Query
+from fastapi import FastAPI, Request, WebSocket, UploadFile, File, Form, HTTPException, Query
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
 
 import zones
+import proxy
 from terminal import terminal_ws, kill_terminal, active_terminals
 
 
@@ -130,6 +131,45 @@ def api_rename_file(zone_name: str, old_path: str = Form(...), new_name: str = F
         raise HTTPException(400, str(e))
 
 
+# ── Port Management API ───────────────────────────────────
+
+@app.get("/api/zones/{zone_name}/ports")
+def api_list_ports(zone_name: str):
+    try:
+        return proxy.list_ports(zone_name)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.post("/api/zones/{zone_name}/ports")
+def api_add_port(zone_name: str, port: int = Form(...), label: str = Form("")):
+    try:
+        return proxy.add_port(zone_name, port, label)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+@app.delete("/api/zones/{zone_name}/ports/{port}")
+def api_remove_port(zone_name: str, port: int):
+    try:
+        proxy.remove_port(zone_name, port)
+        return {"ok": True}
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+
+
+# ── Reverse Proxy ────────────────────────────────────────
+
+@app.api_route("/port/{zone_name}/{port}/{subpath:path}", methods=["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS", "HEAD"])
+async def proxy_route(request: Request, zone_name: str, port: int, subpath: str = ""):
+    return await proxy.proxy_http(request, zone_name, port, subpath)
+
+
+@app.websocket("/port/{zone_name}/{port}/ws/{subpath:path}")
+async def proxy_ws_route(websocket: WebSocket, zone_name: str, port: int, subpath: str = ""):
+    await proxy.proxy_ws(websocket, zone_name, port, f"ws/{subpath}")
+
+
 # ── Terminal WebSocket ────────────────────────────────────
 
 @app.websocket("/ws/terminal/{zone_name}")

proxy.py

@@ -0,0 +1,236 @@
+"""
+Reverse proxy for virtual ports.
+
+Each zone can run web servers on internal ports (e.g. 3000, 8080).
+Since HF Spaces only exposes port 7860, this module proxies
+/port/{zone}/{port}/... → localhost:{port} with proper path rewriting.
+
+Port mappings are stored in zones_meta.json under each zone's "ports" key.
+"""
+
+import json
+import re
+from pathlib import Path
+
+import httpx
+from fastapi import Request, WebSocket, WebSocketDisconnect
+from fastapi.responses import Response
+
+# Port range allowed for proxying (unprivileged ports only)
+MIN_PORT = 1024
+MAX_PORT = 65535
+
+# Reuse a single async HTTP client
+_client: httpx.AsyncClient | None = None
+
+
+def _get_client() -> httpx.AsyncClient:
+    global _client
+    if _client is None:
+        _client = httpx.AsyncClient(
+            timeout=httpx.Timeout(30.0, connect=5.0),
+            follow_redirects=False,
+            limits=httpx.Limits(max_connections=50),
+        )
+    return _client
+
+
+def _meta_path() -> Path:
+    from zones import ZONES_META
+    return ZONES_META
+
+
+def _load_meta() -> dict:
+    p = _meta_path()
+    if p.exists():
+        return json.loads(p.read_text(encoding="utf-8"))
+    return {}
+
+
+def _save_meta(meta: dict):
+    _meta_path().write_text(json.dumps(meta, indent=2, default=str), encoding="utf-8")
+
+
+def _validate_port(port: int):
+    if not (MIN_PORT <= port <= MAX_PORT):
+        raise ValueError(f"Port must be between {MIN_PORT} and {MAX_PORT}")
+
+
+def _validate_zone(meta: dict, zone_name: str):
+    if zone_name not in meta:
+        raise ValueError(f"Zone '{zone_name}' does not exist")
+
+
+# ── Port CRUD ─────────────────────────────────
+
+def list_ports(zone_name: str) -> list[dict]:
+    """List all port mappings for a zone."""
+    meta = _load_meta()
+    _validate_zone(meta, zone_name)
+    ports = meta[zone_name].get("ports", [])
+    return ports
+
+
+def add_port(zone_name: str, port: int, label: str = "") -> dict:
+    """Add a port mapping to a zone."""
+    _validate_port(port)
+    meta = _load_meta()
+    _validate_zone(meta, zone_name)
+
+    ports = meta[zone_name].setdefault("ports", [])
+
+    # Check duplicate
+    for p in ports:
+        if p["port"] == port:
+            raise ValueError(f"Port {port} already mapped in zone '{zone_name}'")
+
+    entry = {"port": port, "label": label or f"Port {port}"}
+    ports.append(entry)
+    _save_meta(meta)
+    return entry
+
+
+def remove_port(zone_name: str, port: int):
+    """Remove a port mapping from a zone."""
+    meta = _load_meta()
+    _validate_zone(meta, zone_name)
+
+    ports = meta[zone_name].get("ports", [])
+    before = len(ports)
+    meta[zone_name]["ports"] = [p for p in ports if p["port"] != port]
+    if len(meta[zone_name]["ports"]) == before:
+        raise ValueError(f"Port {port} not found in zone '{zone_name}'")
+    _save_meta(meta)
+
+
+# ── HTTP Reverse Proxy ────────────────────────
+
+# Headers that should not be forwarded
+_HOP_HEADERS = frozenset({
+    "connection", "keep-alive", "proxy-authenticate", "proxy-authorization",
+    "te", "trailers", "transfer-encoding", "upgrade",
+})
+
+
+async def proxy_http(request: Request, zone_name: str, port: int, subpath: str = "") -> Response:
+    """Proxy an HTTP request to localhost:{port}."""
+    _validate_port(port)
+    meta = _load_meta()
+    _validate_zone(meta, zone_name)
+
+    # Verify port is registered for this zone
+    ports = meta[zone_name].get("ports", [])
+    if not any(p["port"] == port for p in ports):
+        return Response(content="Port not mapped", status_code=404)
+
+    target_url = f"http://127.0.0.1:{port}/{subpath}"
+    if request.url.query:
+        target_url += f"?{request.url.query}"
+
+    # Build headers, filtering out hop-by-hop
+    headers = {}
+    for key, value in request.headers.items():
+        if key.lower() not in _HOP_HEADERS and key.lower() != "host":
+            headers[key] = value
+    headers["host"] = f"127.0.0.1:{port}"
+    headers["x-forwarded-for"] = request.client.host if request.client else "127.0.0.1"
+    headers["x-forwarded-proto"] = request.url.scheme
+    # Tell the target app its real base path
+    headers["x-forwarded-prefix"] = f"/port/{zone_name}/{port}"
+
+    body = await request.body()
+    client = _get_client()
+
+    try:
+        resp = await client.request(
+            method=request.method,
+            url=target_url,
+            headers=headers,
+            content=body,
+        )
+    except httpx.ConnectError:
+        return Response(
+            content=f"Cannot connect to port {port}. Make sure your server is running.",
+            status_code=502,
+            media_type="text/plain",
+        )
+    except httpx.TimeoutException:
+        return Response(content=f"Timeout connecting to port {port}", status_code=504, media_type="text/plain")
+
+    # Build response headers
+    resp_headers = {}
+    for key, value in resp.headers.items():
+        if key.lower() not in _HOP_HEADERS and key.lower() != "content-encoding":
+            resp_headers[key] = value
+
+    return Response(
+        content=resp.content,
+        status_code=resp.status_code,
+        headers=resp_headers,
+    )
+
+
+# ── WebSocket Reverse Proxy ──────────────────
+
+async def proxy_ws(websocket: WebSocket, zone_name: str, port: int, subpath: str = ""):
+    """Proxy a WebSocket connection to localhost:{port}."""
+    _validate_port(port)
+    meta = _load_meta()
+    _validate_zone(meta, zone_name)
+
+    ports = meta[zone_name].get("ports", [])
+    if not any(p["port"] == port for p in ports):
+        await websocket.close(code=4004, reason="Port not mapped")
+        return
+
+    await websocket.accept()
+
+    target_url = f"ws://127.0.0.1:{port}/{subpath}"
+
+    try:
+        async with httpx.AsyncClient() as client:
+            async with client.stream("GET", target_url.replace("ws://", "http://")) as _:
+                pass
+    except Exception:
+        pass
+
+    # Use raw websockets for the backend connection
+    import asyncio
+    import websockets
+
+    try:
+        async with websockets.connect(target_url) as backend_ws:
+            async def client_to_backend():
+                try:
+                    while True:
+                        msg = await websocket.receive()
+                        if msg.get("type") == "websocket.disconnect":
+                            break
+                        if "text" in msg:
+                            await backend_ws.send(msg["text"])
+                        elif "bytes" in msg:
+                            await backend_ws.send(msg["bytes"])
+                except (WebSocketDisconnect, Exception):
+                    pass
+
+            async def backend_to_client():
+                try:
+                    async for message in backend_ws:
+                        if isinstance(message, str):
+                            await websocket.send_text(message)
+                        else:
+                            await websocket.send_bytes(message)
+                except (WebSocketDisconnect, Exception):
+                    pass
+
+            await asyncio.gather(client_to_backend(), backend_to_client())
+    except Exception:
+        try:
+            await websocket.send_text(json.dumps({"error": f"Cannot connect WebSocket to port {port}"}))
+        except Exception:
+            pass
+    finally:
+        try:
+            await websocket.close()
+        except Exception:
+            pass

requirements.txt

@@ -3,3 +3,4 @@ uvicorn[standard]==0.34.0
 websockets==14.1
 python-multipart==0.0.18
 aiofiles==24.1.0
+httpx==0.28.1

static/app.js

@@ -12,6 +12,7 @@ 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;
 
 // ── Init ──────────────────────────────────────
@@ -87,6 +88,7 @@ async function openZone(name) {
     });
 
     await loadFiles();
+    loadPorts();
 
     // Auto-connect terminal
     setTimeout(() => connectTerminal(), 200);
@@ -418,7 +420,12 @@ function connectTerminal() {
     if (termDataDisposable) { termDataDisposable.dispose(); termDataDisposable = null; }
     if (termResizeDisposable) { termResizeDisposable.dispose(); termResizeDisposable = null; }
 
-    term.reset();
+    // 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}`);
@@ -539,6 +546,105 @@ function promptUser(title, defaultValue) {
     });
 }
 
+// ── 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";
+        } 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" onclick="openPort(${p.port})"><i data-lucide="external-link"></i></button>
+                <button title="Copy URL" onclick="copyPortUrl(${p.port})"><i data-lucide="copy"></i></button>
+                <button class="pi-del" title="Remove" onclick="removePort(${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) {
+    if (!confirm(`Remove port ${port} mapping?`)) 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");
@@ -586,6 +692,20 @@ function bindEvents() {
     document.getElementById("btn-save-file").addEventListener("click", saveFile);
     document.getElementById("btn-reconnect").addEventListener("click", reconnectTerminal);
 
+    // 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(); });
+
+    // 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");
+        }
+    });
+
     document.getElementById("btn-cancel-prompt").addEventListener("click", () => {
         closeModal("modal-prompt");
         if (promptResolve) { promptResolve(null); promptResolve = null; }

static/index.html

@@ -89,6 +89,13 @@
                         <div class="breadcrumb" 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>
@@ -195,6 +202,43 @@
         </div>
     </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>
+        </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>
+        <div id="port-list" class="port-list"></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" onclick="closeModal('modal-add-port')"><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" onclick="closeModal('modal-add-port')">Cancel</button>
+                    <button type="submit" class="btn btn-accent"><i data-lucide="plus"></i> Map Port</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <script src="/static/app.js"></script>
 </body>
 </html>

static/style.css

@@ -719,5 +719,120 @@ body {
 .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;
+}
+
 /* ── Utility ───────────────── */
 .hidden { display: none !important; }

terminal.py

@@ -1,5 +1,7 @@
 import asyncio
+import collections
 import fcntl
+import json
 import os
 import pty
 import select
@@ -8,12 +10,15 @@ 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}}
+# Max bytes kept in the scrollback ring buffer per zone
+SCROLLBACK_SIZE = 128 * 1024  # 128 KB
+
+# Active terminals: {zone_name: {fd, pid, buffer, bg_task}}
 active_terminals: dict[str, dict] = {}
 
 
 def _spawn_shell(zone_name: str) -> dict:
-    """Tạo PTY shell mới cho zone."""
+    """Spawn a new PTY shell for a zone."""
     zone_path = get_zone_path(zone_name)
     master_fd, slave_fd = pty.openpty()
 
@@ -37,7 +42,7 @@ def _spawn_shell(zone_name: str) -> dict:
         # 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}
+        return {"fd": master_fd, "pid": child_pid, "buffer": collections.deque(), "buffer_size": 0}
 
 
 def resize_terminal(zone_name: str, rows: int, cols: int):
@@ -48,10 +53,56 @@ def resize_terminal(zone_name: str, rows: int, cols: int):
         fcntl.ioctl(fd, termios.TIOCSWINSZ, winsize)
 
 
+def _append_buffer(info: dict, data: bytes):
+    """Append data to the zone's ring buffer, evicting old chunks if needed."""
+    info["buffer"].append(data)
+    info["buffer_size"] += len(data)
+    while info["buffer_size"] > SCROLLBACK_SIZE:
+        old = info["buffer"].popleft()
+        info["buffer_size"] -= len(old)
+
+
+def _get_buffer(info: dict) -> bytes:
+    """Return the full buffered scrollback as a single bytes object."""
+    return b"".join(info["buffer"])
+
+
+async def _bg_reader(zone_name: str):
+    """Background task: continuously reads PTY output and stores it in the ring buffer.
+    This runs for the lifetime of the terminal, regardless of WebSocket connections."""
+    info = active_terminals.get(zone_name)
+    if not info:
+        return
+    fd = info["fd"]
+    while _is_alive(zone_name):
+        await asyncio.sleep(0.02)
+        try:
+            r, _, _ = select.select([fd], [], [], 0)
+            if r:
+                data = os.read(fd, 4096)
+                if data:
+                    _append_buffer(info, data)
+                    # Forward to connected WebSocket if any
+                    ws = info.get("ws")
+                    if ws:
+                        try:
+                            await ws.send_bytes(data)
+                        except Exception:
+                            info["ws"] = None
+        except (OSError, BlockingIOError):
+            pass
+        except Exception:
+            break
+
+
 def kill_terminal(zone_name: str):
-    """Kill terminal process cho zone."""
+    """Kill terminal process for a zone."""
     if zone_name in active_terminals:
         info = active_terminals.pop(zone_name)
+        # Cancel background reader
+        bg = info.get("bg_task")
+        if bg:
+            bg.cancel()
         try:
             os.kill(info["pid"], 9)
             os.waitpid(info["pid"], os.WNOHANG)
@@ -77,10 +128,10 @@ def _is_alive(zone_name: str) -> bool:
 
 
 async def terminal_ws(websocket: WebSocket, zone_name: str):
-    """WebSocket handler cho terminal."""
+    """WebSocket handler for terminal."""
     await websocket.accept()
 
-    # Kiểm tra zone tồn tại
+    # Check zone exists
     try:
         get_zone_path(zone_name)
     except ValueError as e:
@@ -88,39 +139,31 @@ async def terminal_ws(websocket: WebSocket, zone_name: str):
         await websocket.close()
         return
 
-    # Spawn hoặc reuse terminal
+    # Spawn or reuse terminal
     if not _is_alive(zone_name):
-        kill_terminal(zone_name)  # Cleanup nếu cần
+        kill_terminal(zone_name)  # Cleanup if needed
         try:
             info = _spawn_shell(zone_name)
+            info["ws"] = None
             active_terminals[zone_name] = info
+            # Start background reader that persists for lifetime of the terminal
+            bg = asyncio.create_task(_bg_reader(zone_name))
+            info["bg_task"] = bg
         except Exception as e:
-            await websocket.send_json({"error": f"Không tạo được terminal: {e}"})
+            await websocket.send_json({"error": f"Cannot create terminal: {e}"})
             await websocket.close()
             return
 
-    fd = active_terminals[zone_name]["fd"]
+    info = active_terminals[zone_name]
+    fd = info["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
+    # Replay buffered scrollback so the user sees previous output
+    buf = _get_buffer(info)
+    if buf:
+        await websocket.send_bytes(buf)
 
-    reader_task = asyncio.create_task(read_output())
+    # Register this WebSocket as the active receiver
+    info["ws"] = websocket
 
     try:
         while True:
@@ -129,7 +172,6 @@ async def terminal_ws(websocket: WebSocket, zone_name: str):
                 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))
@@ -142,5 +184,6 @@ async def terminal_ws(websocket: WebSocket, zone_name: str):
     except Exception:
         pass
     finally:
-        reader_task.cancel()
-        # Không kill terminal khi disconnect — giữ nó chạy
+        # Unregister WebSocket but keep terminal + bg reader alive
+        if zone_name in active_terminals and active_terminals[zone_name].get("ws") is websocket:
+            active_terminals[zone_name]["ws"] = None