Update app.py

app.py

@@ -8,6 +8,8 @@ import asyncio
 import json
 import base64
 import logging
+import time
+import uuid
 import shutil
 import subprocess
 
@@ -28,6 +30,11 @@ ALLOWED_BASES = [os.path.abspath(p) for p in (
     "/home/user", "/workspace", "/home/app", HOME
 )]
 
+# 斷線後 session 保留的閒置時間（沒有任何分頁接回就會被清除）
+SESSION_IDLE_TIMEOUT = 30 * 60  # 30 分鐘
+# 每個 session 保留的畫面回放緩衝區大小上限（bytes）
+SESSION_BUFFER_MAX = 300_000
+
 # ──────────────────────────── Frontend ────────────────────────────
 HTML_PAGE = r"""<!DOCTYPE html>
 <html lang="zh-TW">
@@ -84,13 +91,36 @@ const fileInput = document.getElementById('file-input');
 let tabs = [], activeId = null, cnt = 0;
 
 function activeTab() { return tabs.find(t => t.id === activeId); }
-function wsUrl() {
+
+function wsUrl(sessionId) {
   const p = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  return `${p}//${location.host}/ws`;
+  let url = `${p}//${location.host}/ws`;
+  if (sessionId) url += `?session_id=${encodeURIComponent(sessionId)}`;
+  return url;
+}
+
+// ── 分頁狀態持久化：把「分頁 id + 對應的伺服器 session_id」存進 localStorage，
+//    這樣重新整理整個網頁，甚至瀏覽器關掉重開，都能接回原本還在跑的終端機。
+function saveTabs() {
+  try {
+    const data = tabs.map(t => ({ id: t.id, sessionId: t.sessionId || null }));
+    localStorage.setItem('webterm_tabs', JSON.stringify(data));
+    localStorage.setItem('webterm_cnt', String(cnt));
+  } catch (e) { /* localStorage 不可用時忽略 */ }
+}
+
+function loadTabs() {
+  try {
+    const raw = localStorage.getItem('webterm_tabs');
+    if (!raw) return null;
+    const data = JSON.parse(raw);
+    if (Array.isArray(data) && data.length) return data;
+  } catch (e) { /* ignore */ }
+  return null;
 }
 
 function connect(tabObj) {
-  const ws = new WebSocket(wsUrl());
+  const ws = new WebSocket(wsUrl(tabObj.sessionId));
   tabObj.ws = ws;
   tabObj.reconnectDelay = tabObj.reconnectDelay || 500;
 
@@ -103,7 +133,11 @@ function connect(tabObj) {
   ws.onmessage = e => {
     try {
       const m = JSON.parse(e.data);
-      if (m.type === 'output') {
+      if (m.type === 'session') {
+        // 伺服器告訴我們這條連線對應的 session id：記住它，下次斷線/重整才能接回同一個終端機
+        tabObj.sessionId = m.id;
+        saveTabs();
+      } else if (m.type === 'output') {
         const pwdRegex = /\x1b\]0;PWD:(.*?)\x07/g;
         let match;
         while ((match = pwdRegex.exec(m.data)) !== null) {
@@ -122,7 +156,7 @@ function connect(tabObj) {
   ws.onclose = () => {
     if (tabObj.closed) return;
     tabObj.el.querySelector('.status-dot').classList.add('down');
-    tabObj.term.write(`\r\n\x1b[31m[連線中斷，${(tabObj.reconnectDelay/1000).toFixed(1)}s 後自動重連...]\x1b[0m\r\n`);
+    tabObj.term.write(`\r\n\x1b[31m[連線中斷，${(tabObj.reconnectDelay/1000).toFixed(1)}s 後自動重連（將接回原本畫面）...]\x1b[0m\r\n`);
     setTimeout(() => {
       if (!tabObj.closed) connect(tabObj);
     }, tabObj.reconnectDelay);
@@ -131,7 +165,7 @@ function connect(tabObj) {
   ws.onerror = () => ws.close();
 }
 
-function createTab() {
+function createTab(sessionId) {
   const id = ++cnt;
 
   const el = document.createElement('div');
@@ -159,9 +193,10 @@ function createTab() {
   term.open(wrap);
   fit.fit();
 
-  const obj = {id, el, wrap, term, fit, ws: null, closed: false, currentDir: '~'};
+  const obj = {id, el, wrap, term, fit, ws: null, closed: false, currentDir: '~', sessionId: sessionId || null};
   tabs.push(obj);
   connect(obj);
+  saveTabs();
 
   term.onData(d => {
     if (obj.ws && obj.ws.readyState === WebSocket.OPEN) obj.ws.send(JSON.stringify({type: 'input', data: d}));
@@ -194,16 +229,23 @@ function closeTab(id) {
   if (i < 0) return;
   const t = tabs[i];
   t.closed = true;
-  if (t.ws) t.ws.close();
+  if (t.ws) {
+    // 使用者主動關閉分頁才真正通知伺服器砍掉該 session（區別於單純網路斷線）
+    if (t.ws.readyState === WebSocket.OPEN) {
+      try { t.ws.send(JSON.stringify({type: 'kill'})); } catch (e) {}
+    }
+    t.ws.close();
+  }
   t.term.dispose();
   t.el.remove();
   t.wrap.remove();
   tabs.splice(i, 1);
+  saveTabs();
   if (!tabs.length) { createTab(); return; }
   if (activeId === id) activate(tabs[Math.min(i, tabs.length - 1)].id);
 }
 
-addBtn.onclick = createTab;
+addBtn.onclick = () => createTab();
 
 copyBtn.onclick = async () => {
   const t = activeTab();
@@ -278,7 +320,18 @@ document.addEventListener('keydown', e => {
   if (e.ctrlKey && e.shiftKey && e.key === 'W') { e.preventDefault(); if (activeId) closeTab(activeId); }
 });
 
-createTab();
+// ── 頁面載入時：如果 localStorage 有先前留下的分頁紀錄，就依序用相同 session_id 接回，
+//    而不是每次重新整理都開全新的終端機。
+(function initTabs() {
+  const saved = loadTabs();
+  const savedCnt = parseInt(localStorage.getItem('webterm_cnt') || '0', 10);
+  if (savedCnt) cnt = savedCnt;
+  if (saved && saved.length) {
+    saved.forEach(t => createTab(t.sessionId));
+  } else {
+    createTab();
+  }
+})();
 </script>
 </body>
 </html>"""
