feat: add interactive Cloud Security Dashboard UI

- Added premium dark-mode dashboard with glassmorphism theme
- Sidebar task selector (Easy/Medium/Hard)
- Infrastructure overview with animated resource cards
- Vulnerability highlighting for public S3 & open RDP ports
- Terminal-style execution log with manual action input
- Smart command parser (list, describe, logs, submit)
- Updated FastAPI to serve static files and added /state endpoint

server/app.py

@@ -1,15 +1,29 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
 from openenv_core.env_server import create_fastapi_app
 from .models import CloudAction, CloudObservation
 from .environment import CloudAuditEnv
+import os
 
 # Initialize the environment
 env = CloudAuditEnv()
 
-# Create the FastAPI app
-# Note: create_fastapi_app expects the environment instance, 
-# and the Action/Observation models for typing.
+# Create the FastAPI app using openenv-core
 app = create_fastapi_app(env, CloudAction, CloudObservation)
 
+# Add custom routes for the UI
+static_dir = os.path.join(os.path.dirname(__file__), "static")
+app.mount("/ui", StaticFiles(directory=static_dir), name="static")
+
+@app.get("/")
+async def read_index():
+    return FileResponse(os.path.join(static_dir, "index.html"))
+
+@app.get("/state")
+async def get_state():
+    return env.state()
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=8000)

server/static/app.js

