Update app.py

app.py

@@ -6,35 +6,75 @@ import time
 from datetime import datetime, timedelta
 import threading
 
-# Backend engines
+# --- Constants ---
 BACKEND_ENGINES = [
     "ChocoLaboratory/SANDBOXBACKEND2",
     "ChocoLaboratory/SANDBOX_BACKEND"
 ]
+SESSION_TIME_LIMIT_HOURS = 2
 
+# --- Sample Code ---
+SAMPLE_MAIN_PY = """# Enterprise Python Application
+import os
+import time
+from datetime import datetime
+
+def main():
+    print("🚀 Sandbox Compute Platform - Initialized")
+    print(f"📅 Started at: {datetime.now()}")
+    print("✅ Environment ready for development")
+    
+    # Your application code here
+    count = 0
+    while True:
+        print(f"[{count}] ⏱️  Heartbeat... {datetime.now().strftime('%H:%M:%S')}")
+        time.sleep(30)
+        count += 1
+
+if __name__ == "__main__":
+    main()
+"""
+
+SAMPLE_REQUIREMENTS_TXT = """# Production Dependencies
+# Specify exact versions for reproducibility
+
+# Web framework
+flask==2.3.3
+requests==2.31.0
+
+# Data processing
+pandas==2.1.1
+numpy==1.24.3
+
+# Utilities
+python-dotenv==1.0.0
+"""
+
+# --- SandboxManager Class ---
 class SandboxManager:
+    """Manages the lifecycle of a sandboxed environment."""
     def __init__(self):
         self.client = None
         self.current_engine = None
         self.is_connected = False
         self.sandbox_created = False
         self.creation_time = None
-        self.time_limit_hours = 2
-        self.auto_refresh_thread = None
-        self.stop_auto_refresh = False
-        
+        self.time_limit = timedelta(hours=SESSION_TIME_LIMIT_HOURS)
+        self.monitor_thread = None
+        self.stop_monitor = threading.Event()
+
     def select_random_engine(self):
-        """Select a random backend engine"""
+        """Selects a random backend engine from the available pool."""
         self.current_engine = random.choice(BACKEND_ENGINES)
         return self.current_engine
-        
-    def get_remaining_time(self):
-        """Calculate remaining time for the sandbox"""
+
+    def get_remaining_time_str(self):
+        """Calculates and formats the remaining time for the sandbox."""
         if not self.creation_time:
             return "N/A"
         
         elapsed = datetime.now() - self.creation_time
-        remaining = timedelta(hours=self.time_limit_hours) - elapsed
+        remaining = self.time_limit - elapsed
         
         if remaining.total_seconds() <= 0:
             return "EXPIRED"
@@ -42,1131 +82,297 @@ class SandboxManager:
         hours, remainder = divmod(int(remaining.total_seconds()), 3600)
         minutes, seconds = divmod(remainder, 60)
         return f"{hours:02d}:{minutes:02d}:{seconds:02d}"
-    
-    def is_sandbox_expired(self):
-        """Check if sandbox has exceeded the 2-hour limit"""
+
+    def is_expired(self):
+        """Checks if the sandbox session has expired."""
         if not self.creation_time:
             return False
-        
-        elapsed = datetime.now() - self.creation_time
-        return elapsed.total_seconds() > (self.time_limit_hours * 3600)
-        
+        return (datetime.now() - self.creation_time) >= self.time_limit
+
     def connect(self):
-        """Connect to a backend engine"""
-        if self.sandbox_created:
-            return "⚠️ SANDBOX ALREADY ACTIVE - Single session limit enforced", self.current_engine
-            
+        """Connects to a random backend engine."""
+        if self.is_connected:
+            return "✅ Already connected.", self.current_engine
+
         engine = self.select_random_engine()
         try:
             self.client = Client(engine)
             self.is_connected = True
-            return f"✅ ENGINE ONLINE - {engine}", engine
+            return f"✅ Connection successful to: {engine}", engine
         except Exception as e:
             self.is_connected = False
             self.current_engine = None
-            return f"❌ CONNECTION FAILED - {engine}: {str(e)}", "CONNECTION FAILED"
-    
+            return f"❌ Connection failed: {str(e)}", "Connection Failed"
+
     def launch_sandbox(self, main_py_code, requirements_txt):
-        """Launch the sandbox (only once per session)"""
+        """Launches the sandbox environment."""
         if self.sandbox_created:
-            remaining = self.get_remaining_time()
-            if remaining == "EXPIRED":
-                return "⏰ SESSION EXPIRED - 2-hour limit reached. Refresh page for new session.", ""
-            return f"⚠️ SANDBOX ACTIVE - Remaining: {remaining}", self.get_status()
-            
+            if self.is_expired():
+                return "⏰ Sandbox expired. Please refresh the page to start a new session.", ""
+            return f"⚠️ Sandbox already running. Time left: {self.get_remaining_time_str()}", self.get_status()
+
         if not self.is_connected:
-            return "❌ ENGINE OFFLINE - Connect to backend first", ""
-            
+            return "❌ Not connected to a backend. Please connect first.", ""
+
         try:
             result = self.client.predict(
                 code=main_py_code,
                 requirements=requirements_txt,
                 api_name="/launch_sandbox"
             )
-            
-            # Mark sandbox as created and record creation time
             self.sandbox_created = True
             self.creation_time = datetime.now()
+            self.start_monitor_thread()
             
-            # Start auto-refresh thread for time monitoring
-            self.start_time_monitor()
-            
-            remaining = self.get_remaining_time()
-            return (f"🚀 SANDBOX DEPLOYED - Engine: {self.current_engine}\n"
-                   f"⏱️  SESSION LIMIT: 2 hours | REMAINING: {remaining}\n"
-                   f"📊 STATUS: ACTIVE\n\n"
-                   f"ENGINE RESPONSE:\n{result}"), self.get_status()
+            remaining = self.get_remaining_time_str()
+            return (f"🚀 Sandbox deployed successfully on {self.current_engine}\n"
+                    f"⏱️ Time Limit: {SESSION_TIME_LIMIT_HOURS} hours | Remaining: {remaining}\n"
+                    f"📝 Response: {result}"), self.get_status()
         except Exception as e:
-            return f"❌ DEPLOYMENT FAILED - {str(e)}", ""
-    
+            return f"❌ Deployment failed: {str(e)}", ""
+
     def fetch_logs(self):
-        """Fetch logs from the sandbox"""
-        if not self.is_connected:
-            return "❌ ENGINE OFFLINE - No connection to backend"
-            
-        if self.is_sandbox_expired():
-            return "⏰ SESSION EXPIRED - Logs unavailable after 2-hour limit"
-            
+        """Fetches the latest logs from the sandbox."""
+        if not self.sandbox_created:
+            return "[SYSTEM] Sandbox not deployed."
+        if self.is_expired():
+            return "⏰ Sandbox expired. Logs are no longer available."
+        
         try:
             result = self.client.predict(api_name="/fetch_logs")
             timestamp = datetime.now().strftime("%H:%M:%S")
-            remaining = self.get_remaining_time()
-            return f"[{timestamp}] REMAINING: {remaining} | ENGINE: {self.current_engine}\n{'='*80}\n{result}"
+            remaining = self.get_remaining_time_str()
+            return f"[{timestamp}] Remaining: {remaining}\nLogs from {self.current_engine}:\n\n{result}"
         except Exception as e:
-            return f"[ERROR] LOG FETCH FAILED - {str(e)}"
-    
+            return f"[ERROR] Failed to fetch logs: {str(e)}"
+
     def kill_sandbox(self):
-        """Terminate the sandbox"""
-        if not self.is_connected:
-            return "❌ ENGINE OFFLINE - No connection available", ""
-            
+        """Terminates the currently running sandbox."""
+        if not self.is_connected or not self.sandbox_created:
+            return "❌ No active sandbox to terminate.", ""
+        
         try:
             result = self.client.predict(api_name="/kill_sandbox")
             self.sandbox_created = False
             self.creation_time = None
-            self.stop_auto_refresh = True
-            return f"🛑 SANDBOX TERMINATED - Engine: {self.current_engine}\n\nENGINE RESPONSE:\n{result}", "TERMINATED"
+            self.stop_monitor.set()
+            return f"🛑 Sandbox terminated on {self.current_engine}.\n\nResponse: {result}", "TERMINATED"
         except Exception as e:
-            return f"❌ TERMINATION FAILED - {str(e)}", ""
-    
+            return f"❌ Termination failed: {str(e)}", self.get_status()
+
     def get_status(self):
-        """Get current sandbox status"""
+        """Gets the current status of the sandbox."""
         if not self.is_connected:
             return "OFFLINE"
-            
-        if self.is_sandbox_expired():
+        if not self.sandbox_created:
+             return "IDLE"
+        if self.is_expired():
             return "EXPIRED"
             
         try:
             result = self.client.predict(api_name="/status_sandbox")
-            remaining = self.get_remaining_time()
-            if "running" in str(result).lower():
-                return f"RUNNING | {remaining}"
+            remaining = self.get_remaining_time_str()
+            status_text = str(result).lower()
+            if "running" in status_text:
+                return f"RUNNING ({remaining}) - {result}"
             else:
-                return f"IDLE | {remaining}"
+                return f"IDLE ({remaining}) - {result}"
         except Exception as e:
-            return f"ERROR | {str(e)}"
-    
-    def start_time_monitor(self):
-        """Start monitoring thread for time limits"""
+            return f"ERROR - {str(e)}"
+
+    def start_monitor_thread(self):
+        """Starts a background thread to monitor session expiration."""
+        self.stop_monitor.clear()
         def monitor():
-            while not self.stop_auto_refresh and self.sandbox_created:
-                if self.is_sandbox_expired():
-                    try:
-                        self.kill_sandbox()
-                    except:
-                        pass
+            while not self.stop_monitor.is_set() and self.sandbox_created:
+                if self.is_expired():
+                    print("Sandbox expired. Auto-terminating...")
+                    self.kill_sandbox()
                     break
