First Commmit

Dockerfile

@@ -0,0 +1,56 @@
+# Gunakan Node.js 22 berbasis Debian Bullseye
+FROM node:22-bullseye
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies sistem yang dibutuhkan untuk node-pty dan alat dasar
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3 \
+    make \
+    g++ \
+    bash \
+    curl \
+    git \
+    nano \
+    htop \
+    procps \
+    sudo \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy package files untuk caching layer Docker
+COPY package*.json ./
+
+# Install Node.js dependencies, termasuk node-pty
+RUN npm ci --only=production && \
+    npm install node-pty || echo "node-pty installation failed, fallback enabled" && \
+    npm cache clean --force
+
+# Copy seluruh aplikasi
+COPY . .
+
+# Buat folder views
+RUN mkdir -p views
+
+# Set permissions (optional karena root user)
+RUN chmod +x /app/app.js
+
+# Buat file .env default
+RUN echo "PORT=7860" > /app/.env.default && \
+    echo "NODE_ENV=production" >> /app/.env.default && \
+    echo "SESSION_SECRET=default-secret-please-change" >> /app/.env.default
+
+# Expose port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/login || exit 1
+
+# Default shell untuk terminal sessions
+ENV SHELL=/bin/bash
+ENV HOME=/root
+
+# Start aplikasi
+CMD ["node", "app.js"]

app.js

