subprocess

Sleeping

App Files Files Community

OrbitMC commited on Feb 21

Commit

36c1a91

verified ·

1 Parent(s): 78f182d

Update panel.py

Browse files

Files changed (1) hide show

panel.py +628 -501

panel.py CHANGED Viewed

@@ -2,8 +2,8 @@ import os
 import asyncio
 import collections
 import shutil
-from fastapi import FastAPI, WebSocket, Request, Response, Form, UploadFile, File, HTTPException
-from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
@@ -15,488 +15,603 @@ output_history = collections.deque(maxlen=300)
 connected_clients = set()
 BASE_DIR = os.path.abspath("/app")
-HTML_CONTENT = """<!DOCTYPE html>
-<html lang="en">
 <head>
-<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>OrbitMC</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Geist:wght@300;400;500;600&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-<style>
-*{box-sizing:border-box;margin:0;padding:0}
-:root{
-  --bg:#0a0a0a;--s1:#111;--s2:#181818;--s3:#222;
-  --b1:#2a2a2a;--b2:#333;
-  --t1:#f0f0f0;--t2:#999;--t3:#555;
-  --accent:#4ade80;--accent2:#22c55e;
-  --red:#f87171;--blue:#60a5fa;--yellow:#fbbf24;
-  --r:8px;--font:'Geist',sans-serif;--mono:'JetBrains Mono',monospace;
-  --trans:all .15s ease;
-}
-body{background:var(--bg);color:var(--t1);font-family:var(--font);font-size:14px;display:flex;height:100vh;overflow:hidden}
-.sidebar{width:56px;background:var(--s1);border-right:1px solid var(--b1);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;z-index:10;flex-shrink:0}
-.nav-btn{width:40px;height:40px;border:none;background:transparent;color:var(--t3);border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:var(--trans);position:relative}
-.nav-btn:hover{background:var(--s3);color:var(--t2)}
-.nav-btn.active{background:rgba(74,222,128,.12);color:var(--accent)}
-.nav-btn .tooltip{position:absolute;left:52px;background:#1a1a1a;border:1px solid var(--b1);color:var(--t1);padding:4px 10px;border-radius:6px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100}
-.nav-btn:hover .tooltip{opacity:1}
-.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
-.panel{display:none;flex:1;overflow:hidden}
-.panel.active{display:flex;flex-direction:column}
-/* CONSOLE */
-.console-wrap{flex:1;position:relative;overflow:hidden;background:var(--s1)}
-.console-blur{position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,var(--s1) 0%,transparent 100%);z-index:2;pointer-events:none}
-.console-out{position:absolute;inset:0;overflow-y:auto;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.7;scrollbar-width:thin;scrollbar-color:var(--b2) transparent}
-.console-out::-webkit-scrollbar{width:4px}
-.console-out::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
-.log-line{animation:fadeUp .25s ease forwards;opacity:0;word-break:break-all}
-@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
-.log-line.info{color:#94a3b8}.log-line.warn{color:var(--yellow)}.log-line.error{color:var(--red)}.log-line.ok{color:var(--accent)}.log-line.cmd{color:var(--t3)}
-.console-input-bar{padding:12px 16px 20px;background:var(--s1);border-top:1px solid var(--b1);display:flex;gap:8px;align-items:center}
-.console-input-bar .prompt{color:var(--accent);font-family:var(--mono);font-size:13px;flex-shrink:0}
-.console-input-bar input{flex:1;background:var(--s2);border:1px solid var(--b1);color:var(--t1);font-family:var(--mono);font-size:13px;padding:8px 12px;border-radius:var(--r);outline:none;transition:var(--trans)}
-.console-input-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(74,222,128,.1)}
-.send-btn{background:var(--accent);color:#000;border:none;padding:8px 16px;border-radius:var(--r);font-family:var(--font);font-weight:600;font-size:13px;cursor:pointer;transition:var(--trans);flex-shrink:0}
-.send-btn:hover{background:var(--accent2)}
-/* FILE MANAGER */
-.fm-toolbar{padding:12px 16px;background:var(--s1);border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.fm-breadcrumb{flex:1;display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t2);overflow:hidden;min-width:0}
-.fm-breadcrumb span{cursor:pointer;transition:color .15s;white-space:nowrap}
-.fm-breadcrumb span:hover{color:var(--accent)}
-.fm-breadcrumb .sep{color:var(--t3)}
-.tb-btn{height:32px;padding:0 12px;background:var(--s2);border:1px solid var(--b1);color:var(--t2);border-radius:6px;cursor:pointer;font-size:12px;font-family:var(--font);display:flex;align-items:center;gap:6px;transition:var(--trans);white-space:nowrap}
-.tb-btn:hover{background:var(--s3);color:var(--t1)}
-.fm-list{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin;scrollbar-color:var(--b2) transparent}
-.fm-list::-webkit-scrollbar{width:4px}
-.fm-list::-webkit-scrollbar-thumb{background:var(--b2)}
-.fm-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--t3);font-size:13px}
-.fm-item{display:flex;align-items:center;padding:9px 12px;border-radius:6px;cursor:pointer;transition:background .1s;gap:10px;user-select:none}
-.fm-item:hover{background:var(--s2)}
-.fm-item.selected{background:rgba(74,222,128,.08);outline:1px solid rgba(74,222,128,.2)}
-.fm-icon{width:20px;text-align:center;font-size:14px;flex-shrink:0}
-.fi-dir{color:var(--blue)}.fi-cfg{color:var(--yellow)}.fi-jar{color:var(--accent)}.fi-log{color:var(--t3)}.fi-other{color:var(--t2)}
-.fm-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.fm-size{font-size:11px;color:var(--t3);flex-shrink:0}
-.ctx-menu{position:fixed;background:#1a1a1a;border:1px solid var(--b1);border-radius:8px;padding:6px;z-index:1000;min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,.6);animation:ctxIn .12s ease}
-@keyframes ctxIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
-.ctx-item{padding:7px 12px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t2);display:flex;align-items:center;gap:8px;transition:var(--trans)}
-.ctx-item:hover{background:var(--s3);color:var(--t1)}
-.ctx-item.danger{color:var(--red)}.ctx-item.danger:hover{background:rgba(248,113,113,.1)}
-.ctx-sep{height:1px;background:var(--b1);margin:4px 0}
-/* CONFIG */
-.cfg-wrap{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--b2) transparent}
-.cfg-section{background:var(--s1);border:1px solid var(--b1);border-radius:10px;margin-bottom:16px;overflow:hidden}
-.cfg-section-head{padding:12px 16px;border-bottom:1px solid var(--b1);font-size:12px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
-.cfg-row{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.03);gap:12px}
-.cfg-row:last-child{border-bottom:none}
-.cfg-key{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--t2)}
-.cfg-val{flex:1;background:var(--s2);border:1px solid var(--b1);color:var(--t1);font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:6px;outline:none;transition:var(--trans)}
-.cfg-val:focus{border-color:var(--accent)}
-.cfg-save{margin:0 16px 16px;background:var(--accent);color:#000;border:none;padding:9px 20px;border-radius:var(--r);font-weight:600;font-size:13px;cursor:pointer;transition:var(--trans)}
-.cfg-save:hover{background:var(--accent2)}
-.coming-soon{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:12px;color:var(--t3)}
-.coming-soon i{font-size:36px;opacity:.3}
-/* MODALS */
-.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease;backdrop-filter:blur(4px)}
-@keyframes fadeIn{from{opacity:0}to{opacity:1}}
-.modal{background:#161616;border:1px solid var(--b1);border-radius:12px;padding:24px;width:90%;max-width:480px;animation:modalIn .2s ease;box-shadow:0 24px 64px rgba(0,0,0,.6)}
-.modal.wide{max-width:760px}
-@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
-.modal h3{font-size:15px;font-weight:600;margin-bottom:16px;color:var(--t1)}
-.modal input,.modal textarea{width:100%;background:var(--s2);border:1px solid var(--b1);color:var(--t1);font-family:var(--mono);font-size:13px;padding:9px 12px;border-radius:var(--r);outline:none;transition:var(--trans);margin-bottom:12px}
-.modal input:focus,.modal textarea:focus{border-color:var(--accent)}
-.modal textarea{min-height:320px;resize:vertical;line-height:1.6}
-.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
-.btn-ghost{background:transparent;border:1px solid var(--b1);color:var(--t2);padding:7px 16px;border-radius:6px;cursor:pointer;font-family:var(--font);font-size:13px;transition:var(--trans)}
-.btn-ghost:hover{border-color:var(--b2);color:var(--t1)}
-.btn-primary{background:var(--accent);color:#000;border:none;padding:7px 16px;border-radius:6px;font-family:var(--font);font-weight:600;font-size:13px;cursor:pointer;transition:var(--trans)}
-.btn-primary:hover{background:var(--accent2)}
-.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red);padding:7px 16px;border-radius:6px;cursor:pointer;font-family:var(--font);font-size:13px;transition:var(--trans)}
-.btn-danger:hover{background:rgba(248,113,113,.1)}
-.upload-zone{border:2px dashed var(--b2);border-radius:8px;padding:32px;text-align:center;color:var(--t3);cursor:pointer;transition:var(--trans);margin-bottom:12px}
-.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);color:var(--accent);background:rgba(74,222,128,.04)}
-.upload-zone i{font-size:24px;margin-bottom:8px;display:block}
-.upload-zone p{font-size:13px}
-#toast-root{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
-@media(max-width:600px){.sidebar{width:48px}.tb-btn span{display:none}.tb-btn{padding:0 10px}.fm-size{display:none}}
-</style>
 </head>
-<body>
-<nav class="sidebar">
-  <button class="nav-btn active" onclick="switchTab('console',this)"><i class="fa-solid fa-terminal"></i><span class="tooltip">Console</span></button>
-  <button class="nav-btn" onclick="switchTab('files',this)"><i class="fa-solid fa-folder-open"></i><span class="tooltip">Files</span></button>
-  <button class="nav-btn" onclick="switchTab('config',this)"><i class="fa-solid fa-sliders"></i><span class="tooltip">Config</span></button>
-  <button class="nav-btn" onclick="switchTab('plugins',this)" style="margin-top:auto"><i class="fa-solid fa-puzzle-piece"></i><span class="tooltip">Plugins</span></button>
-</nav>
-<div class="main">
-  <!-- CONSOLE -->
-  <div class="panel active" id="tab-console">
-    <div class="console-wrap">
-      <div class="console-blur"></div>
-      <div class="console-out" id="console-out"></div>
     </div>
-    <div class="console-input-bar">
-      <span class="prompt">$</span>
-      <input id="cmd-input" type="text" placeholder="Enter command..." autocomplete="off" spellcheck="false" onkeydown="cmdKey(event)">
-      <button class="send-btn" onclick="sendCmd()"><i class="fa-solid fa-paper-plane"></i></button>
-    </div>
-  </div>
-  <!-- FILES -->
-  <div class="panel" id="tab-files">
-    <div class="fm-toolbar">
-      <div class="fm-breadcrumb" id="breadcrumb"></div>
-      <button class="tb-btn" onclick="showMkdir()"><i class="fa-solid fa-folder-plus"></i><span>New Folder</span></button>
-      <button class="tb-btn" onclick="showUpload()"><i class="fa-solid fa-upload"></i><span>Upload</span></button>
-    </div>
-    <div class="fm-list" id="fm-list"></div>
-  </div>
-  <!-- CONFIG -->
-  <div class="panel" id="tab-config">
-    <div class="cfg-wrap" id="cfg-wrap">
-      <div class="fm-empty" style="height:80px"><i class="fa-solid fa-spinner fa-spin"></i>&nbsp;Loading...</div>
-    </div>
-  </div>
-  <!-- PLUGINS -->
-  <div class="panel" id="tab-plugins">
-    <div class="coming-soon">
-      <i class="fa-solid fa-puzzle-piece"></i>
-      <p style="font-size:15px;font-weight:600;color:var(--t2)">Plugins</p>
-      <p style="font-size:13px">Coming soon</p>
     </div>
-  </div>
-</div>
-<!-- MODAL -->
-<div id="overlay" class="overlay" style="display:none" onclick="closeModal(event)">
-  <div class="modal" id="modal" onclick="event.stopPropagation()">
-    <h3 id="modal-title"></h3>
-    <div id="modal-body"></div>
-    <div class="modal-actions" id="modal-actions"></div>
-  </div>
-</div>
-<div id="toast-root"></div>
-<script>
-// ── WebSocket ──────────────────────────────────────────────
-const wsProto = location.protocol==='https:'?'wss':'ws';
-let ws, cmdHistory=[], histIdx=-1;
-function connectWS(){
-  ws = new WebSocket(`${wsProto}://${location.host}/ws`);
-  ws.onmessage = e => addLog(e.data);
-  ws.onclose   = () => setTimeout(connectWS, 2000);
-}
-connectWS();
-// ── Console ────────────────────────────────────────────────
-function classify(l){
-  if(/\[WARN|WARN\]/i.test(l)) return 'warn';
-  if(/\[ERROR|ERROR\]/i.test(l)||/exception/i.test(l)) return 'error';
-  if(/Done|started|enabled|loaded/i.test(l)) return 'ok';
-  return 'info';
-}
-function addLog(txt){
-  const out = document.getElementById('console-out');
-  const atBottom = out.scrollHeight - out.clientHeight - out.scrollTop < 40;
-  const d = document.createElement('div');
-  d.className = `log-line ${classify(txt)}`;
-  d.textContent = txt;
-  out.appendChild(d);
-  if(out.children.length > 400) out.removeChild(out.firstChild);
-  if(atBottom) out.scrollTop = out.scrollHeight;
-}
-function sendCmd(){
-  const i = document.getElementById('cmd-input');
-  const v = i.value.trim();
-  if(!v || !ws || ws.readyState !== WebSocket.OPEN) return;
-  ws.send(v);
-  addLog('> ' + v);
-  cmdHistory.unshift(v); histIdx = -1; i.value = '';
-}
-function cmdKey(e){
-  if(e.key==='Enter') sendCmd();
-  else if(e.key==='ArrowUp'){ histIdx=Math.min(histIdx+1,cmdHistory.length-1); document.getElementById('cmd-input').value=cmdHistory[histIdx]||''; }
-  else if(e.key==='ArrowDown'){ histIdx=Math.max(histIdx-1,-1); document.getElementById('cmd-input').value=histIdx>=0?cmdHistory[histIdx]:''; }
-}
-// ── Tabs ───────────────────────────────────────────────────
-function switchTab(id, btn){
-  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
-  document.querySelectorAll('.nav-btn').forEach(b=>b.classList.remove('active'));
-  document.getElementById('tab-'+id).classList.add('active');
-  btn.classList.add('active');
-  if(id==='files') loadDir(currentPath);
-  if(id==='config') loadConfig();
-}
-// ── File Manager ───────────────────────────────────────────
-let currentPath = '';
-const apiPost = (url, fd) => fetch(url, {method:'POST', body:fd});
-async function loadDir(path=''){
-  currentPath = path;
-  renderBreadcrumb(path);
-  const list = document.getElementById('fm-list');
-  list.innerHTML = '<div class="fm-empty"><i class="fa-solid fa-spinner fa-spin"></i>&nbsp;Loading...</div>';
-  const items = await fetch(`/api/fs/list?path=${encodeURIComponent(path)}`).then(r=>r.json());
-  list.innerHTML = '';
-  if(!items.length){ list.innerHTML='<div class="fm-empty">Empty folder</div>'; return; }
-  items.forEach(item => {
-    const el = document.createElement('div');
-    el.className = 'fm-item';
-    const icon = getIcon(item);
-    el.innerHTML = `<i class="fm-icon ${icon.cls} ${icon.ic}"></i><span class="fm-name">${item.name}</span><span class="fm-size">${item.is_dir ? '—' : fmtSize(item.size)}</span>`;
-    el.addEventListener('click', () => { document.querySelectorAll('.fm-item').forEach(e=>e.classList.remove('selected')); el.classList.add('selected'); });
-    el.addEventListener('dblclick', () => openItem(item));
-    el.addEventListener('contextmenu', e => { e.preventDefault(); el.click(); showCtx(e, item); });
-    list.appendChild(el);
-  });
-}
-function getIcon(item){
-  if(item.is_dir) return {cls:'fi-dir', ic:'fa-solid fa-folder'};
-  const ext = item.name.split('.').pop().toLowerCase();
-  if(['yml','yaml','json','toml','cfg','conf','properties'].includes(ext)) return {cls:'fi-cfg', ic:'fa-solid fa-file-code'};
-  if(ext==='jar') return {cls:'fi-jar', ic:'fa-solid fa-cube'};
-  if(ext==='log') return {cls:'fi-log', ic:'fa-solid fa-file-lines'};
-  return {cls:'fi-other', ic:'fa-solid fa-file'};
-}
-function fmtSize(b){ if(b<1024) return b+'B'; if(b<1048576) return (b/1024).toFixed(1)+'KB'; return (b/1048576).toFixed(1)+'MB'; }
-function renderBreadcrumb(path){
-  const bc = document.getElementById('breadcrumb');
-  const parts = path ? path.split('/').filter(Boolean) : [];
-  let html = `<span onclick="loadDir('')"><i class="fa-solid fa-server" style="color:var(--accent)"></i></span>`;
-  let acc = '';
-  parts.forEach(p => { acc += (acc?'/':'') + p; const cp=acc; html += `<span class="sep">/</span><span onclick="loadDir('${cp}')">${p}</span>`; });
-  bc.innerHTML = html;
-}
-function fullPath(name){ return (currentPath ? currentPath+'/' : '') + name; }
-function openItem(item){
-  const fp = fullPath(item.name);
-  if(item.is_dir){ loadDir(fp); return; }
-  const ext = item.name.split('.').pop().toLowerCase();
-  const editable = ['yml','yaml','json','toml','cfg','conf','txt','md','properties','log','sh','py','js'].includes(ext);
-  if(editable) openEditor(fp, item.name);
-  else window.location = '/api/fs/download?path=' + encodeURIComponent(fp);
-}
-async function openEditor(fp, name){
-  const res = await fetch(`/api/fs/read?path=${encodeURIComponent(fp)}`);
-  if(!res.ok){ toast('Cannot read binary file'); return; }
-  const text = await res.text();
-  openModal('Edit — ' + name, 'wide');
-  M.body.innerHTML = `<textarea id="editor-ta" spellcheck="false">${escHtml(text)}</textarea>`;
-  M.actions.innerHTML = `<button class="btn-ghost" onclick="closeModal()">Cancel</button><button class="btn-primary" onclick="saveFile('${fp}')">Save</button>`;
-}
-async function saveFile(fp){
-  const content = document.getElementById('editor-ta').value;
-  const fd = new FormData(); fd.append('path', fp); fd.append('content', content);
-  await apiPost('/api/fs/write', fd);
-  toast('Saved'); closeModal();
-}
-function showCtx(e, item){
-  document.querySelectorAll('.ctx-menu').forEach(c=>c.remove());
-  const fp = fullPath(item.name);
-  const m = document.createElement('div'); m.className = 'ctx-menu';
-  const rows = [
-    {icon:'fa-solid fa-pen', label:'Rename', fn:()=>showRename(fp, item.name)},
-    ...(!item.is_dir ? [
-      {icon:'fa-solid fa-edit', label:'Edit', fn:()=>openEditor(fp, item.name)},
-      {icon:'fa-solid fa-download', label:'Download', fn:()=>{ window.location='/api/fs/download?path='+encodeURIComponent(fp); }}
-    ] : []),
-    {sep:true},
-    {icon:'fa-solid fa-trash', label:'Delete', fn:()=>showDelete(fp, item.name), danger:true},
-  ];
-  rows.forEach(it => {
-    if(it.sep){ const s=document.createElement('div'); s.className='ctx-sep'; m.appendChild(s); return; }
-    const d = document.createElement('div'); d.className = 'ctx-item' + (it.danger?' danger':'');
-    d.innerHTML = `<i class="${it.icon}"></i>${it.label}`;
-    d.onclick = () => { m.remove(); it.fn(); };
-    m.appendChild(d);
-  });
-  m.style.top  = Math.min(e.clientY, window.innerHeight-160) + 'px';
-  m.style.left = Math.min(e.clientX, window.innerWidth-180) + 'px';
-  document.body.appendChild(m);
-  setTimeout(()=>document.addEventListener('click', ()=>m.remove(), {once:true}), 10);
-}
-function showRename(fp, name){
-  openModal('Rename');
-  M.body.innerHTML = `<input id="rename-in" value="${name}" autocomplete="off">`;
-  M.actions.innerHTML = `<button class="btn-ghost" onclick="closeModal()">Cancel</button><button class="btn-primary" onclick="doRename('${fp}')">Rename</button>`;
-  setTimeout(()=>{ const i=document.getElementById('rename-in'); i.focus(); i.select(); }, 50);
-}
-async function doRename(fp){
-  const nv = document.getElementById('rename-in').value.trim(); if(!nv) return;
-  const fd = new FormData(); fd.append('path', fp); fd.append('new_name', nv);
-  await apiPost('/api/fs/rename', fd); closeModal(); loadDir(currentPath);
-}
-function showDelete(fp, name){
-  openModal('Delete');
-  M.body.innerHTML = `<p style="color:var(--t2);font-size:13px;margin-bottom:16px">Delete <strong style="color:var(--t1)">${name}</strong>? This cannot be undone.</p>`;
-  M.actions.innerHTML = `<button class="btn-ghost" onclick="closeModal()">Cancel</button><button class="btn-danger" onclick="doDelete('${fp}')">Delete</button>`;
-}
-async function doDelete(fp){
-  const fd = new FormData(); fd.append('path', fp);
-  await apiPost('/api/fs/delete', fd); closeModal(); loadDir(currentPath);
-}
-function showMkdir(){
-  openModal('New Folder');
-  M.body.innerHTML = `<input id="mkdir-in" placeholder="Folder name" autocomplete="off">`;
-  M.actions.innerHTML = `<button class="btn-ghost" onclick="closeModal()">Cancel</button><button class="btn-primary" onclick="doMkdir()">Create</button>`;
-  setTimeout(()=>document.getElementById('mkdir-in').focus(), 50);
-}
-async function doMkdir(){
-  const n = document.getElementById('mkdir-in').value.trim(); if(!n) return;
-  const fd = new FormData(); fd.append('path', (currentPath?currentPath+'/':'') + n);
-  await apiPost('/api/fs/mkdir', fd); closeModal(); loadDir(currentPath);
-}
-function showUpload(){
-  openModal('Upload Files');
-  M.body.innerHTML = `<div class="upload-zone" id="drop-zone" onclick="document.getElementById('file-in').click()">
-    <i class="fa-solid fa-cloud-arrow-up"></i><p>Click or drag &amp; drop files here</p></div>
-    <input type="file" id="file-in" multiple style="display:none" onchange="handleUpload(this.files)">
-    <div id="upload-prog"></div>`;
-  M.actions.innerHTML = `<button class="btn-ghost" onclick="closeModal()">Close</button>`;
-  const dz = document.getElementById('drop-zone');
-  dz.ondragover = e => { e.preventDefault(); dz.classList.add('drag'); };
-  dz.ondragleave = () => dz.classList.remove('drag');
-  dz.ondrop = e => { e.preventDefault(); dz.classList.remove('drag'); handleUpload(e.dataTransfer.files); };
-}
-async function handleUpload(files){
-  const prog = document.getElementById('upload-prog');
-  for(const file of files){
-    prog.innerHTML = `<p style="font-size:12px;color:var(--t2);margin-bottom:4px">Uploading ${file.name}…</p>`;
-    const fd = new FormData(); fd.append('path', currentPath); fd.append('file', file);
-    await apiPost('/api/fs/upload', fd);
-  }
-  prog.innerHTML = `<p style="font-size:12px;color:var(--accent)">Done!</p>`;
-  loadDir(currentPath);
-}
-// ── Config ─────────────────────────────────────────────────
-async function loadConfig(){
-  const wrap = document.getElementById('cfg-wrap');
-  wrap.innerHTML = '<div class="fm-empty"><i class="fa-solid fa-spinner fa-spin"></i>&nbsp;Loading...</div>';
-  const res = await fetch('/api/fs/read?path=server.properties');
-  if(!res.ok){
-    wrap.innerHTML = '<div class="fm-empty" style="flex-direction:column;gap:8px"><i class="fa-solid fa-circle-exclamation" style="color:var(--t3)"></i><p style="font-size:13px;color:var(--t3)">server.properties not found</p></div>';
-    return;
-  }
-  const text = await res.text();
-  const gmap = {motd:'General','max-players':'General','online-mode':'Network','server-ip':'Network','server-port':'Network','enable-rcon':'Network','rcon.port':'Network','rcon.password':'Network','level-name':'World','level-seed':'World','gamemode':'Game','difficulty':'Game','hardcore':'Game','pvp':'Game','spawn-monsters':'Game','spawn-animals':'Game','spawn-npcs':'Game','view-distance':'Performance','simulation-distance':'Performance','max-tick-time':'Performance','network-compression-threshold':'Performance'};
-  const grouped = {General:[],World:[],Network:[],Game:[],Performance:[],Other:[]};
-  text.split('\n').filter(l=>l&&!l.startsWith('#')).forEach(l=>{
-    const eq = l.indexOf('='); if(eq<0) return;
-    const k = l.slice(0,eq).trim(), v = l.slice(eq+1).trim();
-    grouped[gmap[k]||'Other'].push({k,v});
-  });
-  wrap.innerHTML = '';
-  Object.entries(grouped).forEach(([g, rows])=>{
-    if(!rows.length) return;
-    const sec = document.createElement('div'); sec.className = 'cfg-section';
-    sec.innerHTML = `<div class="cfg-section-head">${g}</div>`;
-    rows.forEach(({k,v})=>{
-      const r = document.createElement('div'); r.className = 'cfg-row';
-      r.innerHTML = `<span class="cfg-key">${k}</span><input class="cfg-val" data-key="${k}" value="${escHtml(v)}">`;
-      sec.appendChild(r);
-    });
-    wrap.appendChild(sec);
-  });
-  const btn = document.createElement('button'); btn.className = 'cfg-save'; btn.textContent = 'Save Changes';
-  btn.onclick = saveConfig; wrap.appendChild(btn);
-}
-async function saveConfig(){
-  const res = await fetch('/api/fs/read?path=server.properties');
-  let text = await res.text();
-  document.querySelectorAll('.cfg-val').forEach(inp=>{
-    text = text.replace(new RegExp(`^(${inp.dataset.key}\\s*=).*$`, 'm'), `$1${inp.value}`);
-  });
-  const fd = new FormData(); fd.append('path','server.properties'); fd.append('content',text);
-  await apiPost('/api/fs/write', fd);
-  toast('server.properties saved');
-}
-// ── Modal ──────────────────────────────────────────────────
-const M = {body:null, actions:null};
-function openModal(title, cls=''){
-  const mo = document.getElementById('modal');
-  mo.className = 'modal' + (cls?' '+cls:'');
-  document.getElementById('modal-title').textContent = title;
-  M.body = document.getElementById('modal-body'); M.body.innerHTML = '';
-  M.actions = document.getElementById('modal-actions'); M.actions.innerHTML = '';
-  document.getElementById('overlay').style.display = 'flex';
-}
-function closeModal(e){
-  if(e && e.target !== document.getElementById('overlay')) return;
-  document.getElementById('overlay').style.display = 'none';
-}
-document.addEventListener('keydown', e => { if(e.key==='Escape') document.getElementById('overlay').style.display='none'; });
-// ── Toast ──────────────────────────────────────────────────
-function toast(msg){
-  const t = document.createElement('div');
-  t.style.cssText = 'background:#1a1a1a;border:1px solid var(--b1);color:var(--t1);padding:8px 18px;border-radius:8px;font-size:13px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:fadeIn .2s ease;pointer-events:none';
-  t.textContent = msg;
-  document.getElementById('toast-root').appendChild(t);
-  setTimeout(()=>t.remove(), 2400);
-}
-function escHtml(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
-// Init
-loadDir('');
-</script>
-</body>
-</html>"""
-# ── Utilities ──────────────────────────────────────────────
 def get_safe_path(subpath: str):
     subpath = (subpath or "").strip("/")
     target = os.path.abspath(os.path.join(BASE_DIR, subpath))
     if not target.startswith(BASE_DIR):
