Update app.py

app.py

@@ -1,7 +1,10 @@
 import gradio as gr
 from gradio_client import Client
+import json
 import random
+import time
 from datetime import datetime, timedelta
+import threading
 
 # Backend engines
 BACKEND_ENGINES = [
@@ -9,144 +12,403 @@ BACKEND_ENGINES = [
     "ChocoLaboratory/SANDBOX_BACKEND"
 ]
 
-# Sandbox Manager
 class SandboxManager:
     def __init__(self):
         self.client = None
         self.current_engine = None
         self.is_connected = False
-        self.sandbox_start_time = None
-        self.sandbox_duration = timedelta(hours=2)  # 2-hour limit
+        self.sandbox_created = False
+        self.creation_time = None
+        self.time_limit_hours = 2
+        self.auto_refresh_thread = None
+        self.stop_auto_refresh = False
         
     def select_random_engine(self):
-        if not self.current_engine:
-            self.current_engine = random.choice(BACKEND_ENGINES)
+        """Select a random backend engine"""
+        self.current_engine = random.choice(BACKEND_ENGINES)
         return self.current_engine
         
+    def get_remaining_time(self):
+        """Calculate 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
+        
+        if remaining.total_seconds() <= 0:
+            return "EXPIRED"
+        
+        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"""
+        if not self.creation_time:
+            return False
+        
+        elapsed = datetime.now() - self.creation_time
+        return elapsed.total_seconds() > (self.time_limit_hours * 3600)
+        
     def connect(self):
+        """Connect to a backend engine"""
+        if self.sandbox_created:
+            return "⚠️ Sandbox already created. You can only create one sandbox per session.", self.current_engine
+            
         engine = self.select_random_engine()
         try:
             self.client = Client(engine)
             self.is_connected = True
-            return f"✓ Connected to: {engine}", engine
+            return f"✅ Connected to: {engine}", engine
         except Exception as e:
             self.is_connected = False
             self.current_engine = None
-            return f"✗ Connection failed to {engine}: {str(e)}", "Not connected"
-
-    def check_sandbox_active(self):
-        if self.sandbox_start_time:
-            if datetime.now() - self.sandbox_start_time > self.sandbox_duration:
-                self.sandbox_start_time = None
-                return False
-            return True
-        return False
+            return f"❌ Connection failed to {engine}: {str(e)}", "Connection Failed"
     
     def launch_sandbox(self, main_py_code, requirements_txt):
+        """Launch the sandbox (only once per session)"""
+        if self.sandbox_created:
+            remaining = self.get_remaining_time()
+            if remaining == "EXPIRED":
+                return "⏰ Your sandbox has expired (2-hour limit reached). Please refresh the page to start a new session.", ""
+            return f"⚠️ Sandbox already running. Remaining time: {remaining}", self.get_status()
+            
         if not self.is_connected:
-            return "✗ Not connected to backend. Please connect first.", ""
-        if self.check_sandbox_active():
-            return "⚠ Sandbox is still active. You cannot deploy another until 2 hours have passed.", self.get_status()
+            return "❌ Not connected to backend. Please connect first.", ""
+            
         try:
             result = self.client.predict(
                 code=main_py_code,
                 requirements=requirements_txt,
                 api_name="/launch_sandbox"
             )
-            self.sandbox_start_time = datetime.now()
-            return f"✓ Sandbox deployed successfully on {self.current_engine}\n\nResponse: {result}", self.get_status()
+            
+            # Mark sandbox as created and record creation time
+            self.sandbox_created = True
+            self.creation_time = datetime.now()
+            
+            # Start auto-refresh thread for time monitoring
+            self.start_time_monitor()
+            
+            remaining = self.get_remaining_time()
+            return (f"🚀 Sandbox deployed successfully on {self.current_engine}\n"
+                   f"⏱️  Time limit: 2 hours | Remaining: {remaining}\n\n"
+                   f"Response: {result}"), self.get_status()
+        except Exception as e:
+            return f"❌ Deployment failed: {str(e)}", ""
+    
+    def fetch_logs(self):
+        """Fetch logs from the sandbox"""
+        if not self.is_connected:
+            return "❌ Not connected to backend"
+            
+        if self.is_sandbox_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 time: {remaining}\nLogs from {self.current_engine}:\n\n{result}"
         except Exception as e:
-            return f"✗ Deployment 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 "✗ Not connected to backend", ""
-        if not self.check_sandbox_active():
-            return "⚠ No active sandbox to terminate.", self.get_status()
+            return "❌ Not connected to backend", ""
+            
         try:
             result = self.client.predict(api_name="/kill_sandbox")
-            self.sandbox_start_time = None
-            return f"✓ Sandbox terminated on {self.current_engine}\n\nResponse: {result}", self.get_status()
+            self.sandbox_created = False
+            self.creation_time = None
+            self.stop_auto_refresh = True
+            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)}", ""
+    
     def get_status(self):