@@ -0,0 +1,614 @@
+import express from "express";
+import session from "express-session";
+import bcrypt from "bcrypt";
+import helmet from "helmet";
+import { createServer } from "http";
+import { Server as IOServer } from "socket.io";
+import path from "path";
+import { fileURLToPath } from "url";
+import dotenv from "dotenv";
+import os from "os";
+import { spawn, exec } from "child_process";
+import { promisify } from "util";
+import fs from "fs/promises";
+
+dotenv.config();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const execAsync = promisify(exec);
+
+const app = express();
+const httpServer = createServer(app);
+const io = new IOServer(httpServer, {
+  cors: {
+    origin: process.env.NODE_ENV === "production" ? false : ["http://localhost:3000"],
+    methods: ["GET", "POST"]
+  }
+});
+
+const PORT = process.env.PORT || 3000;
+const SESSION_SECRET = process.env.SESSION_SECRET || "devsecret";
+const PASSWORD_HASH = process.env.WEBTERM_PASSWORD_HASH;
+
+// Platform detection
+const isWindows = process.platform === "win32";
+const isLinux = process.platform === "linux";
+const isMacOS = process.platform === "darwin";
+
+// === System Utilities ===
+class SystemMonitor {
+  constructor() {
+    this.cpuHistory = [];
+    this.networkHistory = [];
+    this.previousNetworkStats = null;
+  }
+
+  async getCPUUsage() {
+    return new Promise((resolve) => {
+      const startMeasure = this.cpuAverage();
+      setTimeout(() => {
+        const endMeasure = this.cpuAverage();
+        const idleDifference = endMeasure.idle - startMeasure.idle;
+        const totalDifference = endMeasure.total - startMeasure.total;
+        const percentageCPU = 100 - Math.floor(100 * idleDifference / totalDifference);
+        resolve(Math.max(0, Math.min(100, percentageCPU)));
+      }, 100);
+    });
+  }
+
+  cpuAverage() {
+    const cpus = os.cpus();
+    let user = 0, nice = 0, sys = 0, idle = 0, irq = 0;
+    
+    for (let cpu of cpus) {
+      user += cpu.times.user;
+      nice += cpu.times.nice || 0;
+      sys += cpu.times.sys;
+      irq += cpu.times.irq || 0;
+      idle += cpu.times.idle;
+    }
+
+    return {
+      idle: idle / cpus.length,
+      total: (user + nice + sys + idle + irq) / cpus.length
+    };
+  }
+
+  async getMemoryInfo() {
+    const totalMem = os.totalmem();
+    const freeMem = os.freemem();
+    const usedMem = totalMem - freeMem;
+    
+    return {
+      total: Math.round(totalMem / 1024 / 1024), // MB
+      used: Math.round(usedMem / 1024 / 1024),   // MB
+      free: Math.round(freeMem / 1024 / 1024),   // MB
+      percentage: Math.round((usedMem / totalMem) * 100)
+    };
+  }
+
+  async getDiskUsage() {
+    try {
+      if (isWindows) {
+        const { stdout } = await execAsync('wmic logicaldisk get size,freespace,caption /format:csv');
+        const lines = stdout.split('\n').filter(line => line.includes(':'));
+        
+        if (lines.length > 0) {
+          const parts = lines[0].split(',');
+          if (parts.length >= 3) {
+            const freeSpace = parseInt(parts[1]) || 0;
+            const totalSpace = parseInt(parts[2]) || 1;
+            const usedSpace = totalSpace - freeSpace;
+            const percentage = Math.round((usedSpace / totalSpace) * 100);
+            
+            return {
+              total: Math.round(totalSpace / 1024 / 1024 / 1024), // GB
+              used: Math.round(usedSpace / 1024 / 1024 / 1024),   // GB
+              free: Math.round(freeSpace / 1024 / 1024 / 1024),   // GB
+              percentage: percentage
+            };
+          }
+        }
+      } else {
+        // Linux/macOS
+        const { stdout } = await execAsync('df -h / | tail -1');
+        const parts = stdout.trim().split(/\s+/);
+        
+        if (parts.length >= 5) {
+          const percentage = parseInt(parts[4].replace('%', '')) || 0;
+          return {
+            total: parts[1],
+            used: parts[2],
+            free: parts[3],
+            percentage: percentage
+          };
+        }
+      }
+    } catch (error) {
+      console.warn('Disk usage detection failed:', error.message);
+    }
+
+    return { total: 0, used: 0, free: 0, percentage: 0 };
+  }
+
+  async getProcessList() {
+    try {
+      let processes = [];
+      
+      if (isWindows) {
+        const { stdout } = await execAsync(
+          'powershell "Get-Process | Sort-Object CPU -Descending | Select-Object -First 10 Name, CPU | ConvertTo-Csv -NoTypeInformation"'
+        );
+        
+        const lines = stdout.split('\n').slice(1).filter(line => line.trim());
+        processes = lines.map(line => {
+          const [name, cpu] = line.replace(/"/g, '').split(',');
+          return {
+            name: name || 'Unknown',
+            cpu: parseFloat(cpu) || 0
+          };
+        }).filter(p => p.name !== 'Unknown').slice(0, 8);
+        
+      } else {
+        // Linux/macOS - using ps command
+        const { stdout } = await execAsync('ps aux --sort=-%cpu | head -9 | tail -8');
+        const lines = stdout.split('\n').filter(line => line.trim());
+        
+        processes = lines.map(line => {
+          const parts = line.trim().split(/\s+/);
+          return {
+            name: parts[10] ? path.basename(parts[10]) : 'unknown',
+            cpu: parseFloat(parts[2]) || 0
+          };
+        });
+      }
+      
+      return processes;
+    } catch (error) {
+      console.warn('Process list detection failed:', error.message);
+      return [];
+    }
+  }
+
+  async getNetworkStats() {
+    try {
+      if (isWindows) {
+        // Windows network stats - simplified for now
+        const { stdout } = await execAsync('powershell "Get-Counter \\"\\Network Interface(*)\\Bytes Total/sec\\" -SampleInterval 1 -MaxSamples 1 | Select-Object -ExpandProperty CounterSamples | Where-Object {$_.InstanceName -ne \\"isatap*\\" -and $_.InstanceName -ne \\"Teredo*\\" -and $_.InstanceName -ne \\"_Total\\""} | Measure-Object CookedValue -Sum | Select-Object -ExpandProperty Sum"');
+        const totalBytes = parseFloat(stdout.trim()) || 0;
+        return { rx: totalBytes / 2, tx: totalBytes / 2 }; // Rough estimate
+      } else {
+        // Linux - read from /proc/net/dev
+        const data = await fs.readFile('/proc/net/dev', 'utf8');
+        const lines = data.split('\n');
+        let totalRx = 0, totalTx = 0;
+        
+        for (let line of lines) {
+          if (line.includes(':') && !line.includes('lo:')) {
+            const parts = line.split(':')[1].trim().split(/\s+/);
+            totalRx += parseInt(parts[0]) || 0;
+            totalTx += parseInt(parts[8]) || 0;
+          }
+        }
+        
+        // Calculate speed if we have previous data
+        if (this.previousNetworkStats) {
+          const rxSpeed = Math.max(0, totalRx - this.previousNetworkStats.rx);
+          const txSpeed = Math.max(0, totalTx - this.previousNetworkStats.tx);
+          this.previousNetworkStats = { rx: totalRx, tx: totalTx };
+          return { rx: rxSpeed, tx: txSpeed };
+        } else {
+          this.previousNetworkStats = { rx: totalRx, tx: totalTx };
+          return { rx: 0, tx: 0 };
+        }
+      }
+    } catch (error) {
+      console.warn('Network stats detection failed:', error.message);
+      return { rx: 0, tx: 0 };
+    }
+  }
+
+  formatUptime(seconds) {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    
+    if (days > 0) return `${days}d ${hours}h ${minutes}m`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+  }
+
+  async getSystemInfo() {
+    try {
+      const [cpuUsage, memInfo, diskInfo, processes, networkStats] = await Promise.all([
+        this.getCPUUsage(),
+        this.getMemoryInfo(),
+        this.getDiskUsage(),
+        this.getProcessList(),
+        this.getNetworkStats()
+      ]);
+
+      const cpuInfo = os.cpus()[0];
+      const uptime = os.uptime();
+
+      return {
+        // System info
+        platform: os.platform(),
+        release: os.release(),
+        arch: os.arch(),
+        hostname: os.hostname(),
+        uptime: this.formatUptime(uptime),
+        
+        // CPU info
+        cpu_model: cpuInfo.model,
+        cpu_cores: os.cpus().length,
+        cpu_usage: cpuUsage,
+        
+        // Memory info
+        total_mem: memInfo.total,
+        used_mem: memInfo.used,
+        free_mem: memInfo.free,
+        mem_usage: memInfo.percentage,
+        
+        // Disk info
+        disk_total: diskInfo.total,
+        disk_used: diskInfo.used,
+        disk_free: diskInfo.free,
+        disk_usage: diskInfo.percentage,
+        
+        // Network info (speeds in bytes per second)
+        network_rx: networkStats.rx,
+        network_tx: networkStats.tx,
+        
+        // Process list
+        processes: processes,
+        
+        // Load average (Linux/macOS only)
+        loadavg: isWindows ? [0, 0, 0] : os.loadavg(),
+        
+        // User info
+        user_info: os.userInfo(),
+        
+        timestamp: Date.now()
+      };
+    } catch (error) {
+      console.error('System info error:', error);
+      return null;
+    }
+  }
+}
+
+const systemMonitor = new SystemMonitor();
+
+// === Middleware ===
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: [
+        "'self'", 
+        "'unsafe-inline'", 
+        "https://cdn.jsdelivr.net"
+      ],
+      styleSrc: [
+        "'self'", 
+        "'unsafe-inline'", 
+        "https://cdn.jsdelivr.net",
+        "https://fonts.googleapis.com"
+      ],
+      fontSrc: [
+        "'self'",
+        "https://fonts.googleapis.com",
+        "https://fonts.gstatic.com"
+      ],
+      imgSrc: ["'self'", "data:"],
+      connectSrc: ["'self'", "ws:", "wss:"]
+    }
+  },
+  crossOriginEmbedderPolicy: false
+}));
+
+app.use(express.urlencoded({ extended: false }));
+app.use(express.json());
+app.use(express.static(path.join(__dirname, "public")));
+app.set("view engine", "ejs");
+app.set("views", path.join(__dirname, "views"));
+
+// === Session ===
+app.use(
+  session({
+    secret: SESSION_SECRET,
+    resave: false,
+    saveUninitialized: false,
+    cookie: { 
+      httpOnly: true, 
+      sameSite: "lax", 
+      secure: process.env.NODE_ENV === "production", 
+      maxAge: 24 * 60 * 60 * 1000 // 24 hours
+    },
+  })
+);
+
+// === Auth Middleware ===
+function requireAuth(req, res, next) {
+  if (req.session?.authed) return next();
+  return res.redirect("/login");
+}
+
+// === Routes ===
+app.get("/login", (req, res) => {
+  if (req.session?.authed) return res.redirect("/");
+  res.render("login", { error: null });
+});
+
+app.post("/login", async (req, res) => {
+  const { password } = req.body;
+  try {
+    if (!PASSWORD_HASH) {
+      console.error("PASSWORD_HASH not set in environment variables");
+      return res.render("login", { error: "Server configuration error" });
+    }
+
+    const isValid = await bcrypt.compare(password || "", PASSWORD_HASH);
+    if (isValid) {
+      req.session.authed = true;
+      return res.redirect("/");
+    } else {
+      return res.render("login", { error: "Invalid password" });
+    }
+  } catch (error) {
+    console.error("Login error:", error);
+    return res.render("login", { error: "Authentication error" });
+  }
+});
+
+app.get("/logout", (req, res) => {
+  req.session.destroy(() => res.redirect("/login"));
+});
+
+app.get("/", requireAuth, (req, res) => {
+  res.render("terminal");
+});
+
+app.get("/sysinfo", requireAuth, async (req, res) => {
+  try {
+    const systemInfo = await systemMonitor.getSystemInfo();
+    if (systemInfo) {
+      res.json(systemInfo);
+    } else {
+      res.status(500).json({ error: "Failed to fetch system information" });
+    }
+  } catch (error) {
+    console.error("System info endpoint error:", error);
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// === Terminal Class for better process management ===
+class Terminal {
+  constructor(socket) {
+    this.socket = socket;
+    this.process = null;
+    this.isActive = true;
+  }
+
+  async initialize() {
+    try {
+      // Try to use node-pty first
+      const nodePty = await import("node-pty");
+      return this.initWithPty(nodePty);
+    } catch (error) {
+      console.warn("node-pty not available, using fallback:", error.message);
+      return this.initWithSpawn();
+    }
+  }
+
+  initWithPty(nodePty) {
+    const shell = this.getShell();
+    const env = { ...process.env };
+    
+    // Set better environment for cross-platform compatibility
+    if (isWindows) {
+      env.TERM = 'windows-ansi';
+    } else {
+      env.TERM = 'xterm-256color';
+      env.COLORTERM = 'truecolor';
+    }
+
+    this.process = nodePty.spawn(shell, [], {
+      name: isWindows ? 'windows-ansi' : 'xterm-256color',
+      cols: 80,
+      rows: 24,
+      cwd: this.getInitialDirectory(),
+      env: env,
+      useConpty: isWindows, // Use ConPTY on Windows 10+
+    });
+
+    this.process.onData(data => {
+      if (this.isActive) {
+        this.socket.emit("terminal_output", data);
+      }
+    });
+
+    this.process.onExit(() => {
+      if (this.isActive) {
+        this.socket.emit("terminal_output", "\r\n\x1b[91mTerminal session ended\x1b[0m\r\n");
+      }
+    });
+
+    // Socket event handlers
+    this.socket.on("terminal_input", (data) => {
+      if (this.process && this.isActive) {
+        this.process.write(data);
+      }
+    });
+
+    this.socket.on("terminal_resize", ({ cols, rows }) => {
+      if (this.process && this.isActive) {
+        this.process.resize(cols || 80, rows || 24);
+      }
+    });
+
+    console.log(`Terminal initialized with node-pty (${shell})`);
+    return true;
+  }
+
+  initWithSpawn() {
+    const shell = this.getShell();
+    const args = this.getShellArgs();
+    
+    this.process = spawn(shell, args, {
+      cwd: this.getInitialDirectory(),
+      env: { ...process.env, TERM: isWindows ? 'windows-ansi' : 'xterm-256color' },
+      stdio: ['pipe', 'pipe', 'pipe']
+    });
+
+    this.process.stdout.on("data", (data) => {
+      if (this.isActive) {
+        this.socket.emit("terminal_output", data.toString());
+      }
+    });
+
+    this.process.stderr.on("data", (data) => {
+      if (this.isActive) {
+        this.socket.emit("terminal_output", data.toString());
+      }
+    });
+
+    this.process.on("exit", (code) => {
+      if (this.isActive) {
+        this.socket.emit("terminal_output", `\r\n\x1b[91mProcess exited with code ${code}\x1b[0m\r\n`);
+      }
+    });
+
+    this.socket.on("terminal_input", (data) => {
+      if (this.process && this.process.stdin && this.isActive) {
+        this.process.stdin.write(data);
+      }
+    });
+
+    console.log(`Terminal initialized with spawn fallback (${shell})`);
+    return true;
+  }
+
+  getShell() {
+    if (isWindows) {
+      return process.env.COMSPEC || "cmd.exe";
+    } else {
+      return process.env.SHELL || "/bin/bash";
+    }
+  }
+
+  getShellArgs() {
+    if (isWindows) {
+      return [];
+    } else {
+      return ["-l"]; // Login shell
+    }
+  }
+
+  getInitialDirectory() {
+    if (isWindows) {
+      return process.env.USERPROFILE || process.cwd();
+    } else {
+      return process.env.HOME || process.cwd();
+    }
+  }
+
+  destroy() {
+    this.isActive = false;
+    if (this.process) {
+      try {
+        if (typeof this.process.kill === 'function') {
+          this.process.kill();
+        } else if (typeof this.process.destroy === 'function') {
+          this.process.destroy();
+        }
+      } catch (error) {
+        console.warn("Error destroying terminal process:", error.message);
+      }
+    }
+  }
+}
+
+// === Socket.IO Connection Handler ===
+io.on("connection", async (socket) => {
+  console.log(`Socket connected: ${socket.id} from ${socket.handshake.address}`);
+
+  // Create terminal instance
+  const terminal = new Terminal(socket);
+  const initSuccess = await terminal.initialize();
+
+  if (!initSuccess) {
+    socket.emit("terminal_output", "\r\n\x1b[91mFailed to initialize terminal\x1b[0m\r\n");
+  }
+
+  // Send welcome message
+  const welcomeMessage = `\x1b[32m╭─────────────────────────────────────────────────╮\x1b[0m\r\n` +
+                        `\x1b[32m│\x1b[0m            \x1b[1mWeb Terminal v2.0\x1b[0m              \x1b[32m│\x1b[0m\r\n` +
+                        `\x1b[32m│\x1b[0m    Platform: ${process.platform} (${process.arch})${' '.repeat(Math.max(0, 15 - process.platform.length - process.arch.length))} \x1b[32m│\x1b[0m\r\n` +
+                        `\x1b[32m│\x1b[0m    Shell: ${terminal.getShell()}${' '.repeat(Math.max(0, 25 - terminal.getShell().length))} \x1b[32m│\x1b[0m\r\n` +
+                        `\x1b[32m╰─────────────────────────────────────────────────╯\x1b[0m\r\n\r\n`;
+
+  socket.emit("terminal_output", welcomeMessage);
+
+  // Real-time system monitoring
+  const systemInfoInterval = setInterval(async () => {
+    try {
+      const systemInfo = await systemMonitor.getSystemInfo();
+      if (systemInfo && socket.connected) {
+        socket.emit("system_info", systemInfo);
+      }
+    } catch (error) {
+      console.error("System monitoring error:", error);
+    }
+  }, 2000);
+
+  // Cleanup on disconnect
+  socket.on("disconnect", () => {
+    console.log(`Socket disconnected: ${socket.id}`);
+    clearInterval(systemInfoInterval);
+    terminal.destroy();
+  });
+
+  // Error handling
+  socket.on("error", (error) => {
+    console.error(`Socket error for ${socket.id}:`, error);
+  });
+});
+
+// === Error Handling ===
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error);
+});
+
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+});
+
+// === Graceful Shutdown ===
+process.on('SIGTERM', () => {
+  console.log('SIGTERM received, shutting down gracefully');
+  httpServer.close(() => {
+    console.log('Process terminated');
+    process.exit(0);
+  });
+});
+
+process.on('SIGINT', () => {
+  console.log('SIGINT received, shutting down gracefully');
+  httpServer.close(() => {
+    console.log('Process terminated');
+    process.exit(0);
+  });
+});
+
+// === Start Server ===
+httpServer.listen(PORT, () => {
+  console.log(`✅ Web Terminal Server running on http://localhost:${PORT}`);
+  console.log(`📊 Platform: ${process.platform} (${process.arch})`);
+  console.log(`🐚 Default Shell: ${isWindows ? process.env.COMSPEC || "cmd.exe" : process.env.SHELL || "/bin/bash"}`);
+  console.log(`🔐 Authentication: ${PASSWORD_HASH ? 'Enabled' : 'Disabled (set WEBTERM_PASSWORD_HASH)'}`);
+});
+
+export default app;

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "web-terminal",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "node app.js"
+  },
+  "dependencies": {
+    "bcrypt": "^5.1.0",
+    "dotenv": "^16.6.1",
+    "ejs": "^3.1.9",
+    "express": "^4.18.2",
+    "express-session": "^1.17.3",
+    "helmet": "^7.0.0",
+    "node-os-utils": "^1.3.7",
+    "node-pty": "^1.1.0-beta28",
+    "os": "^0.1.2",
+    "socket.io": "^4.7.2"
+  }
+}