-        raise HTTPException(status_code=403, detail="Access denied")
     return target
 async def broadcast(message: str):
     output_history.append(message)
-    dead = set()
     for client in connected_clients:
         try:
             await client.send_text(message)
-        except Exception:
-            dead.add(client)
-    connected_clients.difference_update(dead)
-# ── Minecraft Process ──────────────────────────────────────
-async def read_stream(stream):
     while True:
         try:
             line = await stream.readline()
-            if not line:
-                break
-            await broadcast(line.decode('utf-8', errors='replace').rstrip('\r\n'))
         except Exception:
             break
 async def start_minecraft():
     global mc_process
     java_args = [
@@ -521,20 +636,20 @@ async def start_minecraft():
     )
     asyncio.create_task(read_stream(mc_process.stdout))
 @app.on_event("startup")
 async def startup_event():
     asyncio.create_task(start_minecraft())
-# ── Routes ─────────────────────────────────────────────────
 @app.get("/")
 def get_panel():
     return HTMLResponse(content=HTML_CONTENT)
 @app.websocket("/ws")
-async def ws_endpoint(websocket: WebSocket):
     await websocket.accept()
     connected_clients.add(websocket)
     for line in output_history:
@@ -545,86 +660,98 @@ async def ws_endpoint(websocket: WebSocket):
             if mc_process and mc_process.stdin:
                 mc_process.stdin.write((cmd + "\n").encode('utf-8'))
                 await mc_process.stdin.drain()