+        """Get current sandbox status"""
         if not self.is_connected:
             return "OFFLINE"
-        if self.check_sandbox_active():
-            remaining = self.sandbox_duration - (datetime.now() - self.sandbox_start_time)
-            hrs, rem = divmod(remaining.seconds, 3600)
-            mins, sec = divmod(rem, 60)
-            return f"RUNNING - {hrs}h {mins}m remaining"
-        else:
-            return "IDLE"
-    
-    def fetch_logs(self):
-        if not self.is_connected:
-            return "✗ Not connected to backend"
+            
+        if self.is_sandbox_expired():
+            return "EXPIRED"
+            
         try:
-            result = self.client.predict(api_name="/fetch_logs")
-            timestamp = datetime.now().strftime("%H:%M:%S")
-            return f"[{timestamp}] Logs from {self.current_engine}:\n\n{result}"
+            result = self.client.predict(api_name="/status_sandbox")
+            if "running" in str(result).lower():
+                remaining = self.get_remaining_time()
+                return f"RUNNING ({remaining} left) - {result}"
+            else:
+                remaining = self.get_remaining_time()
+                return f"IDLE ({remaining} left) - {result}"
         except Exception as e:
-            return f"[ERROR] Failed to fetch logs: {str(e)}"
+            return f"ERROR - {str(e)}"
+    
+    def start_time_monitor(self):
+        """Start monitoring thread for time limits"""
+        def monitor():
+            while not self.stop_auto_refresh and self.sandbox_created:
+                if self.is_sandbox_expired():
+                    try:
+                        self.kill_sandbox()
+                    except:
+                        pass
+                    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 templates
-SAMPLE_MAIN_PY = "# Enterprise Python Application\nprint('Sandbox Compute Platform - Ready')"
-SAMPLE_REQUIREMENTS_TXT = "# Production dependencies\n# Specify exact versions for reproducibility"
+# Sample files
+SAMPLE_MAIN_PY = """# Enterprise Python Application
+import os
+import time
+from datetime import datetime
 
-# Readable and professional CSS
-professional_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+def main():
+    print("🚀 Sandbox Compute Platform - Initialized")
+    print(f"📅 Started at: {datetime.now()}")
+    print("✅ Environment ready for development")
+    
+    # Your application code here
+    while True:
+        print(f"⏱️  Running... {datetime.now().strftime('%H:%M:%S')}")
+        time.sleep(30)
+
+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
+"""
+
+# Enhanced CSS with modern design
+industrial_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
-    --primary-color: #1e40af;
-    --primary-hover: #2563eb;
-    --secondary-color: #374151;
-    --success-color: #059669;
-    --warning-color: #d97706;
-    --danger-color: #b91c1c;
-    --background: #f9fafb;
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --secondary: #64748b;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
     --surface: #ffffff;
-    --border: #d1d5db;
-    --text-primary: #111827;
-    --text-secondary: #4b5563;
-    --text-muted: #6b7280;
+    --surface-elevated: #f8fafc;
+    --border: #e2e8f0;
+    --text: #0f172a;
+    --text-muted: #64748b;
+    --shadow: rgba(15, 23, 42, 0.1);
+}
+
+* {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
 }
 
 .gradio-container {
-    font-family: 'Inter', sans-serif !important;
-    background-color: var(--background) !important;
-    color: var(--text-primary) !important;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
     min-height: 100vh;
 }
 