@@ -0,0 +1,298 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let currentTaskId = 'easy';
+    let currentReward = 0.0;
+
+    const taskBtns = document.querySelectorAll('.task-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const clearLogBtn = document.getElementById('clear-log');
+    const resourceDisplay = document.getElementById('resource-display');
+    const actionLog = document.getElementById('action-log');
+    const manualInput = document.getElementById('manual-input');
+    const runBtn = document.getElementById('run-action');
+    const currentTaskDisplay = document.getElementById('current-task-display');
+    const currentRewardDisplay = document.getElementById('current-reward');
+    const envStatus = document.getElementById('env-status');
+    const resourceCount = document.getElementById('resource-count');
+
+    // --- Core API Functions ---
+
+    async function resetEnv(taskId) {
+        log(`Resetting environment for task: ${taskId}...`, 'system');
+        envStatus.textContent = 'Resetting...';
+        envStatus.className = 'status-badge';
+        currentReward = 0.0;
+        currentRewardDisplay.textContent = '0.00';
+        try {
+            const response = await fetch('/reset', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ task_id: taskId })
+            });
+            const data = await response.json();
+            const obs = data.observation || data;
+            updateUIFromObs(obs, false, data);
+            log(`Environment ready. ${obs.info || ''}`, 'system');
+            showToast(`✅ Task "${taskId}" loaded`);
+        } catch (err) {
+            log(`Error resetting: ${err.message}`, 'error');
+            envStatus.textContent = 'Error';
+        }
+    }
+
+    async function stepEnv(actionObj) {
+        log(`▶ Executing: ${formatAction(actionObj)}`, 'action');
+        envStatus.textContent = 'Processing...';
+        try {
+            const response = await fetch('/step', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: actionObj })
+            });
+            const data = await response.json();
+            const obs = data.observation || data;
+            const reward = data.reward !== undefined ? data.reward : (obs.reward || 0);
+            const done = data.done !== undefined ? data.done : (obs.done || false);
+            updateUIFromObs(obs, true, data);
+
+            if (obs.status) {
+                log(`Response: ${obs.status}`, 'system');
+            }
+            if (obs.info) {
+                log(`ℹ️ ${obs.info}`, 'system');
+            }
+            if (reward > 0) {
+                log(`🏆 Reward: +${reward.toFixed(2)}`, 'reward');
+            }
+            if (done) {
+                log(`🎯 Task Completed!`, 'reward');
+                showToast('🎯 Task Completed Successfully!');
+            }
+        } catch (err) {
+            log(`❌ Execution failed: ${err.message}`, 'error');
+            envStatus.textContent = 'Error';
+        }
+    }
+
+    // --- UI Update ---
+
+    function updateUIFromObs(obs, isStep, data) {
+        const reward = data ? (data.reward !== undefined ? data.reward : 0) : 0;
+        const done = data ? (data.done !== undefined ? data.done : false) : false;
+
+        // Update reward
+        if (isStep && reward !== undefined) {
+            currentReward += reward;
+            currentRewardDisplay.textContent = currentReward.toFixed(2);
+            if (currentReward > 0) {
+                currentRewardDisplay.classList.add('reward-positive');
+            }
+        }
+
+        // Update status badge
+        if (done) {
+            envStatus.textContent = '✓ Completed';
+            envStatus.className = 'status-badge completed';
+        } else {
+            envStatus.textContent = 'Active';
+            envStatus.className = 'status-badge active';
+        }
+
+        // Update Resources
+        const resources = obs.resources || [];
+        if (resources.length > 0) {
+            resourceCount.textContent = `${resources.length} Resources`;
+            resourceDisplay.innerHTML = resources.map(r => createResourceCard(r)).join('');
+            // Animate cards in
+            document.querySelectorAll('.resource-card').forEach((card, i) => {
+                card.style.animationDelay = `${i * 0.08}s`;
+                card.classList.add('fade-in');
+            });
+        }
+
+        // Update Details (for describe actions)
+        if (obs.details) {
+            const detail = obs.details;
+            resourceCount.textContent = '1 Resource (Detail)';
+            resourceDisplay.innerHTML = createDetailCard(detail);
+        }
+
+        // Update Logs (for log actions)
+        if (obs.logs && obs.logs.length > 0) {
+            obs.logs.forEach(entry => {
+                const color = entry.action === 'DeleteStorage' ? 'error' : 'system';
+                log(`  [${entry.timestamp}] ${entry.user} → ${entry.action} (IP: ${entry.ip})`, color);
+            });
+        }
+
+        actionLog.scrollTop = actionLog.scrollHeight;
+    }
+
+    function createResourceCard(r) {
+        const isVulnerable = r.public === true || hasOpenPorts(r);
+        const type = detectResourceType(r);
+        const id = r.id || 'unknown';
+
+        let tagsHtml = '';
+        if (r.tags) {
+            tagsHtml = Object.entries(r.tags).map(([k, v]) =>
+                `<span class="tag ${k === 'env' && v === 'prod' ? 'env-prod' : ''}">${k}: ${v}</span>`
+            ).join('');
+        }
+        if (r.public) {
+            tagsHtml += '<span class="tag status-public">⚠ PUBLIC</span>';
+        }
+        if (r.state) {
+            tagsHtml += `<span class="tag">${r.state}</span>`;
+        }
+        if (r.region) {
+            tagsHtml += `<span class="tag">${r.region}</span>`;
+        }
+
+        // Security groups info for EC2
+        let sgHtml = '';
+        if (r.security_groups) {
+            const ports = r.security_groups.flatMap(sg => sg.rules.map(rule => rule.port));
+            const dangerPorts = [3389, 445, 23]; // RDP, SMB, Telnet
+            const openDangerPorts = ports.filter(p => dangerPorts.includes(p));
+            if (openDangerPorts.length > 0) {
+                sgHtml = `<div class="sg-warning">🔓 Dangerous ports open: ${openDangerPorts.join(', ')}</div>`;
+            } else {
+                sgHtml = `<div class="sg-info">🔒 Ports: ${ports.join(', ')}</div>`;
+            }
+        }
+
+        return `
+            <div class="resource-card ${isVulnerable ? 'vulnerable' : 'secure'}">
+                <div class="card-status-dot ${isVulnerable ? 'dot-danger' : 'dot-safe'}"></div>
+                <span class="resource-type">${type}</span>
+                <span class="resource-id">${id}</span>
+                ${sgHtml}
+                <div class="resource-tags">${tagsHtml}</div>
+            </div>
+        `;
+    }
+
+    function createDetailCard(detail) {
+        return `
+            <div class="resource-card detail-card">
+                <span class="resource-type">${detectResourceType(detail)}</span>
+                <span class="resource-id">${detail.id}</span>
+                <pre class="detail-json">${JSON.stringify(detail, null, 2)}</pre>
+            </div>
+        `;
+    }
+
+    function detectResourceType(r) {
+        if (r.id && r.id.startsWith('i-')) return 'EC2 Instance';
+        if (r.id && r.id.includes('prod-')) return 'S3 Bucket';
+        if (r.id && r.id.includes('dev-')) return 'S3 Bucket';
+        if (r.type) return r.type.toUpperCase();
+        return 'Resource';
+    }
+
+    function hasOpenPorts(r) {
+        if (!r.security_groups) return false;
+        return r.security_groups.some(sg =>
+            sg.rules.some(rule => rule.port === 3389 && rule.cidr === '0.0.0.0/0')
+        );
+    }
+
+    function formatAction(obj) {
+        let str = obj.action;
+        if (obj.resource_type) str += ` ${obj.resource_type}`;
+        if (obj.resource_id) str += ` → ${obj.resource_id}`;
+        if (obj.answer) str += ` (answer: ${obj.answer})`;
+        return str;
+    }
+
+    // --- Logging ---
+
+    function log(msg, type = 'system') {
+        const div = document.createElement('div');
+        div.className = `log-entry ${type}`;
+        const time = new Date().toLocaleTimeString([], {
+            hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'
+        });
+        div.textContent = `[${time}] ${msg}`;
+        actionLog.appendChild(div);
+        actionLog.scrollTop = actionLog.scrollHeight;
+    }
+
+    function showToast(msg) {
+        const toast = document.getElementById('toast');
+        toast.textContent = msg;
+        toast.classList.remove('hidden');
+        toast.classList.add('show');
+        setTimeout(() => {
+            toast.classList.remove('show');
+            toast.classList.add('hidden');
+        }, 3000);
+    }
+
+    // --- Manual Action Parser ---
+    // Supports: list s3, list ec2, describe <id>, logs <name>, submit <answer>
+    function parseManualAction(input) {
+        const parts = input.trim().split(/\s+/);
+        const cmd = parts[0]?.toLowerCase();
+
+        switch (cmd) {
+            case 'list':
+                return { action: 'list', resource_type: parts[1] || 's3' };
+            case 'describe':
+                return { action: 'describe', resource_id: parts.slice(1).join(' ') };
+            case 'logs':
+                return { action: 'logs', resource_id: parts.slice(1).join(' ') || 'auth-logs' };
+            case 'submit':
+                return { action: 'submit', answer: parts.slice(1).join(' ') };
+            case 'modify':
+                // For modify, just pass raw — advanced users can use JSON
+                return { action: 'modify', resource_id: parts[1], patch: {} };
+            default:
+                return { action: cmd, resource_type: parts[1] || '' };
+        }
+    }
+
+    // --- Event Listeners ---
+
+    taskBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            taskBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            currentTaskId = btn.dataset.task;
+            currentTaskDisplay.textContent = btn.querySelector('.task-name').textContent;
+            resourceDisplay.innerHTML = '<div class="empty-state">No resources discovered. Run "list" to see resources.</div>';
+            resourceCount.textContent = '0 Resources';
+            resetEnv(currentTaskId);
+        });
+    });
+
+    resetBtn.addEventListener('click', () => {
+        resourceDisplay.innerHTML = '<div class="empty-state">No resources discovered. Run "list" to see resources.</div>';
+        resourceCount.textContent = '0 Resources';
+        resetEnv(currentTaskId);
+    });
+
+    clearLogBtn.addEventListener('click', () => {
+        actionLog.innerHTML = '';
+        log('Log cleared.', 'system');
+    });
+
+    runBtn.addEventListener('click', () => {
+        const val = manualInput.value.trim();
+        if (!val) return;
+        const actionObj = parseManualAction(val);
+        stepEnv(actionObj);
+        manualInput.value = '';
+    });
+
+    manualInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            runBtn.click();
+        }
+    });
+
+    // --- Initial Load ---
+    currentTaskDisplay.textContent = 'S3 Public Audit';
+    resetEnv('easy');
+});