-    except Exception:
-        connected_clients.discard(websocket)
 @app.get("/api/fs/list")
 def fs_list(path: str = ""):
     target = get_safe_path(path)
-    if not os.path.exists(target):
-        return []
     items = []
     for f in os.listdir(target):
         fp = os.path.join(target, f)
         items.append({"name": f, "is_dir": os.path.isdir(fp), "size": os.path.getsize(fp) if not os.path.isdir(fp) else 0})
     return sorted(items, key=lambda x: (not x["is_dir"], x["name"].lower()))
 @app.get("/api/fs/read")
 def fs_read(path: str):
     target = get_safe_path(path)
-    if not os.path.isfile(target):
-        raise HTTPException(400, "Not a file")
     try:
         with open(target, 'r', encoding='utf-8') as f:
             return Response(content=f.read(), media_type="text/plain")
     except UnicodeDecodeError:
         raise HTTPException(400, "File is binary or unsupported encoding")
 @app.get("/api/fs/download")
 def fs_download(path: str):
     target = get_safe_path(path)
-    if not os.path.isfile(target):
-        raise HTTPException(400, "Not a file")
     return FileResponse(target, filename=os.path.basename(target))
 @app.post("/api/fs/write")
 def fs_write(path: str = Form(...), content: str = Form(...)):
