從 HelloSun/testzerogpu 同步：ESC、Ctrl-C×2、方向鍵，並新增 TAB 鍵（ESC 左側）

app.py

@@ -79,6 +79,10 @@ html,body{height:100%;overflow:hidden;background:#1e1e1e;color:#ccc;font-family:
 .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}
+.key-btn#tab-btn{font-family:monospace;letter-spacing:.5px}
+.key-btn#esc-btn{font-family:monospace;letter-spacing:.5px}
+.key-btn#ctrlc2-btn{font-family:monospace;font-size:12px}
+.key-btn#key-up-btn,.key-btn#key-down-btn,.key-btn#key-left-btn,.key-btn#key-right-btn{min-width:34px;padding:4px 6px;font-size:15px;line-height:1}
 #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}
 #term-box{flex:1;overflow:hidden;padding:2px}
 .tw{width:100%;height:100%;display:none}
@@ -126,6 +130,13 @@ body{display:flex;flex-direction:column}
     <button id="add-btn" title="New Terminal (Ctrl+Shift+T)">+</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>
+    <button id="tab-btn" class="action-btn key-btn" title="送出 Tab（TAB）">TAB</button>
+    <button id="esc-btn" class="action-btn key-btn" title="送出 Escape（ESC）">ESC</button>
+    <button id="ctrlc2-btn" class="action-btn key-btn" title="送出 Ctrl-C 兩次（Ctrl-C×2）">Ctrl-C×2</button>
+    <button id="key-up-btn" class="action-btn key-btn" title="方向鍵：上">↑</button>
+    <button id="key-down-btn" class="action-btn key-btn" title="方向鍵：下">↓</button>
+    <button id="key-left-btn" class="action-btn key-btn" title="方向鍵：左">←</button>
+    <button id="key-right-btn" class="action-btn key-btn" title="方向鍵：右">→</button>
     <div id="app-status" role="status" aria-live="polite" title="應用程式訊息">就緒</div>
 </div>
 <dialog id="file-picker">
@@ -188,6 +199,35 @@ let tabs = [], activeId = null, cnt = 0;
 
 function activeTab() { return tabs.find(t => t.id === activeId); }
 
+// 上方工具列的 TAB、ESC、Ctrl-C×2 與方向鍵：桌面分頁送進 VNC，終端機分頁送 ANSI 序列。
+function sendKeyToActive(name) {
+  const t = activeTab();
+  if (!t) { setAppStatus('請先選擇一個分頁', 'warning'); return; }
+  if (t.type === 'desktop') {
+    let fn = null;
+    try { fn = t.frame && t.frame.contentWindow && t.frame.contentWindow.webtermSendKey; } catch (e) { fn = null; }
+    if (typeof fn !== 'function') { setAppStatus('桌面尚未連線，無法送出按鍵', 'warning'); return; }
+    try {
+      fn(name);
+      const label = name === 'Tab' ? 'TAB' : name === 'Escape' ? 'ESC' : name === 'CtrlC2' ? 'Ctrl-C×2' : '方向鍵';
+      setAppStatus(`已送出 ${label} 到桌面`, 'info');
+    } catch (e) { setAppStatus('送出按鍵失敗', 'error'); }
+    return;
+  }
+  const seqMap = {Tab: '\t', Escape: '\x1b', CtrlC2: '\x03\x03', ArrowUp: '\x1b[A', ArrowDown: '\x1b[B', ArrowRight: '\x1b[C', ArrowLeft: '\x1b[D'};
+  const seq = seqMap[name];
+  if (!seq) return;
+  if (!t.ws || t.ws.readyState !== WebSocket.OPEN) { setAppStatus('終端機尚未連線', 'warning'); return; }
+  t.ws.send(JSON.stringify({type: 'input', data: seq}));
+  if (t.term) t.term.focus();
+}
+
+document.getElementById('tab-btn').onclick = () => sendKeyToActive('Tab');
+document.getElementById('esc-btn').onclick = () => sendKeyToActive('Escape');
+document.getElementById('ctrlc2-btn').onclick = () => sendKeyToActive('CtrlC2');
+[['key-up-btn', 'ArrowUp'], ['key-down-btn', 'ArrowDown'], ['key-left-btn', 'ArrowLeft'], ['key-right-btn', 'ArrowRight']]
+  .forEach(([id, name]) => { document.getElementById(id).onclick = () => sendKeyToActive(name); });
+
 function setAppStatus(message, kind = 'info') {
   const clean = String(message).replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, '').replace(/[\r\n]+/g, ' ').trim();
   appStatus.textContent = clean || '就緒';
@@ -1534,6 +1574,38 @@ document.addEventListener('visibilitychange', () => {
   if (!document.hidden) flushPendingClipboard();
 });
 
+// 供外層工具列（TAB、ESC、Ctrl-C×2、方向鍵）呼叫，把按鍵送進同一個 VNC 連線。
+window.webtermSendKey = name => {
+  if (!rfb) return false;
+  const keys = {
+    Tab: [0xff09, 'Tab'],
+    Escape: [0xff1b, 'Escape'],
+    ArrowUp: [0xff52, 'ArrowUp'],
+    ArrowDown: [0xff54, 'ArrowDown'],
+    ArrowLeft: [0xff51, 'ArrowLeft'],
+    ArrowRight: [0xff53, 'ArrowRight'],
+  };
+  try {
+    rfb.focus();
+    if (name === 'CtrlC2') {
+      const sendCtrlC = () => {
+        rfb.sendKey(0xffe3, 'ControlLeft', true);
+        rfb.sendKey(0x63, 'KeyC', true);
+        rfb.sendKey(0x63, 'KeyC', false);
+        rfb.sendKey(0xffe3, 'ControlLeft', false);
+      };
+      sendCtrlC();
+      setTimeout(sendCtrlC, 90);
+      return true;
+    }
+    const k = keys[name];
+    if (!k) return false;
+    rfb.sendKey(k[0], k[1], true);
+    rfb.sendKey(k[0], k[1], false);
+    return true;
+  } catch (e) { return false; }
+};
+
 retry.onclick = () => { delay = 800; connect(); };
 screenEl.addEventListener('click', () => { if (rfb) rfb.focus(); });
 window.addEventListener('beforeunload', () => {