@@ -347,20 +400,20 @@ async def install_editors():
 async def run_installpi_script():
     """執行 ~/app/installpi.sh（若存在），並自動設定執行權限。"""
     installpi_path = os.path.expanduser("~/app/installpi.sh")
-    
+
     if not os.path.isfile(installpi_path):
         log.warning("⚠️ installpi.sh 不存在於 ~/app/installpi.sh，跳過執行")
         return False
-    
+
     try:
         # 設定執行權限
         os.chmod(installpi_path, 0o755)
         log.info("✅ 已設定 installpi.sh 執行權限 (755)")
-        
+
         # 執行腳本
         log.info("正在執行 ~/app/installpi.sh ...")
         rc, out, err = await _run(installpi_path)
-        
+
         if rc == 0:
             log.info("✅ installpi.sh 執行成功")
             if out:
@@ -392,43 +445,72 @@ async def startup_event():
     asyncio.create_task(install_editors())
 
 
-# ──────────────────────────── Terminal WebSocket ──────────────────────────────
-
-async def _reap_process(pid: int, loop: asyncio.AbstractEventLoop):
-    """非阻塞地終止並回收子行程。"""
-    for sig in (signal.SIGTERM, signal.SIGKILL):
+# ──────────────────────────── Terminal Session 管理 ──────────────────────────────
+# 核心概念：pty（bash 進程）的生命週期跟 WebSocket 連線脫鉤。
+# WebSocket 斷線／頁面重新整理時，只是少了一個「訂閱者」，背後的 bash 依然在跑；
+# 只有使用者主動關閉分頁（送出 kill 訊息），或閒置太久沒人接回，才會真正砍掉該 session。
+
+SESSIONS: dict[str, "TerminalSession"] = {}
+SESSIONS_LOCK = asyncio.Lock()
+
+
+class TerminalSession:
+    def __init__(self, session_id: str, pid: int, fd: int, cols: int = 120, rows: int = 30):
+        self.id = session_id
+        self.pid = pid
+        self.fd = fd
+        self.cols = cols
+        self.rows = rows
+        self.buffer = bytearray()  # 畫面回放緩衝區，供重連時還原終端機畫面
+        self.subscribers: dict[int, asyncio.Queue] = {}
+        self._next_sub_id = 0
+        self.cleanup_task: asyncio.Task | None = None
+
+    def add_subscriber(self):
+        sid = self._next_sub_id
+        self._next_sub_id += 1
+        q: asyncio.Queue = asyncio.Queue()
+        self.subscribers[sid] = q
+        if self.cleanup_task:
+            self.cleanup_task.cancel()
+            self.cleanup_task = None
+        return sid, q
+
+    def remove_subscriber(self, sid: int, loop: asyncio.AbstractEventLoop):
+        self.subscribers.pop(sid, None)
+        if not self.subscribers:
+            self.cleanup_task = loop.create_task(self._schedule_cleanup(loop))
+
+    async def _schedule_cleanup(self, loop: asyncio.AbstractEventLoop):
         try:
-            os.kill(pid, sig)
-        except ProcessLookupError:
+            await asyncio.sleep(SESSION_IDLE_TIMEOUT)
+        except asyncio.CancelledError:
             return
-        for _ in range(20):
-            await asyncio.sleep(0.1)
+        if not self.subscribers:
+            log.info("session %s 閒置超過 %ds 無人接回，清除", self.id, SESSION_IDLE_TIMEOUT)
+            await kill_session(self.id, loop)
+
+    def feed(self, data: bytes):
+        self.buffer.extend(data)
+        overflow = len(self.buffer) - SESSION_BUFFER_MAX
+        if overflow > 0:
+            del self.buffer[:overflow]
+        dead = []
+        for sid, q in self.subscribers.items():
             try:
-                wpid, _status = os.waitpid(pid, os.WNOHANG)
-                if wpid == pid:
-                    return
-            except ChildProcessError:
-                return
-    try:
-        await loop.run_in_executor(None, os.waitpid, pid, 0)
-    except Exception:
-        pass
+                q.put_nowait(data)
+            except Exception:
+                dead.append(sid)
+        for sid in dead:
+            self.subscribers.pop(sid, None)
 
 
-@app.websocket("/ws")
-async def terminal_ws(websocket: WebSocket):
-    await websocket.accept()
+def _set_winsize(fd: int, cols: int, rows: int):
+    fcntl.ioctl(fd, termios.TIOCSWINSZ, struct.pack("HHHH", rows, cols, 0, 0))
 
-    try:
-        pid, fd = pty.fork()
-    except OSError as e:
-        await websocket.send_text(json.dumps({
-            "type": "system",
-            "data": f"\r\n\x1b[31m[❌ 無法建立新終端機 (pty.fork 失敗: {e})，請稍後再試或關閉其他分頁]\x1b[0m\r\n",
-        }))
-        await websocket.close()
-        return
 
+def _fork_shell():
+    pid, fd = pty.fork()
     if pid == 0:
         os.environ["TERM"] = "xterm-256color"
         os.environ["COLORTERM"] = "truecolor"