-    with open(get_safe_path(path), 'w', encoding='utf-8') as f:
         f.write(content)
     return {"status": "ok"}
 @app.post("/api/fs/upload")
 async def fs_upload(path: str = Form(""), file: UploadFile = File(...)):
     target_dir = get_safe_path(path)
-    with open(os.path.join(target_dir, file.filename), "wb") as buffer:
         shutil.copyfileobj(file.file, buffer)
     return {"status": "ok"}
 @app.post("/api/fs/delete")
 def fs_delete(path: str = Form(...)):
-    t = get_safe_path(path)
-    if os.path.isdir(t):
-        shutil.rmtree(t)
-    else:
-        os.remove(t)
     return {"status": "ok"}
-@app.post("/api/fs/mkdir")
-def fs_mkdir(path: str = Form(...)):
-    os.makedirs(get_safe_path(path), exist_ok=True)
-    return {"status": "ok"}
 @app.post("/api/fs/rename")
-def fs_rename(path: str = Form(...), new_name: str = Form(...)):
-    src = get_safe_path(path)
-    dst = os.path.join(os.path.dirname(src), new_name)
-    os.rename(src, dst)
-    return {"status": "ok"}
 @app.post("/api/fs/move")
-def fs_move(src_path: str = Form(...), dst_path: str = Form(...)):
-    shutil.move(get_safe_path(src_path), get_safe_path(dst_path))
-    return {"status": "ok"}
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=7860, log_level="warning")

 import asyncio
 import collections
 import shutil
+from fastapi import FastAPI, WebSocket, Form, UploadFile, File, HTTPException
+from fastapi.responses import HTMLResponse, Response, FileResponse
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
 connected_clients = set()
 BASE_DIR = os.path.abspath("/app")