public/js/terminal.js

@@ -0,0 +1,45 @@
+const socket = io();
+
+// --- Terminal setup ---
+const term = new Terminal({
+  cursorBlink: true,
+  fontSize: 14,
+  theme: { background: '#0f172a', foreground: '#e5e7eb' }
+});
+term.open(document.getElementById("term"));
+term.focus();
+
+// Kirim input ke server
+term.onData(data => socket.emit("input", data));
+
+// Terima output dari server
+socket.on("output", data => term.write(data));
+
+// Resize terminal (tidak berfungsi sempurna tanpa node-pty)
+function resizeTerminal() {
+  const cols = term.cols;
+  const rows = term.rows;
+  socket.emit("resize", { cols, rows });
+}
+window.addEventListener("resize", resizeTerminal);
+resizeTerminal();
+
+// --- Load system info ---
+async function loadSysinfo() {
+  try {
+    const res = await fetch("/sysinfo");
+    const info = await res.json();
+    const el = document.getElementById("sysinfo");
+    el.innerHTML = `
+      <p><b>Host:</b> ${info.hostname} (${info.platform} ${info.release}, ${info.arch})</p>
+      <p><b>CPU:</b> ${info.cpu_model} (${info.cpu_cores} cores)</p>
+      <p><b>CPU Usage:</b> ${info.cpu_usage}%</p>
+      <p><b>Memory:</b> ${info.used_mem}MB / ${info.total_mem}MB (${info.mem_usage}%)</p>
+      <p><b>Uptime:</b> ${info.uptime}</p>
+    `;
+  } catch (err) {
+    console.error(err);
+  }
+}
+loadSysinfo();
+setInterval(loadSysinfo, 5000);