+/* Header */
 .platform-header {
-    background: #1e40af !important;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
     color: white !important;
-    padding: 16px 24px !important;
-}
-
-.platform-title { font-size: 24px; font-weight: 700; }
-.platform-subtitle { font-size: 14px; opacity: 0.85; margin-top: 4px; }
-
-.enterprise-container { background-color: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 20px; padding: 16px; }
-.container-header { font-weight: 600; font-size: 16px; margin-bottom: 12px; }
-.code-editor-professional { font-family: 'JetBrains Mono', monospace; background: #1e1e1e; color: #f9fafb; border-radius: 8px; padding: 8px; }
-.requirements-editor { font-family: 'JetBrains Mono', monospace; background: #2d2d2d; color: #f9fafb; border-radius: 8px; padding: 8px; }
-.terminal-logs { font-family: 'JetBrains Mono', monospace; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 16px; }
-.btn-primary { background: var(--primary-color); color: white; border-radius: 8px; padding: 12px; }
-.btn-primary:hover { background: var(--primary-hover); }
-.btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
-.btn-secondary:hover { background: #f3f4f6; }
-.btn-danger { background: var(--danger-color); color: white; border-radius: 8px; padding: 12px; }
-.status-online { background: #d1fae5; color: var(--success-color); padding: 16px; border-radius: 8px; text-align: center; }
-.status-offline { background: #fee2e2; color: var(--danger-color); padding: 16px; border-radius: 8px; text-align: center; }
-.status-warning { background: #fef3c7; color: var(--warning-color); padding: 16px; border-radius: 8px; text-align: center; }
-.section-divider { height: 1px; background: var(--border); margin: 24px 0; }
+    padding: 2rem !important;
+    border-radius: 0 0 1rem 1rem !important;
+    margin-bottom: 1.5rem !important;
+    box-shadow: 0 10px 25px var(--shadow) !important;
+}
+
+.platform-title {
+    font-size: 2rem !important;
+    font-weight: 800 !important;
+    margin-bottom: 0.5rem !important;
+}
+
+.platform-subtitle {
+    font-size: 1rem !important;
+    opacity: 0.9 !important;
+    font-weight: 400 !important;
+}
+
+.breadcrumb {
+    background: var(--surface-elevated) !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: 0.75rem !important;
+    font-size: 0.875rem !important;
+    color: var(--text-muted) !important;
+    border: 1px solid var(--border) !important;
+    margin-bottom: 1.5rem !important;
+}
+
+/* Cards */
+.card {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 1rem !important;
+    box-shadow: 0 4px 6px -1px var(--shadow) !important;
+    overflow: hidden !important;
+    margin-bottom: 1.5rem !important;
+}
+
+.card-header {
+    background: var(--surface-elevated) !important;
+    padding: 1rem 1.5rem !important;
+    border-bottom: 1px solid var(--border) !important;
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+}
+
+.card-content {
+    padding: 1.5rem !important;
+}
+
+/* Buttons */
+.btn {
+    padding: 0.75rem 1.5rem !important;
+    border-radius: 0.5rem !important;
+    font-weight: 500 !important;
+    font-size: 0.875rem !important;
+    transition: all 0.2s ease !important;
+    border: none !important;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
+    color: white !important;
+    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.25) !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.35) !important;
+}
+
+.btn-secondary {
+    background: var(--surface) !important;
+    color: var(--text) !important;
+    border: 1px solid var(--border) !important;
+}
+
+.btn-secondary:hover {
+    background: var(--surface-elevated) !important;
+    border-color: var(--secondary) !important;
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, var(--danger), #dc2626) !important;
+    color: white !important;
+    box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.25) !important;
+}
+
+.btn-danger:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.35) !important;
+}
+
+/* Status indicators */
+.status-badge {
+    padding: 0.5rem 1rem !important;
+    border-radius: 0.5rem !important;
+    font-weight: 500 !important;
+    font-size: 0.875rem !important;
+    text-align: center !important;
+}
+
+.status-online {
+    background: #d1fae5 !important;
+    color: var(--success) !important;
+    border: 1px solid #a7f3d0 !important;
+}
+
+.status-offline {
+    background: #fee2e2 !important;
+    color: var(--danger) !important;
+    border: 1px solid #fecaca !important;
+}
+
+.status-warning {
+    background: #fef3c7 !important;
+    color: var(--warning) !important;
+    border: 1px solid #fed7aa !important;
+}
+
+/* Code editors */
+.code-editor {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: #1e293b !important;
+    color: #e2e8f0 !important;
+    border-radius: 0.75rem !important;
+    border: 1px solid #334155 !important;
+}
+
+.requirements-editor {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: #27272a !important;
+    color: #f4f4f5 !important;
+    border-radius: 0.75rem !important;
+    border: 1px solid #3f3f46 !important;
+}
+
+.terminal {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: #0f172a !important;
+    color: #e2e8f0 !important;
+    border-radius: 0.75rem !important;
+    padding: 1rem !important;
+    border: 1px solid #1e293b !important;
+}
+
+/* Form labels */
+.form-label {
+    font-weight: 600 !important;
+    color: var(--text) !important;
+    margin-bottom: 0.5rem !important;
+    font-size: 0.875rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.025em !important;
+}
+
+/* Monitoring panel */
+.monitor-panel {
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 1rem !important;
+    padding: 1.5rem !important;
+    box-shadow: 0 4px 6px -1px var(--shadow) !important;
+}
+
+/* Animations */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
 """
 
 def auto_refresh_status():
@@ -158,48 +420,180 @@ def auto_refresh_logs():
 def load_sample_files():
     return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
 
-# Build Gradio interface
-with gr.Blocks(css=professional_css, title="Sandbox Compute Platform") as demo:
-    
+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"Created: {created} | Remaining: {remaining}"
+    return "No active sandbox"
+
+# Build enhanced Gradio interface
+with gr.Blocks(css=industrial_css, title="Sandbox Compute Platform") as demo:
     gr.HTML("""
     <div class="platform-header">