+# -----------------
+# HTML FRONTEND (Ultra-Modern Black & Green UI)
+# -----------------
+HTML_CONTENT = """
+<!DOCTYPE html>
+<html lang="en" class="dark">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Server Engine</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #000000; --panel: #0a0a0a; --panel-hover: #111111;
+            --border: #1a1a1a; --text: #a1a1aa; --text-light: #e4e4e7;
+            --accent: #22c55e; --accent-hover: #16a34a; --accent-glow: rgba(34, 197, 94, 0.15);
+        }
+        body { background-color: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
+        .font-mono { font-family: 'JetBrains Mono', monospace; }
+        /* Custom Scrollbars */
+        ::-webkit-scrollbar { width: 4px; height: 4px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+        /* Sidebar & Layout */
+        .sidebar { width: 45px; transition: all 0.3s ease; }
+        .nav-btn { color: #52525b; transition: all 0.2s; position: relative; }
+        .nav-btn:hover, .nav-btn.active { color: var(--accent); }
+        .nav-btn.active::before { content: ''; position: absolute; left: -12px; top: 10%; height: 80%; width: 2px; background: var(--accent); border-radius: 4px; box-shadow: 0 0 8px var(--accent); }
+        /* Terminal Mask & Animations */
+        .term-mask { mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%); }
+        @keyframes fadeUpLine { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+        .log-line { animation: fadeUpLine 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; word-break: break-all; padding: 1px 0; }
+        /* File Row */
+        .file-row { border-bottom: 1px solid var(--border); transition: background 0.15s; }
+        .file-row:hover { background: var(--panel-hover); }
+        .file-row:last-child { border-bottom: none; }
+        /* Modals & Inputs */
+        input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }
+        .modal-enter { animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+        @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        /* Loader */
+        .loader { animation: spin 1s linear infinite; }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+        .hidden-tab { display: none !important; }
+    </style>
 </head>
+<body class="flex h-screen w-full select-none">
+    <!-- Super Slim Sidebar (45px) -->
+    <aside class="sidebar bg-[#050505] border-r border-[#1a1a1a] flex flex-col items-center py-6 gap-8 z-40 shrink-0">
+        <div class="text-green-500 shadow-[0_0_15px_rgba(34,197,94,0.3)] rounded-full"><i data-lucide="server" class="w-5 h-5"></i></div>
+        <nav class="flex flex-col gap-6 w-full items-center mt-4">
+            <button onclick="switchTab('console')" id="nav-console" class="nav-btn active" title="Console"><i data-lucide="terminal-square" class="w-5 h-5"></i></button>
+            <button onclick="switchTab('files')" id="nav-files" class="nav-btn" title="File Manager"><i data-lucide="folder-tree" class="w-5 h-5"></i></button>
+            <button onclick="switchTab('config')" id="nav-config" class="nav-btn" title="Server Config"><i data-lucide="settings-2" class="w-5 h-5"></i></button>
+            <button onclick="switchTab('plugins')" id="nav-plugins" class="nav-btn" title="Plugins"><i data-lucide="puzzle" class="w-5 h-5"></i></button>
+        </nav>
+    </aside>
+    <!-- Main Workspace -->
+    <main class="flex-1 relative bg-black flex flex-col overflow-hidden">
+        <!-- ================= CONSOLE TAB ================= -->
+        <div id="tab-console" class="absolute inset-0 flex flex-col p-3 sm:p-5">
+            <div class="flex-1 bg-panel border border-[#1a1a1a] rounded-xl flex flex-col overflow-hidden relative shadow-2xl">
+                <!-- Top Status Bar -->
+                <div class="h-10 border-b border-[#1a1a1a] bg-[#050505] flex items-center px-4 justify-between">
+                    <div class="flex items-center gap-2">
+                        <div class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.8)]"></div>
+                        <span class="text-xs font-mono text-zinc-400">engine-live-stream</span>
+                    </div>
+                </div>
+                <!-- Terminal Output -->
+                <div id="terminal-output" class="flex-1 p-4 overflow-y-auto font-mono text-[13px] text-zinc-300 term-mask select-text">
+                    <!-- Logs injected here -->
+                </div>
+                <!-- Terminal Input -->
+                <div class="h-14 border-t border-[#1a1a1a] bg-[#050505] flex items-center px-4 gap-3">
+                    <i data-lucide="chevron-right" class="w-4 h-4 text-green-500"></i>
+                    <input type="text" id="cmd-input" class="flex-1 bg-transparent border-none text-green-400 font-mono text-sm placeholder-zinc-700" placeholder="Execute command...">
+                </div>
+            </div>
+        </div>
+        <!-- ================= FILES TAB ================= -->
+        <div id="tab-files" class="hidden-tab absolute inset-0 flex flex-col p-3 sm:p-5">
+            <div class="flex-1 bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl flex flex-col overflow-hidden shadow-2xl">
+                <!-- File Header -->
+                <div class="bg-[#050505] border-b border-[#1a1a1a] px-4 py-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+                    <div class="flex items-center gap-2 text-sm font-mono text-zinc-400 w-full sm:w-auto overflow-x-auto hide-scrollbar" id="breadcrumbs"></div>
+                    <div class="flex items-center gap-2 shrink-0">
+                        <input type="file" id="file-upload" class="hidden" onchange="uploadFile(event)">
+                        <button onclick="showCreateModal('file')" class="p-1.5 hover:bg-[#1a1a1a] hover:text-green-400 rounded transition-colors text-zinc-400" title="New File"><i data-lucide="file-plus" class="w-4 h-4"></i></button>
+                        <button onclick="showCreateModal('folder')" class="p-1.5 hover:bg-[#1a1a1a] hover:text-green-400 rounded transition-colors text-zinc-400" title="New Folder"><i data-lucide="folder-plus" class="w-4 h-4"></i></button>
+                        <button onclick="document.getElementById('file-upload').click()" class="p-1.5 hover:bg-[#1a1a1a] hover:text-green-400 rounded transition-colors text-zinc-400" title="Upload"><i data-lucide="upload" class="w-4 h-4"></i></button>
+                        <div class="w-px h-4 bg-[#222] mx-1"></div>
+                        <button onclick="loadFiles(currentPath)" class="p-1.5 hover:bg-[#1a1a1a] text-zinc-400 rounded transition-colors"><i data-lucide="rotate-cw" class="w-4 h-4"></i></button>
+                    </div>
+                </div>
+                <!-- File List Header -->
+                <div class="hidden sm:grid grid-cols-12 gap-4 px-4 py-2 border-b border-[#1a1a1a] bg-[#080808] text-[11px] font-semibold text-zinc-600 uppercase tracking-widest">
+                    <div class="col-span-8">Filename</div>
+                    <div class="col-span-3 text-right">Size</div>
+                    <div class="col-span-1 text-right"></div>
+                </div>
+                <!-- File List -->
+                <div class="flex-1 overflow-y-auto pb-10" id="file-list"></div>
+            </div>
+        </div>
+        <!-- ================= CONFIG TAB ================= -->
+        <div id="tab-config" class="hidden-tab absolute inset-0 flex flex-col p-3 sm:p-5">
+            <div class="flex-1 bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl flex flex-col overflow-hidden shadow-2xl relative">
+                <div class="h-12 border-b border-[#1a1a1a] bg-[#050505] flex items-center px-4 justify-between">
+                    <div class="flex items-center gap-2 text-sm font-mono text-zinc-300">
+                        <i data-lucide="sliders" class="w-4 h-4 text-green-500"></i> server.properties
+                    </div>
+                    <button onclick="saveConfig()" class="bg-green-600 hover:bg-green-500 text-black px-4 py-1.5 rounded text-xs font-bold transition-colors flex items-center gap-2">
+                        <i data-lucide="save" class="w-3.5 h-3.5"></i> Apply Details
+                    </button>
+                </div>
+                <textarea id="config-editor" class="flex-1 bg-transparent p-4 text-zinc-300 font-mono text-[13px] resize-none focus:outline-none leading-relaxed select-text w-full h-full" spellcheck="false"></textarea>
+            </div>
+        </div>
+        <!-- ================= PLUGINS TAB ================= -->
+        <div id="tab-plugins" class="hidden-tab absolute inset-0 flex items-center justify-center">
+            <div class="text-center flex flex-col items-center gap-4 opacity-50">
+                <div class="w-16 h-16 rounded-2xl border border-green-500/30 flex items-center justify-center bg-green-500/5 shadow-[0_0_30px_rgba(34,197,94,0.1)]">
+                    <i data-lucide="blocks" class="w-8 h-8 text-green-500"></i>
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-white tracking-tight">Plugin Manager</h2>
+                    <p class="text-sm text-zinc-500 mt-1 font-mono">system.status = "COMING_SOON"</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- ================= CONTEXT MENU (•••) ================= -->
+    <div id="context-menu" class="hidden absolute z-50 bg-[#0a0a0a] border border-[#222] rounded-md shadow-2xl py-1 w-36 overflow-hidden">
+        <!-- Injected via JS -->
     </div>
+    <!-- ================= CUSTOM MODALS OVERLAY ================= -->
+    <div id="modal-overlay" class="hidden fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 opacity-0 transition-opacity duration-200">
+        <!-- Input Modal (Create/Rename/Move) -->
+        <div id="input-modal" class="hidden bg-[#0a0a0a] border border-[#222] rounded-xl w-full max-w-sm shadow-2xl flex-col overflow-hidden modal-enter">
+            <div class="p-5 border-b border-[#1a1a1a]">
+                <h3 id="input-modal-title" class="text-white font-medium text-sm">Action</h3>
+                <p id="input-modal-desc" class="text-xs text-zinc-500 mt-1"></p>
+            </div>
+            <div class="p-5">
+                <input type="text" id="input-modal-field" class="w-full bg-[#050505] border border-[#222] text-white text-sm rounded-lg px-3 py-2.5 focus:border-green-500 transition-colors font-mono" autocomplete="off">
+            </div>
+            <div class="px-5 py-3 bg-[#050505] border-t border-[#1a1a1a] flex justify-end gap-2">
+                <button onclick="closeModal()" class="px-4 py-1.5 text-xs text-zinc-400 hover:text-white transition-colors">Cancel</button>
+                <button id="input-modal-submit" class="px-4 py-1.5 bg-green-600 hover:bg-green-500 text-black text-xs font-bold rounded transition-colors">Confirm</button>
+            </div>
+        </div>
+        <!-- Confirm Modal (Delete) -->
+        <div id="confirm-modal" class="hidden bg-[#0a0a0a] border border-[#222] rounded-xl w-full max-w-sm shadow-2xl flex-col overflow-hidden modal-enter">
+            <div class="p-5 border-b border-[#1a1a1a] flex gap-3">
+                <i data-lucide="alert-triangle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
+                <div>
+                    <h3 id="confirm-modal-title" class="text-white font-medium text-sm">Delete File</h3>
+                    <p id="confirm-modal-msg" class="text-xs text-zinc-400 mt-1 leading-relaxed"></p>
+                </div>
+            </div>
+            <div class="px-5 py-3 bg-[#050505] flex justify-end gap-2">
+                <button onclick="closeModal()" class="px-4 py-1.5 text-xs text-zinc-400 hover:text-white transition-colors">Cancel</button>
+                <button id="confirm-modal-submit" class="px-4 py-1.5 bg-red-600 hover:bg-red-500 text-white text-xs font-bold rounded transition-colors">Delete Permanently</button>
+            </div>
+        </div>
+        <!-- Editor Modal -->
+        <div id="editor-modal" class="hidden bg-[#0a0a0a] border border-[#222] rounded-xl w-full max-w-4xl h-[85vh] shadow-2xl flex-col overflow-hidden modal-enter">
+            <div class="px-4 py-3 border-b border-[#1a1a1a] bg-[#050505] flex justify-between items-center">
+                <span id="editor-modal-title" class="text-sm font-mono text-green-400">editing...</span>
+                <div class="flex gap-2">
+                    <button onclick="closeModal()" class="px-3 py-1.5 text-xs text-zinc-400 hover:text-white transition-colors">Discard</button>
+                    <button id="editor-modal-submit" class="px-4 py-1.5 bg-green-600 hover:bg-green-500 text-black text-xs font-bold rounded transition-colors flex items-center gap-1.5">
+                        <i data-lucide="save" class="w-3.5 h-3.5"></i> Save File
+                    </button>
+                </div>
+            </div>
+            <textarea id="editor-modal-content" class="flex-1 bg-transparent p-4 text-zinc-300 font-mono text-[13px] resize-none focus:outline-none w-full leading-relaxed select-text" spellcheck="false"></textarea>
+        </div>
     </div>
+    <!-- Toast Notifications -->
+    <div id="toast-container" class="fixed bottom-5 right-5 z-[200] flex flex-col gap-3 pointer-events-none"></div>
+    <script>
+        lucide.createIcons();
+        // ----------------- TOAST SYSTEM -----------------
+        function showToast(msg, type = 'info') {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            let color = type === 'error' ? 'text-red-500 border-red-500/20' : (type === 'success' ? 'text-green-500 border-green-500/20' : 'text-blue-400 border-blue-400/20');
+            toast.className = `flex items-center gap-3 bg-[#0a0a0a] border ${color} px-4 py-3 rounded-lg shadow-2xl translate-y-4 opacity-0 transition-all duration-300 pointer-events-auto`;
+            toast.innerHTML = `<span class="text-xs font-mono text-white">${msg}</span>`;
+            container.appendChild(toast);
+            requestAnimationFrame(() => toast.classList.remove('translate-y-4', 'opacity-0'));
+            setTimeout(() => {
+                toast.classList.add('translate-y-4', 'opacity-0');
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        // ----------------- NAVIGATION -----------------
+        function switchTab(tab) {
+            document.querySelectorAll('.tab-content, [id^="tab-"]').forEach(el => el.classList.add('hidden-tab'));
+            document.querySelectorAll('.nav-btn').forEach(el => el.classList.remove('active'));
+            document.getElementById('tab-' + tab).classList.remove('hidden-tab');
+            document.getElementById('nav-' + tab).classList.add('active');
+            if (tab === 'files' && !currentPathLoaded) { loadFiles(''); currentPathLoaded = true; }
+            if (tab === 'config') { loadConfig(); }
+            if (tab === 'console') { scrollToBottom(); }
+        }
+        // ----------------- MODAL SYSTEM -----------------
+        const overlay = document.getElementById('modal-overlay');
+        let currentModalAction = null;
+        function openModalElement(id) {
+            document.getElementById('input-modal').classList.add('hidden');
+            document.getElementById('confirm-modal').classList.add('hidden');
+            document.getElementById('editor-modal').classList.add('hidden');
+            overlay.classList.remove('hidden');
+            document.getElementById(id).classList.remove('hidden');
+            requestAnimationFrame(() => overlay.classList.remove('opacity-0'));
+        }
+        function closeModal() {
+            overlay.classList.add('opacity-0');
+            setTimeout(() => overlay.classList.add('hidden'), 200);
+            currentModalAction = null;
+        }
+        function showPrompt(title, desc, defaultVal, onConfirm) {
+            document.getElementById('input-modal-title').innerText = title;
+            document.getElementById('input-modal-desc').innerText = desc;
+            const input = document.getElementById('input-modal-field');
+            input.value = defaultVal;
+            openModalElement('input-modal');
+            input.focus();
+            const submitBtn = document.getElementById('input-modal-submit');
+            submitBtn.onclick = () => { onConfirm(input.value); closeModal(); };
+            input.onkeydown = (e) => { if(e.key === 'Enter') submitBtn.click(); };
+        }
+        function showConfirm(title, msg, onConfirm) {
+            document.getElementById('confirm-modal-title').innerText = title;
+            document.getElementById('confirm-modal-msg').innerText = msg;
+            openModalElement('confirm-modal');
+            document.getElementById('confirm-modal-submit').onclick = () => { onConfirm(); closeModal(); };
+        }
+        // ----------------- CUSTOM TERMINAL LOGIC -----------------
+        const termOut = document.getElementById('terminal-output');
+        const cmdInput = document.getElementById('cmd-input');
+        function parseANSI(str) {
+            str = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            let res = '', styles = [];
+            const chunks = str.split(/\\x1b\\[/);
+            res += chunks[0];
+            for (let i = 1; i < chunks.length; i++) {
+                const match = chunks[i].match(/^([0-9;]*)m(.*)/s);
+                if (match) {
+                    const codes = match[1].split(';');
+                    for(let code of codes) {
+                        if(code === '' || code === '0') styles = [];
+                        else if(code === '1') styles.push('font-weight:bold');
+                        else if(code === '31' || code === '91') styles.push('color:#ef4444');
+                        else if(code === '32' || code === '92') styles.push('color:#22c55e');
+                        else if(code === '33' || code === '93') styles.push('color:#eab308');
+                        else if(code === '34' || code === '94') styles.push('color:#3b82f6');
+                        else if(code === '35' || code === '95') styles.push('color:#d946ef');
+                        else if(code === '36' || code === '96') styles.push('color:#06b6d4');
+                        else if(code === '37' || code === '97') styles.push('color:#fafafa');
+                        else if(code === '90') styles.push('color:#71717a');
+                    }
+                    const styleStr = styles.length ? `style="${styles.join(';')}"` : '';
+                    res += styles.length ? `<span ${styleStr}>${match[2]}</span>` : match[2];
+                } else {
+                    res += '\\x1b[' + chunks[i]; // Unhandled escape
+                }
+            }
+            return res || '&nbsp;';
+        }
+        function scrollToBottom() {
+            termOut.scrollTop = termOut.scrollHeight;
+        }
+        function appendLog(text) {
+            const isAtBottom = termOut.scrollHeight - termOut.clientHeight <= termOut.scrollTop + 10;
+            const div = document.createElement('div');
+            div.className = 'log-line';
+            div.innerHTML = parseANSI(text);
+            termOut.appendChild(div);
+            // Keep memory bound
+            if(termOut.childElementCount > 400) termOut.removeChild(termOut.firstChild);
+            if(isAtBottom) scrollToBottom();
+        }
+        const wsUrl = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws';
+        let ws;
+        function connectWS() {
+            ws = new WebSocket(wsUrl);
+            ws.onopen = () => appendLog('\\x1b[32m\\x1b[1m[Panel]\\x1b[0m Stream connected.');
+            ws.onmessage = e => appendLog(e.data);
+            ws.onclose = () => { appendLog('\\x1b[31m\\x1b[1m[Panel]\\x1b[0m Connection lost. Reconnecting...'); setTimeout(connectWS, 3000); };
+        }
+        connectWS();
+        cmdInput.addEventListener('keypress', e => {
+            if (e.key === 'Enter') {
+                const val = cmdInput.value.trim();
+                if(val && ws && ws.readyState === WebSocket.OPEN) {
+                    appendLog(`\\x1b[90m> ${val}\\x1b[0m`);
+                    ws.send(val);
+                    cmdInput.value = '';
+                }
+            }
+        });
+        // ----------------- FILE MANAGER LOGIC -----------------
+        let currentPath = '';
+        let currentPathLoaded = false;
+        let menuTarget = null;
+        document.addEventListener('click', () => {
+            document.getElementById('context-menu').classList.add('hidden');
+        });
+        function openMenu(e, name, isDir) {
+            e.stopPropagation();
+            menuTarget = { name, isDir, path: (currentPath ? currentPath + '/' + name : name) };
+            const menu = document.getElementById('context-menu');
+            let html = '';
+            if(!isDir) html += `<button onclick="editFile('${menuTarget.path}')" class="w-full text-left px-4 py-2 hover:bg-[#1a1a1a] hover:text-green-400 text-xs text-zinc-300 transition-colors flex gap-2 items-center"><i data-lucide="edit-3" class="w-3.5 h-3.5"></i> Edit</button>`;
+            html += `<button onclick="initRename()" class="w-full text-left px-4 py-2 hover:bg-[#1a1a1a] hover:text-green-400 text-xs text-zinc-300 transition-colors flex gap-2 items-center"><i data-lucide="type" class="w-3.5 h-3.5"></i> Rename</button>
+                     <button onclick="initMove()" class="w-full text-left px-4 py-2 hover:bg-[#1a1a1a] hover:text-green-400 text-xs text-zinc-300 transition-colors flex gap-2 items-center"><i data-lucide="move" class="w-3.5 h-3.5"></i> Move</button>`;
+            if(!isDir) html += `<button onclick="window.open('/api/fs/download?path=' + encodeURIComponent('${menuTarget.path}'))" class="w-full text-left px-4 py-2 hover:bg-[#1a1a1a] hover:text-green-400 text-xs text-zinc-300 transition-colors flex gap-2 items-center"><i data-lucide="download" class="w-3.5 h-3.5"></i> Download</button>`;
+            html += `<div class="h-px w-full bg-[#1a1a1a] my-1"></div>
+                     <button onclick="initDelete()" class="w-full text-left px-4 py-2 hover:bg-red-500/10 hover:text-red-400 text-xs text-red-500 transition-colors flex gap-2 items-center"><i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Delete</button>`;
+            menu.innerHTML = html;
+            lucide.createIcons();
+            menu.style.left = Math.min(e.pageX, window.innerWidth - 150) + 'px';
+            menu.style.top = Math.min(e.pageY, window.innerHeight - 200) + 'px';
+            menu.classList.remove('hidden');
+        }
+        async function loadFiles(path) {
+            currentPath = path;
+            renderBreadcrumbs(path);
+            const list = document.getElementById('file-list');
+            list.innerHTML = `<div class="flex justify-center py-10"><i data-lucide="loader-2" class="w-6 h-6 text-green-500 loader"></i></div>`;
+            lucide.createIcons();
+            try {
+                const res = await fetch(`/api/fs/list?path=${encodeURIComponent(path)}`);
+                const files = await res.json();
+                list.innerHTML = '';
+                if (path !== '') {
+                    const parent = path.split('/').slice(0, -1).join('/');
+                    list.innerHTML += `
+                        <div class="file-row flex items-center px-4 py-3 cursor-pointer group" onclick="loadFiles('${parent}')">
+                            <i data-lucide="corner-left-up" class="w-4 h-4 text-zinc-600 group-hover:text-green-400 mr-3 transition-colors"></i>
+                            <span class="text-xs font-mono text-zinc-500 group-hover:text-green-400 transition-colors">..</span>
+                        </div>`;
+                }
+                if(files.length === 0 && path === '') list.innerHTML += `<div class="text-center py-10 text-zinc-600 text-xs font-mono">Directory empty</div>`;
+                files.forEach(f => {
+                    const icon = f.is_dir ? '<i data-lucide="folder" class="w-4 h-4 text-green-500"></i>' : '<i data-lucide="file" class="w-4 h-4 text-zinc-500"></i>';
+                    const sizeStr = f.is_dir ? '--' : (f.size > 1024*1024 ? (f.size/(1024*1024)).toFixed(1) + ' MB' : (f.size / 1024).toFixed(1) + ' KB');
+                    const clickAct = f.is_dir ? `onclick="loadFiles('${currentPath ? currentPath + '/' + f.name : f.name}')"` : '';
+                    list.innerHTML += `
+                        <div class="file-row flex flex-col sm:grid sm:grid-cols-12 items-start sm:items-center px-4 py-2.5 gap-2 group cursor-pointer" ${clickAct}>
+                            <div class="col-span-8 flex items-center gap-3 w-full truncate">
+                                ${icon}
+                                <span class="text-[13px] font-mono text-zinc-300 group-hover:text-white transition-colors truncate">${f.name}</span>
+                            </div>
+                            <div class="col-span-3 text-right text-[11px] text-zinc-600 font-mono hidden sm:block">${sizeStr}</div>
+                            <div class="col-span-1 flex justify-end w-full sm:w-auto mt-1 sm:mt-0">
+                                <button onclick="openMenu(event, '${f.name}', ${f.is_dir})" class="p-1 hover:bg-[#222] rounded text-zinc-500 hover:text-white transition-colors">
+                                    <i data-lucide="more-horizontal" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>`;
+                });
+                lucide.createIcons();
+            } catch { showToast("Error loading files", "error"); }
+        }
+        function renderBreadcrumbs(path) {
+            const parts = path.split('/').filter(p => p);
+            let html = `<button onclick="loadFiles('')" class="hover:text-green-400 transition-colors"><i data-lucide="home" class="w-4 h-4"></i></button>`;
+            let build = '';
+            parts.forEach((p, i) => {
+                build += (build ? '/' : '') + p;
+                html += `<span class="opacity-30 mx-1">/</span>`;
+                if(i === parts.length - 1) html += `<span class="text-green-500">${p}</span>`;
+                else html += `<button onclick="loadFiles('${build}')" class="hover:text-green-400 transition-colors">${p}</button>`;
+            });
+            document.getElementById('breadcrumbs').innerHTML = html;
+            lucide.createIcons();
+        }
+        // --- CRUD ACTIONS ---
+        function showCreateModal(type) {
+            showPrompt(`New ${type === 'folder' ? 'Folder' : 'File'}`, 'Enter name:', '', async (val) => {
+                if(!val) return;
+                const path = currentPath ? `${currentPath}/${val}` : val;
+                const endpoint = type === 'folder' ? '/api/fs/create_dir' : '/api/fs/create_file';
+                const fd = new FormData(); fd.append('path', path);
+                try {
+                    const r = await fetch(endpoint, { method: 'POST', body: fd });
+                    if(r.ok) { showToast('Created successfully', 'success'); loadFiles(currentPath); }
+                    else showToast('Failed to create', 'error');
+                } catch { showToast('Network error', 'error'); }
+            });
+        }
+        function initRename() {
+            const t = menuTarget;
+            showPrompt('Rename', `Enter new name for ${t.name}:`, t.name, async (val) => {
+                if(!val || val === t.name) return;
+                const fd = new FormData(); fd.append('old_path', t.path); fd.append('new_name', val);
+                try {
+                    const r = await fetch('/api/fs/rename', { method: 'POST', body: fd });
+                    if(r.ok) { showToast('Renamed', 'success'); loadFiles(currentPath); }
+                    else showToast('Rename failed', 'error');
+                } catch { showToast('Network error', 'error'); }
+            });
+        }
+        function initMove() {
+            const t = menuTarget;
+            showPrompt('Move', `Enter destination folder path for ${t.name} (relative to root, leave blank for root):`, '', async (val) => {
+                const destFolder = val.trim();
+                const destPath = destFolder ? `${destFolder}/${t.name}` : t.name;
+                if(destPath === t.path) return;
+                const fd = new FormData(); fd.append('source', t.path); fd.append('dest', destPath);
+                try {
+                    const r = await fetch('/api/fs/move', { method: 'POST', body: fd });
+                    if(r.ok) { showToast('Moved', 'success'); loadFiles(currentPath); }
+                    else showToast('Move failed', 'error');
+                } catch { showToast('Network error', 'error'); }
+            });
+        }
+        function initDelete() {
+            const t = menuTarget;
+            showConfirm('Delete Permanently', `Are you sure you want to delete ${t.name}? This action cannot be undone.`, async () => {
+                const fd = new FormData(); fd.append('path', t.path);
+                try {
+                    const r = await fetch('/api/fs/delete', { method: 'POST', body: fd });
+                    if(r.ok) { showToast('Deleted', 'success'); loadFiles(currentPath); }
+                    else showToast('Delete failed', 'error');
+                } catch { showToast('Network error', 'error'); }
+            });
+        }
+        async function uploadFile(e) {
+            const file = e.target.files[0];
+            if(!file) return;
+            showToast(`Uploading ${file.name}...`);
+            const fd = new FormData(); fd.append('path', currentPath); fd.append('file', file);
+            try {
+                const r = await fetch('/api/fs/upload', { method: 'POST', body: fd });
+                if(r.ok) { showToast('Upload complete', 'success'); loadFiles(currentPath); }
+                else showToast('Upload failed', 'error');
+            } catch { showToast('Network error', 'error'); }
+            e.target.value = '';
+        }
+        // --- EDITOR LOGIC ---
+        let currentEditPath = '';
+        async function editFile(path) {
+            try {
+                const r = await fetch(`/api/fs/read?path=${encodeURIComponent(path)}`);
+                if(!r.ok) throw new Error();
+                const text = await r.text();
+                currentEditPath = path;
+                document.getElementById('editor-modal-title').innerText = path;
+                document.getElementById('editor-modal-content').value = text;
+                openModalElement('editor-modal');
+                document.getElementById('editor-modal-submit').onclick = async () => {
+                    const fd = new FormData(); fd.append('path', currentEditPath);
+                    fd.append('content', document.getElementById('editor-modal-content').value);
+                    const res = await fetch('/api/fs/write', { method: 'POST', body: fd });
+                    if(res.ok) { showToast('File saved', 'success'); closeModal(); }
+                    else showToast('Save failed', 'error');
+                };
+            } catch { showToast('Cannot open file (might be binary)', 'error'); }
+        }
+        // --- CONFIG TAB LOGIC ---
+        async function loadConfig() {
+            try {
+                const r = await fetch(`/api/fs/read?path=server.properties`);
+                if(r.ok) {
+                    document.getElementById('config-editor').value = await r.text();
+                } else {
+                    document.getElementById('config-editor').value = "# server.properties not found yet.";
+                }
+            } catch { showToast('Failed to load config', 'error'); }
+        }
+        async function saveConfig() {
+            const fd = new FormData();
+            fd.append('path', 'server.properties');
+            fd.append('content', document.getElementById('config-editor').value);
+            try {
+                const r = await fetch('/api/fs/write', { method: 'POST', body: fd });
+                if(r.ok) showToast('Config applied successfully', 'success');
+                else showToast('Failed to save', 'error');
+            } catch { showToast('Network error', 'error'); }
+        }
+    </script>
+</body>
+</html>
+"""
+# -----------------
+# UTILITIES
+# -----------------
 def get_safe_path(subpath: str):
     subpath = (subpath or "").strip("/")
     target = os.path.abspath(os.path.join(BASE_DIR, subpath))
     if not target.startswith(BASE_DIR):
