Update file-manager/app.py

file-manager/app.py

@@ -112,46 +112,35 @@ button{{background:#F46821;color:#fff;border:0;padding:8px 14px;border-radius:4p
 @app.route("/term")
 def term_page():
     body = """
-    <div class="bar"><b>Live PTY terminal</b> — persistent bash. Full logs, prompts,
-      and interactive input all work. Try: <code>python3</code> then <code>2+2</code>,
-      or <code>python3 -c "n=input('name? '); print('hi',n)"</code>.</div>
-    <pre id="out"></pre>
-    <input type="text" id="line" style="width:82%" autofocus
-           placeholder="type a command or input, then Enter">
-    <button onclick="send()">Send</button>
-    <button onclick="ctrlc()">Ctrl-C</button>
-    <button onclick="reset()">Restart</button>
+    <div class="bar"><b>Live terminal (xterm.js)</b> — full color, progress bars, prompts.</div>
+    <div id="term" style="height:65vh;background:#000;border-radius:6px"></div>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
     <script>
-      const out = document.getElementById('out');
-      const line = document.getElementById('line');
-      function append(t){ out.textContent += t; out.scrollTop = out.scrollHeight; }
+      const term = new Terminal({convertEol:false, cursorBlink:true, fontFamily:'monospace', fontSize:13});
+      const fit = new FitAddon.FitAddon();
+      term.loadAddon(fit);
+      term.open(document.getElementById('term'));
+      fit.fit();
+      window.addEventListener('resize', () => fit.fit());
 
-      async function send(){
-        const text = line.value;
-        line.value = '';
-        await fetch('/fm/term_in', {method:'POST',
+      // Send every keystroke straight to the PTY (real interactive terminal)
+      term.onData(d => {
+        fetch('/fm/term_in', {method:'POST',
           headers:{'Content-Type':'application/json'},
-          body: JSON.stringify({data: text + "\\n"})});
-      }
-      async function ctrlc(){
-        await fetch('/fm/term_in', {method:'POST',
-          headers:{'Content-Type':'application/json'},
-          body: JSON.stringify({data: "\\u0003"})});   // Ctrl-C
-      }
-      async function reset(){
-        await fetch('/fm/term_reset', {method:'POST'});
-        out.textContent = '';
-      }
-      // Poll for new output every 300ms — reliable through the proxy
+          body: JSON.stringify({data: d})});
+      });
+
+      // Poll for new PTY output and write it raw — xterm.js renders the ANSI codes
       async function poll(){
         try{
           const r = await fetch('/fm/term_out');
-          const d = await r.json();
-          if(d.data) append(d.data);
+          const j = await r.json();
+          if(j.data) term.write(j.data);
         }catch(e){}
-        setTimeout(poll, 300);
+        setTimeout(poll, 200);
       }
-      line.addEventListener('keydown', e => { if(e.key==='Enter'){ e.preventDefault(); send(); }});
       poll();
     </script>"""
     return Response(PAGE.format(body=body))