-                time.sleep(60)  # Check every minute
-                
-        self.auto_refresh_thread = threading.Thread(target=monitor, daemon=True)
-        self.auto_refresh_thread.start()
-
-# Initialize sandbox manager
-sandbox = SandboxManager()
-
-# Sample files
-SAMPLE_MAIN_PY = """#!/usr/bin/env python3
-# SANDBOX COMPUTE PLATFORM - ENTERPRISE APPLICATION
-# Production-ready Python service with monitoring capabilities
-
-import os
-import sys
-import time
-import logging
-from datetime import datetime, timezone
-import json
-import socket
-import psutil
-
-# Configure enterprise logging
-logging.basicConfig(
-    level=logging.INFO,
-    format='[%(asctime)s] %(levelname)s - %(message)s',
-    handlers=[
-        logging.StreamHandler(sys.stdout),
-        logging.FileHandler('/tmp/application.log')
-    ]
-)
-
-logger = logging.getLogger(__name__)
-
-class SandboxApplication:
-    def __init__(self):
-        self.start_time = datetime.now(timezone.utc)
-        self.hostname = socket.gethostname()
-        self.pid = os.getpid()
-        
-    def get_system_info(self):
-        \"\"\"Collect system metrics\"\"\"
-        return {
-            'hostname': self.hostname,
-            'pid': self.pid,
-            'uptime': str(datetime.now(timezone.utc) - self.start_time),
-            'cpu_percent': psutil.cpu_percent(),
-            'memory_mb': psutil.virtual_memory().used // 1024 // 1024,
-            'disk_usage': psutil.disk_usage('/').percent
-        }
-    
-    def run(self):
-        \"\"\"Main application loop\"\"\"
-        logger.info(f"🚀 SANDBOX APPLICATION INITIALIZED")
-        logger.info(f"📍 HOSTNAME: {self.hostname} | PID: {self.pid}")
-        logger.info(f"⏰ START TIME: {self.start_time}")
-        logger.info("="*60)
-        
-        cycle = 0
-        while True:
-            try:
-                cycle += 1
-                current_time = datetime.now(timezone.utc)
-                
-                # Log system status every 10 cycles (5 minutes)
-                if cycle % 10 == 0:
-                    metrics = self.get_system_info()
-                    logger.info(f"📊 METRICS | CPU: {metrics['cpu_percent']:.1f}% | "
-                              f"RAM: {metrics['memory_mb']}MB | "
-                              f"UPTIME: {metrics['uptime']}")
-                
-                # Regular heartbeat
-                logger.info(f"⚡ CYCLE {cycle:04d} | {current_time.strftime('%H:%M:%S UTC')} | STATUS: OPERATIONAL")
-                
-                # Application logic here
-                time.sleep(30)  # 30-second intervals
-                
-            except KeyboardInterrupt:
-                logger.info("🛑 SHUTDOWN SIGNAL RECEIVED")
-                break
-            except Exception as e:
-                logger.error(f"❌ ERROR: {str(e)}")
-                time.sleep(5)
+                time.sleep(30)
         
-        logger.info("🏁 APPLICATION TERMINATED")
-
-def main():
-    app = SandboxApplication()
-    app.run()
-
-if __name__ == "__main__":
-    main()
-"""
-
-SAMPLE_REQUIREMENTS_TXT = """# SANDBOX COMPUTE PLATFORM - PRODUCTION DEPENDENCIES
-# Enterprise-grade package specifications with version pinning
-
-# System monitoring and utilities
-psutil==5.9.6
-requests==2.31.0
-
-# Web framework and APIs  
-flask==3.0.0
-flask-cors==4.0.0
-gunicorn==21.2.0
-
-# Data processing and analysis
-pandas==2.1.3
-numpy==1.25.2
-scipy==1.11.4
-
-# Database connectivity
-sqlalchemy==2.0.23
-pymongo==4.6.0
-
-# Caching and performance
-redis==5.0.1
-celery==5.3.4
-
-# Security and authentication
-cryptography==41.0.8
-pyjwt==2.8.0
+        self.monitor_thread = threading.Thread(target=monitor, daemon=True)
+        self.monitor_thread.start()
 
-# Configuration and environment
-python-dotenv==1.0.0
-pydantic==2.5.0
-
-# Logging and monitoring
-structlog==23.2.0
-prometheus-client==0.19.0
-
-# Development and testing
-pytest==7.4.3
-black==23.11.0
-flake8==6.1.0
-"""
-
-# Industrial-grade full-screen CSS
-industrial_css = """
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800;900&display=swap');
-
-/* CSS Variables for Industrial Theme */
-:root {
-    --primary: #0ea5e9;
-    --primary-dark: #0284c7;
-    --primary-darker: #0369a1;
-    --secondary: #64748b;
-    --accent: #06b6d4;
-    --success: #059669;
-    --warning: #d97706;
-    --danger: #dc2626;
-    --info: #2563eb;
-    
-    --bg-primary: #0f172a;
-    --bg-secondary: #1e293b;
-    --bg-tertiary: #334155;
-    --bg-surface: #475569;
-    --bg-elevated: #64748b;
-    
-    --text-primary: #f8fafc;
-    --text-secondary: #e2e8f0;
-    --text-muted: #94a3b8;
-    --text-inverse: #0f172a;
-    
-    --border: #334155;
-    --border-light: #475569;
-    --border-accent: #0ea5e9;
-    
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
-    
-    --glow-primary: 0 0 20px rgba(14, 165, 233, 0.3);
-    --glow-success: 0 0 20px rgba(5, 150, 105, 0.3);
-    --glow-danger: 0 0 20px rgba(220, 38, 38, 0.3);
-    --glow-warning: 0 0 20px rgba(217, 119, 6, 0.3);
-}
-
-/* Global Reset and Base Styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html, body {
-    height: 100vh !important;
-    width: 100vw !important;
-    overflow-x: hidden !important;
-    background: var(--bg-primary) !important;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
-    color: var(--text-primary) !important;
-    line-height: 1.5 !important;
-}
+# --- Gradio UI & Logic ---
 
-/* Gradio Container - Full Screen */
-.gradio-container {
-    max-width: 100vw !important;
-    width: 100vw !important;
-    min-height: 100vh !important;
-    height: 100vh !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    background: linear-gradient(135deg, var(--bg-primary) 0%, #0c1420 50%, var(--bg-primary) 100%) !important;
-    display: flex !important;
-    flex-direction: column !important;
-    overflow-y: auto !important;
-}
-
-/* Main Content Wrapper */
-.main-content {
-    flex: 1 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* Industrial Header */
-.industrial-header {
-    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
-    border-bottom: 3px solid var(--primary) !important;
-    padding: 1.5rem 2rem !important;
-    box-shadow: var(--shadow-lg) !important;
-    position: relative !important;
-    overflow: hidden !important;
-}
-
-.industrial-header::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: repeating-linear-gradient(
-        90deg,
-        transparent,
-        transparent 2px,
-        rgba(14, 165, 233, 0.1) 2px,
-        rgba(14, 165, 233, 0.1) 4px
-    );
-    pointer-events: none;
-}
-
-.header-content {
-    position: relative !important;
-    z-index: 2 !important;
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-}
-
-.platform-title {
-    font-size: 2.5rem !important;
-    font-weight: 900 !important;
-    color: var(--text-primary) !important;
-    text-shadow: 0 0 20px var(--primary) !important;
-    letter-spacing: -0.025em !important;
-    margin: 0 !important;
-}
-
-.platform-subtitle {
-    font-size: 1rem !important;
-    color: var(--text-muted) !important;
-    margin-top: 0.5rem !important;
-    font-weight: 400 !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-}
-
-.system-status {
-    text-align: right !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.875rem !important;
-}
-
-.status-indicator {
-    display: flex !important;
-    align-items: center !important;
-    gap: 0.5rem !important;
-    margin-bottom: 0.25rem !important;
-    color: var(--text-secondary) !important;
-}
-
-.status-dot {
-    width: 8px !important;
-    height: 8px !important;
-    background: var(--success) !important;
-    border-radius: 50% !important;
-    box-shadow: var(--glow-success) !important;
-    animation: pulse-dot 2s ease-in-out infinite !important;
-}
-
-/* Navigation Breadcrumb */
-.nav-breadcrumb {
-    background: var(--bg-secondary) !important;
-    border-bottom: 1px solid var(--border) !important;
-    padding: 0.75rem 2rem !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.875rem !important;
-    color: var(--text-muted) !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-}
-
-/* Industrial Cards */
-.industrial-card {
-    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 0.75rem !important;
-    margin: 1rem !important;
-    overflow: hidden !important;
-    box-shadow: var(--shadow-lg) !important;
-    backdrop-filter: blur(10px) !important;
-    position: relative !important;
-}
-
-.industrial-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
-    opacity: 0.8;
-}
-
-.card-header {
-    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-surface)) !important;
-    border-bottom: 1px solid var(--border-light) !important;
-    padding: 1.25rem 2rem !important;
-    font-weight: 700 !important;
-    font-size: 1.1rem !important;
-    color: var(--text-primary) !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.025em !important;
-    display: flex !important;
-    align-items: center !important;
-    gap: 0.75rem !important;
-}
-
-.card-content {
-    padding: 2rem !important;
-}
-
-/* Industrial Buttons */
-.btn-industrial {
-    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--primary-darker) !important;
-    border-radius: 0.5rem !important;
-    padding: 1rem 2rem !important;
-    font-weight: 600 !important;
-    font-size: 0.875rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.025em !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: var(--shadow-md) !important;
-    position: relative !important;
-    overflow: hidden !important;
-}
-
-.btn-industrial:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: var(--shadow-xl), var(--glow-primary) !important;
-    background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker)) !important;
-}
-
-.btn-industrial:active {
-    transform: translateY(0) !important;
-}
-
-.btn-secondary {
-    background: linear-gradient(135deg, var(--bg-surface), var(--bg-elevated)) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--border-light) !important;
-}
-
-.btn-secondary:hover {
-    background: linear-gradient(135deg, var(--bg-elevated), var(--secondary)) !important;
-    box-shadow: var(--shadow-lg) !important;
-}
-
-.btn-danger {
-    background: linear-gradient(135deg, var(--danger), #b91c1c) !important;
-    border: 1px solid #7f1d1d !important;
-}
-
-.btn-danger:hover {
-    box-shadow: var(--shadow-xl), var(--glow-danger) !important;
-}
-
-/* Status Displays */
-.status-display {
-    background: var(--bg-tertiary) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 0.5rem !important;
-    padding: 1rem 1.5rem !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-weight: 500 !important;
-    text-align: center !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-}
-
-.status-online {
-    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2), rgba(5, 150, 105, 0.1)) !important;
-    border-color: var(--success) !important;
-    color: var(--success) !important;
-    box-shadow: var(--glow-success) !important;
-}
-
-.status-offline {
-    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.1)) !important;
-    border-color: var(--danger) !important;
-    color: var(--danger) !important;
-    box-shadow: var(--glow-danger) !important;
-}
-
-.status-warning {
-    background: linear-gradient(135deg, rgba(217, 119, 6, 0.2), rgba(217, 119, 6, 0.1)) !important;
-    border-color: var(--warning) !important;
-    color: var(--warning) !important;
-    box-shadow: var(--glow-warning) !important;
-}
-
-/* Code Editors */
-.code-editor-industrial {
-    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
-    background: linear-gradient(135deg, #0c1420 0%, #0f172a 100%) !important;
-    color: var(--text-secondary) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 0.75rem !important;
-    box-shadow: inset var(--shadow-lg) !important;
-    line-height: 1.6 !important;
-}
-
-.requirements-editor {
-    font-family: 'JetBrains Mono', monospace !important;
-    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
-    color: #e5e5e5 !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 0.75rem !important;
-}
-
-/* Terminal Output */
-.terminal-industrial {
-    font-family: 'JetBrains Mono', monospace !important;
-    background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%) !important;
-    color: #00ff88 !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 0.75rem !important;
-    padding: 1.5rem !important;
-    box-shadow: inset var(--shadow-lg) !important;
-    line-height: 1.4 !important;
-    font-size: 0.875rem !important;
-    white-space: pre-wrap !important;
-    overflow-y: auto !important;
-}
-
-/* Form Labels */
-.form-label-industrial {
-    font-weight: 700 !important;
-    color: var(--text-primary) !important;
-    font-size: 0.875rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-    margin-bottom: 0.75rem !important;
-    display: block !important;
-    border-left: 3px solid var(--primary) !important;
-    padding-left: 0.75rem !important;
-}
-
-/* Monitoring Panel */
-.monitor-panel {
-    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
-    border: 1px solid var(--border-accent) !important;
-    border-radius: 0.75rem !important;
-    box-shadow: var(--shadow-lg), var(--glow-primary) !important;
-    position: relative !important;
-    overflow: hidden !important;
-}
-
-.monitor-panel::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
-    animation: scan-line 3s ease-in-out infinite;
-}
-
-/* System Metrics */
-.metric-grid {
-    display: grid !important;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
-    gap: 1rem !important;
-    margin-bottom: 1.5rem !important;
-}
-
-.metric-card {
-    background: rgba(15, 23, 42, 0.8) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 0.5rem !important;
-    padding: 1rem !important;
-    text-align: center !important;
-}
-
-.metric-value {
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 1.5rem !important;
-    font-weight: 700 !important;
-    color: var(--primary) !important;
-    text-shadow: var(--glow-primary) !important;
-}
-
-.metric-label {
-    font-size: 0.75rem !important;
-    color: var(--text-muted) !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-    margin-top: 0.25rem !important;
-}
-
-/* Layouts */
-.main-grid {
-    display: grid !important;
-    grid-template-columns: 1fr 350px !important;
-    gap: 0 !important;
-    height: calc(100vh - 140px) !important;
-    overflow: hidden !important;
-}
-
-.content-area {
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 0 !important;
-    overflow-y: auto !important;
-}
-
-.sidebar {
-    background: var(--bg-secondary) !important;
-    border-left: 1px solid var(--border) !important;
-    overflow-y: auto !important;
-}
-
-/* Animations */
-@keyframes pulse-dot {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(1.2); }
-}
-
-@keyframes scan-line {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100vw); }
-}
-
-@keyframes glow-pulse {
-    0%, 100% { box-shadow: var(--shadow-lg); }
-    50% { box-shadow: var(--shadow-lg), var(--glow-primary); }
-}
-
-/* Tab Styling */
-.tab-nav {
-    background: var(--bg-tertiary) !important;
-    border-bottom: 1px solid var(--border) !important;
-}
-
-.tab-nav button {
-    background: transparent !important;
-    color: var(--text-muted) !important;
-    border: none !important;
-    padding: 1rem 2rem !important;
-    font-weight: 500 !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.025em !important;
-    transition: all 0.3s ease !important;
-}
-
-.tab-nav button.selected {
-    background: var(--primary) !important;
-    color: var(--text-primary) !important;
-    box-shadow: var(--glow-primary) !important;
-}
-
-/* Warning Boxes */
-.warning-box {
-    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(217, 119, 6, 0.05)) !important;
-    border: 1px solid var(--warning) !important;
-    border-radius: 0.5rem !important;
-    padding: 1.5rem !important;
-    margin: 1rem 0 !important;
-    color: var(--text-primary) !important;
-}
-
-.warning-title {
-    font-weight: 700 !important;
-    color: var(--warning) !important;
-    font-size: 0.875rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !important;
-    margin-bottom: 0.5rem !important;
-}
-
-/* Responsive Design */
-@media (max-width: 1200px) {
-    .main-grid {
-        grid-template-columns: 1fr !important;
-    }
-    
-    .sidebar {
-        border-left: none !important;
-        border-top: 1px solid var(--border) !important;
-    }
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-    width: 8px !important;
-    height: 8px !important;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-primary) !important;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--primary) !important;
-    border-radius: 4px !important;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--primary-dark) !important;
-}
-
-/* Loading States */
-.loading {
-    animation: glow-pulse 2s ease-in-out infinite !important;
-}
-
-/* Focus States */
-.btn-industrial:focus,
-.status-display:focus,
-input:focus,
-textarea:focus {
-    outline: 2px solid var(--primary) !important;
-    outline-offset: 2px !important;
-}
-"""
-
-def auto_refresh_status():
-    return sandbox.get_status()
-
-def auto_refresh_logs():
-    return sandbox.fetch_logs()
+# Initialize manager
+sandbox = SandboxManager()
 