+        raise HTTPException(status_code=403, detail="Access denied outside /app")
     return target
 async def broadcast(message: str):
     output_history.append(message)
+    dead_clients = set()
     for client in connected_clients:
         try:
             await client.send_text(message)
+        except:
+            dead_clients.add(client)
+    connected_clients.difference_update(dead_clients)
+# -----------------
+# SERVER PROCESSES
+# -----------------
+async def read_stream(stream, prefix=""):
     while True:
         try:
             line = await stream.readline()
+            if not line: break
+            line_str = line.decode('utf-8', errors='replace').rstrip('\r\n')
+            await broadcast(prefix + line_str)
         except Exception:
             break
 async def start_minecraft():
     global mc_process
     java_args = [
     )
     asyncio.create_task(read_stream(mc_process.stdout))
 @app.on_event("startup")
 async def startup_event():
+    os.makedirs(BASE_DIR, exist_ok=True)
     asyncio.create_task(start_minecraft())
+# -----------------
+# API ROUTING
+# -----------------
 @app.get("/")
 def get_panel():
     return HTMLResponse(content=HTML_CONTENT)
 @app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
     await websocket.accept()
     connected_clients.add(websocket)
     for line in output_history:
             if mc_process and mc_process.stdin:
                 mc_process.stdin.write((cmd + "\n").encode('utf-8'))
                 await mc_process.stdin.drain()