@@ -441,7 +523,7 @@ async def terminal_ws(websocket: WebSocket):
 
         banner = (
             'echo -e "\\033[36m歡迎使用 Web Terminal｜vim/nvim 已安裝｜'
-            f'opencode 與 installpi.sh 已執行（請查看日誌）\\033[0m";'
+            'opencode 與 installpi.sh 已執行（請查看日誌）\\033[0m";'
         )
         bash_cmd = (
             f"{banner} "
@@ -449,28 +531,146 @@ async def terminal_ws(websocket: WebSocket):
             "exec bash --login"
         )
         os.execvp("bash", ["bash", "-c", bash_cmd])
+    return pid, fd
 
-    loop = asyncio.get_running_loop()
 
-    def set_winsize(cols: int, rows: int):
-        fcntl.ioctl(fd, termios.TIOCSWINSZ, struct.pack("HHHH", rows, cols, 0, 0))
+async def create_session(cols: int = 120, rows: int = 30) -> TerminalSession:
+    pid, fd = _fork_shell()
 
-    set_winsize(120, 30)
+    session_id = uuid.uuid4().hex[:12]
+    sess = TerminalSession(session_id, pid, fd, cols, rows)
 
+    _set_winsize(fd, cols, rows)
     fl = fcntl.fcntl(fd, fcntl.F_GETFL)
     fcntl.fcntl(fd, fcntl.F_SETFL, fl | os.O_NONBLOCK)
 
-    queue: asyncio.Queue = asyncio.Queue()
+    loop = asyncio.get_running_loop()
 
     def _on_read():
         try:
             data = os.read(fd, 65536)
-            queue.put_nowait(data if data else None)
         except (BlockingIOError, OSError):
-            queue.put_nowait(None)
+            return
+        if not data:
+            # bash 行程已結束（例如使用者在終端機內打了 exit）
+            try:
+                loop.remove_reader(fd)
+            except Exception:
+                pass
+            asyncio.create_task(kill_session(session_id, loop, already_dead=True))
+            return
+        sess.feed(data)
 
     loop.add_reader(fd, _on_read)
 
+    async with SESSIONS_LOCK:
+        SESSIONS[session_id] = sess
+    return sess
+
+
+async def _reap_process(pid: int, loop: asyncio.AbstractEventLoop):
+    """非阻塞地終止並回收子行程。"""
+    for sig in (signal.SIGTERM, signal.SIGKILL):
+        try:
+            os.kill(pid, sig)
+        except ProcessLookupError:
+            return
+        for _ in range(20):
+            await asyncio.sleep(0.1)
+            try:
+                wpid, _status = os.waitpid(pid, os.WNOHANG)
+                if wpid == pid:
+                    return
+            except ChildProcessError:
+                return
+    try:
+        await loop.run_in_executor(None, os.waitpid, pid, 0)
+    except Exception:
+        pass
+
+
+async def kill_session(session_id: str, loop: asyncio.AbstractEventLoop, already_dead: bool = False):
+    async with SESSIONS_LOCK:
+        sess = SESSIONS.pop(session_id, None)
+    if not sess:
+        return
+    try:
+        loop.remove_reader(sess.fd)
+    except Exception:
+        pass
+    if not already_dead:
+        await _reap_process(sess.pid, loop)
+    try:
+        os.close(sess.fd)
+    except Exception:
+        pass
+    for q in list(sess.subscribers.values()):
+        try:
+            q.put_nowait(None)
+        except Exception:
+            pass
+    log.info("session %s 已清除", session_id)
+
+
+# ──────────────────────────── Terminal WebSocket ──────────────────────────────
+
+@app.websocket("/ws")
+async def terminal_ws(websocket: WebSocket):
+    await websocket.accept()
+    loop = asyncio.get_running_loop()
+
+    requested_id = websocket.query_params.get("session_id")
+    try:
+        cols = int(websocket.query_params.get("cols", 120))
+        rows = int(websocket.query_params.get("rows", 30))
+    except ValueError:
+        cols, rows = 120, 30
+
+    sess = SESSIONS.get(requested_id) if requested_id else None
+    reattached = sess is not None
+
+    if sess is None:
+        try:
+            sess = await create_session(cols, rows)
+        except OSError as e:
+            await websocket.send_text(json.dumps({
+                "type": "system",
+                "data": f"\r\n\x1b[31m[❌ 無法建立新終端機 (pty.fork 失敗: {e})，請稍後再試或關閉其他分頁]\x1b[0m\r\n",
+            }))
+            await websocket.close()
+            return
+
+    # 告知前端這次連線對應的 session id，讓前端存起來，日後斷線重連 / 重新整理都能接回同一個
+    await websocket.send_text(json.dumps({"type": "session", "id": sess.id, "reattached": reattached}))
+
+    if reattached:
+        if sess.buffer:
+            try:
+                await websocket.send_text(json.dumps({
+                    "type": "output",
+                    "data": bytes(sess.buffer).decode("utf-8", errors="replace"),
+                }))
+            except Exception:
+                pass
+        try:
+            await websocket.send_text(json.dumps({
+                "type": "system",
+                "data": "\r\n\x1b[32m[✅ 已��新連線，畫面已還原]\x1b[0m\r\n",
+            }))
+        except Exception:
+            pass
+    elif requested_id:
+        # 前端要求接回某個 session，但伺服器已找不到（逾時被清除或伺服器重啟過）
+        try:
+            await websocket.send_text(json.dumps({
+                "type": "system",
+                "data": "\r\n\x1b[33m[⚠️ 找不到先前的工作階段（可能已逾時或伺服器重新啟動），已建立新的終端機]\x1b[0m\r\n",
+            }))
+        except Exception:
+            pass
+
+    sub_id, queue = sess.add_subscriber()
+
     async def _pty_to_ws():
         while True:
             chunk = await queue.get()
