Update app.py

app.py

@@ -6,75 +6,35 @@ import time
 from datetime import datetime, timedelta
 import threading
 
-# --- Constants ---
+# Backend engines
 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 = timedelta(hours=SESSION_TIME_LIMIT_HOURS)
-        self.monitor_thread = None
-        self.stop_monitor = threading.Event()
-
+        self.time_limit_hours = 2
+        self.auto_refresh_thread = None
+        self.stop_auto_refresh = False
+        
     def select_random_engine(self):
-        """Selects a random backend engine from the available pool."""
+        """Select a random backend engine"""
         self.current_engine = random.choice(BACKEND_ENGINES)
         return self.current_engine
-
-    def get_remaining_time_str(self):
-        """Calculates and formats the remaining time for the sandbox."""
+        
+    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 = self.time_limit - elapsed
+        remaining = timedelta(hours=self.time_limit_hours) - elapsed
         
         if remaining.total_seconds() <= 0:
             return "EXPIRED"
@@ -82,298 +42,558 @@ 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_expired(self):
-        """Checks if the sandbox session has expired."""
+    
+    def is_sandbox_expired(self):
+        """Check if sandbox has exceeded the 2-hour limit"""
         if not self.creation_time:
             return False
-        return (datetime.now() - self.creation_time) >= self.time_limit
-
+        
+        elapsed = datetime.now() - self.creation_time
+        return elapsed.total_seconds() > (self.time_limit_hours * 3600)
+        
     def connect(self):
-        """Connects to a random backend engine."""
-        if self.is_connected:
-            return "✅ Already connected.", self.current_engine
-
+        """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"✅ Connection successful 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: {str(e)}", "Connection Failed"
-
+            return f"❌ Connection failed to {engine}: {str(e)}", "Connection Failed"
+    
     def launch_sandbox(self, main_py_code, requirements_txt):
-        """Launches the sandbox environment."""
+        """Launch the sandbox (only once per session)"""
         if self.sandbox_created:
-            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()
-
+            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 a backend. Please connect first.", ""
-
+            return "❌ Not connected to 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()
             
-            remaining = self.get_remaining_time_str()
+            # 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: {SESSION_TIME_LIMIT_HOURS} hours | Remaining: {remaining}\n"
-                    f"📝 Response: {result}"), self.get_status()
+                   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):
-        """Fetches the latest logs from the sandbox."""
-        if not self.sandbox_created:
-            return "[SYSTEM] Sandbox not deployed."
-        if self.is_expired():
+        """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_str()
-            return f"[{timestamp}] Remaining: {remaining}\nLogs from {self.current_engine}:\n\n{result}"
+            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"[ERROR] Failed to fetch logs: {str(e)}"
-
+    
     def kill_sandbox(self):
-        """Terminates the currently running sandbox."""
-        if not self.is_connected or not self.sandbox_created:
-            return "❌ No active sandbox to terminate.", ""
-        
+        """Terminate the sandbox"""
+        if not self.is_connected:
+            return "❌ Not connected to backend", ""
+            
         try:
             result = self.client.predict(api_name="/kill_sandbox")
             self.sandbox_created = False
             self.creation_time = None
-            self.stop_monitor.set()
-            return f"🛑 Sandbox terminated on {self.current_engine}.\n\nResponse: {result}", "TERMINATED"
+            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)}", self.get_status()
-
+            return f"❌ Termination failed: {str(e)}", ""
+    
     def get_status(self):
-        """Gets the current status of the sandbox."""
+        """Get current sandbox status"""
         if not self.is_connected:
             return "OFFLINE"
-        if not self.sandbox_created:
-             return "IDLE"
-        if self.is_expired():
+            
+        if self.is_sandbox_expired():
             return "EXPIRED"
             
         try:
             result = self.client.predict(api_name="/status_sandbox")
-            remaining = self.get_remaining_time_str()
-            status_text = str(result).lower()
-            if "running" in status_text:
-                return f"RUNNING ({remaining}) - {result}"
+            if "running" in str(result).lower():
+                remaining = self.get_remaining_time()
+                return f"RUNNING ({remaining} left) - {result}"
             else:
-                return f"IDLE ({remaining}) - {result}"
+                remaining = self.get_remaining_time()
+                return f"IDLE ({remaining} left) - {result}"
         except Exception as e:
             return f"ERROR - {str(e)}"
-
-    def start_monitor_thread(self):
-        """Starts a background thread to monitor session expiration."""
-        self.stop_monitor.clear()
+    
+    def start_time_monitor(self):
+        """Start monitoring thread for time limits"""
         def monitor():
-            while not self.stop_monitor.is_set() and self.sandbox_created:
-                if self.is_expired():
-                    print("Sandbox expired. Auto-terminating...")
-                    self.kill_sandbox()
+            while not self.stop_auto_refresh and self.sandbox_created:
+                if self.is_sandbox_expired():
+                    try:
+                        self.kill_sandbox()
+                    except:
+                        pass
                     break
-                time.sleep(30)
-        
-        self.monitor_thread = threading.Thread(target=monitor, daemon=True)
-        self.monitor_thread.start()
-
-# --- Gradio UI & Logic ---
+                time.sleep(60)  # Check every minute
+                
+        self.auto_refresh_thread = threading.Thread(target=monitor, daemon=True)
+        self.auto_refresh_thread.start()
 
-# Initialize manager
+# Initialize sandbox manager
 sandbox = SandboxManager()
 
-# UI helper functions
+# Sample files
+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
+    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: #2563eb;
+    --primary-hover: #1d4ed8;
+    --secondary: #64748b;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --surface: #ffffff;
+    --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 {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+    min-height: 100vh;
+}
+
+/* Header */
+.platform-header {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
+    color: white !important;
+    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():
+    return sandbox.get_status()
+
+def auto_refresh_logs():
+    return sandbox.fetch_logs()
+
 def load_sample_files():
     return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
 
 def get_session_info():
     if sandbox.sandbox_created:
-        remaining = sandbox.get_remaining_time_str()
-        created_at = sandbox.creation_time.strftime("%H:%M:%S")
-        return f"Created: {created_at} | Remaining: {remaining}"
+        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"
 
-# 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; }
-"""
-
-with gr.Blocks(css=PROFESSIONAL_CSS, title="Sandbox Compute Platform") as demo:
-    # --- Header ---
+# Build enhanced Gradio interface
+with gr.Blocks(css=industrial_css, title="Sandbox Compute Platform") as demo:
     gr.HTML("""
-    <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 class="platform-header">
+        <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():
-        # --- 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.Group(elem_classes="card-content"):
-                    with gr.Row():
-                        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.Group(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="plaintext", 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.Group(elem_classes="card-content"):
-                    with gr.Row():
-                        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")
+        with gr.Column():
+            session_info = gr.Textbox(
+                value=get_session_info(),
+                label="📊 Session Information",
+                interactive=False,
+                elem_classes=["status-badge"]
+            )
 
-        # --- Right Column: Monitoring ---
+    with gr.Row():
+        # Main Content
         with gr.Column(scale=2):
-            # Status Card
-            with gr.Group(elem_classes="card"):
-                gr.HTML('<div class="card-header">System Monitor</div>')
-                with gr.Group(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"])
+            # 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);">')
                     
-                    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)
+                    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('<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)
+                    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):
+            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"])
             
-            # Logs Card
-            with gr.Group(elem_classes="card"):
-                gr.HTML('<div class="card-header">Application Logs</div>')
-                with gr.Group(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 ---
+            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]
+    )
     
-    # 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])
+    load_samples_btn.click(
+        fn=load_sample_files,
+        outputs=[main_py_editor, requirements_editor]
+    )
     
-    # 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=handle_launch,
+        fn=sandbox.launch_sandbox,
         inputs=[main_py_editor, requirements_editor],
-        outputs=[launch_output, status_display, session_info]
+        outputs=[launch_output, status_display]
     )
-
-    # 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)
     
-    # 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_status_and_logs,
-        outputs=[status_display, logs_display, session_info],
-        every=15 # Refresh every 15 seconds
+    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 Application ---
+# Launch the application
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, debug=False)
-
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=False
+    )