+    except:
+        connected_clients.remove(websocket)
 @app.get("/api/fs/list")
 def fs_list(path: str = ""):
     target = get_safe_path(path)
+    if not os.path.exists(target): return []
     items = []
     for f in os.listdir(target):
         fp = os.path.join(target, f)
         items.append({"name": f, "is_dir": os.path.isdir(fp), "size": os.path.getsize(fp) if not os.path.isdir(fp) else 0})
     return sorted(items, key=lambda x: (not x["is_dir"], x["name"].lower()))
 @app.get("/api/fs/read")
 def fs_read(path: str):
     target = get_safe_path(path)
+    if not os.path.isfile(target): raise HTTPException(400, "Not a file")
     try:
         with open(target, 'r', encoding='utf-8') as f:
             return Response(content=f.read(), media_type="text/plain")
     except UnicodeDecodeError:
         raise HTTPException(400, "File is binary or unsupported encoding")
 @app.get("/api/fs/download")
 def fs_download(path: str):
     target = get_safe_path(path)
+    if not os.path.isfile(target): raise HTTPException(400, "Not a file")
     return FileResponse(target, filename=os.path.basename(target))
 @app.post("/api/fs/write")
 def fs_write(path: str = Form(...), content: str = Form(...)):
+    target = get_safe_path(path)
+    with open(target, 'w', encoding='utf-8') as f:
         f.write(content)
     return {"status": "ok"}
 @app.post("/api/fs/upload")
 async def fs_upload(path: str = Form(""), file: UploadFile = File(...)):
     target_dir = get_safe_path(path)
