桌面剪貼簿固定開啟、移除複製貼上按鈕、檔案下載不限路徑且支援資料夾

README.md

@@ -56,8 +56,8 @@ OpenCode 在啟動時安裝，並重設使用者層級設定為預設值。
   所以固定分頁裡永遠有 1 個可用的圖形終端機視窗（使用者自己另開的终端機不受影響）。
 - 容器內沒有 systemd-logind session，因此會自動停用 `lxpolkit` 與 `light-locker`
   autostart，避免桌面啟動時跳出「No session for pid …」的 Error 對話框。
-- **剪貼簿同步**：桌面右上角有「剪貼簿同步：開／關」按鈕。開啟時，桌面裡的
-  CLIPBOARD／PRIMARY 會與瀏覽器所在系統的剪貼簿雙向同步；在桌面內按 Ctrl+V
+- **剪貼簿同步（固定開啟）**：桌面裡的 CLIPBOARD／PRIMARY 永遠與瀏覽器所在系統的
+  剪貼簿雙向同步；在桌面內按 Ctrl+V
   （或 Cmd+V）會先把本機剪貼簿送進 X11 再貼上。底層由 `autocutsel` 將 x11vnc
   使用的 CUT_BUFFER0 與 X11 selection 對齊，xterm 也設定為選取即同步 CLIPBOARD。
   瀏覽器基於安全限制，頁面需要保持在前景；若系統阻擋寫入，點一下桌面會重試。
@@ -66,9 +66,11 @@ OpenCode 在啟動時安裝，並重設使用者層級設定為預設值。
 - 這個分頁是固定的：按它的 `×` 不會刪除分頁，而是重新啟動一份新的桌面
   （`POST /api/desktop/restart`），永遠維持一個。
 - 終端機分頁也支援系統剪貼簿：選取後按 **Ctrl+Shift+C**（或 Ctrl+Insert）複製，
-  **Ctrl+V**、**Ctrl+Shift+V**（或 Shift+Insert）直接貼上；「📋 複製」／「📌 貼上」
-  按鈕行為相同。貼上走 xterm.js 的 bracketed paste，與一般終端機一致。
-- 上傳／下載等其餘行為完全沒有改變。
+  **Ctrl+V**、**Ctrl+Shift+V**（或 Shift+Insert）直接貼上。貼上走 xterm.js 的
+  bracketed paste，與一般終端機一致。
+- 檔案瀏覽器可瀏覽／下載伺服器上的**任何路徑**（含 `/tmp`、`/`），不再有白名單限制；
+  選取資料夾後下載會即時串流打包成 `.tar.gz`，不會一次載入記憶體。
+- 桌面分頁不提供上傳（按鈕會停用），請改用終端機分頁或桌面內的檔案管理員。
 - 除錯端點：`GET /api/desktop/status`、`POST /api/desktop/restart`（程序 pid、VNC port、
   健康狀態）；桌面 log 在 `/tmp/webterm-desktop.log`。
 - 可用 Space 變數覆寫：`DESKTOP_DISPLAY`（預設 `:99`）、`DESKTOP_GEOMETRY`

app.py

@@ -16,6 +16,7 @@ import logging
 import mimetypes
 import time
 import uuid
+from urllib.parse import quote
 
 import spaces
 import httpx
@@ -41,9 +42,7 @@ except Exception as _relay_err:  # pragma: no cover
 
 # ──────────────────────────── 全域設定 ────────────────────────────
 HOME = os.path.expanduser("~")
-ALLOWED_BASES = [os.path.abspath(p) for p in (
-    "/app", "/home/user", "/workspace", "/home/app", HOME
-)]
+# 檔案瀏覽／下載不設路徑白名單（此服務本身已提供完整終端機權限）。
 
 # 共用分頁：所有裝置／瀏覽器看到同一組分頁，而且每一頁都是「共用＋長存」的 PTY。
 # 分頁清單由伺服器統一管理並落地到 TABS_FILE，所以：