@@ -493,19 +693,22 @@ async def terminal_ws(websocket: WebSocket):
             except json.JSONDecodeError:
                 continue
 
-            if msg["type"] == "input":
+            mtype = msg.get("type")
+
+            if mtype == "input":
                 try:
-                    os.write(fd, msg["data"].encode("utf-8"))
+                    os.write(sess.fd, msg["data"].encode("utf-8"))
                 except OSError:
                     break
 
-            elif msg["type"] == "resize":
+            elif mtype == "resize":
                 try:
-                    set_winsize(msg["cols"], msg["rows"])
+                    sess.cols, sess.rows = msg["cols"], msg["rows"]
+                    _set_winsize(sess.fd, msg["cols"], msg["rows"])
                 except Exception:
                     pass
 
-            elif msg["type"] == "upload":
+            elif mtype == "upload":
                 filename = os.path.basename(msg.get("filename", "uploaded_file"))
                 target_dir = msg.get("targetDir", "/home/user")
                 safe_dir = _safe_path(target_dir) or "/home/user"
@@ -528,21 +731,20 @@ async def terminal_ws(websocket: WebSocket):
                         "data": f"\r\n\x1b[31m[❌ 上傳失敗: {e}]\x1b[0m\r\n",
                     }))
 
+            elif mtype == "kill":
+                # 使用者主動關閉這個分頁：真正終止此 session（不再保留供重連）
+                await kill_session(sess.id, loop)
+                break
+
     except (WebSocketDisconnect, RuntimeError):
         pass
     except Exception:
         log.exception("terminal_ws 循環發生未預期錯誤")
     finally:
-        try:
-            loop.remove_reader(fd)
-        except Exception:
-            pass
         sender.cancel()
-        await _reap_process(pid, loop)
-        try:
-            os.close(fd)
-        except Exception:
-            pass
+        # 注意：這裡「不」殺掉 pty／bash，只是移除這個訂閱者，
+        # 讓 session 保留在 SESSIONS 裡，等待同一個分頁重連接回。
+        sess.remove_subscriber(sub_id, loop)
 
 
 if __name__ == "__main__":