server/static/index.css

@@ -0,0 +1,650 @@
+:root {
+    --bg-dark: #0a0e14;
+    --bg-card: #141b25;
+    --bg-surface: #1e293b;
+    --primary: #00f5ff;
+    --primary-glow: rgba(0, 245, 255, 0.3);
+    --secondary: #94a3b8;
+    --accent: #7c3aed;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --neon-shadow: 0 0 15px rgba(0, 245, 255, 0.35);
+    --danger-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
+    --glass-bg: rgba(20, 27, 37, 0.7);
+    --border: rgba(255, 255, 255, 0.08);
+    --radius: 14px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    overflow: hidden;
+    min-height: 100vh;
+}
+
+h1, h2, h3 {
+    font-family: 'Outfit', sans-serif;
+}
+
+/* ===== Layout ===== */
+.app-container {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    height: 100vh;
+}
+
+/* ===== Sidebar ===== */
+.sidebar {
+    background: var(--bg-card);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 1.25rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.sidebar::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(ellipse at 30% 20%, rgba(0, 245, 255, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 2.5rem;
+    position: relative;
+}
+
+.logo {
+    font-size: 1.6rem;
+    filter: drop-shadow(0 0 6px rgba(0, 245, 255, 0.5));
+}
+
+.brand h1 {
+    font-size: 1.3rem;
+    letter-spacing: -0.5px;
+    color: var(--text-main);
+}
+
+.brand span {
+    color: var(--primary);
+    font-weight: 300;
+}
+
+.nav-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+.task-btn {
+    width: 100%;
+    background: transparent;
+    border: 1px solid var(--border);
+    padding: 1rem 1.15rem;
+    border-radius: var(--radius);
+    margin-bottom: 0.65rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    position: relative;
+    overflow: hidden;
+}
+
+.task-btn::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, transparent 60%, rgba(0, 245, 255, 0.05));
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.task-btn:hover {
+    border-color: var(--primary);
+    transform: translateY(-2px);
+}
+
+.task-btn:hover::after {
+    opacity: 1;
+}
+
+.task-btn.active {
+    background: linear-gradient(135deg, var(--primary), #00c8d4);
+    border-color: transparent;
+    box-shadow: var(--neon-shadow);
+    transform: translateY(-1px);
+}
+
+.difficulty {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.3rem;
+}
+
+.difficulty.easy { color: var(--success); }
+.difficulty.medium { color: var(--warning); }
+.difficulty.hard { color: var(--danger); }
+
+.task-btn.active .difficulty,
+.task-btn.active .task-name {
+    color: #0a0e14;
+}
+
+.task-name {
+    font-weight: 600;
+    font-size: 0.92rem;
+    color: var(--text-main);
+}
+
+.sidebar-footer {
+    margin-top: auto;
+    padding-top: 1.5rem;
+}
+
+.primary-btn {
+    width: 100%;
+    padding: 0.9rem;
+    border-radius: var(--radius);
+    border: none;
+    background: linear-gradient(135deg, var(--primary), #00c8d4);
+    color: #0a0e14;
+    font-weight: 700;
+    font-size: 0.9rem;
+    cursor: pointer;
+    font-family: 'Outfit', sans-serif;
+    letter-spacing: 0.3px;
+    transition: all 0.2s;
+}
+
+.primary-btn:hover {
+    box-shadow: var(--neon-shadow);
+    transform: translateY(-1px);
+}
+
+.primary-btn:active {
+    transform: translateY(0);
+}
+
+/* ===== Main Content ===== */
+.main-content {
+    background: var(--bg-dark);
+    display: flex;
+    flex-direction: column;
+    padding: 1.75rem 2rem;
+    overflow-y: auto;
+    position: relative;
+}
+
+.main-content::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+/* ===== Top Header Stats ===== */
+.top-header {
+    margin-bottom: 1.5rem;
+    position: relative;
+}
+
+.status-summary {
+    display: flex;
+    gap: 3rem;
+    background: var(--bg-card);
+    padding: 1.25rem 2rem;
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(12px);
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.stat-item label {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.stat-item span {
+    font-size: 1.15rem;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.status-badge {
+    color: var(--text-muted);
+    transition: color 0.3s;
+}
+
+.status-badge.active {
+    color: var(--primary);
+}
+
+.status-badge.completed {
+    color: var(--success);
+}
+
+.reward-positive {
+    color: var(--warning) !important;
+}
+
+/* ===== Dashboard Grid ===== */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 1.25rem;
+    flex: 1;
+    min-height: 0;
+}
+
+.panel {
+    background: var(--bg-card);
+    border-radius: 18px;
+    border: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.panel-header {
+    background: var(--bg-surface);
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.panel-header h2 {
+    font-size: 1rem;
+    color: var(--text-main);
+    font-weight: 600;
+}
+
+.resource-count {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    background: rgba(255, 255, 255, 0.06);
+    padding: 0.2rem 0.65rem;
+    border-radius: 999px;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+}
+
+.icon-btn:hover {
+    opacity: 1;
+}
+
+/* ===== Resource Grid ===== */
+.resource-grid {
+    padding: 1.25rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 1rem;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.resource-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+    transition: all 0.25s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.resource-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--success);
+    opacity: 0.6;
+}
+
+.resource-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.resource-card.vulnerable {
+    border-color: rgba(239, 68, 68, 0.4);
+    background: rgba(239, 68, 68, 0.04);
+}
+
+.resource-card.vulnerable::before {
+    background: var(--danger);
+    opacity: 1;
+    animation: pulse-bar 2s ease-in-out infinite;
+}
+
+.resource-card.secure::before {
+    background: var(--success);
+}
+
+@keyframes pulse-bar {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+}
+
+.card-status-dot {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.dot-danger {
+    background: var(--danger);
+    box-shadow: 0 0 8px var(--danger);
+    animation: blink 1.5s ease-in-out infinite;
+}
+
+.dot-safe {
+    background: var(--success);
+    box-shadow: 0 0 6px var(--success);
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+}
+
+.resource-type {
+    font-size: 0.6rem;
+    font-weight: 800;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 0.4rem;
+    display: block;
+}
+
+.resource-id {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+    color: var(--text-main);
+    margin-bottom: 0.75rem;
+    display: block;
+}
+
+.sg-warning {
+    font-size: 0.78rem;
+    color: var(--danger);
+    margin-bottom: 0.75rem;
+    padding: 0.4rem 0.6rem;
+    background: rgba(239, 68, 68, 0.08);
+    border-radius: 6px;
+    border-left: 2px solid var(--danger);
+}
+
+.sg-info {
+    font-size: 0.78rem;
+    color: var(--success);
+    margin-bottom: 0.75rem;
+    padding: 0.4rem 0.6rem;
+    background: rgba(16, 185, 129, 0.08);
+    border-radius: 6px;
+    border-left: 2px solid var(--success);
+}
+
+.resource-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.tag {
+    font-size: 0.68rem;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.15rem 0.55rem;
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.tag.env-prod {
+    border: 1px solid rgba(16, 185, 129, 0.4);
+    color: var(--success);
+}
+
+.tag.status-public {
+    border: 1px solid rgba(239, 68, 68, 0.5);
+    color: var(--danger);
+    font-weight: 600;
+}
+
+.detail-card {
+    grid-column: 1 / -1;
+}
+
+.detail-json {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.78rem;
+    color: var(--primary);
+    background: rgba(0, 0, 0, 0.3);
+    padding: 1rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin-top: 0.5rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+}
+
+/* ===== Card Animations ===== */
+.fade-in {
+    animation: fadeSlideIn 0.4s ease forwards;
+    opacity: 0;
+}
+
+@keyframes fadeSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(12px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ===== Terminal Log ===== */
+.log-panel {
+    display: flex;
+    flex-direction: column;
+}
+
+.terminal-log {
+    flex: 1;
+    background: #000000;
+    padding: 1rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.8rem;
+    overflow-y: auto;
+    color: #4ade80;
+    line-height: 1.7;
+    min-height: 200px;
+}
+
+.log-entry {
+    margin-bottom: 0.35rem;
+    word-break: break-word;
+}
+
+.log-entry.system { color: #94a3b8; }
+.log-entry.error { color: #f87171; }
+.log-entry.action { color: #38bdf8; }
+.log-entry.reward { color: #fbbf24; font-weight: bold; }
+
+.manual-action {
+    display: flex;
+    padding: 0.75rem;
+    background: var(--bg-surface);
+    gap: 0.5rem;
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.manual-action input {
+    flex: 1;
+    background: var(--bg-dark);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 0.7rem 0.85rem;
+    color: var(--text-main);
+    outline: none;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.82rem;
+    transition: border-color 0.2s;
+}
+
+.manual-action input::placeholder {
+    color: rgba(148, 163, 184, 0.5);
+}
+
+.manual-action input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.1);
+}
+
+.manual-action button {
+    background: var(--primary);
+    border: none;
+    padding: 0 1.25rem;
+    border-radius: 8px;
+    color: #0a0e14;
+    font-weight: 700;
+    font-size: 0.82rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: 'Inter', sans-serif;
+}
+
+.manual-action button:hover {
+    box-shadow: var(--neon-shadow);
+}
+
+/* ===== Empty State ===== */
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    color: var(--text-muted);
+    padding: 3.5rem 2rem;
+    border: 2px dashed rgba(255, 255, 255, 0.06);
+    border-radius: var(--radius);
+    font-size: 0.9rem;
+}
+
+/* ===== Toast ===== */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: var(--bg-card);
+    border: 1px solid var(--primary);
+    padding: 0.9rem 1.75rem;
+    border-radius: 12px;
+    box-shadow: var(--neon-shadow);
+    z-index: 1000;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.toast.hidden {
+    display: none;
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.toast.show {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* ===== Scrollbar ===== */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 1024px) {
+    .app-container {
+        grid-template-columns: 1fr;
+    }
+    .sidebar {
+        display: none;
+    }
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+}

server/static/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cloud Security Auditor Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Outfit:wght@500;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/ui/index.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="brand">
+                <div class="logo">🛡️</div>
+                <h1>Auditor<span>OpenEnv</span></h1>
+            </div>
+            
+            <nav class="nav-menu">
+                <div class="nav-label">Select Task</div>
+                <button class="task-btn active" data-task="easy">
+                    <span class="difficulty easy">Easy</span>
+                    <span class="task-name">S3 Public Audit</span>
+                </button>
+                <button class="task-btn" data-task="medium">
+                    <span class="difficulty medium">Medium</span>
+                    <span class="task-name">EC2 Security Patch</span>
+                </button>
+                <button class="task-btn" data-task="hard">
+                    <span class="difficulty hard">Hard</span>
+                    <span class="task-name">IAM Log Forensic</span>
+                </button>
+            </nav>
+
+            <div class="sidebar-footer">
+                <button id="reset-btn" class="primary-btn">Reset Environment</button>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <header class="top-header">
+                <div class="status-summary">
+                    <div class="stat-item">
+                        <label>Current Task</label>
+                        <span id="current-task-display">None</span>
+                    </div>
+                    <div class="stat-item">
+                        <label>Reward</label>
+                        <span id="current-reward">0.0</span>
+                    </div>
+                    <div class="stat-item">
+                        <label>Status</label>
+                        <span id="env-status" class="status-badge">Idle</span>
+                    </div>
+                </div>
+            </header>
+
+            <section class="dashboard-grid">
+                <!-- Resources Panel -->
+                <div class="panel resources-panel">
+                    <div class="panel-header">
+                        <h2>Infrastructure Overview</h2>
+                        <span class="resource-count" id="resource-count">0 Resources</span>
+                    </div>
+                    <div class="resource-grid" id="resource-display">
+                        <!-- Resource cards injected here -->
+                        <div class="empty-state">No resources discovered. Reset or step to view.</div>
+                    </div>
+                </div>
+
+                <!-- Action Log -->
+                <div class="panel log-panel">
+                    <div class="panel-header">
+                        <h2>Execution Log</h2>
+                        <button id="clear-log" class="icon-btn">🗑️</button>
+                    </div>
+                    <div class="terminal-log" id="action-log">
+                        <div class="log-entry system">System initialized. Awaiting task selection...</div>
+                    </div>
+                    <div class="manual-action">
+                        <input type="text" id="manual-input" placeholder="Enter manual action (e.g. list s3)...">
+                        <button id="run-action">Execute</button>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modals / Toast -->
+    <div id="toast" class="toast hidden"></div>
+
+    <script src="/ui/app.js"></script>
+</body>
+</html>