UI Excellence: Synchronizing Premium Dashboard refinements (v3.5/v3.8)

server/static/app.js

@@ -6,6 +6,7 @@ const app = {
     typewriterTimeout: null,
     isAutoTraining: false,
     metrics: { count: 0, sumReward: 0 },
+    scrollPending: false,
 
     init: function() {
         this.connectWS();
@@ -44,8 +45,30 @@ const app = {
         };
     },
 
+    // ===== SIDEBAR =====
+    toggleSidebar: function() {
+        const sidebar = document.getElementById('sidebar');
+        sidebar.classList.toggle('open');
+    },
+
+    setActiveNav: function(taskId) {
+        document.querySelectorAll('.nav-item[data-task]').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.task === taskId);
+        });
+    },
+
+    // ===== EPISODES =====
     startEpisode: function(taskId) {
         this.currentTask = taskId;
+        this.setActiveNav(taskId);
+
+        // Update breadcrumb
+        const labels = { easy: 'Easy (Detect)', medium: 'Medium (Action)', hard: 'Hard (Appeal)' };
+        document.getElementById('breadcrumb-task').textContent = labels[taskId] || taskId;
+
+        // Close sidebar on mobile
+        document.getElementById('sidebar').classList.remove('open');
+
         const config = JSON.parse(sessionStorage.getItem('env_config') || '{}');
         this.ws.send(JSON.stringify({ 
             action: "reset", 
@@ -54,7 +77,7 @@ const app = {
         }));
         
         document.getElementById('landing-page').style.display = 'none';
-        document.getElementById('main-interface').style.display = 'block';
+        document.getElementById('main-interface').style.display = 'flex';
         document.getElementById('reward-overlay').style.display = 'none';
         
         // Reset Terminal
@@ -68,23 +91,20 @@ const app = {
         const b = obs.policy_briefing;
         const r = obs.global_risk;
         
-        // Elite v3.0: Policy Briefing Update
+        // Policy Briefing
         const banner = document.getElementById('policy-alert-banner');
         document.getElementById('alert-level').textContent = b.alert_level.toUpperCase();
         document.getElementById('alert-topic').textContent = b.current_focus;
         document.getElementById('alert-summary').textContent = b.guidance_summary;
-        
-        // Alert styling
         banner.className = 'alert-banner box-glow ' + b.alert_level.toLowerCase();
 
-        // Elite v3.0: Risk Metrics
+        // Risk Metrics
         document.getElementById('val-queue-depth').textContent = r.queue_depth;
         document.getElementById('val-avg-harm').textContent = r.avg_harm_potential;
 
         document.getElementById('current-task-badge').textContent = obs.task_name;
         document.getElementById('val-post-id').textContent = c.post_id;
         document.getElementById('val-platform').textContent = c.platform;
-        
         document.getElementById('val-user-age').textContent = c.user_account.account_age_days;
         document.getElementById('val-prior-violations').textContent = c.user_account.prior_violations;
         document.getElementById('val-reports').textContent = c.engagement.reports_received;
@@ -114,7 +134,7 @@ const app = {
             html += `</div>`;
         }
         
-        html += `<button class="btn btn-outline w-full" style="margin-top:0.5rem;" onclick="app.submitAction()">Manual Commit</button>`;
+        html += `<button class="btn btn-outline w-full" style="margin-top: 0.5rem;" onclick="app.submitAction()"><i class="fa-solid fa-check"></i> Manual Commit</button>`;
         panel.innerHTML = html;
     },
 
@@ -126,7 +146,7 @@ const app = {
             let val = input.value;
             if (input.type === 'number') val = parseInt(val, 10);
             if (key === 'policy_references' || key === 'diagnoses' || input.placeholder === 'Comma separated values') {
-                val = val ? val.split(',').map(s=>s.trim()) : [];
+                val = val ? val.split(',').map(s => s.trim()) : [];
             }
             payload[key] = val;
         });
@@ -135,6 +155,7 @@ const app = {
         this.ws.send(JSON.stringify({ action: "step", data: payload }));
     },
     
+    // ===== AUTO TRAINING =====
     toggleAutoLoop: function() {
         this.isAutoTraining = !this.isAutoTraining;
         const btn = document.getElementById('btn-auto-loop');
@@ -151,16 +172,14 @@ const app = {
         }
     },
     
-    runAgent: function(isLooping = false) {
+    runAgent: function(isLooping) {
         this.terminalPrint(`> Autonomous agent invoked.`);
         
-        // Setup streaming block
         const term = document.getElementById('terminal-output');
         this.terminalActiveLine = document.createElement('div');
         this.terminalActiveLine.className = 'log-line running';
         term.appendChild(this.terminalActiveLine);
         
-        // Disable buttons to prevent spamming overlapping tasks
         document.getElementById('btn-run-agent').disabled = true;
         document.getElementById('btn-run-agent').style.opacity = '0.5';
         document.getElementById('btn-auto-loop').disabled = true;
@@ -178,7 +197,6 @@ const app = {
         
         this.terminalActiveLine.textContent += content;
         
-        // Debounce scrolling to fix browser lag
         if (!this.scrollPending) {
             this.scrollPending = true;
             requestAnimationFrame(() => {
@@ -190,7 +208,6 @@ const app = {
     },
 
     handleStep: function(result) {
-        // Stop streaming cursor
         if (this.terminalActiveLine) {
             this.terminalActiveLine.classList.remove('running');
             this.terminalActiveLine = null;
@@ -200,7 +217,7 @@ const app = {
         const rc = document.getElementById('reward-display');
         rc.textContent = rw.toFixed(2);
         
-        let color = 'var(--danger)'; 
+        let color = 'var(--danger)';
         let shadow = 'rgba(244, 63, 94, 0.5)';
         if (rw >= 0.8) { color = 'var(--success)'; shadow = 'rgba(16, 185, 129, 0.5)'; }
         else if (rw >= 0.4) { color = 'var(--warning)'; shadow = 'rgba(251, 191, 36, 0.5)'; }
@@ -212,7 +229,6 @@ const app = {
         document.getElementById('feedback-display').textContent = result.info.feedback;
         document.getElementById('reward-overlay').style.display = 'flex';
         
-        // Re-enable button
         document.getElementById('btn-run-agent').disabled = false;
         document.getElementById('btn-run-agent').style.opacity = '1';
         document.getElementById('btn-auto-loop').disabled = false;
@@ -227,7 +243,7 @@ const app = {
         this.terminalPrint(`==============================`);
         this.terminalPrint('');
         
-        // Update HUD Metrics
+        // Update HUD
         this.metrics.count++;
         this.metrics.sumReward += rw;
         document.getElementById('hud-episodes').textContent = this.metrics.count;
@@ -237,23 +253,25 @@ const app = {
             this.terminalPrint(`> [LOOP] Waiting 2s before initiating next cycle...`);
             setTimeout(() => {
                 if (this.isAutoTraining) {
-                    this.closeReward(true); // Resets environment and clears terminal safely
+                    this.closeReward(true);
                     setTimeout(() => {
                         if (this.isAutoTraining) this.runAgent(true);
-                    }, 500); // Wait for reset to finish
+                    }, 500);
                 }
             }, 2000);
         }
     },
     
-    closeReward: function(triggerNext = true) {
+    closeReward: function(triggerNext) {
         document.getElementById('reward-overlay').style.display = 'none';
-
-        // Clear terminal when explicitly moving to the next case
         document.getElementById('terminal-output').innerHTML = '';
-        
         if (triggerNext && this.currentTask) this.startEpisode(this.currentTask);
     },
+
+    clearTerminal: function() {
+        document.getElementById('terminal-output').innerHTML = '';
+        this.terminalPrint('> Terminal cleared.');
+    },
     
     terminalPrint: function(msg) {
         if (this.terminalActiveLine) {
@@ -266,7 +284,6 @@ const app = {
         line.textContent = msg;
         term.appendChild(line);
         
-        // Truncate logic to prevent PC lag from infinitely expanding DOM
         while (term.children.length > 50) {
             term.removeChild(term.firstChild);
         }
@@ -294,15 +311,15 @@ const app = {
         type();
     },
 
+    // ===== VISUALS =====
     initVisuals: function() {
-        // --- Fluid Particles Canvas System ---
         const canvas = document.getElementById('fluid-canvas');
         if (!canvas) return;
         const ctx = canvas.getContext('2d');
         let width = canvas.width = window.innerWidth;
         let height = canvas.height = window.innerHeight;
         const particles = [];
-        const numParticles = 80;
+        const numParticles = 60;
 
         window.addEventListener('resize', () => {
             width = canvas.width = window.innerWidth;
@@ -313,10 +330,14 @@ const app = {
             particles.push({
                 x: Math.random() * width,
                 y: Math.random() * height,
-                vx: (Math.random() - 0.5) * 0.5,
-                vy: (Math.random() - 0.5) * 0.5,
-                radius: Math.random() * 2 + 1,
-                color: Math.random() > 0.5 ? 'rgba(99, 102, 241, 0.4)' : 'rgba(16, 185, 129, 0.3)'
+                vx: (Math.random() - 0.5) * 0.4,
+                vy: (Math.random() - 0.5) * 0.4,
+                radius: Math.random() * 1.8 + 0.8,
+                color: Math.random() > 0.6
+                    ? 'rgba(99, 102, 241, 0.35)'
+                    : Math.random() > 0.3
+                        ? 'rgba(16, 185, 129, 0.25)'
+                        : 'rgba(139, 92, 246, 0.2)'
             });
         }
 
@@ -326,7 +347,6 @@ const app = {
             particles.forEach(p => {
                 p.x += p.vx;
                 p.y += p.vy;
-                
                 if (p.x < 0 || p.x > width) p.vx *= -1;
                 if (p.y < 0 || p.y > height) p.vy *= -1;
                 
@@ -336,16 +356,15 @@ const app = {
                 ctx.fill();
             });
 
-            // Draw connecting lines
             for (let i = 0; i < particles.length; i++) {
                 for (let j = i + 1; j < particles.length; j++) {
                     const dx = particles[i].x - particles[j].x;
                     const dy = particles[i].y - particles[j].y;
                     const dist = Math.sqrt(dx * dx + dy * dy);
                     
-                    if (dist < 150) {
+                    if (dist < 140) {
                         ctx.beginPath();
-                        ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 - dist/1500})`;
+                        ctx.strokeStyle = `rgba(255, 255, 255, ${0.06 - dist / 2500})`;
                         ctx.lineWidth = 0.5;
                         ctx.moveTo(particles[i].x, particles[i].y);
                         ctx.lineTo(particles[j].x, particles[j].y);
@@ -358,7 +377,7 @@ const app = {
         draw();
     },
 
-    // --- Elite v3.3: Credential Management ---
+    // ===== SETTINGS =====
     toggleSettings: function() {
         const modal = document.getElementById('settings-modal');
         modal.style.display = modal.style.display === 'none' ? 'flex' : 'none';
@@ -370,12 +389,11 @@ const app = {
         const baseUrl = document.getElementById('cfg-base-url').value;
         const model = document.getElementById('cfg-model').value;
 
-        // Elite v3.5: Client-side Smart Validation
         if (apiKey.startsWith('hf_') && (!baseUrl || baseUrl.includes('openai.com'))) {
             if (confirm("Detected Hugging Face Token but OpenAI endpoint. Auto-switch to Hugging Face Inference API?")) {
                 document.getElementById('cfg-base-url').value = "https://api-inference.huggingface.co/v1";
                 if (!model) document.getElementById('cfg-model').value = "meta-llama/Llama-3-70b-instruct";
-                return; // Let them save again with the new values
+                return;
             }
         }
 

server/static/index.html

@@ -9,175 +9,239 @@
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-    <!-- Elite Fluid Particle Interaction Background -->
+
+    <!-- Fluid Particle Background -->
     <canvas id="fluid-canvas"></canvas>
 
-    <!-- Top Navigation -->
-    <header class="glass-panel main-header">
-        <h1><i class="fa-solid fa-shield-halved"></i> <span>Content</span>GuardEnv</h1>
-        
-        <div class="task-selector" id="task-selector">
-            <button class="btn btn-outline" onclick="app.startEpisode('easy')"><i class="fa-solid fa-magnifying-glass" style="color: #10b981;"></i> Easy (Detect)</button>
-            <button class="btn btn-outline" onclick="app.startEpisode('medium')"><i class="fa-solid fa-gavel" style="color: #f59e0b;"></i> Medium (Action)</button>
-            <button class="btn btn-outline" onclick="app.startEpisode('hard')"><i class="fa-solid fa-file-signature" style="color: #ef4444;"></i> Hard (Appeal)</button>
-        </div>
+    <!-- App Shell: Sidebar + Main -->
+    <div class="app-shell">
 
-        <div class="header-controls">
-            <button class="btn btn-outline" onclick="app.toggleSettings()"><i class="fa-solid fa-gear"></i> Settings</button>
-            <div class="status-badge glass-panel">
-                <div id="status-indicator" class="status-indicator"></div>
-                <span id="status-text">Connecting...</span>
+        <!-- ===== SIDEBAR ===== -->
+        <aside class="sidebar glass-panel" id="sidebar">
+            <div class="sidebar-header">
+                <div class="sidebar-logo">
+                    <i class="fa-solid fa-shield-halved"></i>
+                </div>
+                <div class="sidebar-brand">
+                    <span class="brand-name"><span class="text-primary">Content</span>Guard</span>
+                    <span class="brand-version">v1.0</span>
+                </div>
             </div>
-        </div>
-    </header>
-
-    <div class="container-fluid" id="landing-page">
-        <div style="text-align: center; margin-top: 5rem;" id="intro-section">
-            <h2 class="gradient-text" style="font-size: 3rem; margin-bottom: 0.5rem; text-transform:none;">Autonomous Moderation Workspace</h2>
-            <p class="text-muted" style="font-size: 1.2rem;">Select a task difficulty above to spin up a simulated environment.</p>
-            <div style="margin-top: 4rem; opacity: 0.7;">
-                <i class="fa-brands fa-meta" style="font-size: 4rem;"></i>
-                <i class="fa-solid fa-xmark" style="font-size: 1.5rem; margin: 0 2rem; vertical-align: super;"></i>
-                <i class="fa-solid fa-face-smiling-hands" style="font-size: 4rem;"></i>
+
+            <nav class="sidebar-nav">
+                <div class="nav-section">
+                    <h4 class="nav-label">Tasks</h4>
+                    <button class="nav-item" data-task="easy" onclick="app.startEpisode('easy')">
+                        <i class="fa-solid fa-magnifying-glass nav-icon" style="color: var(--success);"></i>
+                        <span>Easy (Detect)</span>
+                        <span class="nav-badge">Lv.1</span>
+                    </button>
+                    <button class="nav-item" data-task="medium" onclick="app.startEpisode('medium')">
+                        <i class="fa-solid fa-gavel nav-icon" style="color: var(--warning);"></i>
+                        <span>Medium (Action)</span>
+                        <span class="nav-badge">Lv.2</span>
+                    </button>
+                    <button class="nav-item" data-task="hard" onclick="app.startEpisode('hard')">
+                        <i class="fa-solid fa-file-signature nav-icon" style="color: var(--danger);"></i>
+                        <span>Hard (Appeal)</span>
+                        <span class="nav-badge">Lv.3</span>
+                    </button>
+                </div>
+
+                <div class="nav-section">
+                    <h4 class="nav-label">Tools</h4>
+                    <button class="nav-item" onclick="app.toggleSettings()">
+                        <i class="fa-solid fa-gear nav-icon"></i>
+                        <span>Settings</span>
+                    </button>
+                </div>
+            </nav>
+
+            <div class="sidebar-footer">
+                <div class="status-badge" id="sidebar-status">
+                    <div id="status-indicator" class="status-indicator"></div>
+                    <span id="status-text">Connecting...</span>
+                </div>
             </div>
-        </div>
-    </div>
+        </aside>
 
-    <div class="container-fluid" id="main-interface" style="display: none;">
-        <div class="workspace-grid">
-            
-            <!-- Column 1: Case Data -->
-            <div class="workspace-col fade-in" id="col-data">
-                <div class="glass-panel panel-content h-full" style="display:flex; flex-direction:column; gap:1rem;">
-                    
-                    <!-- Elite v3.0: Policy Briefing Header -->
-                    <div class="alert-banner box-glow" id="policy-alert-banner">
-                        <div class="alert-badge" id="alert-level">GREEN</div>
-                        <div class="alert-content">
-                            <strong id="alert-topic">System Stable</strong>
-                            <p id="alert-summary">No active platform-wide risks detected.</p>
-                        </div>
-                    </div>
+        <!-- ===== MAIN CONTENT ===== -->
+        <div class="main-content">
 
-                    <div class="panel-section scrollable" style="flex:1;">
-                        <div class="panel-header">
-                            <h3><i class="fa-solid fa-file-invoice"></i> Content Case <span id="current-task-badge" class="badge">Type</span></h3>
-                            <span class="post-id" id="val-post-id">#POST-XXX</span>
-                        </div>
-                        
-                        <div class="content-preview box-glow" id="val-content">
-                            <!-- Typewriter content goes here -->
+            <!-- Top Bar -->
+            <header class="topbar glass-panel">
+                <div class="topbar-left">
+                    <button class="btn btn-icon sidebar-toggle" onclick="app.toggleSidebar()" title="Toggle sidebar">
+                        <i class="fa-solid fa-bars"></i>
+                    </button>
+                    <div class="breadcrumb">
+                        <span class="breadcrumb-muted">Workspace</span>
+                        <i class="fa-solid fa-chevron-right breadcrumb-sep"></i>
+                        <span class="breadcrumb-current" id="breadcrumb-task">Home</span>
+                    </div>
+                </div>
+                <div class="topbar-right">
+                    <!-- HUD Metrics -->
+                    <div class="hud-strip">
+                        <div class="hud-item">
+                            <span class="hud-label">Episodes</span>
+                            <span class="hud-val" id="hud-episodes">0</span>
                         </div>
-                        
-                        <div class="meta-grid">
-                            <div class="stat-box">
-                                <span class="label">Platform <i class="fa-solid fa-globe"></i></span>
-                                <span class="value text-primary" id="val-platform">--</span>
-                            </div>
-                            <div class="stat-box">
-                                <span class="label">Acc. Age <i class="fa-solid fa-clock"></i></span>
-                                <span class="value" id="val-user-age">--</span>
-                            </div>
-                            <div class="stat-box">
-                                <span class="label">Violations <i class="fa-solid fa-triangle-exclamation"></i></span>
-                                <span class="value text-danger" id="val-prior-violations">--</span>
-                            </div>
-                            <div class="stat-box">
-                                <span class="label">Reports <i class="fa-solid fa-flag"></i></span>
-                                <span class="value text-warning" id="val-reports">--</span>
-                            </div>
+                        <div class="hud-item">
+                            <span class="hud-label">Accuracy</span>
+                            <span class="hud-val" id="hud-accuracy">0.0%</span>
                         </div>
                     </div>
+                </div>
+            </header>
 
-                    <!-- Elite v3.0: Platform Risk Telemetry -->
-                    <div class="panel-section" style="border-top:1px solid rgba(255,255,255,0.1); padding-top:1rem;">
-                        <h4 class="text-xs text-muted" style="margin-bottom:0.8rem; text-transform:uppercase; letter-spacing:1px;">Platform Risk Telemetry</h4>
-                        <div class="meta-grid">
-                            <div class="stat-box">
-                                <span class="label">Queue Depth</span>
-                                <span class="value" id="val-queue-depth">--</span>
-                            </div>
-                            <div class="stat-box">
-                                <span class="label">Avg Harm</span>
-                                <span class="value" id="val-avg-harm">--</span>
-                            </div>
-                        </div>
+            <!-- Landing Page -->
+            <div class="page-content" id="landing-page">
+                <div class="landing-hero">
+                    <h2 class="gradient-text landing-title">Autonomous Moderation Workspace</h2>
+                    <p class="text-muted landing-subtitle">Select a task difficulty from the sidebar to spin up a simulated environment.</p>
+                    <div class="landing-icons">
+                        <i class="fa-brands fa-meta"></i>
+                        <i class="fa-solid fa-xmark landing-x"></i>
+                        <i class="fa-solid fa-shield-halved"></i>
                     </div>
-
                 </div>
             </div>
 
-            <!-- Column 2: Agent Configuration / Manual Ovveride -->
-            <div class="workspace-col fade-in delay-1 tilt-card" id="col-config">
-                <div class="glass-panel panel-content h-full">
-                    <div class="panel-header">
-                        <h3><i class="fa-solid fa-sliders"></i> Moderation Override</h3>
-                    </div>
-                    
-                    <div class="panel-body scrollable" style="display:flex; flex-direction:column; justify-content:space-between;">
-                        <div id="action-panel">
-                            <!-- Rendered form -->
+            <!-- Main Workspace (hidden initially) -->
+            <div class="page-content" id="main-interface" style="display: none;">
+                <div class="workspace-grid">
+
+                    <!-- Column 1: Case Data + Actions (scrollable) -->
+                    <div class="workspace-col fade-in">
+                        <div class="glass-panel panel-content h-full" style="display:flex; flex-direction:column; gap:0;">
+
+                            <!-- Policy Alert Banner -->
+                            <div class="alert-banner box-glow" id="policy-alert-banner" style="margin: 1rem 1rem 0;">
+                                <div class="alert-badge" id="alert-level">GREEN</div>
+                                <div class="alert-content">
+                                    <strong id="alert-topic">System Stable</strong>
+                                    <p id="alert-summary">No active platform-wide risks detected.</p>
+                                </div>
+                            </div>
+
+                            <div class="panel-section scrollable" style="flex:1; padding: 1.5rem;">
+                                <div class="panel-header" style="padding: 0; background: transparent; border: none; margin-bottom: 1rem;">
+                                    <h3><i class="fa-solid fa-file-invoice"></i> Content Case <span id="current-task-badge" class="badge">Type</span></h3>
+                                    <span class="post-id" id="val-post-id">#POST-XXX</span>
+                                </div>
+
+                                <div class="content-preview box-glow" id="val-content">
+                                    <!-- Typewriter content -->
+                                </div>
+
+                                <div class="meta-grid">
+                                    <div class="stat-box">
+                                        <span class="label">Platform <i class="fa-solid fa-globe"></i></span>
+                                        <span class="value text-primary" id="val-platform">--</span>
+                                    </div>
+                                    <div class="stat-box">
+                                        <span class="label">Acc. Age <i class="fa-solid fa-clock"></i></span>
+                                        <span class="value" id="val-user-age">--</span>
+                                    </div>
+                                    <div class="stat-box">
+                                        <span class="label">Violations <i class="fa-solid fa-triangle-exclamation"></i></span>
+                                        <span class="value text-danger" id="val-prior-violations">--</span>
+                                    </div>
+                                    <div class="stat-box">
+                                        <span class="label">Reports <i class="fa-solid fa-flag"></i></span>
+                                        <span class="value text-warning" id="val-reports">--</span>
+                                    </div>
+                                </div>
+
+                                <!-- Telemetry -->
+                                <div style="border-top:1px solid var(--glass-border); padding-top:1rem; margin-top:1rem;">
+                                    <h4 class="section-label">Platform Risk Telemetry</h4>
+                                    <div class="meta-grid">
+                                        <div class="stat-box">
+                                            <span class="label">Queue Depth</span>
+                                            <span class="value" id="val-queue-depth">--</span>
+                                        </div>
+                                        <div class="stat-box">
+                                            <span class="label">Avg Harm</span>
+                                            <span class="value" id="val-avg-harm">--</span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <hr class="divider">
+
+                                <!-- Moderation Override Form -->
+                                <div class="panel-header" style="padding: 0; background: transparent; border: none; margin-bottom: 1rem;">
+                                    <h3><i class="fa-solid fa-sliders"></i> Moderation Override</h3>
+                                </div>
+
+                                <div id="action-panel">
+                                    <!-- Rendered form -->
+                                </div>
+
+                                <!-- Agent Execution Box -->
+                                <div class="auto-agent-box">
+                                    <h4><i class="fa-solid fa-robot"></i> Advanced Execution</h4>
+                                    <p class="text-muted text-sm">Transfer control to the autonomous agent. Single step or enable Continuous RL Training mode.</p>
+                                    <div class="agent-btns">
+                                        <button class="btn btn-outline" id="btn-run-agent" onclick="app.runAgent(false)">
+                                            <i class="fa-solid fa-play"></i> Single Step
+                                        </button>
+                                        <button class="btn btn-ai" id="btn-auto-loop" onclick="app.toggleAutoLoop()">
+                                            <i class="fa-solid fa-infinity"></i> Start Auto-Training Loop
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        
-                        <div class="auto-agent-box">
-                            <h4><i class="fa-solid fa-robot"></i> Advanced Execution</h4>
-                            <p class="text-muted text-sm">Transfer control to the autonomous agent. Single step or enable Continuous RL Training mode.</p>
-                            
-                            <div style="display:flex; gap:0.5rem; justify-content:center;">
-                                <button class="btn btn-outline" style="border-color: #10b981; color: #10b981;" id="btn-run-agent" onclick="app.runAgent(false)">
-                                    <i class="fa-solid fa-play"></i> Single Step
-                                </button>
-                                
-                                <button class="btn btn-ai" style="flex:1;" id="btn-auto-loop" onclick="app.toggleAutoLoop()">
-                                    <i class="fa-solid fa-infinity"></i> Start Auto-Training Loop
+                    </div>
+
+                    <!-- Column 2: Terminal -->
+                    <div class="workspace-col fade-in delay-1">
+                        <div class="glass-panel panel-content h-full terminal-wrapper" style="display:flex; flex-direction:column;">
+                            <div class="terminal-header">
+                                <span class="dot red"></span>
+                                <span class="dot yellow"></span>
+                                <span class="dot green"></span>
+                                <div class="terminal-title">agent-trace.sh</div>
+                                <button class="btn btn-icon terminal-clear" onclick="app.clearTerminal()" title="Clear terminal">
+                                    <i class="fa-solid fa-trash-can"></i>
                                 </button>
                             </div>
+                            <div class="terminal-body scrollable" id="terminal-output">
+                                <div class="log-line">> Initiating OpenEnv environment context...</div>
+                                <div class="log-line">> Waiting for execution command.</div>
+                            </div>
+
+                            <!-- Reward Overlay -->
+                            <div class="reward-overlay" id="reward-overlay" style="display:none;">
+                                <div class="reward-ring" id="reward-display">0.0</div>
+                                <h4 style="margin-bottom:0.5rem;">Grade Received</h4>
+                                <div class="feedback-text text-sm" id="feedback-display">...</div>
+                                <button class="btn btn-outline" style="margin-top:1.5rem;" onclick="app.closeReward()">Dismiss</button>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
 
-            <!-- Column 3: Terminal Feed / Results -->
-            <div class="workspace-col fade-in delay-2 tilt-card" id="col-term">
-                <div class="glass-panel panel-content h-full terminal-wrapper" style="display:flex; flex-direction:column;">
-                    <div class="global-hud">
-                        <div class="hud-item"><span class="hud-label">Episodes:</span><span class="hud-val" id="hud-episodes">0</span></div>
-                        <div class="hud-item"><span class="hud-label">Accuracy:</span><span class="hud-val" id="hud-accuracy">0.0%</span></div>
-                    </div>
-                    <div class="terminal-header">
-                        <span class="dot red"></span>
-                        <span class="dot yellow"></span>
-                        <span class="dot green"></span>
-                        <div class="terminal-title">agent-trace.sh</div>
-                    </div>
-                    <div class="terminal-body scrollable" id="terminal-output">
-                        <div class="log-line">> Initiating OpenEnv environment context...</div>
-                        <div class="log-line">> Waiting for execution command.</div>
-                    </div>
-                    
-                    <!-- Reward Overlay that pops up after completion -->
-                    <div class="reward-overlay" id="reward-overlay" style="display:none;">
-                        <div class="reward-ring" id="reward-display">0.0</div>
-                        <h4 style="margin-bottom:0.5rem;">Grade Received</h4>
-                        <div class="feedback-text text-sm" id="feedback-display">...</div>
-                        <button class="btn btn-outline" style="margin-top:1.5rem;" onclick="app.closeReward()">Dismiss</button>
-                    </div>
                 </div>
             </div>
-            
-        </div>
-    </div>
 
-    <!-- Elite v3.3: Credentials Modal -->
+        </div><!-- /main-content -->
+    </div><!-- /app-shell -->
+
+    <!-- Settings Modal -->
     <div class="modal-overlay" id="settings-modal" style="display:none;">
         <div class="glass-panel modal-content box-glow">
             <div class="panel-header">
                 <h3><i class="fa-solid fa-key"></i> Remote Inference Settings</h3>
-                <button class="btn btn-outline btn-sm" onclick="app.toggleSettings()">×</button>
+                <button class="btn btn-icon" onclick="app.toggleSettings()">
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
             </div>
             <div class="panel-body">
                 <p class="text-xs text-muted" style="margin-bottom:1.5rem;">Judges can provide their own credentials for evaluation. These are stored locally and transmitted only for current session tasks.</p>
-                
+
                 <div class="form-group">
                     <label>API Key / HF Token</label>
                     <input type="password" id="cfg-api-key" placeholder="hf_... or sk-...">
@@ -190,8 +254,8 @@
                     <label>Target Model</label>
                     <input type="text" id="cfg-model" placeholder="meta-llama/Llama-3-70b-instruct">
                 </div>
-                
-                <div style="margin-top:2rem; display:flex; gap:0.5rem;">
+
+                <div class="modal-actions">
                     <button class="btn btn-ai w-full" onclick="app.saveSettings()">Save & Activate</button>
                     <button class="btn btn-outline" onclick="app.clearSettings()">Reset Default</button>
                 </div>

server/static/style.css

@@ -1,197 +1,963 @@
-/* frontend/style.css */
+/* ContentGuardEnv — Sidebar Layout Theme */
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');
 
+/* ========== DESIGN TOKENS ========== */
 :root {
-    --bg-base: #0a0f1c;            /* Deeper dark base */
+    /* Core palette */
+    --bg-base: #0a0f1c;
+    --bg-surface: rgba(15, 23, 42, 0.45);
+    --bg-elevated: rgba(15, 23, 42, 0.7);
+    --bg-inset: rgba(0, 0, 0, 0.3);
+
+    /* Text */
     --text-main: #f8fafc;
     --text-muted: #64748b;
+    --text-dim: #475569;
+
+    /* Glass */
     --glass-bg: rgba(15, 23, 42, 0.45);
-    --glass-border: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.06);
+    --glass-border-hover: rgba(255, 255, 255, 0.12);
     --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
-    
-    --primary: #6366f1;            /* Indigo */
+    --glass-blur: 20px;
+
+    /* Brand colors */
+    --primary: #6366f1;
     --primary-glow: rgba(99, 102, 241, 0.5);
     --primary-light: #818cf8;
-    --danger: #f43f5e;             /* Rose/Red */
+    --primary-dim: rgba(99, 102, 241, 0.15);
+
+    --danger: #f43f5e;
     --danger-glow: rgba(244, 63, 94, 0.5);
+    --danger-dim: rgba(244, 63, 94, 0.1);
+
     --warning: #fbbf24;
+    --warning-dim: rgba(251, 191, 36, 0.1);
+
     --success: #10b981;
+    --success-glow: rgba(16, 185, 129, 0.4);
+    --success-dim: rgba(16, 185, 129, 0.1);
+
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+
+    /* Radii */
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
+    --radius-full: 50px;
+
+    /* Sidebar */
+    --sidebar-width: 240px;
+    --sidebar-collapsed-width: 64px;
+
+    /* Transitions */
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.25s ease;
+    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* ========== RESET & BASE ========== */
 * { box-sizing: border-box; }
 
 body {
     background-color: var(--bg-base);
     color: var(--text-main);
     font-family: 'Outfit', sans-serif;
-    margin: 0; padding: 0;
-    overflow-x: hidden; min-height: 100vh; overflow-y: auto;
-    display: flex; flex-direction: column;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100vh;
 }
 
-/* Elite Fluid Particles Canvas */
+p { margin: 0; }
+h3 { margin: 0; font-weight: 500; }
+h4 { margin: 0; }
+
+/* ========== FLUID PARTICLES CANVAS ========== */
 #fluid-canvas {
     position: fixed;
-    top: 0; left: 0; width: 100vw; height: 100vh;
+    top: 0; left: 0;
+    width: 100vw; height: 100vh;
     z-index: -1;
     pointer-events: none;
-    background: radial-gradient(circle at center, #111827, #030712);
+    background: radial-gradient(ellipse at 20% 50%, #111827 0%, #030712 70%);
 }
 
-/* Layout & Spacing */
-.container-fluid { padding: 0 2rem; width: 100%; max-width: 1600px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
-.h-full { height: 100%; display: flex; flex-direction: column; }
-.scrollable { overflow-y: auto; }
-.w-full { width: 100%; }
-.text-sm { font-size: 0.85rem; }
-
-/* Utilities */
+/* ========== UTILITIES ========== */
 .text-primary { color: var(--primary-light); }
 .text-danger { color: var(--danger); font-weight: 600; }
 .text-warning { color: var(--warning); font-weight: 600; }
-.gradient-text { background: linear-gradient(135deg, var(--primary-light), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.text-muted { color: var(--text-muted); }
+.text-sm { font-size: 0.85rem; }
+.text-xs { font-size: 0.75rem; }
+.w-full { width: 100%; }
+.h-full { height: 100%; display: flex; flex-direction: column; }
+.scrollable { overflow-y: auto; }
 
-/* Header */
-.main-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; margin: 1rem 2rem; border-radius: 12px; }
-.main-header h1 { margin: 0; font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; letter-spacing: 1px;}
-.main-header h1 span { color: var(--primary); }
+.gradient-text {
+    background: linear-gradient(135deg, var(--primary-light), #c084fc, #f472b6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
 
-p { margin: 0; }
-h3 { margin: 0; font-weight: 500;}
+.section-label {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    margin-bottom: 0.8rem;
+    font-weight: 500;
+}
 
-/* Status */
-.status-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; }
-.status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); }
-.status-indicator.connected { background: var(--success); box-shadow: 0 0 10px var(--success); }
+.divider {
+    border: none;
+    border-top: 1px solid var(--glass-border);
+    margin: 1.5rem 0;
+}
 
-/* Glass */
-.glass-panel { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
+/* ========== GLASS PANELS ========== */
+.glass-panel {
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+}
 
-/* Grid */
-.workspace-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; height: calc(100vh - 120px); padding-bottom: 2rem; }
-@media (max-width: 1200px) { .workspace-grid { grid-template-columns: 1fr; height: auto; } }
+.box-glow {
+    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
+}
 
-.workspace-col { height: 100%; }
-.panel-content { border-radius: 16px; overflow: hidden; }
-.panel-header { padding: 1.5rem; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); }
-.panel-body { padding: 1.5rem; flex: 1; }
+/* ========== APP SHELL ========== */
+.app-shell {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
 
-.badge { background: rgba(255,255,255,0.1); padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin-left: 0.5rem; }
-.post-id { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.85rem;}
+/* ========== SIDEBAR ========== */
+.sidebar {
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--glass-border);
+    border-radius: 0;
+    transition: width var(--transition-smooth), min-width var(--transition-smooth), transform var(--transition-smooth);
+    z-index: 100;
+    position: relative;
+}
 
-/* Case Preview */
-.content-preview { font-size: 1.1rem; line-height: 1.6; padding: 1.5rem; background: rgba(0,0,0,0.3); border-radius: 8px; border-left: 4px solid var(--primary); margin-bottom: 2rem; min-height: 120px; font-weight: 300; max-height: 250px; overflow-y: auto; }
+.sidebar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -1px;
+    width: 1px;
+    height: 100%;
+    background: linear-gradient(to bottom,
+        transparent,
+        var(--primary-dim) 30%,
+        var(--primary-dim) 70%,
+        transparent
+    );
+    pointer-events: none;
+}
 
-.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-.stat-box { background: rgba(255,255,255,0.02); padding: 1rem; border-radius: 8px; border: 1px solid var(--glass-border); }
-.stat-box .label { display: flex; justify-content: space-between; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
-.stat-box .value { font-size: 1.2rem; }
+.sidebar-header {
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--glass-border);
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
 
-/* Forms */
-.form-group { margin-bottom: 1.25rem; }
-label { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;}
-select, input, textarea { width: 100%; padding: 0.8rem 1rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text-main); font-family: inherit; transition: all 0.2s ease; }
-select:focus, input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 15px rgba(99, 102, 241, 0.2); }
+.sidebar-logo {
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(135deg, var(--primary), #8b5cf6);
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    color: #fff;
+    box-shadow: 0 4px 12px var(--primary-glow);
+    flex-shrink: 0;
+}
 
-/* Buttons */
-.btn { border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-family: inherit; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
-.btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 15px var(--primary-glow); }
-.btn-primary:hover { background: #4f46e5; transform: translateY(-2px); box-shadow: 0 6px 20px var(--primary-glow); }
+.sidebar-brand {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
 
-.btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--glass-border); }
-.btn-outline:hover { color: var(--text-main); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
+.brand-name {
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+}
 
-.btn-ai { background: linear-gradient(135deg, #10b981, #059669); color: white; font-weight: 700; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); transition: transform 0.2s, box-shadow 0.2s; border: 1px solid rgba(255,255,255,0.2); }
-.btn-ai:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6); }
+.brand-version {
+    font-size: 0.65rem;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
 
-.auto-agent-box { margin-top: 2rem; padding: 1.5rem; background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px; }
-.auto-agent-box h4 { margin: 0 0 0.5rem 0; color: #10b981; }
-.auto-agent-box p { margin-bottom: 1.5rem; }
+/* Nav */
+.sidebar-nav {
+    flex: 1;
+    padding: var(--space-md);
+    overflow-y: auto;
+}
 
-/* Terminal */
-.terminal-wrapper { position: relative; }
-.terminal-header { background: #000; padding: 0.75rem 1rem; border-bottom: 1px solid #1f2937; display: flex; align-items: center; gap: 0.5rem; }
-.dot { width: 12px; height: 12px; border-radius: 50%; }
-.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
-.terminal-title { color: #6b7280; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; margin-left: 1rem; }
-.terminal-body { background: #050505; flex: 1; padding: 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: #a8b2d1; overflow-y: auto; max-height: 400px; }
+.nav-section {
+    margin-bottom: var(--space-lg);
+}
 
-.log-line { margin-bottom: 0.5rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
-.log-line.running { position: relative; }
-.log-line.running::after { content: '█'; animation: blink 1s step-start infinite; color: var(--primary); margin-left: 5px; }
+.nav-label {
+    font-size: 0.65rem;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    padding: 0 var(--space-sm);
+    margin-bottom: var(--space-sm);
+    font-weight: 500;
+}
 
-/* Reward Overlay */
-.reward-overlay { position: absolute; inset: 0; background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(5px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-.reward-ring { width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700; border: 5px solid var(--glass-border); margin-bottom: 1.5rem; background: var(--bg-base); }
-.feedback-text { max-width: 80%; text-align: center; color: var(--text-muted); }
+.nav-item {
+    width: 100%;
+    padding: 0.65rem 0.75rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: 0.85rem;
+    margin-bottom: 2px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--text-muted);
+    font-family: inherit;
+    transition: all var(--transition-fast);
+    text-align: left;
+}
 
-/* Task selector top */
-#task-selector { display:flex; gap: 0.5rem; }
+.nav-item:hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-main);
+    border-color: var(--glass-border);
+}
 
-/* Animations */
-@keyframes blink { 50% { opacity: 0; } }
-@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
-.fade-in { animation: fadeIn 0.8s ease backwards; }
-.delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-
-/* Scrollbars */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
-
-/* Elite v3.0 Style Extensions */
+.nav-item.active {
+    background: var(--primary-dim);
+    color: var(--primary-light);
+    border-color: rgba(99, 102, 241, 0.2);
+    font-weight: 500;
+}
+
+.nav-icon {
+    width: 18px;
+    text-align: center;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+}
+
+.nav-badge {
+    margin-left: auto;
+    background: rgba(255, 255, 255, 0.06);
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: 0.65rem;
+    color: var(--text-dim);
+    letter-spacing: 0.5px;
+}
+
+.nav-item.active .nav-badge {
+    background: rgba(99, 102, 241, 0.2);
+    color: var(--primary-light);
+}
+
+/* Footer */
+.sidebar-footer {
+    padding: var(--space-md) var(--space-lg);
+    border-top: 1px solid var(--glass-border);
+}
+
+/* ========== STATUS BADGE ========== */
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--danger);
+    box-shadow: 0 0 10px var(--danger);
+    transition: all var(--transition-normal);
+}
+
+.status-indicator.connected {
+    background: var(--success);
+    box-shadow: 0 0 10px var(--success);
+    animation: pulseGlow 2s ease-in-out infinite;
+}
+
+@keyframes pulseGlow {
+    0%, 100% { box-shadow: 0 0 8px var(--success); }
+    50% { box-shadow: 0 0 16px var(--success-glow); }
+}
+
+/* ========== MAIN CONTENT ========== */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 0;
+}
+
+/* ========== TOPBAR ========== */
+.topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.6rem var(--space-lg);
+    border-bottom: 1px solid var(--glass-border);
+    border-radius: 0;
+    flex-shrink: 0;
+}
+
+.topbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+.topbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg);
+}
+
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: 0.85rem;
+}
+
+.breadcrumb-muted { color: var(--text-dim); }
+.breadcrumb-sep { font-size: 0.6rem; color: var(--text-dim); }
+.breadcrumb-current { color: var(--text-main); font-weight: 500; }
+
+.sidebar-toggle { display: none; }
+
+/* ========== HUD STRIP ========== */
+.hud-strip {
+    display: flex;
+    gap: var(--space-lg);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.hud-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.hud-label {
+    color: var(--text-dim);
+    text-transform: uppercase;
+    font-size: 0.65rem;
+    letter-spacing: 1px;
+}
+
+.hud-val {
+    color: var(--success);
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-shadow: 0 0 10px var(--success-glow);
+}
+
+/* ========== PAGE CONTENT ========== */
+.page-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ========== LANDING ========== */
+.landing-hero {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--space-xl);
+    animation: fadeIn 1s ease;
+}
+
+.landing-title {
+    font-size: 2.8rem;
+    margin-bottom: var(--space-sm);
+    text-transform: none;
+    line-height: 1.2;
+}
+
+.landing-subtitle {
+    font-size: 1.1rem;
+    max-width: 500px;
+}
+
+.landing-icons {
+    margin-top: 3rem;
+    opacity: 0.5;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    font-size: 3rem;
+    animation: floatIcons 4s ease-in-out infinite;
+}
+
+.landing-x {
+    font-size: 1.2rem !important;
+    opacity: 0.6;
+}
+
+@keyframes floatIcons {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+}
+
+/* ========== WORKSPACE GRID ========== */
+.workspace-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-lg);
+    padding: var(--space-lg);
+    height: 100%;
+    overflow: hidden;
+}
+
+.workspace-col { height: 100%; min-height: 0; }
+
+.panel-content {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
+}
+
+.panel-content:hover {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 12px var(--primary-dim);
+    border-color: var(--glass-border-hover);
+}
+
+.panel-header {
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--glass-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.panel-body { padding: var(--space-lg); flex: 1; }
+.panel-section { padding: 0; }
+
+/* ========== BADGE ========== */
+.badge {
+    background: var(--primary-dim);
+    color: var(--primary-light);
+    padding: 0.15rem 0.6rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-left: var(--space-sm);
+}
+
+.post-id {
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}
+
+/* ========== CONTENT PREVIEW ========== */
+.content-preview {
+    font-size: 1rem;
+    line-height: 1.7;
+    padding: var(--space-lg);
+    background: var(--bg-inset);
+    border-radius: var(--radius-md);
+    border-left: 3px solid var(--primary);
+    margin-bottom: var(--space-lg);
+    min-height: 80px;
+    max-height: 200px;
+    overflow-y: auto;
+    font-weight: 300;
+    color: rgba(248, 250, 252, 0.85);
+}
+
+/* ========== STAT GRID ========== */
+.meta-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-sm);
+}
+
+.stat-box {
+    background: rgba(255, 255, 255, 0.02);
+    padding: 0.75rem var(--space-md);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--glass-border);
+    transition: border-color var(--transition-fast), background var(--transition-fast);
+}
+
+.stat-box:hover {
+    border-color: var(--glass-border-hover);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.stat-box .label {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 0.3rem;
+    letter-spacing: 0.5px;
+}
+
+.stat-box .value {
+    font-size: 1.1rem;
+    font-weight: 500;
+}
+
+/* ========== ALERT BANNER ========== */
 .alert-banner {
-    display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 12px;
-    background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05);
-    margin-bottom: 0.5rem; transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: 0.75rem var(--space-md);
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
+    border: 1px solid var(--glass-border);
+    transition: all var(--transition-normal);
+}
+
+.alert-banner.green {
+    border-left: 4px solid var(--success);
+    box-shadow: inset 4px 0 12px -4px var(--success-dim);
+}
+
+.alert-banner.yellow {
+    border-left: 4px solid var(--warning);
+    box-shadow: inset 4px 0 12px -4px var(--warning-dim);
+}
+
+.alert-banner.elevated {
+    border-left: 4px solid #f97316;
+    box-shadow: inset 4px 0 12px -4px rgba(249, 115, 22, 0.15);
+}
+
+.alert-banner.critical {
+    border-left: 4px solid var(--danger);
+    box-shadow: inset 4px 0 12px -4px var(--danger-dim);
+    animation: pulseAlert 2.5s ease-in-out infinite;
 }
-.alert-banner.green { border-left: 5px solid var(--success); box-shadow: 0 0 20px rgba(16, 185, 129, 0.1); }
-.alert-banner.yellow { border-left: 5px solid var(--warning); box-shadow: 0 0 20px rgba(251, 191, 36, 0.1); }
-.alert-banner.elevated { border-left: 5px solid #f97316; box-shadow: 0 0 20px rgba(249, 115, 22, 0.1); }
-.alert-banner.critical { border-left: 5px solid var(--danger); box-shadow: 0 0 20px rgba(244, 63, 94, 0.2); animation: pulseAlert 2s infinite; }
 
-@keyframes pulseAlert { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
+@keyframes pulseAlert {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.75; }
+}
 
 .alert-badge {
-    background: rgba(255, 255, 255, 0.1); padding: 0.3rem 0.6rem; border-radius: 4px;
-    font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; color: var(--text-main);
+    background: rgba(255, 255, 255, 0.08);
+    padding: 0.2rem 0.5rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--text-main);
+    flex-shrink: 0;
+}
+
+.alert-content strong {
+    display: block;
+    font-size: 0.85rem;
+    margin-bottom: 0.15rem;
 }
-.alert-content strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
-.alert-content p { font-size: 0.75rem; color: var(--text-muted); }
 
-.box-glow { box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
+.alert-content p {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+}
+
+/* ========== FORMS ========== */
+.form-group { margin-bottom: 1.15rem; }
 
-/* Global Metrics HUD (Elite v3.0) */
-.global-hud {
-    background: rgba(16, 185, 129, 0.05); border-bottom: 1px solid rgba(16, 185, 129, 0.2);
-    display: flex; justify-content: space-around; padding: 0.75rem; 
-    font-family: 'JetBrains Mono', monospace; font-weight: 600;
+label {
+    display: block;
+    margin-bottom: 0.35rem;
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
-.hud-item { display: flex; align-items: center; gap: 0.5rem; }
-.hud-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem;}
-.hud-val { color: var(--success); font-size: 1.1rem; text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);}
 
-/* Elite Polish */
-.tilt-card:hover .panel-content {
-    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 15px var(--primary-glow);
-    border-color: rgba(255,255,255,0.15);
+select, input, textarea {
+    width: 100%;
+    padding: 0.7rem 0.85rem;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius-sm);
+    color: var(--text-main);
+    font-family: inherit;
+    font-size: 0.9rem;
+    transition: all var(--transition-fast);
 }
 
-.header-controls { display: flex; align-items: center; gap: 1rem; }
+select:focus, input:focus, textarea:focus {
+    border-color: var(--primary);
+    outline: none;
+    box-shadow: 0 0 0 3px var(--primary-dim);
+}
 
-/* Modal Overlay & Content (Elite v3.3) */
+select:hover, input:hover, textarea:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+/* ========== BUTTONS ========== */
+.btn {
+    border: none;
+    padding: 0.65rem 1.25rem;
+    border-radius: var(--radius-sm);
+    font-family: inherit;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-sm);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+.btn:hover::after { opacity: 1; }
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+    box-shadow: 0 4px 15px var(--primary-glow);
+}
+
+.btn-primary:hover {
+    background: #4f46e5;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px var(--primary-glow);
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--text-muted);
+    border: 1px solid var(--glass-border);
+}
+
+.btn-outline:hover {
+    color: var(--text-main);
+    border-color: var(--glass-border-hover);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.btn-ai {
+    background: linear-gradient(135deg, #10b981, #059669);
+    color: white;
+    font-weight: 600;
+    box-shadow: 0 4px 15px var(--success-glow);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.btn-ai:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 25px var(--success-glow);
+}
+
+.btn-icon {
+    background: transparent;
+    color: var(--text-muted);
+    border: none;
+    padding: 0.4rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    color: var(--text-main);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+/* ========== AGENT BOX ========== */
+.auto-agent-box {
+    margin-top: var(--space-lg);
+    padding: var(--space-lg);
+    background: var(--success-dim);
+    border: 1px solid rgba(16, 185, 129, 0.15);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast);
+}
+
+.auto-agent-box:hover {
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.auto-agent-box h4 {
+    margin: 0 0 var(--space-sm) 0;
+    color: var(--success);
+    font-size: 0.9rem;
+}
+
+.auto-agent-box p {
+    margin-bottom: var(--space-md);
+}
+
+.agent-btns {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.agent-btns .btn-outline {
+    border-color: rgba(16, 185, 129, 0.3);
+    color: var(--success);
+}
+
+.agent-btns .btn-outline:hover {
+    background: rgba(16, 185, 129, 0.08);
+    border-color: rgba(16, 185, 129, 0.5);
+}
+
+.agent-btns .btn-ai { flex: 1; }
+
+/* ========== TERMINAL ========== */
+.terminal-wrapper { position: relative; }
+
+.terminal-header {
+    background: rgba(0, 0, 0, 0.6);
+    padding: 0.65rem var(--space-md);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transition: opacity var(--transition-fast);
+}
+
+.dot.red { background: #ff5f56; }
+.dot.yellow { background: #ffbd2e; }
+.dot.green { background: #27c93f; }
+
+.terminal-title {
+    color: var(--text-dim);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.75rem;
+    margin-left: var(--space-sm);
+}
+
+.terminal-clear {
+    margin-left: auto;
+    font-size: 0.7rem;
+}
+
+.terminal-body {
+    background: rgba(5, 5, 5, 0.8);
+    flex: 1;
+    padding: var(--space-lg);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.8rem;
+    color: #a8b2d1;
+    overflow-y: auto;
+    line-height: 1.7;
+}
+
+.log-line {
+    margin-bottom: 0.35rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.log-line.running { position: relative; }
+.log-line.running::after {
+    content: '█';
+    animation: blink 1s step-start infinite;
+    color: var(--primary);
+    margin-left: 4px;
+}
+
+/* ========== REWARD OVERLAY ========== */
+.reward-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(5, 5, 5, 0.88);
+    backdrop-filter: blur(8px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+    animation: rewardPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.reward-ring {
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.8rem;
+    font-weight: 700;
+    border: 4px solid var(--glass-border);
+    margin-bottom: var(--space-lg);
+    background: var(--bg-base);
+    font-family: 'JetBrains Mono', monospace;
+    transition: all var(--transition-normal);
+}
+
+.feedback-text {
+    max-width: 80%;
+    text-align: center;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+/* ========== MODAL ========== */
 .modal-overlay {
-    position: fixed; inset: 0; background: rgba(5, 5, 5, 0.9);
-    backdrop-filter: blur(10px); z-index: 1000;
-    display: flex; align-items: center; justify-content: center;
+    position: fixed;
+    inset: 0;
+    background: rgba(5, 5, 5, 0.85);
+    backdrop-filter: blur(12px);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
 .modal-content {
-    width: 100%; max-width: 500px; border-radius: 20px;
-    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    width: 100%;
+    max-width: 460px;
+    border-radius: var(--radius-xl);
+    animation: modalSlideUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.modal-actions {
+    margin-top: var(--space-xl);
+    display: flex;
+    gap: var(--space-sm);
 }
-@keyframes modalPop { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
 
-/* Form Elements (v3.3 specific) */
-.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
+/* ========== ANIMATIONS ========== */
+@keyframes blink { 50% { opacity: 0; } }
+
+@keyframes rewardPopIn {
+    0% { opacity: 0; transform: scale(0.92); }
+    100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes modalSlideUp {
+    0% { opacity: 0; transform: translateY(20px) scale(0.97); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in { animation: fadeIn 0.6s ease backwards; }
+.delay-1 { animation-delay: 0.15s; }
+
+/* ========== SCROLLBARS ========== */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
+
+/* ========== RESPONSIVE ========== */
+@media (max-width: 1200px) {
+    .workspace-grid {
+        grid-template-columns: 1fr;
+        overflow-y: auto;
+        height: auto;
+    }
+
+    .workspace-col {
+        height: auto;
+        min-height: 500px;
+    }
+}
+
+@media (max-width: 900px) {
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        transform: translateX(-100%);
+        z-index: 200;
+        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .sidebar-toggle { display: inline-flex; }
+
+    .hud-strip { display: none; }
+
+    .landing-title { font-size: 2rem; }
+    .landing-icons { font-size: 2rem; }
+
+    .workspace-grid {
+        grid-template-columns: 1fr;
+        padding: var(--space-md);
+        gap: var(--space-md);
+    }
+}