-        <div class="platform-title">Sandbox Compute Platform</div>
-        <div class="platform-subtitle">Enterprise-grade cloud computing infrastructure</div>
+        <div class="platform-title">🚀 Sandbox Compute Platform</div>
+        <div class="platform-subtitle">Enterprise-grade cloud computing with 2-hour session limits</div>
+    </div>
+    <div class="breadcrumb">
+        🏠 Dashboard → ⚡ Compute Services → 🛠️ Sandbox Management Console
     </div>
     """)
-    
+
+    # Session Info Bar
     with gr.Row():
-        with gr.Column(scale=3):
-            with gr.Group(elem_classes=["enterprise-container"]):
-                gr.HTML('<div class="container-header">🔧 Infrastructure Management</div>')
-                connect_btn = gr.Button("Initialize Connection", elem_classes=["btn-primary"])
-                load_samples_btn = gr.Button("Load Templates", elem_classes=["btn-secondary"])
-                current_engine_display = gr.Textbox(value="No engine selected", interactive=False, elem_classes=["status-warning"], show_label=False)
-                connection_status = gr.Textbox(value="DISCONNECTED", interactive=False, elem_classes=["status-offline"], show_label=False)
-            
-            with gr.Group(elem_classes=["enterprise-container"]):
-                gr.HTML('<div class="container-header">💻 Development Environment</div>')
-                main_py_editor = gr.Code(value=SAMPLE_MAIN_PY, language="python", lines=20, elem_classes=["code-editor-professional"], show_label=False)
-                requirements_editor = gr.Textbox(value=SAMPLE_REQUIREMENTS_TXT, lines=20, elem_classes=["requirements-editor"], show_label=False)
-                gr.HTML('<div class="section-divider"></div>')
-                launch_btn = gr.Button("Deploy Application", elem_classes=["btn-primary"])
-                kill_btn = gr.Button("Terminate Instance", elem_classes=["btn-danger"])
-                launch_output = gr.Textbox(lines=6, interactive=False, elem_classes=["terminal-logs"], show_label=False)
-        
+        with gr.Column():
+            session_info = gr.Textbox(
+                value=get_session_info(),
+                label="📊 Session Information",
+                interactive=False,
+                elem_classes=["status-badge"]
+            )
+
+    with gr.Row():
+        # Main Content
+        with gr.Column(scale=2):
+            # Connection Management
+            with gr.Group(elem_classes=["card"]):
+                gr.HTML('<div class="card-header">🔌 Connection Management</div>')
+                with gr.Group(elem_classes=["card-content"]):
+                    gr.HTML('<div class="form-label">Initialize Backend Connection</div>')
+                    with gr.Row():
+                        connect_btn = gr.Button("🚀 Connect to Backend", elem_classes=["btn-primary"])
+                        load_samples_btn = gr.Button("📄 Load Templates", elem_classes=["btn-secondary"])
+                    
+                    gr.HTML('<div class="form-label">Active Engine</div>')
+                    current_engine_display = gr.Textbox(
+                        value="No engine selected", 
+                        interactive=False,
+                        elem_classes=["status-badge"],
+                        show_label=False
+                    )
+                    
+                    gr.HTML('<div class="form-label">Connection Status</div>')
+                    connection_status = gr.Textbox(
+                        value="DISCONNECTED", 
+                        interactive=False,
+                        elem_classes=["status-offline"],
+                        show_label=False
+                    )
+
+            # Development Environment
+            with gr.Group(elem_classes=["card"]):
+                gr.HTML('<div class="card-header">💻 Development Environment</div>')
+                with gr.Group(elem_classes=["card-content"]):
+                    with gr.Tab("📝 main.py"):
+                        gr.HTML('<div class="form-label">Application Source Code</div>')
+                        main_py_editor = gr.Code(
+                            value=SAMPLE_MAIN_PY,
+                            language="python",
+                            lines=15,
+                            elem_classes=["code-editor"],
+                            show_label=False
+                        )
+                    
+                    with gr.Tab("📦 requirements.txt"):
+                        gr.HTML('<div class="form-label">Dependency Specifications</div>')
+                        requirements_editor = gr.Textbox(
+                            value=SAMPLE_REQUIREMENTS_TXT,
+                            lines=15,
+                            elem_classes=["requirements-editor"],
+                            show_label=False,
+                            max_lines=20
+                        )
+                    
+                    gr.HTML('<hr style="margin: 1.5rem 0; border: 1px solid var(--border);">')
+                    
+                    with gr.Row():
+                        launch_btn = gr.Button("🚀 Deploy Sandbox", elem_classes=["btn-primary"], size="lg")
+                        kill_btn = gr.Button("🛑 Terminate Sandbox", elem_classes=["btn-danger"], size="lg")
+                    
+                    gr.HTML('<div class="form-label">Deployment Output</div>')
+                    launch_output = gr.Textbox(
+                        lines=6,
+                        interactive=False,
+                        placeholder="🚀 Deployment logs and status information will appear here...",
+                        elem_classes=["terminal"],
+                        show_label=False
+                    )
+
+        # Monitoring Panel
         with gr.Column(scale=1):
-            gr.HTML('<div class="container-header">📊 System Monitor</div>')
-            status_display = gr.Textbox(value="OFFLINE", interactive=False, elem_classes=["status-offline"], show_label=False)
-            status_refresh_btn = gr.Button("Refresh Status", elem_classes=["btn-secondary"])
-            fetch_logs_btn = gr.Button("Fetch Application Logs", elem_classes=["btn-secondary"])
-            logs_display = gr.Textbox(lines=14, interactive=False, elem_classes=["terminal-logs"], show_label=False)
-    
+            with gr.Group(elem_classes=["monitor-panel"]):
+                gr.HTML('<div class="form-label">📊 System Monitor</div>')
+                
+                gr.HTML('<div class="form-label">Instance Status</div>')
+                status_display = gr.Textbox(
+                    value="OFFLINE",
+                    interactive=False,
+                    elem_classes=["status-offline"],
+                    show_label=False
+                )
+                
+                status_refresh_btn = gr.Button("🔄 Refresh Status", elem_classes=["btn-secondary"], size="sm")
+                
+                gr.HTML('<div class="form-label">⚠️ Session Limits</div>')
+                gr.HTML("""
+                <div style="background: #fef3c7; padding: 1rem; border-radius: 0.5rem; border: 1px solid #fed7aa;">
+                    <strong>Time Limit:</strong> 2 hours per sandbox<br>
+                    <strong>Sessions:</strong> 1 sandbox per browser session<br>
+                    <strong>Auto-cleanup:</strong> Sandbox terminates when expired
+                </div>
+                """)
+
+    # Logs Section
+    with gr.Group(elem_classes=["card"]):
+        gr.HTML('<div class="card-header">📋 System Logs & Monitoring</div>')
+        with gr.Group(elem_classes=["card-content"]):
+            with gr.Row():
+                fetch_logs_btn = gr.Button("📋 Fetch Application Logs", elem_classes=["btn-secondary"])
+                auto_refresh_btn = gr.Button("🔄 Auto Refresh (30s)", elem_classes=["btn-secondary"])
+            
+            gr.HTML('<div class="form-label">Runtime Logs</div>')
+            logs_display = gr.Textbox(
+                lines=12,
+                interactive=False,
+                elem_classes=["terminal"],
+                placeholder="[SYSTEM] 📋 Application logs will appear here...",
+                show_label=False
+            )
+
     # Event Handlers
-    connect_btn.click(fn=sandbox.connect, outputs=[connection_status, current_engine_display])
-    load_samples_btn.click(fn=load_sample_files, outputs=[main_py_editor, requirements_editor])
-    launch_btn.click(fn=sandbox.launch_sandbox, inputs=[main_py_editor, requirements_editor], outputs=[launch_output, status_display])
-    kill_btn.click(fn=sandbox.kill_sandbox, outputs=[launch_output, status_display])
-    status_refresh_btn.click(fn=auto_refresh_status, outputs=status_display)
-    fetch_logs_btn.click(fn=auto_refresh_logs, outputs=logs_display)
+    connect_btn.click(
+        fn=sandbox.connect,
+        outputs=[connection_status, current_engine_display]
+    )
+    
+    load_samples_btn.click(
+        fn=load_sample_files,
+        outputs=[main_py_editor, requirements_editor]
+    )
+    
+    launch_btn.click(
+        fn=sandbox.launch_sandbox,
+        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
+    )
 
+# Launch the application
 if __name__ == "__main__":
-    demo.launch(share=True, server_name="0.0.0.0", server_port=7860)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=False
+    )