+    os.makedirs(target_dir, exist_ok=True)
+    target_file = os.path.join(target_dir, file.filename)
+    with open(target_file, "wb") as buffer:
         shutil.copyfileobj(file.file, buffer)
     return {"status": "ok"}
 @app.post("/api/fs/delete")
 def fs_delete(path: str = Form(...)):
+    target = get_safe_path(path)
+    if os.path.isdir(target): shutil.rmtree(target)
+    else: os.remove(target)
     return {"status": "ok"}
+@app.post("/api/fs/create_dir")
+def fs_create_dir(path: str = Form(...)):
+    target = get_safe_path(path)
+    try:
+        os.makedirs(target, exist_ok=True)
+        return {"status": "ok"}
+    except Exception as e:
+        raise HTTPException(400, str(e))
+@app.post("/api/fs/create_file")
+def fs_create_file(path: str = Form(...)):
+    target = get_safe_path(path)
+    try:
+        os.makedirs(os.path.dirname(target), exist_ok=True)
+        open(target, 'a').close()
+        return {"status": "ok"}
+    except Exception as e:
+        raise HTTPException(400, str(e))
 @app.post("/api/fs/rename")
+def fs_rename(old_path: str = Form(...), new_name: str = Form(...)):
+    src = get_safe_path(old_path)
+    base_dir = os.path.dirname(src)
+    dst = os.path.join(base_dir, new_name)
+    try:
+        os.rename(src, dst)
+        return {"status": "ok"}
+    except Exception as e:
+        raise HTTPException(400, str(e))
 @app.post("/api/fs/move")
+def fs_move(source: str = Form(...), dest: str = Form(...)):
+    src = get_safe_path(source)
+    dst = get_safe_path(dest)
+    try:
+        os.makedirs(os.path.dirname(dst), exist_ok=True)
+        shutil.move(src, dst)
+        return {"status": "ok"}
+    except Exception as e:
+        raise HTTPException(400, str(e))
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=7860, log_level="warning")