@@ -77,6 +76,7 @@ html,body{height:100%;overflow:hidden;background:#1e1e1e;color:#ccc;font-family:
 .tab .x:hover{color:#f55}
 #add-btn{background:none;border:1px dashed #555;color:#777;padding:3px 12px;border-radius:4px;cursor:pointer;font-size:18px;margin-bottom:4px;margin-left:4px}
 #add-btn:hover{color:#fff;border-color:#aaa}
+.action-btn:disabled{opacity:.45;cursor:not-allowed}
 .action-btn{background:#2d2d2d;color:#969696;border:1px solid #3c3c3c;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:13px;margin-bottom:4px;margin-left:4px;transition:all 0.2s;white-space:nowrap}
 .action-btn:hover{color:#fff;border-color:#aaa;background:#3c3c3c}
 #app-status{flex:0 1 320px;min-width:150px;max-width:360px;height:28px;margin:0 0 4px 2cm;padding:0 10px;display:flex;align-items:center;overflow:hidden;border:1px solid #3c3c3c;border-radius:4px;background:#202020;color:#aaa;font-size:12px;white-space:nowrap;text-overflow:ellipsis}#app-status[data-kind="success"]{color:#7fd18b;border-color:#35613d}#app-status[data-kind="error"]{color:#ff8f8f;border-color:#703c3c}#app-status[data-kind="warning"]{color:#f0cb75;border-color:#705f32}#app-status[data-kind="info"]{color:#9cc9ff;border-color:#365577}
@@ -124,8 +124,6 @@ body{display:flex;flex-direction:column}
 <body>
 <div id="tab-bar">
     <button id="add-btn" title="New Terminal (Ctrl+Shift+T)">+</button>
-    <button id="copy-btn" class="action-btn" title="複製選取文字（Ctrl+Shift+C）">📋 複製</button>
-    <button id="paste-btn" class="action-btn" title="從系統剪貼簿貼上（Ctrl+V、Ctrl+Shift+V、Shift+Insert）">📌 貼上</button>
     <button id="upload-btn" class="action-btn" title="Upload to current directory">📤 上傳</button>
     <button id="download-btn" class="action-btn" title="Browse and download server files">📥 下載</button>
     <div id="app-status" role="status" aria-live="polite" title="應用程式訊息">就緒</div>
@@ -144,6 +142,8 @@ body{display:flex;flex-direction:column}
       <div class="explorer-nav-heading">快速存取</div>
       <button class="explorer-nav active" data-path="/home/user/app"><span class="nav-icon">📁</span>工作目錄</button>
       <button class="explorer-nav" data-path="/home/user"><span class="nav-icon">🏠</span>使用者資料夾</button>
+      <button class="explorer-nav" data-path="/tmp"><span class="nav-icon">⏱️</span>暫存資料夾</button>
+      <button class="explorer-nav" data-path="/"><span class="nav-icon">💽</span>根目錄</button>
     </aside>
     <main class="explorer-main">
       <div class="explorer-list-heading"><span>名稱</span><span class="explorer-modified">修改日期</span><span>大小</span></div>
@@ -151,7 +151,7 @@ body{display:flex;flex-direction:column}
       <div id="file-picker-status" class="explorer-status"></div>
     </main>
   </div>
-  <div class="explorer-footer"><label class="explorer-filename-label" for="file-picker-filename">檔案名稱:</label><input id="file-picker-filename" class="explorer-filename" type="text" readonly placeholder="選取要下載的檔案"/><button id="file-picker-download" class="primary" type="button" disabled>下載</button><button id="file-picker-cancel" type="button">取消</button></div>
+  <div class="explorer-footer"><label class="explorer-filename-label" for="file-picker-filename">檔案名稱:</label><input id="file-picker-filename" class="explorer-filename" type="text" readonly placeholder="選取要下載的檔案或資料夾"/><button id="file-picker-download" class="primary" type="button" disabled>下載</button><button id="file-picker-cancel" type="button">取消</button></div>
 </dialog>
 <div id="term-box"></div>
 <input type="file" id="file-input" style="display:none;" />
@@ -163,8 +163,6 @@ body{display:flex;flex-direction:column}
 const bar = document.getElementById('tab-bar');
 const box = document.getElementById('term-box');
 const addBtn = document.getElementById('add-btn');
-const copyBtn = document.getElementById('copy-btn');
-const pasteBtn = document.getElementById('paste-btn');
 const uploadBtn = document.getElementById('upload-btn');
 const downloadBtn = document.getElementById('download-btn');
 const appStatus = document.getElementById('app-status');
@@ -349,7 +347,7 @@ function createTab(sessionId = null, title = null, activateIt = true) {
   el.dataset.id = id;
   el.innerHTML = `<span class="status-dot"></span><span class="tab-title"></span><span class="x">&times;</span>`;
   el.querySelector('.tab-title').textContent = title || tabTitle(sessionId);
-  bar.insertBefore(el, copyBtn);
+  bar.insertBefore(el, uploadBtn);
 
   const wrap = document.createElement('div');
   wrap.className = 'tw';
@@ -489,6 +487,9 @@ async function restartDesktop() {
 function activate(id) {
   activeId = id;
   saveActive();
+  const current = tabs.find(t => t.id === id);
+  uploadBtn.disabled = !!current && current.type === 'desktop';
+  uploadBtn.title = uploadBtn.disabled ? '桌面分頁不支援上傳' : 'Upload to current directory';
   tabs.forEach(t => {
     const on = t.id === id;
     t.el.classList.toggle('active', on);
@@ -595,38 +596,6 @@ addBtn.onclick = async () => {
   }
 };
 
-copyBtn.onclick = async () => {
-  const t = activeTab();
-  if (!t) return;
-  if (t.type === 'desktop') {
-    setAppStatus('桌面分頁請直接在畫面內選取／複製，或使用桌面內應用程式的剪貼簿', 'info');
-    return;
-  }
-  const text = t.term.getSelection();
-  if (text) {
-    const ok = await copyTextToClipboard(text);
-    setAppStatus(ok ? '已複製選取文字到系統剪貼簿' : '複製失敗，請檢查瀏覽器權限', ok ? 'success' : 'error');
-  } else {
-    setAppStatus('請先在終端機中選取要複製的文字', 'warning');
-  }
-};
-
-pasteBtn.onclick = async () => {
-  const t = activeTab();
-  if (!t) return;
-  if (t.type === 'desktop') {
-    setAppStatus('桌面分頁請使用桌面內應用程式的貼上功能', 'info');
-    return;
-  }
-  const text = await readClipboardText();
-  if (text === null) {
-    setAppStatus('貼上失敗，請允許瀏覽器讀取剪貼簿權限', 'error');
-    return;
-  }
-  if (pasteToTerm(t, text)) setAppStatus('已從系統剪貼簿貼上', 'success');
-  else setAppStatus('貼上失敗，終端機尚未連線', 'error');
-};
-
 uploadBtn.onclick = () => {
   const t = activeTab();
   if (t && t.type === 'desktop') {
@@ -701,10 +670,10 @@ function renderFilePickerEntries() {
       });
       row.classList.add('selected');
       row.setAttribute('aria-selected', 'true');
-      filePickerSelected = entry.is_dir ? null : entry;
-      filePickerFilename.value = filePickerSelected ? entry.name : '';
-      filePickerDownload.disabled = !filePickerSelected;
-      filePickerStatus.textContent = filePickerSelected ? `已選取 ${entry.name}` : `資料夾：${entry.name}`;
+      filePickerSelected = entry;
+      filePickerFilename.value = entry.is_dir ? entry.name + '/' : entry.name;
+      filePickerDownload.disabled = false;
+      filePickerStatus.textContent = entry.is_dir ? `已選取資料夾 ${entry.name}（下載為 .tar.gz）` : `已選取 ${entry.name}`;
     };
     row.ondblclick = () => entry.is_dir ? navigateFilePicker(entry.path) : downloadSelectedFile();
     filePickerList.appendChild(row);
@@ -727,8 +696,8 @@ function renderFilePickerPath(directory) {
   const parts = directory.split('/').filter(Boolean);
   const root = document.createElement('button');
   root.type = 'button';
-  root.textContent = '此電腦';
-  root.onclick = () => navigateFilePicker('/home/user');
+  root.textContent = '根目錄 /';
+  root.onclick = () => navigateFilePicker('/');
   filePickerPath.appendChild(root);
   let accumulated = '';
   parts.forEach(part => {
@@ -787,8 +756,9 @@ function downloadSelectedFile() {
   if (!filePickerSelected) return;
   const url = '/download?path=' + encodeURIComponent(filePickerSelected.path);
   window.location.href = url;
-  const t = activeTab();
-  setAppStatus(`正在下載 ${filePickerSelected.path}`, 'info');
+  setAppStatus(filePickerSelected.is_dir
+    ? `正在打包下載資料夾 ${filePickerSelected.path}（.tar.gz）`
+    : `正在下載 ${filePickerSelected.path}`, 'info');
 }
 
 function formatFileSize(size) {
@@ -864,11 +834,10 @@ async def index():
 
 
 def _safe_path(path: str) -> str | None:
-    abs_path = os.path.abspath(path)
-    for base in ALLOWED_BASES:
-        if abs_path == base or abs_path.startswith(base + os.sep):
-            return abs_path
-    return None
+    path = os.path.expanduser(os.path.expandvars(path or HOME))
+    if "\x00" in path:
+        return None
+    return os.path.abspath(path)
 
 
 @app.get("/files")
@@ -906,9 +875,36 @@ async def download_route(path: str):
     safe = _safe_path(path)
     if safe is None:
         return JSONResponse({"error": "path not allowed"}, status_code=403)
-    if not os.path.isfile(safe):
-        return JSONResponse({"error": "file not found"}, status_code=404)
-    return FileResponse(safe, filename=os.path.basename(safe))
+    if os.path.isfile(safe):
+        return FileResponse(safe, filename=os.path.basename(safe))
+    if not os.path.isdir(safe):
+        return JSONResponse({"error": "path not found"}, status_code=404)
+
+    # 資料夾串流打包成 .tar.gz，避免一次載入記憶體。
+    normalized = safe.rstrip(os.sep) or os.sep
+    name = os.path.basename(normalized) or "root"
+    parent = os.path.dirname(normalized) or os.sep
+    member = name if normalized != os.sep else "."
+    archive = f"{name}.tar.gz"
+    proc = subprocess.Popen(
+        ["tar", "-czf", "-", "-C", parent, member],
+        stdout=subprocess.PIPE, stderr=subprocess.DEVNULL, bufsize=0,
+    )
+
+    async def stream_archive():
+        try:
+            while True:
+                chunk = await asyncio.to_thread(proc.stdout.read, 1 << 20)
+                if not chunk:
+                    break
+                yield chunk
+        finally:
+            if proc.poll() is None:
+                proc.kill()
+            await asyncio.to_thread(proc.wait)
+
+    headers = {"Content-Disposition": f"attachment; filename*=UTF-8''{quote(archive)}"}
+    return StreamingResponse(stream_archive(), media_type="application/gzip", headers=headers)
 
 
 # ──────────────────────────── 固定桌面分頁路由 ──────────────────────────────
@@ -1292,45 +1288,23 @@ html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Se
 #retry{pointer-events:auto;display:none;border:1px solid #ffffff33;background:#2d2d2d;color:#ddd;
        border-radius:4px;padding:4px 9px;cursor:pointer;font-size:12px}
 #retry:hover{background:#3c3c3c;color:#fff}
-#clip{pointer-events:auto;border:1px solid #ffffff33;background:#2d2d2d;color:#ddd;
-      border-radius:4px;padding:4px 9px;cursor:pointer;font-size:12px;white-space:nowrap}
-#clip:hover{background:#3c3c3c;color:#fff}
-#clip.off{opacity:.55}
 </style>
 </head>
 <body>
 <div id="screen" tabindex="0"></div>
-<div id="bar"><span id="dot"></span><span id="msg">正在連線到共用桌面…</span><button id="retry" type="button">重新連線</button><button id="clip" type="button" title="與瀏覽器所在系統的剪貼簿雙向同步（頁面需保持在前景）">剪貼簿同步</button></div>
+<div id="bar"><span id="dot"></span><span id="msg">正在連線到共用桌面…</span><button id="retry" type="button">重新連線</button></div>
 <script type="module">
 const screenEl = document.getElementById('screen');
 const dot = document.getElementById('dot');
 const msg = document.getElementById('msg');
 const retry = document.getElementById('retry');
-const clipBtn = document.getElementById('clip');
 let rfb = null, delay = 800, disposed = false, connecting = false;
-let clipSync = localStorage.getItem('webtermClipboardSync') !== 'off';
 let lastRemoteClip = '';
 let pendingRemoteClip = '';
 
-function updateClipBtn() {
-  clipBtn.textContent = clipSync ? '剪貼簿同步：開' : '剪貼簿同步：關';
-  clipBtn.classList.toggle('off', !clipSync);
-  clipBtn.title = clipSync
-    ? '已與本機系統剪貼簿雙向同步；關閉請按一下（頁面需保持在前景）'
-    : '目前不同步；按一下開啟（會把本機剪貼簿帶進桌面）';
-}
-updateClipBtn();
-
 function writeLocalClipboard(text) {
-  if (!clipSync || !text) return Promise.resolve(false);
-  const done = ok => {
-    if (ok) {
-      clipBtn.title = '已同步到本機剪貼簿；關閉同步請按一下';
-    } else {
-      clipBtn.title = '瀏覽器暫不允許寫入剪貼簿；點一下桌面或按 Ctrl+V 再試';
-    }
-    return ok;
-  };
+  if (!text) return Promise.resolve(false);
+  const done = ok => ok;
   if (navigator.clipboard && navigator.clipboard.writeText) {
     return navigator.clipboard.writeText(text).then(() => done(true)).catch(() => {
       pendingRemoteClip = text;
@@ -1354,7 +1328,7 @@ function writeLocalClipboard(text) {
 }
 
 async function flushPendingClipboard() {
-  if (!clipSync || !pendingRemoteClip) return;
+  if (!pendingRemoteClip) return;
   const text = pendingRemoteClip;
   if (await writeLocalClipboard(text) && pendingRemoteClip === text) {
     pendingRemoteClip = '';
@@ -1362,7 +1336,7 @@ async function flushPendingClipboard() {
 }
 
 async function pullLocalClipboard() {
-  if (!rfb || !clipSync || !navigator.clipboard || !navigator.clipboard.readText) return;
+  if (!rfb || !navigator.clipboard || !navigator.clipboard.readText) return;
   try {
     const text = await navigator.clipboard.readText();
     if (text) {
@@ -1435,6 +1409,8 @@ async function connect() {
       connecting = false;
       setState('ok', `已連線（${client._fbWidth || ''}x${client._fbHeight || ''}）`);
       client.focus();
+      pullLocalClipboard();
+      flushPendingClipboard();
     });
     client.addEventListener('disconnect', () => {
       if (rfb !== client) return;
@@ -1454,7 +1430,7 @@ async function connect() {
       if (!text) return;
       lastRemoteClip = text;
       pendingRemoteClip = text;
-      if (clipSync) writeLocalClipboard(text);
+      writeLocalClipboard(text);
     });
   } catch (err) {
     connecting = false;
@@ -1463,20 +1439,8 @@ async function connect() {
   }
 }
 
-clipBtn.onclick = async e => {
-  e.stopPropagation();
-  clipSync = !clipSync;
-  localStorage.setItem('webtermClipboardSync', clipSync ? 'on' : 'off');
-  updateClipBtn();
-  if (clipSync) {
-    if (rfb) rfb.focus();
-    await pullLocalClipboard();
-    await flushPendingClipboard();
-  }
-};
-
 screenEl.addEventListener('keydown', e => {
-  if (!clipSync || !rfb) return;
+  if (!rfb) return;
   const key = (e.key || '').toLowerCase();
   if (key !== 'v' || e.altKey || !(e.ctrlKey || e.metaKey)) return;
   e.preventDefault();
@@ -1485,7 +1449,7 @@ screenEl.addEventListener('keydown', e => {
 }, true);
 
 document.addEventListener('paste', e => {
-  if (!clipSync || !rfb) return;
+  if (!rfb) return;
   const target = e.target;
   if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
   const text = e.clipboardData && e.clipboardData.getData('text/plain');