+# UI helper functions
 def load_sample_files():
     return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
 
 def get_session_info():
     if sandbox.sandbox_created:
-        remaining = sandbox.get_remaining_time()
-        created = sandbox.creation_time.strftime("%H:%M:%S") if sandbox.creation_time else "N/A"
-        return f"SESSION ACTIVE | CREATED: {created} | REMAINING: {remaining}"
-    return "NO ACTIVE SESSION"
-
-def get_system_metrics():
-    return {
-        'timestamp': datetime.now().strftime("%H:%M:%S"),
-        'engine': sandbox.current_engine or "NONE",
-        'status': sandbox.get_status(),
-        'connection': "ONLINE" if sandbox.is_connected else "OFFLINE"
-    }
+        remaining = sandbox.get_remaining_time_str()
+        created_at = sandbox.creation_time.strftime("%H:%M:%S")
+        return f"Created: {created_at} | Remaining: {remaining}"
+    return "No active sandbox"
+
+# Modern CSS for a professional look
+PROFESSIONAL_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+:root {
+    --primary-500: #3b82f6; --primary-600: #2563eb;
+    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
+    --red-500: #ef4444; --red-600: #dc2626;
+    --green-500: #22c55e;
+    --amber-500: #f59e0b;
+    --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+body, .gradio-container { background-color: var(--gray-50); font-family: var(--font-sans) !important; }
+.card { background-color: white; border-radius: 0.75rem; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem !important; }
+.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--gray-200); font-weight: 600; font-size: 1.125rem; color: var(--gray-800); }
+.card-content { padding: 1.5rem; }
+.form-label { font-weight: 500; color: var(--gray-700); margin-bottom: 0.5rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; display: block; }
+.btn { border-radius: 0.5rem; font-weight: 500; transition: all 0.2s ease; }
+.btn-primary { background-color: var(--primary-500); color: white; border: none; }
+.btn-primary:hover { background-color: var(--primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
+.btn-secondary { background-color: white; color: var(--gray-700); border: 1px solid var(--gray-200); }
+.btn-secondary:hover { background-color: var(--gray-50); border-color: var(--gray-300); }
+.btn-danger { background-color: var(--red-500); color: white; border: none; }
+.btn-danger:hover { background-color: var(--red-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
+.status-badge { text-align: center; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500; font-size: 0.875rem; border: 1px solid transparent; }
+.status-offline { background-color: #fee2e2; color: #b91c1c; border-color: #fecaca; }
+.status-online { background-color: #dcfce7; color: #166534; border-color: #bbf7d0; }
+.status-idle { background-color: #feefc3; color: #b45309; border-color: #fde68a; }
+.status-running { animation: pulse 2s infinite; background-color: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
+@keyframes pulse { 50% { opacity: 0.7; } }
+.code-editor, .terminal { font-family: var(--font-mono) !important; background-color: var(--gray-900) !important; color: var(--gray-100) !important; border-radius: 0.5rem !important; border: 1px solid var(--gray-700) !important; }
+.header { text-align: center; padding: 2rem 1rem; }
+.header-title { font-size: 2.25rem; font-weight: 700; color: var(--gray-800); }
+.header-subtitle { font-size: 1rem; color: var(--gray-700); max-width: 600px; margin: 0.5rem auto 0; }
+"""
 
-# Build industrial-grade full-screen interface
-with gr.Blocks(css=industrial_css, title="SANDBOX COMPUTE PLATFORM") as demo:
-    
-    # Industrial Header
+with gr.Blocks(css=PROFESSIONAL_CSS, title="Sandbox Compute Platform") as demo:
+    # --- Header ---
     gr.HTML("""
-    <div class="industrial-header">
-        <div class="header-content">
-            <div>
-                <div class="platform-title">⚡ SANDBOX COMPUTE PLATFORM</div>
-                <div class="platform-subtitle">ENTERPRISE-GRADE CLOUD COMPUTING INFRASTRUCTURE</div>
-            </div>
-            <div class="system-status">
-                <div class="status-indicator">
-                    <div class="status-dot"></div>
-                    <span>SYSTEM ONLINE</span>
-                </div>
-                <div class="status-indicator">
-                    <span>VERSION 2.1.0</span>
-                </div>
-                <div class="status-indicator">
-                    <span>SECURITY LEVEL: MAXIMUM</span>
-                </div>
-            </div>
-        </div>
+    <div class="header">
+        <h1 class="header-title">🚀 Sandbox Compute Platform</h1>
+        <p class="header-subtitle">An enterprise-grade cloud development environment with secure, time-limited sessions for rapid prototyping and execution.</p>
     </div>
     """)
-    
-    # Navigation Breadcrumb
-    gr.HTML("""
-    <div class="nav-breadcrumb">
-        🏠 CONTROL CENTER → ⚡ COMPUTE SERVICES → 🛠️ SANDBOX MANAGEMENT CONSOLE → 🚀 DEPLOYMENT INTERFACE
-    </div>
-    """)
-
-    # Main Grid Layout
-    with gr.Row(elem_classes=["main-grid"]):
-        
-        # Main Content Area
-        with gr.Column(elem_classes=["content-area"], scale=3):
-            
-            # Session Status Bar
-            with gr.Group(elem_classes=["industrial-card"]):
-                gr.HTML('<div class="card-header">📊 SESSION CONTROL CENTER</div>')
-                with gr.Group(elem_classes=["card-content"]):
-                    session_info = gr.Textbox(
-                        value=get_session_info(),
-                        label="",
-                        interactive=False,
-                        elem_classes=["status-display"],
-                        show_label=False
-                    )
-                    
-                    with gr.Row():
-                        with gr.Column():
-                            gr.HTML('<div class="form-label-industrial">⚡ ENGINE STATUS</div>')
-                            current_engine_display = gr.Textbox(
-                                value="NO ENGINE SELECTED", 
-                                interactive=False,
-                                elem_classes=["status-display", "status-offline"],
-                                show_label=False
-                            )
-                        
-                        with gr.Column():
-                            gr.HTML('<div class="form-label-industrial">🔗 CONNECTION STATUS</div>')
-                            connection_status = gr.Textbox(
-                                value="DISCONNECTED", 
-                                interactive=False,
-                                elem_classes=["status-display", "status-offline"],
-                                show_label=False
-                            )
 
-            # Infrastructure Management
-            with gr.Group(elem_classes=["industrial-card"]):
-                gr.HTML('<div class="card-header">🔧 INFRASTRUCTURE MANAGEMENT</div>')
-                with gr.Group(elem_classes=["card-content"]):
+    with gr.Row():
+        # --- Left Column: Configuration & Actions ---
+        with gr.Column(scale=3):
+            # Connection Card
+            with gr.Group(elem_classes="card"):
+                gr.HTML('<div class="card-header">1. Connection</div>')
+                with gr.Box(elem_classes="card-content"):
                     with gr.Row():
-                        connect_btn = gr.Button("🚀 INITIALIZE ENGINE", elem_classes=["btn-industrial"])
-                        load_samples_btn = gr.Button("📋 LOAD TEMPLATES", elem_classes=["btn-secondary"])
-                    
-                    # Warning Box
-                    gr.HTML("""
-                    <div class="warning-box">
-                        <div class="warning-title">⚠️ SESSION RESTRICTIONS</div>
-                        <strong>• SINGLE SANDBOX LIMIT:</strong> One sandbox per browser session<br>
-                        <strong>• TIME LIMIT:</strong> 2 hours maximum runtime<br>
-                        <strong>• AUTO-TERMINATION:</strong> Sandbox terminates when time expires<br>
-                        <strong>• NO PERSISTENCE:</strong> All data is lost after termination
-                    </div>
-                    """)
-
-            # Development Environment
-            with gr.Group(elem_classes=["industrial-card"]):
-                gr.HTML('<div class="card-header">💻 DEVELOPMENT ENVIRONMENT</div>')
-                with gr.Group(elem_classes=["card-content"]):
-                    
-                    with gr.Tab("📝 MAIN.PY - APPLICATION SOURCE"):
-                        gr.HTML('<div class="form-label-industrial">🐍 PYTHON APPLICATION CODE</div>')
-                        main_py_editor = gr.Code(
-                            value=SAMPLE_MAIN_PY,
-                            language="python",
-                            lines=20,
-                            elem_classes=["code-editor-industrial"],
-                            show_label=False
-                        )
-                    
-                    with gr.Tab("📦 REQUIREMENTS.TXT - DEPENDENCIES"):
-                        gr.HTML('<div class="form-label-industrial">📋 PACKAGE SPECIFICATIONS</div>')
-                        requirements_editor = gr.Textbox(
-                            value=SAMPLE_REQUIREMENTS_TXT,
-                            lines=20,
-                            elem_classes=["requirements-editor"],
-                            show_label=False,
-                            max_lines=25
-                        )
-                    
-                    # Deployment Controls
-                    gr.HTML('<hr style="margin: 2rem 0; border: 1px solid var(--border); opacity: 0.5;">')
-                    
+                        connect_btn = gr.Button("🔗 Connect to Backend", elem_classes=["btn", "btn-primary"])
+                        load_samples_btn = gr.Button("📄 Load Templates", elem_classes=["btn", "btn-secondary"])
+                    connection_status = gr.Textbox(value="DISCONNECTED", label="Connection Status", interactive=False, elem_classes=["status-badge", "status-offline"])
+
+            # Environment Card
+            with gr.Group(elem_classes="card"):
+                gr.HTML('<div class="card-header">2. Environment Setup</div>')
+                with gr.Box(elem_classes="card-content"):
+                    with gr.Tabs():
+                        with gr.TabItem("main.py"):
+                            main_py_editor = gr.Code(value=SAMPLE_MAIN_PY, language="python", label="Application Source Code", lines=15, elem_classes="code-editor")
+                        with gr.TabItem("requirements.txt"):
+                            requirements_editor = gr.Code(value=SAMPLE_REQUIREMENTS_TXT, language="text", label="Dependencies", lines=15, elem_classes="code-editor")
+            
+            # Deployment Card
+            with gr.Group(elem_classes="card"):
+                gr.HTML('<div class="card-header">3. Deployment</div>')
+                with gr.Box(elem_classes="card-content"):
                     with gr.Row():
-                        launch_btn = gr.Button(
-                            "🚀 DEPLOY SANDBOX", 
-                            elem_classes=["btn-industrial"],
-                            size="lg"
-                        )
-                        kill_btn = gr.Button(
-                            "🛑 TERMINATE SANDBOX", 
-                            elem_classes=["btn-danger"],
-                            size="lg"
-                        )
-                    
-                    gr.HTML('<div class="form-label-industrial">📊 DEPLOYMENT OUTPUT</div>')
-                    launch_output = gr.Textbox(
-                        lines=8,
-                        interactive=False,
-                        placeholder="[SYSTEM] Deployment logs and status information will appear here...",
-                        elem_classes=["terminal-industrial"],
-                        show_label=False
-                    )
-
-            # System Logs
-            with gr.Group(elem_classes=["industrial-card"]):
-                gr.HTML('<div class="card-header">📋 SYSTEM LOGS & MONITORING</div>')
-                with gr.Group(elem_classes=["card-content"]):
+                        launch_btn = gr.Button("🚀 Deploy Sandbox", elem_classes=["btn", "btn-primary"], scale=2)
+                        kill_btn = gr.Button("🛑 Terminate", elem_classes=["btn", "btn-danger"])
+                    launch_output = gr.Textbox(label="Deployment Output", lines=4, interactive=False, placeholder="Deployment logs will appear here...", elem_classes="terminal")
+
+        # --- Right Column: Monitoring ---
+        with gr.Column(scale=2):
+            # Status Card
+            with gr.Group(elem_classes="card"):
+                gr.HTML('<div class="card-header">System Monitor</div>')
+                with gr.Box(elem_classes="card-content"):
+                    gr.HTML('<p class="form-label">Instance Status</p>')
+                    status_display = gr.Textbox(value="OFFLINE", interactive=False, show_label=False, elem_classes=["status-badge", "status-offline"])
                     
-                    with gr.Row():
-                        fetch_logs_btn = gr.Button("📋 FETCH LOGS", elem_classes=["btn-secondary"])
-                        auto_refresh_btn = gr.Button("🔄 AUTO REFRESH", elem_classes=["btn-secondary"])
-                        clear_logs_btn = gr.Button("🗑️ CLEAR LOGS", elem_classes=["btn-secondary"])
+                    gr.HTML('<p class="form-label" style="margin-top: 1.5rem;">Active Engine</p>')
+                    current_engine_display = gr.Textbox(value="None", interactive=False, show_label=False)
                     
-                    gr.HTML('<div class="form-label-industrial">📊 RUNTIME LOGS</div>')
-                    logs_display = gr.Textbox(
-                        lines=15,
-                        interactive=False,
-                        elem_classes=["terminal-industrial"],
-                        placeholder="[SYSTEM] Application logs and runtime information will appear here...",
-                        show_label=False
-                    )
-
-        # Monitoring Sidebar
-        with gr.Column(elem_classes=["sidebar"], scale=1):
+                    gr.HTML('<p class="form-label" style="margin-top: 1.5rem;">Session Info</p>')
+                    session_info = gr.Textbox(value="No active sandbox", interactive=False, show_label=False)
             
-            # System Monitor
-            with gr.Group(elem_classes=["monitor-panel"]):
-                gr.HTML('<div class="card-header">📊 SYSTEM MONITOR</div>')
-                with gr.Group(elem_classes=["card-content"]):
-                    
-                    gr.HTML('<div class="form-label-industrial">🔍 INSTANCE STATUS</div>')
-                    status_display = gr.Textbox(
-                        value="OFFLINE",
-                        interactive=False,
-                        elem_classes=["status-display", "status-offline"],
-                        show_label=False
-                    )
-                    
-                    status_refresh_btn = gr.Button("🔄 REFRESH STATUS", elem_classes=["btn-secondary"], size="sm")
-                    
-                    # System Metrics
-                    gr.HTML('<div class="form-label-industrial">📈 SYSTEM METRICS</div>')
-                    gr.HTML("""
-                    <div class="metric-grid">
-                        <div class="metric-card">
-                            <div class="metric-value" id="uptime">00:00:00</div>
-                            <div class="metric-label">UPTIME</div>
-                        </div>
-                        <div class="metric-card">
-                            <div class="metric-value" id="sessions">1</div>
-                            <div class="metric-label">SESSIONS</div>
-                        </div>
-                        <div class="metric-card">
-                            <div class="metric-value" id="cpu">0%</div>
-                            <div class="metric-label">CPU USAGE</div>
-                        </div>
-                        <div class="metric-card">
-                            <div class="metric-value" id="memory">0MB</div>
-                            <div class="metric-label">MEMORY</div>
-                        </div>
-                    </div>
-                    """)
-                    
-                    # Time Remaining
-                    gr.HTML('<div class="form-label-industrial">⏱️ SESSION TIMER</div>')
-                    time_remaining = gr.Textbox(
-                        value="NO ACTIVE SESSION",
-                        interactive=False,
-                        elem_classes=["status-display"],
-                        show_label=False
-                    )
-                    
-                    # Auto-refresh Controls
-                    gr.HTML('<div class="form-label-industrial">🔄 AUTO-REFRESH</div>')
-                    with gr.Column():
-                        auto_refresh_status_cb = gr.Checkbox(
-                            label="Auto-refresh status (5s interval)", 
-                            value=False
-                        )
-                        auto_refresh_logs_cb = gr.Checkbox(
-                            label="Auto-refresh logs (10s interval)", 
-                            value=False
-                        )
-
-            # Security & Compliance
-            with gr.Group(elem_classes=["industrial-card"]):
-                gr.HTML('<div class="card-header">🔒 SECURITY & COMPLIANCE</div>')
-                with gr.Group(elem_classes=["card-content"]):
-                    gr.HTML("""
-                    <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-muted);">
-                        <div style="margin-bottom: 0.5rem;"><strong>🔐 ENCRYPTION:</strong> AES-256</div>
-                        <div style="margin-bottom: 0.5rem;"><strong>🛡️ ISOLATION:</strong> CONTAINER</div>
-                        <div style="margin-bottom: 0.5rem;"><strong>🚫 NETWORK:</strong> RESTRICTED</div>
-                        <div style="margin-bottom: 0.5rem;"><strong>📊 MONITORING:</strong> ACTIVE</div>
-                        <div style="margin-bottom: 0.5rem;"><strong>🗂️ LOGGING:</strong> ENABLED</div>
-                        <div><strong>⏰ RETENTION:</strong> 2 HOURS</div>
-                    </div>
-                    """)
-
-            # Resource Usage
-            with gr.Group(elem_classes=["industrial-card"]):
-                gr.HTML('<div class="card-header">📈 RESOURCE ALLOCATION</div>')
-                with gr.Group(elem_classes=["card-content"]):
-                    gr.HTML("""
-                    <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;">
-                        <div style="margin-bottom: 1rem;">
-                            <div style="color: var(--text-muted); margin-bottom: 0.25rem;">CPU ALLOCATION</div>
-                            <div style="background: var(--bg-tertiary); height: 8px; border-radius: 4px; overflow: hidden;">
-                                <div style="background: var(--primary); height: 100%; width: 25%; transition: width 0.3s;"></div>
-                            </div>
-                            <div style="color: var(--text-primary); font-size: 0.75rem; margin-top: 0.25rem;">1 vCPU / 4 vCPU MAX</div>
-                        </div>
-                        
-                        <div style="margin-bottom: 1rem;">
-                            <div style="color: var(--text-muted); margin-bottom: 0.25rem;">MEMORY ALLOCATION</div>
-                            <div style="background: var(--bg-tertiary); height: 8px; border-radius: 4px; overflow: hidden;">
-                                <div style="background: var(--success); height: 100%; width: 40%; transition: width 0.3s;"></div>
-                            </div>
-                            <div style="color: var(--text-primary); font-size: 0.75rem; margin-top: 0.25rem;">2GB / 8GB MAX</div>
-                        </div>
-                        
-                        <div>
-                            <div style="color: var(--text-muted); margin-bottom: 0.25rem;">STORAGE ALLOCATION</div>
-                            <div style="background: var(--bg-tertiary); height: 8px; border-radius: 4px; overflow: hidden;">
-                                <div style="background: var(--warning); height: 100%; width: 15%; transition: width 0.3s;"></div>
-                            </div>
-                            <div style="color: var(--text-primary); font-size: 0.75rem; margin-top: 0.25rem;">5GB / 20GB MAX</div>
-                        </div>
-                    </div>
-                    """)
-
-    # Event Handlers
-    connect_btn.click(
-        fn=sandbox.connect,
-        outputs=[connection_status, current_engine_display]
-    )
+            # Logs Card
+            with gr.Group(elem_classes="card"):
+                gr.HTML('<div class="card-header">Application Logs</div>')
+                with gr.Box(elem_classes="card-content"):
+                    fetch_logs_btn = gr.Button("🔄 Refresh Logs", elem_classes=["btn", "btn-secondary"])
+                    logs_display = gr.Textbox(lines=18, interactive=False, placeholder="[SYSTEM] Application logs will appear here...", show_label=False, elem_classes="terminal")
+
+    # --- Event Handlers & Logic ---
     
-    load_samples_btn.click(
-        fn=load_sample_files,
-        outputs=[main_py_editor, requirements_editor]
-    )
+    # Connection Logic
+    def handle_connect():
+        status_msg, engine_name = sandbox.connect()
+        if sandbox.is_connected:
+            return {
+                connection_status: gr.update(value=status_msg, elem_classes=["status-badge", "status-online"]),
+                current_engine_display: gr.update(value=engine_name)
+            }
+        else:
+            return {
+                connection_status: gr.update(value=status_msg, elem_classes=["status-badge", "status-offline"]),
+                current_engine_display: gr.update(value=engine_name)
+            }
+            
+    connect_btn.click(fn=handle_connect, outputs=[connection_status, current_engine_display])
     
+    # Sample Loading
+    load_samples_btn.click(fn=load_sample_files, outputs=[main_py_editor, requirements_editor])
+
+    # Launch Logic
+    def handle_launch(main_py, reqs_txt):
+        output, status = sandbox.launch_sandbox(main_py, reqs_txt)
+        return output, status, get_session_info()
+        
     launch_btn.click(
-        fn=sandbox.launch_sandbox,
+        fn=handle_launch,
         inputs=[main_py_editor, requirements_editor],
-        outputs=[launch_output, status_display]
-    )
-    
-    kill_btn.click(
-        fn=sandbox.kill_sandbox,
-        outputs=[launch_output, status_display]
-    )
-    
-    fetch_logs_btn.click(
-        fn=sandbox.fetch_logs,
-        outputs=logs_display
-    )
-    
-    status_refresh_btn.click(
-        fn=auto_refresh_status,
-        outputs=status_display
-    )
-    
-    # Clear logs function
-    def clear_logs():
-        return "[SYSTEM] Logs cleared by user request."
-    
-    clear_logs_btn.click(
-        fn=clear_logs,
-        outputs=logs_display
+        outputs=[launch_output, status_display, session_info]
     )
 
-    # Update session info periodically
-    def update_session_info():
-        return get_session_info()
-    
-    # Auto-refresh timer updates
-    def update_time_remaining():
-        if sandbox.sandbox_created:
-            return sandbox.get_remaining_time()
-        return "NO ACTIVE SESSION"
+    # Kill Logic
+    def handle_kill():
+        output, status = sandbox.kill_sandbox()
+        return output, status, get_session_info()
+        
+    kill_btn.click(fn=handle_kill, outputs=[launch_output, status_display, session_info])
+
+    # Log Fetching
+    fetch_logs_btn.click(fn=sandbox.fetch_logs, outputs=logs_display)
     
-    # Periodic updates every 5 seconds for time display
+    # Automatic Refresh Logic
+    def update_status_and_logs():
+        status = sandbox.get_status()
+        logs = sandbox.fetch_logs() if sandbox.sandbox_created else "[SYSTEM] Auto-refresh paused. Deploy a sandbox to see logs."
+        s_info = get_session_info()
+        
+        status_class = "status-offline"
+        if "RUNNING" in status: status_class = "status-running"
+        elif "IDLE" in status: status_class = "status-idle"
+        elif "EXPIRED" in status: status_class = "status-offline"
+        
+        return {
+            status_display: gr.update(value=status, elem_classes=["status-badge", status_class]),
+            logs_display: logs,
+            session_info: s_info
+        }
+
     demo.load(
-        fn=update_time_remaining,
-        outputs=time_remaining,
-        every=5
+        fn=update_status_and_logs,
+        outputs=[status_display, logs_display, session_info],
+        every=15 # Refresh every 15 seconds
     )
 
-# Launch the industrial-grade application
+# --- Launch Application ---
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        debug=False,
-        show_error=True,
-        inbrowser=True
-    )
+    demo.launch(server_name="0.0.0.0", server_port=7860, debug=False)