views/login.ejs

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Terminal - Login</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'JetBrains Mono', monospace;
+            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
+            color: #e4e4e7;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .login-container {
+            background: rgba(24, 24, 27, 0.95);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(63, 63, 70, 0.5);
+            border-radius: 12px;
+            padding: 40px;
+            width: 100%;
+            max-width: 400px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .login-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, #10b981, transparent);
+        }
+
+        .login-header {
+            text-align: center;
+            margin-bottom: 32px;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .status-dot {
+            width: 12px;
+            height: 12px;
+            background: #10b981;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.3; transform: scale(1.1); }
+        }
+
+        .login-subtitle {
+            color: #a1a1aa;
+            font-size: 14px;
+            margin-top: 8px;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        .form-label {
+            display: block;
+            color: #d4d4d8;
+            font-size: 13px;
+            font-weight: 500;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .form-input {
+            width: 100%;
+            background: rgba(39, 39, 42, 0.8);
+            border: 1px solid rgba(63, 63, 70, 0.5);
+            border-radius: 8px;
+            padding: 12px 16px;
+            color: #e4e4e7;
+            font-family: inherit;
+            font-size: 14px;
+            transition: all 0.2s ease;
+            outline: none;
+        }
+
+        .form-input:focus {
+            border-color: #10b981;
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+            background: rgba(39, 39, 42, 0.95);
+        }
+
+        .form-input::placeholder {
+            color: #71717a;
+        }
+
+        .login-button {
+            width: 100%;
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            border: none;
+            border-radius: 8px;
+            padding: 14px 24px;
+            color: white;
+            font-family: inherit;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .login-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
+        }
+
+        .login-button:active {
+            transform: translateY(0);
+        }
+
+        .error-message {
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            border-radius: 6px;
+            padding: 12px;
+            color: #fca5a5;
+            font-size: 13px;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        .terminal-demo {
+            position: absolute;
+            top: 50%;
+            left: -300px;
+            transform: translateY(-50%);
+            background: rgba(12, 12, 12, 0.8);
+            border-radius: 8px;
+            padding: 20px;
+            width: 250px;
+            font-size: 11px;
+            line-height: 1.4;
+            border: 1px solid rgba(63, 63, 70, 0.3);
+            animation: float 6s ease-in-out infinite;
+            z-index: -1;
+        }
+
+        .terminal-demo::before {
+            content: '$ ';
+            color: #10b981;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(-50%) translateX(0); }
+            50% { transform: translateY(-60%) translateX(10px); }
+        }
+
+        .terminal-demo-right {
+            left: auto;
+            right: -300px;
+            animation-delay: 3s;
+        }
+
+        @media (max-width: 768px) {
+            .login-container {
+                margin: 20px;
+                padding: 30px 24px;
+            }
+
+            .terminal-demo,
+            .terminal-demo-right {
+                display: none;
+            }
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: 24px;
+            padding-top: 20px;
+            border-top: 1px solid rgba(63, 63, 70, 0.3);
+            color: #71717a;
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="terminal-demo">
+        <div style="color: #10b981;">user@terminal:~$</div>
+        <div style="color: #e4e4e7;">ls -la</div>
+        <div style="color: #a1a1aa;">drwxr-xr-x 8 user user 4096</div>
+        <div style="color: #a1a1aa;">-rw-r--r-- 1 user user  220</div>
+        <div style="color: #10b981;">user@terminal:~$</div>
+    </div>
+
+    <div class="terminal-demo terminal-demo-right">
+        <div style="color: #10b981;">root@server:/#</div>
+        <div style="color: #e4e4e7;">systemctl status</div>
+        <div style="color: #22c55e;">● Active (running)</div>
+        <div style="color: #a1a1aa;">Memory: 512.3M</div>
+        <div style="color: #10b981;">root@server:/#</div>
+    </div>
+
+    <div class="login-container">
+        <div class="login-header">
+            <div class="logo">
+                <div class="status-dot"></div>
+                Web Terminal
+            </div>
+            <div class="login-subtitle">Secure Shell Access</div>
+        </div>
+
+        <% if (error) { %>
+            <div class="error-message">
+                ⚠️ <%= error %>
+            </div>
+        <% } %>
+
+        <form method="POST" action="/login">
+            <div class="form-group">
+                <label for="password" class="form-label">Password</label>
+                <input 
+                    type="password" 
+                    id="password" 
+                    name="password" 
+                    class="form-input" 
+                    placeholder="Enter your password"
+                    required
+                    autofocus
+                >
+            </div>
+
+            <button type="submit" class="login-button">
+                Access Terminal
+            </button>
+        </form>
+
+        <div class="footer">
+            <div>🔒 Secure connection established</div>
+            <div style="margin-top: 4px;">Web Terminal v2.0</div>
+        </div>
+    </div>
+
+    <script>
+        // Auto-focus password field
+        document.getElementById('password').focus();
+
+        // Handle form submission
+        document.querySelector('form').addEventListener('submit', function(e) {
+            const button = document.querySelector('.login-button');
+            button.textContent = 'Connecting...';
+            button.disabled = true;
+        });
+
+        // Add some visual flair
+        document.addEventListener('DOMContentLoaded', function() {
+            const container = document.querySelector('.login-container');
+            container.style.opacity = '0';
+            container.style.transform = 'translateY(20px)';
+            
+            setTimeout(() => {
+                container.style.transition = 'all 0.5s ease';
+                container.style.opacity = '1';
+                container.style.transform = 'translateY(0)';
+            }, 100);
+        });
+    </script>
+</body>
+</html>

views/terminal.ejs

@@ -0,0 +1,998 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terminal</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'JetBrains Mono', monospace;
+            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
+            color: #e4e4e7;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            display: grid;
+            grid-template-columns: 1fr 320px;
+            grid-template-rows: 60px 1fr;
+            height: 100vh;
+            gap: 1px;
+            background: #27272a;
+        }
+
+        .header {
+            grid-column: 1 / -1;
+            background: rgba(39, 39, 42, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid #3f3f46;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 24px;
+            position: relative;
+        }
+
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, #10b981, transparent);
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-weight: 600;
+            font-size: 16px;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            background: #10b981;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+
+        .header-actions {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        .btn {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #e4e4e7;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-family: inherit;
+        }
+
+        .btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .btn.danger:hover {
+            background: rgba(239, 68, 68, 0.2);
+            border-color: #ef4444;
+        }
+
+        .terminal-section {
+            background: #18181b;
+            border-right: 1px solid #3f3f46;
+            position: relative;
+        }
+
+        .terminal-header {
+            background: rgba(39, 39, 42, 0.8);
+            padding: 12px 20px;
+            border-bottom: 1px solid #3f3f46;
+            font-size: 13px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .terminal-icon {
+            color: #10b981;
+        }
+
+        #terminal {
+            height: calc(100vh - 60px - 45px);
+            padding: 16px;
+            background: #0c0c0c;
+        }
+
+        .sidebar {
+            background: #18181b;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .sidebar-section {
+            border-bottom: 1px solid #3f3f46;
+            padding: 20px;
+            background: rgba(24, 24, 27, 0.5);
+            margin: 0;
+            border-radius: 0;
+        }
+
+        .sidebar-section:last-child {
+            border-bottom: none;
+            flex: 1;
+        }
+
+        .section-title {
+            font-size: 13px;
+            font-weight: 600;
+            color: #a1a1aa;
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .system-info {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .info-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            line-height: 1.4;
+        }
+
+        .info-label {
+            color: #71717a;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .info-value {
+            color: #e4e4e7;
+            font-weight: 500;
+        }
+
+        .metric-bar {
+            width: 100%;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 2px;
+            margin-top: 6px;
+            overflow: hidden;
+        }
+
+        .metric-fill {
+            height: 100%;
+            border-radius: 2px;
+            transition: width 0.3s ease;
+        }
+
+        .cpu-fill {
+            background: linear-gradient(90deg, #10b981, #059669);
+        }
+
+        .memory-fill {
+            background: linear-gradient(90deg, #3b82f6, #2563eb);
+        }
+
+        .disk-fill {
+            background: linear-gradient(90deg, #f59e0b, #d97706);
+        }
+
+        .network-fill {
+            background: linear-gradient(90deg, #8b5cf6, #7c3aed);
+        }
+
+        .mini-chart {
+            height: 60px;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 8px;
+            margin-top: 12px;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: end;
+            padding: 4px;
+            gap: 1px;
+        }
+
+        .chart-bar {
+            flex: 1;
+            background: rgba(16, 185, 129, 0.3);
+            border-radius: 1px 1px 0 0;
+            min-height: 2px;
+            transition: height 0.3s ease;
+        }
+
+        .processes {
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        .processes::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .processes::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .processes::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+        }
+
+        .process-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 0;
+            font-size: 11px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        .process-item:last-child {
+            border-bottom: none;
+        }
+
+        .process-name {
+            color: #e4e4e7;
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .process-cpu {
+            color: #10b981;
+            font-weight: 500;
+            margin-left: 8px;
+        }
+
+        .connection-status {
+            position: absolute;
+            top: 12px;
+            right: 20px;
+            font-size: 11px;
+            color: #71717a;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .connection-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #ef4444;
+            transition: background-color 0.3s ease;
+        }
+
+        .connection-dot.connected {
+            background: #10b981;
+        }
+
+        /* Mobile Styles */
+        @media (max-width: 768px) {
+            .container {
+                grid-template-columns: 1fr;
+                grid-template-rows: 50px 1fr 0px;
+                gap: 0;
+            }
+
+            .header {
+                padding: 0 16px;
+                font-size: 14px;
+                z-index: 1000;
+                position: relative;
+            }
+
+            .logo {
+                font-size: 14px;
+                gap: 6px;
+            }
+
+            .status-dot {
+                width: 6px;
+                height: 6px;
+            }
+
+            .btn {
+                padding: 4px 8px;
+                font-size: 11px;
+            }
+
+            .terminal-section {
+                border-right: none;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .terminal-header {
+                padding: 8px 16px;
+                font-size: 12px;
+                position: relative;
+                z-index: 100;
+            }
+
+            #terminal {
+                flex: 1;
+                height: auto;
+                min-height: 200px;
+                padding: 12px;
+                margin-bottom: 12px;
+            }
+
+            .connection-status {
+                top: 8px;
+                right: 16px;
+                font-size: 10px;
+            }
+
+            .sidebar {
+                display: none; /* Hidden by default on mobile */
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background: #18181b;
+                border-top: 2px solid #3f3f46;
+                max-height: 70vh;
+                overflow-y: auto;
+                z-index: 1001;
+                transform: translateY(100%);
+                transition: transform 0.3s ease;
+                border-radius: 16px 16px 0 0;
+                box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
+            }
+
+            .sidebar.show {
+                display: flex;
+                transform: translateY(0);
+            }
+
+            .sidebar-section {
+                padding: 16px 20px;
+                margin: 8px 16px;
+                background: rgba(39, 39, 42, 0.6);
+                border-radius: 12px;
+                border: 1px solid rgba(63, 63, 70, 0.3);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+                backdrop-filter: blur(10px);
+            }
+
+            .sidebar-section:first-child {
+                margin-top: 16px;
+            }
+
+            .sidebar-section:last-child {
+                margin-bottom: 16px;
+                flex: none;
+            }
+
+            .section-title {
+                font-size: 12px;
+                margin-bottom: 12px;
+                color: #10b981;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .section-title::before {
+                content: '';
+                width: 3px;
+                height: 12px;
+                background: linear-gradient(135deg, #10b981, #059669);
+                border-radius: 2px;
+            }
+
+            .info-item {
+                font-size: 11px;
+                padding: 4px 0;
+            }
+
+            .processes {
+                max-height: 120px;
+            }
+
+            .mini-chart {
+                height: 50px;
+                margin-top: 8px;
+            }
+
+            /* Mobile toggle button */
+            .mobile-toggle {
+                display: block;
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                width: 56px;
+                height: 56px;
+                background: linear-gradient(135deg, #10b981, #059669);
+                border: none;
+                border-radius: 50%;
+                color: white;
+                font-size: 24px;
+                cursor: pointer;
+                z-index: 1002;
+                box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
+                transition: all 0.3s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .mobile-toggle:hover {
+                transform: scale(1.1);
+                box-shadow: 0 12px 35px rgba(16, 185, 129, 0.6);
+            }
+
+            .mobile-toggle.active {
+                background: linear-gradient(135deg, #ef4444, #dc2626);
+                transform: rotate(45deg);
+            }
+
+            /* Mobile overlay */
+            .mobile-overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 1000;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+            }
+
+            .mobile-overlay.show {
+                display: block;
+                opacity: 1;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                grid-template-rows: 45px 1fr 0px;
+            }
+
+            .header {
+                padding: 0 12px;
+            }
+
+            .header-actions {
+                gap: 8px;
+            }
+
+            .sidebar-section {
+                margin: 6px 12px;
+                padding: 12px 16px;
+            }
+
+            .mobile-toggle {
+                width: 50px;
+                height: 50px;
+                bottom: 16px;
+                right: 16px;
+                font-size: 20px;
+            }
+        }
+
+        /* Desktop styles - hide mobile elements */
+        @media (min-width: 769px) {
+            .mobile-toggle,
+            .mobile-overlay {
+                display: none !important;
+            }
+
+            .sidebar {
+                display: flex !important;
+                position: relative !important;
+                transform: none !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="logo">
+                <div class="status-dot"></div>
+                Terminal
+            </div>
+            <div class="header-actions">
+                <button class="btn" id="clear-btn">Clear</button>
+                <a href="/logout" class="btn danger">Logout</a>
+            </div>
+        </div>
+
+        <div class="terminal-section">
+            <div class="terminal-header">
+                <span class="terminal-icon">></span>
+                Shell Session
+            </div>
+            <div id="terminal"></div>
+            <div class="connection-status">
+                <div class="connection-dot" id="connection-dot"></div>
+                <span id="connection-text">Connecting...</span>
+            </div>
+        </div>
+
+        <div class="sidebar">
+            <div class="sidebar-section">
+                <div class="section-title">System Overview</div>
+                <div class="system-info">
+                    <div class="info-item">
+                        <div class="info-label">🖥️ Host</div>
+                        <div class="info-value" id="hostname">-</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">⏱️ Uptime</div>
+                        <div class="info-value" id="uptime">-</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">👥 Users</div>
+                        <div class="info-value" id="users">-</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="sidebar-section">
+                <div class="section-title">Performance</div>
+                <div class="system-info">
+                    <div class="info-item">
+                        <div class="info-label">🧠 CPU</div>
+                        <div class="info-value" id="cpu-usage">0%</div>
+                    </div>
+                    <div class="metric-bar">
+                        <div class="metric-fill cpu-fill" id="cpu-bar" style="width: 0%"></div>
+                    </div>
+                    
+                    <div class="info-item" style="margin-top: 16px;">
+                        <div class="info-label">💾 Memory</div>
+                        <div class="info-value" id="memory-usage">0%</div>
+                    </div>
+                    <div class="metric-bar">
+                        <div class="metric-fill memory-fill" id="memory-bar" style="width: 0%"></div>
+                    </div>
+
+                    <div class="info-item" style="margin-top: 16px;">
+                        <div class="info-label">💿 Disk</div>
+                        <div class="info-value" id="disk-usage">0%</div>
+                    </div>
+                    <div class="metric-bar">
+                        <div class="metric-fill disk-fill" id="disk-bar" style="width: 0%"></div>
+                    </div>
+
+                    <div class="mini-chart" id="cpu-chart"></div>
+                </div>
+            </div>
+
+            <div class="sidebar-section">
+                <div class="section-title">Network & Storage</div>
+                <div class="system-info">
+                    <div class="info-item">
+                        <div class="info-label">🌐 Network RX</div>
+                        <div class="info-value" id="network-rx">0 KB/s</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">📡 Network TX</div>
+                        <div class="info-value" id="network-tx">0 KB/s</div>
+                    </div>
+                    <div class="info-item" style="margin-top: 8px;">
+                        <div class="info-label">💾 Memory Used</div>
+                        <div class="info-value" id="memory-details">0 MB / 0 MB</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">💿 Disk Space</div>
+                        <div class="info-value" id="disk-details">0 GB / 0 GB</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="sidebar-section">
+                <div class="section-title">System Details</div>
+                <div class="system-info">
+                    <div class="info-item">
+                        <div class="info-label">🏗️ Platform</div>
+                        <div class="info-value" id="platform">-</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">🔧 Architecture</div>
+                        <div class="info-value" id="arch">-</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">🧠 CPU Model</div>
+                        <div class="info-value" id="cpu-model">-</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">⚡ CPU Cores</div>
+                        <div class="info-value" id="cpu-cores">-</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">📊 Load Avg</div>
+                        <div class="info-value" id="load-avg">-</div>
+                    </div>
+                </div>
+            </div>
+            <div class="sidebar-section">
+                <div class="section-title">Top Processes</div>
+                <div class="processes" id="processes">
+                    <div class="process-item">
+                        <div class="process-name">Loading...</div>
+                        <div class="process-cpu">-</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Mobile elements -->
+    <div class="mobile-overlay" id="mobile-overlay"></div>
+    <button class="mobile-toggle" id="mobile-toggle">����</button>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+    <script>
+        // Initialize terminal
+        let terminal;
+        let socket;
+        let isConnected = false;
+        let cpuHistory = [];
+
+        // Initialize when page loads
+        function initializeTerminal() {
+            terminal = new Terminal({
+                cursorBlink: true,
+                fontSize: 14,
+                fontFamily: 'JetBrains Mono, monospace',
+                theme: {
+                    background: '#0c0c0c',
+                    foreground: '#e4e4e7',
+                    cursor: '#10b981',
+                    selection: 'rgba(16, 185, 129, 0.3)',
+                    black: '#27272a',
+                    red: '#ef4444',
+                    green: '#10b981',
+                    yellow: '#f59e0b',
+                    blue: '#3b82f6',
+                    magenta: '#a855f7',
+                    cyan: '#06b6d4',
+                    white: '#f4f4f5'
+                }
+            });
+
+            terminal.open(document.getElementById('terminal'));
+            terminal.focus();
+
+            // Connect to server
+            connectToServer();
+
+            // Add event listeners for buttons
+            document.getElementById('clear-btn').addEventListener('click', clearTerminal);
+            
+            // Mobile functionality
+            initializeMobileToggle();
+        }
+
+        function initializeMobileToggle() {
+            const mobileToggle = document.getElementById('mobile-toggle');
+            const sidebar = document.querySelector('.sidebar');
+            const overlay = document.getElementById('mobile-overlay');
+
+            if (mobileToggle && sidebar && overlay) {
+                mobileToggle.addEventListener('click', () => {
+                    const isVisible = sidebar.classList.contains('show');
+                    
+                    if (isVisible) {
+                        hideMobileSidebar();
+                    } else {
+                        showMobileSidebar();
+                    }
+                });
+
+                overlay.addEventListener('click', () => {
+                    hideMobileSidebar();
+                });
+
+                // Handle escape key
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape' && sidebar.classList.contains('show')) {
+                        hideMobileSidebar();
+                    }
+                });
+            }
+        }
+
+        function showMobileSidebar() {
+            const sidebar = document.querySelector('.sidebar');
+            const overlay = document.getElementById('mobile-overlay');
+            const toggle = document.getElementById('mobile-toggle');
+
+            sidebar.classList.add('show');
+            overlay.classList.add('show');
+            toggle.classList.add('active');
+            toggle.innerHTML = '✕';
+            
+            // Prevent body scroll
+            document.body.style.overflow = 'hidden';
+        }
+
+        function hideMobileSidebar() {
+            const sidebar = document.querySelector('.sidebar');
+            const overlay = document.getElementById('mobile-overlay');
+            const toggle = document.getElementById('mobile-toggle');
+
+            sidebar.classList.remove('show');
+            overlay.classList.remove('show');
+            toggle.classList.remove('active');
+            toggle.innerHTML = '📊';
+            
+            // Restore body scroll
+            document.body.style.overflow = '';
+        }
+
+        function connectToServer() {
+            // Initialize Socket.io connection
+            socket = io();
+            
+            socket.on('connect', () => {
+                isConnected = true;
+                updateConnectionStatus(true);
+                console.log('Connected to server');
+            });
+
+            socket.on('disconnect', () => {
+                isConnected = false;
+                updateConnectionStatus(false);
+                console.log('Disconnected from server');
+                terminal.writeln('\r\n\x1b[31m✗ Connection lost. Reconnecting...\x1b[0m');
+            });
+
+            socket.on('connect_error', (error) => {
+                console.error('Connection error:', error);
+                updateConnectionStatus(false);
+                terminal.writeln('\r\n\x1b[31m✗ Connection failed\x1b[0m');
+            });
+
+            // Terminal communication
+            socket.on('terminal_output', (data) => {
+                terminal.write(data);
+            });
+
+            socket.on('system_info', (data) => {
+                updateSystemInfo(data);
+            });
+
+            // Handle user input
+            terminal.onData(data => {
+                if (isConnected && socket) {
+                    socket.emit('terminal_input', data);
+                }
+            });
+
+            // Handle terminal resize
+            terminal.onResize(({ cols, rows }) => {
+                if (isConnected && socket) {
+                    socket.emit('terminal_resize', { cols, rows });
+                }
+            });
+        }
+
+        function updateConnectionStatus(connected) {
+            const dot = document.getElementById('connection-dot');
+            const text = document.getElementById('connection-text');
+            
+            if (connected) {
+                dot.classList.add('connected');
+                text.textContent = 'Connected';
+            } else {
+                dot.classList.remove('connected');
+                text.textContent = 'Disconnected';
+            }
+        }
+
+        function updateSystemInfo(data) {
+            if (!data) return;
+            
+            // Update basic info
+            document.getElementById('hostname').textContent = data.hostname || '-';
+            document.getElementById('uptime').textContent = data.uptime || '-';
+            document.getElementById('users').textContent = data.user_info ? '1' : '-';
+            
+            // Update metrics
+            document.getElementById('cpu-usage').textContent = `${Math.round(data.cpu_usage || 0)}%`;
+            document.getElementById('cpu-bar').style.width = `${data.cpu_usage || 0}%`;
+            
+            document.getElementById('memory-usage').textContent = `${Math.round(data.mem_usage || 0)}%`;
+            document.getElementById('memory-bar').style.width = `${data.mem_usage || 0}%`;
+            
+            document.getElementById('disk-usage').textContent = `${Math.round(data.disk_usage || 0)}%`;
+            document.getElementById('disk-bar').style.width = `${data.disk_usage || 0}%`;
+            
+            // Update detailed info
+            document.getElementById('memory-details').textContent = `${data.used_mem || 0} MB / ${data.total_mem || 0} MB`;
+            
+            // Format disk info
+            const diskUsed = typeof data.disk_used === 'number' ? `${data.disk_used} GB` : data.disk_used || '0';
+            const diskTotal = typeof data.disk_total === 'number' ? `${data.disk_total} GB` : data.disk_total || '0';
+            document.getElementById('disk-details').textContent = `${diskUsed} / ${diskTotal}`;
+            
+            // Update network info
+            document.getElementById('network-rx').textContent = formatBytes(data.network_rx || 0) + '/s';
+            document.getElementById('network-tx').textContent = formatBytes(data.network_tx || 0) + '/s';
+            
+            // Update system details
+            document.getElementById('platform').textContent = data.platform || '-';
+            document.getElementById('arch').textContent = data.arch || '-';
+            document.getElementById('cpu-model').textContent = truncateText(data.cpu_model || '-', 20);
+            document.getElementById('cpu-cores').textContent = data.cpu_cores || '-';
+            
+            // Update load average
+            if (data.loadavg && Array.isArray(data.loadavg)) {
+                document.getElementById('load-avg').textContent = data.loadavg.map(l => l.toFixed(2)).join(', ');
+            } else {
+                document.getElementById('load-avg').textContent = '-';
+            }
+            
+            // Update CPU history chart
+            if (data.cpu_usage !== undefined) {
+                cpuHistory.push(data.cpu_usage);
+                if (cpuHistory.length > 20) {
+                    cpuHistory.shift();
+                }
+                updateCpuChart();
+            }
+            
+            // Update processes
+            if (data.processes && Array.isArray(data.processes)) {
+                updateProcessList(data.processes);
+            }
+        }
+
+        function formatBytes(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+        }
+
+        function truncateText(text, maxLength) {
+            if (text.length <= maxLength) return text;
+            return text.substring(0, maxLength - 3) + '...';
+        }
+
+        function updateCpuChart() {
+            const chartContainer = document.getElementById('cpu-chart');
+            chartContainer.innerHTML = '';
+            
+            cpuHistory.forEach(value => {
+                const bar = document.createElement('div');
+                bar.className = 'chart-bar';
+                bar.style.height = `${(value / 100) * 100}%`;
+                chartContainer.appendChild(bar);
+            });
+        }
+
+        function updateProcessList(processes) {
+            const container = document.getElementById('processes');
+            if (!processes || !Array.isArray(processes) || processes.length === 0) {
+                container.innerHTML = `
+                    <div class="process-item">
+                        <div class="process-name">No data</div>
+                        <div class="process-cpu">0%</div>
+                    </div>
+                `;
+                return;
+            }
+            
+            container.innerHTML = processes.map(proc => `
+                <div class="process-item">
+                    <div class="process-name">${proc.name || 'unknown'}</div>
+                    <div class="process-cpu">${Math.round(proc.cpu || 0)}%</div>
+                </div>
+            `).join('');
+        }
+
+        function clearTerminal() {
+            if (terminal) {
+                terminal.clear();
+            }
+        }
+
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', initializeTerminal);
+
+        // Handle window resize with proper terminal fitting
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                if (terminal && terminal.element && terminal.element.offsetParent !== null) {
+                    try {
+                        // Get the terminal container dimensions
+                        const container = document.getElementById('terminal');
+                        if (container) {
+                            const containerRect = container.getBoundingClientRect();
+                            
+                            // Only fit if container has dimensions
+                            if (containerRect.width > 0 && containerRect.height > 0) {
+                                // Use fitAddon if available, otherwise manual resize
+                                if (window.FitAddon) {
+                                    const fitAddon = new FitAddon();
+                                    terminal.loadAddon(fitAddon);
+                                    fitAddon.fit();
+                                } else {
+                                    // Manual calculation for terminal size
+                                    const cols = Math.floor(containerRect.width / 9); // approx char width
+                                    const rows = Math.floor(containerRect.height / 17); // approx line height
+                                    
+                                    if (cols > 10 && rows > 5) { // minimum viable size
+                                        terminal.resize(cols, rows);
+                                        
+                                        // Notify server of new size
+                                        if (isConnected && socket) {
+                                            socket.emit('terminal_resize', { cols, rows });
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    } catch (error) {
+                        console.warn('Terminal resize failed:', error);
+                        // Fallback: try simple resize
+                        try {
+                            terminal.resize(80, 24);
+                        } catch (fallbackError) {
+                            console.warn('Fallback resize also failed:', fallbackError);
+                        }
+                    }
+                }
+            }, 150); // Debounce resize events
+        });
+
+        // Handle orientation changes on mobile
+        window.addEventListener('orientationchange', () => {
+            setTimeout(() => {
+                window.dispatchEvent(new Event('resize'));
+            }, 500);
+        });
+    </script>
+</body>
+</html>