Upload 18 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/logo_white.png filter=lfs diff=lfs merge=lfs -text
+static/themes/cyberpunk/static/logo_white.png filter=lfs diff=lfs merge=lfs -text

static/main.example.js

@@ -0,0 +1,540 @@
+let currentEventSource = null;
+
+function createTask() {
+    const promptInput = document.getElementById('prompt-input');
+    const prompt = promptInput.value.trim();
+
+    if (!prompt) {
+        alert("Please enter a valid prompt");
+        promptInput.focus();
+        return;
+    }
+
+    if (currentEventSource) {
+        currentEventSource.close();
+        currentEventSource = null;
+    }
+
+    const container = document.getElementById('task-container');
+    container.innerHTML = '<div class="loading">Initializing task...</div>';
+    document.getElementById('input-container').classList.add('bottom');
+
+    fetch('/tasks', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ prompt })
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(err => { throw new Error(err.detail || 'Request failed') });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (!data.task_id) {
+            throw new Error('Invalid task ID');
+        }
+        setupSSE(data.task_id);
+        loadHistory();
+        promptInput.value = '';
+    })
+    .catch(error => {
+        container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        console.error('Failed to create task:', error);
+    });
+}
+
+function setupSSE(taskId) {
+    let retryCount = 0;
+    const maxRetries = 3;
+    const retryDelay = 2000;
+    let lastResultContent = '';
+
+    const container = document.getElementById('task-container');
+
+    function connect() {
+        const eventSource = new EventSource(`/tasks/${taskId}/events`);
+        currentEventSource = eventSource;
+
+        let heartbeatTimer = setInterval(() => {
+            container.innerHTML += '<div class="ping">·</div>';
+        }, 5000);
+
+        // Initial polling
+        fetch(`/tasks/${taskId}`)
+            .then(response => response.json())
+            .then(task => {
+                updateTaskStatus(task);
+            })
+            .catch(error => {
+                console.error('Initial status fetch failed:', error);
+            });
+
+        const handleEvent = (event, type) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                container.querySelector('.loading')?.remove();
+                container.classList.add('active');
+
+                const stepContainer = ensureStepContainer(container);
+                const { formattedContent, timestamp } = formatStepContent(data, type);
+                const step = createStepElement(type, formattedContent, timestamp);
+
+                stepContainer.appendChild(step);
+                autoScroll(stepContainer);
+
+                fetch(`/tasks/${taskId}`)
+                    .then(response => response.json())
+                    .then(task => {
+                        updateTaskStatus(task);
+                    })
+                    .catch(error => {
+                        console.error('Status update failed:', error);
+                    });
+            } catch (e) {
+                console.error(`Error handling ${type} event:`, e);
+            }
+        };
+
+        const eventTypes = ['think', 'tool', 'act', 'log', 'run', 'message'];
+        eventTypes.forEach(type => {
+            eventSource.addEventListener(type, (event) => handleEvent(event, type));
+        });
+
+        eventSource.addEventListener('complete', (event) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                lastResultContent = data.result || '';
+
+                container.innerHTML += `
+                    <div class="complete">
+                        <div>✅ Task completed</div>
+                        <pre>${lastResultContent}</pre>
+                    </div>
+                `;
+
+                fetch(`/tasks/${taskId}`)
+                    .then(response => response.json())
+                    .then(task => {
+                        updateTaskStatus(task);
+                    })
+                    .catch(error => {
+                        console.error('Final status update failed:', error);
+                    });
+
+                eventSource.close();
+                currentEventSource = null;
+            } catch (e) {
+                console.error('Error handling complete event:', e);
+            }
+        });
+
+        eventSource.addEventListener('error', (event) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                container.innerHTML += `
+                    <div class="error">
+                        ❌ Error: ${data.message}
+                    </div>
+                `;
+                eventSource.close();
+                currentEventSource = null;
+            } catch (e) {
+                console.error('Error handling failed:', e);
+            }
+        });
+
+        eventSource.onerror = (err) => {
+            if (eventSource.readyState === EventSource.CLOSED) return;
+
+            console.error('SSE connection error:', err);
+            clearInterval(heartbeatTimer);
+            eventSource.close();
+
+            fetch(`/tasks/${taskId}`)
+                .then(response => response.json())
+                .then(task => {
+                    if (task.status === 'completed' || task.status === 'failed') {
+                        updateTaskStatus(task);
+                        if (task.status === 'completed') {
+                            container.innerHTML += `
+                                <div class="complete">
+                                    <div>✅ Task completed</div>
+                                </div>
+                            `;
+                        } else {
+                            container.innerHTML += `
+                                <div class="error">
+                                    ❌ Error: ${task.error || 'Task failed'}
+                                </div>
+                            `;
+                        }
+                    } else if (retryCount < maxRetries) {
+                        retryCount++;
+                        container.innerHTML += `
+                            <div class="warning">
+                                ⚠ Connection lost, retrying in ${retryDelay/1000} seconds (${retryCount}/${maxRetries})...
+                            </div>
+                        `;
+                        setTimeout(connect, retryDelay);
+                    } else {
+                        container.innerHTML += `
+                            <div class="error">
+                                ⚠ Connection lost, please try refreshing the page
+                            </div>
+                        `;
+                    }
+                })
+                .catch(error => {
+                    console.error('Task status check failed:', error);
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(connect, retryDelay);
+                    }
+                });
+        };
+    }
+
+    connect();
+}
+
+function loadHistory() {
+    fetch('/tasks')
+    .then(response => {
+        if (!response.ok) {
+            return response.text().then(text => {
+                throw new Error(`request failure: ${response.status} - ${text.substring(0, 100)}`);
+            });
+        }
+        return response.json();
+    })
+    .then(tasks => {
+        const listContainer = document.getElementById('task-list');
+        listContainer.innerHTML = tasks.map(task => `
+            <div class="task-card" data-task-id="${task.id}">
+                <div>${task.prompt}</div>
+                <div class="task-meta">
+                    ${new Date(task.created_at).toLocaleString()} -
+                    <span class="status status-${task.status ? task.status.toLowerCase() : 'unknown'}">
+                        ${task.status || 'Unknown state'}
+                    </span>
+                </div>
+            </div>
+        `).join('');
+    })
+    .catch(error => {
+        console.error('Failed to load history records:', error);
+        const listContainer = document.getElementById('task-list');
+        listContainer.innerHTML = `<div class="error">Load Fail: ${error.message}</div>`;
+    });
+}
+
+
+function ensureStepContainer(container) {
+    let stepContainer = container.querySelector('.step-container');
+    if (!stepContainer) {
+        container.innerHTML = '<div class="step-container"></div>';
+        stepContainer = container.querySelector('.step-container');
+    }
+    return stepContainer;
+}
+
+function formatStepContent(data, eventType) {
+    return {
+        formattedContent: data.result,
+        timestamp: new Date().toLocaleTimeString()
+    };
+}
+
+function createStepElement(type, content, timestamp) {
+    const step = document.createElement('div');
+
+    // Executing step
+    const stepRegex = /Executing step (\d+)\/(\d+)/;
+    if (type === 'log' && stepRegex.test(content)) {
+        const match = content.match(stepRegex);
+        const currentStep = parseInt(match[1]);
+        const totalSteps = parseInt(match[2]);
+
+        step.className = 'step-divider';
+        step.innerHTML = `
+            <div class="step-circle">${currentStep}</div>
+            <div class="step-line"></div>
+            <div class="step-info">${currentStep}/${totalSteps}</div>
+        `;
+    } else if (type === 'act') {
+        // Check if it contains information about file saving
+        const saveRegex = /Content successfully saved to (.+)/;
+        const match = content.match(saveRegex);
+
+        step.className = `step-item ${type}`;
+
+        if (match && match[1]) {
+            const filePath = match[1].trim();
+            const fileName = filePath.split('/').pop();
+            const fileExtension = fileName.split('.').pop().toLowerCase();
+
+            // Handling different types of files
+            let fileInteractionHtml = '';
+
+            if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(fileExtension)) {
+                fileInteractionHtml = `
+                    <div class="file-interaction image-preview">
+                        <img src="${filePath}" alt="${fileName}" class="preview-image" onclick="showFullImage('${filePath}')">
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载图片</a>
+                    </div>
+                `;
+            } else if (['mp3', 'wav', 'ogg'].includes(fileExtension)) {
+                fileInteractionHtml = `
+                    <div class="file-interaction audio-player">
+                        <audio controls src="${filePath}"></audio>
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载音频</a>
+                    </div>
+                `;
+            } else if (['html', 'js', 'py'].includes(fileExtension)) {
+                fileInteractionHtml = `
+                    <div class="file-interaction code-file">
+                        <button onclick="simulateRunPython('${filePath}')" class="run-button">▶️ 模拟运行</button>
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载文件</a>
+                    </div>
+                `;
+            } else {
+                fileInteractionHtml = `
+                    <div class="file-interaction">
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载文件: ${fileName}</a>
+                    </div>
+                `;
+            }
+
+            step.innerHTML = `
+                <div class="log-line">
+                    <span class="log-prefix">${getEventIcon(type)} [${timestamp}] ${getEventLabel(type)}:</span>
+                    <pre>${content}</pre>
+                    ${fileInteractionHtml}
+                </div>
+            `;
+        } else {
+            step.innerHTML = `
+                <div class="log-line">
+                    <span class="log-prefix">${getEventIcon(type)} [${timestamp}] ${getEventLabel(type)}:</span>
+                    <pre>${content}</pre>
+                </div>
+            `;
+        }
+    } else {
+        step.className = `step-item ${type}`;
+        step.innerHTML = `
+            <div class="log-line">
+                <span class="log-prefix">${getEventIcon(type)} [${timestamp}] ${getEventLabel(type)}:</span>
+                <pre>${content}</pre>
+            </div>
+        `;
+    }
+    return step;
+}
+
+function autoScroll(element) {
+    requestAnimationFrame(() => {
+        element.scrollTo({
+            top: element.scrollHeight,
+            behavior: 'smooth'
+        });
+    });
+    setTimeout(() => {
+        element.scrollTop = element.scrollHeight;
+    }, 100);
+}
+
+
+function getEventIcon(eventType) {
+    const icons = {
+        'think': '🤔',
+        'tool': '🛠️',
+        'act': '🚀',
+        'result': '🏁',
+        'error': '❌',
+        'complete': '✅',
+        'log': '📝',
+        'run': '⚙️'
+    };
+    return icons[eventType] || 'ℹ️';
+}
+
+function getEventLabel(eventType) {
+    const labels = {
+        'think': 'Thinking',
+        'tool': 'Using Tool',
+        'act': 'Action',
+        'result': 'Result',
+        'error': 'Error',
+        'complete': 'Complete',
+        'log': 'Log',
+        'run': 'Running'
+    };
+    return labels[eventType] || 'Info';
+}
+
+function updateTaskStatus(task) {
+    const statusBar = document.getElementById('status-bar');
+    if (!statusBar) return;
+
+    if (task.status === 'completed') {
+        statusBar.innerHTML = `<span class="status-complete">✅ Task completed</span>`;
+
+        if (currentEventSource) {
+            currentEventSource.close();
+            currentEventSource = null;
+        }
+    } else if (task.status === 'failed') {
+        statusBar.innerHTML = `<span class="status-error">❌ Task failed: ${task.error || 'Unknown error'}</span>`;
+
+        if (currentEventSource) {
+            currentEventSource.close();
+            currentEventSource = null;
+        }
+    } else {
+        statusBar.innerHTML = `<span class="status-running">⚙️ Task running: ${task.status}</span>`;
+    }
+}
+
+// Display full screen image
+function showFullImage(imageSrc) {
+    const modal = document.getElementById('image-modal');
+    if (!modal) {
+        const modalDiv = document.createElement('div');
+        modalDiv.id = 'image-modal';
+        modalDiv.className = 'image-modal';
+        modalDiv.innerHTML = `
+            <span class="close-modal">&times;</span>
+            <img src="${imageSrc}" class="modal-content" id="full-image">
+        `;
+        document.body.appendChild(modalDiv);
+
+        const closeBtn = modalDiv.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+            modalDiv.classList.remove('active');
+        });
+
+        modalDiv.addEventListener('click', (e) => {
+            if (e.target === modalDiv) {
+                modalDiv.classList.remove('active');
+            }
+        });
+
+        setTimeout(() => modalDiv.classList.add('active'), 10);
+    } else {
+        document.getElementById('full-image').src = imageSrc;
+        modal.classList.add('active');
+    }
+}
+
+// Simulate running Python files
+function simulateRunPython(filePath) {
+    let modal = document.getElementById('python-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'python-modal';
+        modal.className = 'python-modal';
+        modal.innerHTML = `
+            <div class="python-console">
+                <div class="close-modal">&times;</div>
+                <div class="python-output">Loading Python file contents...</div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+            modal.classList.remove('active');
+        });
+    }
+
+    modal.classList.add('active');
+
+    // Load Python file content
+    fetch(filePath)
+        .then(response => response.text())
+        .then(code => {
+            const outputDiv = modal.querySelector('.python-output');
+            outputDiv.innerHTML = '';
+
+            const codeElement = document.createElement('pre');
+            codeElement.textContent = code;
+            codeElement.style.marginBottom = '20px';
+            codeElement.style.padding = '10px';
+            codeElement.style.borderBottom = '1px solid #444';
+            outputDiv.appendChild(codeElement);
+
+            // Add simulation run results
+            const resultElement = document.createElement('div');
+            resultElement.innerHTML = `
+                <div style="color: #4CAF50; margin-top: 10px; margin-bottom: 10px;">
+                    > Simulated operation output:</div>
+                <pre style="color: #f8f8f8;">
+#This is the result of Python code simulation run
+#The actual operational results may vary
+
+# Running ${filePath.split('/').pop()}...
+print("Hello from Python Simulated environment!")
+
+# Code execution completed
+</pre>
+            `;
+            outputDiv.appendChild(resultElement);
+        })
+        .catch(error => {
+            console.error('Error loading Python file:', error);
+            const outputDiv = modal.querySelector('.python-output');
+            outputDiv.innerHTML = `Error loading file: ${error.message}`;
+        });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadHistory();
+
+    document.getElementById('prompt-input').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            createTask();
+        }
+    });
+
+    const historyToggle = document.getElementById('history-toggle');
+    if (historyToggle) {
+        historyToggle.addEventListener('click', () => {
+            const historyPanel = document.getElementById('history-panel');
+            if (historyPanel) {
+                historyPanel.classList.toggle('open');
+                historyToggle.classList.toggle('active');
+            }
+        });
+    }
+
+    const clearButton = document.getElementById('clear-btn');
+    if (clearButton) {
+        clearButton.addEventListener('click', () => {
+            document.getElementById('prompt-input').value = '';
+            document.getElementById('prompt-input').focus();
+        });
+    }
+
+    // Add keyboard event listener to close modal boxes
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            const imageModal = document.getElementById('image-modal');
+            if (imageModal && imageModal.classList.contains('active')) {
+                imageModal.classList.remove('active');
+            }
+
+            const pythonModal = document.getElementById('python-modal');
+            if (pythonModal && pythonModal.classList.contains('active')) {
+                pythonModal.classList.remove('active');
+            }
+        }
+    });
+});

static/main.js

@@ -0,0 +1,198 @@
+// 加载页面控制函数
+function initLoadingScreen() {
+    const loadingScreen = document.querySelector('.loading-screen');
+    const progressBar = document.querySelector('.progress-bar');
+    const progressText = document.querySelector('.progress-text .digital-glitch');
+    const loadingMessage = document.querySelector('.loading-message');
+    
+    if (!loadingScreen || !progressBar || !progressText) return;
+    
+    // 检查是否是从站内导航回来的
+    const referrer = document.referrer;
+    const currentHost = window.location.host;
+    
+    // 如果是从同一站点的其他页面返回的，不显示加载动画
+    if (referrer && referrer.includes(currentHost) && !isPageReload()) {
+        loadingScreen.classList.add('hidden');
+        loadingScreen.style.display = 'none';
+        return;
+    }
+    
+    const messages = [
+        "Initializing system components...",
+        "Connecting to neural network...",
+        "Loading AI modules...",
+        "Calibrating response patterns...",
+        "Starting quantum processors..."
+    ];
+    
+    let progress = 0;
+    const totalDuration = 5000; // 5秒钟完成加载
+    const interval = 30; // 每30ms更新一次
+    const steps = totalDuration / interval;
+    const increment = 100 / steps;
+    
+    // 随机更新消息
+    let messageIndex = 0;
+    
+    const updateProgress = () => {
+        progress += increment;
+        
+        // 添加一些随机性，模拟真实加载
+        const randomFactor = Math.random() * 0.5;
+        const adjustedProgress = Math.min(progress + randomFactor, 100);
+        
+        // 更新进度条宽度
+        progressBar.style.width = `${adjustedProgress}%`;
+        
+        // 更新进度文本
+        const displayProgress = Math.floor(adjustedProgress);
+        progressText.textContent = `${displayProgress}%`;
+        
+        // 不同阶段显示不同消息
+        if (displayProgress > messageIndex * 25 && messageIndex < messages.length) {
+            loadingMessage.textContent = messages[messageIndex];
+            messageIndex++;
+            
+            // 添加闪烁效果
+            loadingScreen.style.filter = 'brightness(1.2)';
+            setTimeout(() => {
+                loadingScreen.style.filter = 'brightness(1)';
+            }, 100);
+        }
+        
+        // 模拟网络加载的变化
+        if (displayProgress >= 99.5) {
+            // 加载完成，隐藏加载屏幕
+            setTimeout(() => {
+                loadingScreen.classList.add('hidden');
+                
+                // 完全隐藏后从DOM中移除
+                setTimeout(() => {
+                    loadingScreen.style.display = 'none';
+                }, 500);
+            }, 200);
+            return;
+        }
+        
+        // 添加随机故障效果
+        if (Math.random() < 0.1) {
+            createGlitchEffect();
+        }
+        
+        requestAnimationFrame(updateProgress);
+    };
+    
+    // 创建故障效果
+    const createGlitchEffect = () => {
+        // 屏幕抖动
+        loadingScreen.style.transform = `translate(${(Math.random() - 0.5) * 10}px, ${(Math.random() - 0.5) * 5}px)`;
+        
+        // 随机调整颜色和不透明度
+        loadingScreen.style.filter = `hue-rotate(${Math.random() * 30}deg) brightness(${1 + Math.random() * 0.3})`;
+        
+        // 恢复正常
+        setTimeout(() => {
+            loadingScreen.style.transform = 'translate(0, 0)';
+            loadingScreen.style.filter = 'none';
+        }, 100);
+    };
+    
+    // 开始更新进度
+    setTimeout(() => {
+        updateProgress();
+    }, 300);
+}
+
+// 动态产生随机粒子
+function createRandomParticle() {
+    const container = document.querySelector('.particle-container');
+
+    if (!container) return;
+
+    setInterval(() => {
+        const particle = document.createElement('div');
+        particle.className = 'particle';
+
+        // 随机位置
+        particle.style.left = `${Math.random() * 100}%`;
+        particle.style.top = '100%';
+
+        // 随机大小
+        const size = Math.random() * 2 + 1;
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+
+        // 获取CSS变量
+        const styles = getComputedStyle(document.documentElement);
+        const colorOptions = [
+            styles.getPropertyValue('--accent-green').trim(),
+            styles.getPropertyValue('--accent-color-5').trim(),
+            styles.getPropertyValue('--accent-blue').trim(),
+            styles.getPropertyValue('--accent-color-1').trim()
+        ];
+
+        // 随机颜色
+        const randomColor = colorOptions[Math.floor(Math.random() * colorOptions.length)];
+        particle.style.backgroundColor = randomColor;
+        particle.style.boxShadow = `0 0 5px ${randomColor}`;
+
+        // 随机透明度
+        particle.style.opacity = (Math.random() * 0.5 + 0.3).toString();
+
+        // 添加到容器
+        container.appendChild(particle);
+
+        // 设置动画结束后移除元素
+        setTimeout(() => {
+            particle.remove();
+        }, 5000);
+    }, 600); // 每600ms创建一个新粒子
+}
+
+// 添加主题选项动画效果
+function animateThemeOptions() {
+    const themeOptions = document.querySelectorAll('.theme-option');
+    themeOptions.forEach((option, index) => {
+        // 直接显示元素，不使用动画过渡
+        option.style.opacity = '1';
+    });
+}
+
+// 页面加载完成后初始化效果
+document.addEventListener('DOMContentLoaded', function() {
+    // 初始化加载页面
+    initLoadingScreen();
+    
+    // 初始化粒子效果
+    createRandomParticle();
+
+    // 初始化主题选项动画
+    animateThemeOptions();
+});
+
+// 仅用于开发环境 - 清除会话状态
+function resetVisitState() {
+    // 清除会话状态相关变量
+    sessionStorage.clear();
+    console.log('Visit state has been reset. This will simulate a first-time visit on the next navigation.');
+}
+
+// 注释掉下面这行代码来禁用自动重置（仅开发环境使用）
+// resetVisitState();
+
+// 判断页面是否为刷新
+function isPageReload() {
+    // 如果页面表现性能数据可用，检查导航类型
+    if (window.performance && window.performance.navigation) {
+        return window.performance.navigation.type === 1; // 1表示页面刷新
+    }
+    
+    // 对较新的浏览器使用Navigation Timing API
+    if (window.performance && window.performance.getEntriesByType && window.performance.getEntriesByType('navigation').length) {
+        return window.performance.getEntriesByType('navigation')[0].type === 'reload';
+    }
+    
+    // 无法确定时，假设不是刷新
+    return false;
+}

static/style.css

@@ -0,0 +1,1379 @@
+:root {
+    --primary-color: #00ffcc;
+    --secondary-color: #0088ff;
+    --accent-color-1: #ff00aa;
+    --accent-color-2: #aa00ff;
+    --accent-color-3: #ffcc00;
+    --accent-color-4: #ff3300;
+    --accent-color-5: #00eeff;
+    --accent-blue: #3366ff;
+    --accent-purple: #9933ff;
+    --accent-pink: #ff66cc;
+    --accent-teal: #00ccaa;
+    --accent-green: #33ff99;
+    --accent-yellow: #ffcc33;
+    --text-color: #f8fafc;
+    --background-color: #000000;
+    --card-color: rgba(10, 30, 30, 0.5);
+    --border-color: #00aa99;
+    --highlight-color: #00ffaa;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --error-color: #ef4444;
+    --info-color: #3b82f6;
+    --shadow-color: rgba(0, 0, 0, 0.5);
+    --glow-color: rgba(0, 255, 204, 0.5);
+    --transition-speed: 0.3s;
+    --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: var(--font-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    font-feature-settings: "ss01", "ss02", "ss03", "cv01", "cv02", "cv03", "cv04";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-synthesis: none;
+}
+
+body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100vh;
+    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 204, 0.05), transparent 70%);
+}
+
+/* 首页主容器 */
+.home-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    max-height: 100vh;
+}
+
+.home-container::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    right: -50%;
+    bottom: -50%;
+    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.15), transparent 70%);
+    z-index: -1;
+}
+
+/* 英雄区域 */
+.hero-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    min-height: 80vh;
+    width: 100%;
+    max-width: 1200px;
+    padding: 3rem 2rem;
+    position: relative;
+    z-index: 4;
+    isolation: isolate;
+}
+
+/* 标题样式 */
+.title {
+    font-size: 7rem;
+    font-weight: 900;
+    margin-bottom: 2rem;
+    text-align: center;
+    letter-spacing: 5px;
+    position: relative;
+    z-index: 3;
+    color: #00ffcc;
+    text-shadow: 
+        0 0 10px rgba(0, 255, 204, 0.5),
+        0 0 20px rgba(0, 238, 255, 0.3),
+        0 0 30px rgba(0, 136, 255, 0.2),
+        2px 2px 3px rgba(0, 0, 0, 0.6);
+    animation: neon-cyan-pulse 4s ease-in-out infinite alternate;
+}
+
+.title::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: none;
+    z-index: -1;
+}
+
+.title::after {
+    content: "OPENMANUS";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 100%;
+    height: 100%;
+    color: rgba(0, 255, 204, 0.15);
+    z-index: -1;
+    text-shadow: none;
+    filter: blur(5px);
+}
+
+@keyframes neon-cyan-pulse {
+    0% {
+        text-shadow: 
+            0 0 8px rgba(0, 255, 204, 0.5),
+            0 0 15px rgba(0, 238, 255, 0.3),
+            0 0 20px rgba(0, 136, 255, 0.2),
+            2px 2px 3px rgba(0, 0, 0, 0.6);
+    }
+    100% {
+        text-shadow: 
+            0 0 10px rgba(0, 255, 204, 0.6),
+            0 0 18px rgba(0, 238, 255, 0.4),
+            0 0 25px rgba(0, 136, 255, 0.3),
+            2px 2px 3px rgba(0, 0, 0, 0.6);
+    }
+}
+
+/* 副标题 */
+.subtitle {
+    font-size: 2.2rem;
+    font-weight: 500;
+    margin-bottom: 2rem;
+    text-align: center;
+    position: relative;
+    background: linear-gradient(90deg, #ff3399, #9933ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: none;
+    letter-spacing: 2px;
+    opacity: 1;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    backface-visibility: hidden;
+    z-index: 5;
+    isolation: isolate;
+    filter: drop-shadow(0 0 8px rgba(255, 51, 153, 0.3));
+    will-change: transform;
+    pointer-events: none;
+}
+
+/* 描述文本 */
+.description {
+    font-size: 1.5rem;
+    line-height: 1.8;
+    margin-bottom: 2rem;
+    text-align: center;
+    max-width: 900px;
+    color: #a8b6c9;
+    padding: 0 2rem;
+    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+    font-weight: 400;
+    letter-spacing: 0.8px;
+    opacity: 1;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+    backface-visibility: hidden;
+    position: relative;
+    z-index: 3;
+    isolation: isolate;
+    mix-blend-mode: normal;
+}
+
+/* 描述文本中的强调部分 */
+.description span:not(.powered-text) {
+    position: relative;
+    display: inline-block;
+    background: linear-gradient(90deg, var(--accent-color-4), var(--accent-color-3));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    padding: 0 5px;
+    font-weight: 600;
+    text-shadow: 0 0 6px rgba(255, 153, 0, 0.4);
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+/* Powered by 文本专用样式 */
+.powered-text {
+    font-size: 1.5rem;
+    color: #8c9cb0;
+    letter-spacing: 0.3px;
+    font-weight: 400;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    -webkit-text-fill-color: #8c9cb0;
+    padding: 0;
+}
+
+/* 描述文本中的强调部分 */
+.description span:nth-of-type(2) {
+    background: linear-gradient(90deg, var(--accent-color-1), var(--accent-pink));
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-shadow: 0 0 8px rgba(255, 0, 170, 0.4);
+}
+
+.description span:nth-of-type(4) {
+    background: linear-gradient(90deg, var(--accent-green), var(--accent-teal));
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-shadow: 0 0 8px rgba(0, 204, 170, 0.4);
+}
+
+/* CTA按钮 */
+.cta-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 24px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: white;
+    background: linear-gradient(45deg, var(--accent-teal), var(--accent-color-2));
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    box-shadow: 0 0 20px rgba(170, 0, 255, 0.4), 0 0 0 1px rgba(0, 204, 170, 0.1) inset;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.6rem;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    text-decoration: none;
+}
+
+.cta-button::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        to right,
+        transparent,
+        rgba(255, 255, 255, 0.4),
+        transparent
+    );
+    transform: rotate(45deg);
+    z-index: 1;
+}
+
+.cta-button::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: 12px;
+    padding: 1px;
+    background: linear-gradient(135deg, var(--accent-color-5), var(--accent-blue), var(--accent-purple));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    z-index: -1;
+    opacity: 0.6;
+    transition: opacity 0.4s ease;
+}
+
+.cta-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(170, 0, 255, 0.5), 0 0 0 1px rgba(0, 204, 170, 0.2) inset;
+    background: linear-gradient(45deg, var(--accent-color-1), var(--accent-blue));
+}
+
+.cta-button:hover::after {
+    opacity: 1;
+}
+
+.arrow-icon {
+    margin-left: 8px;
+    font-size: 0.9rem;
+}
+
+/* 主题选择器 */
+.theme-selector {
+    width: 100%;
+    max-width: 680px;
+    margin: 2rem auto;
+}
+
+.theme-label {
+    font-size: 1.2rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    text-align: center;
+    color: var(--accent-color-5);
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    position: relative;
+    text-shadow: 0 0 3px rgba(0, 238, 255, 0.3);
+}
+
+.theme-options {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.theme-options .theme-option {
+    width: 80px !important;
+    height: 80px !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(180deg, rgba(10, 30, 50, 0.9), rgba(5, 15, 35, 0.8));
+    border-radius: 12px;
+    border: 1px solid rgba(0, 238, 255, 0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 238, 255, 0.2);
+    padding: 0.5rem;
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    opacity: 1;
+    overflow: visible;
+    text-decoration: none !important;
+}
+
+.theme-options .theme-option .theme-icon-container {
+    width: 36px !important;
+    height: 36px !important;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, rgba(0, 30, 40, 0.95), rgba(0, 15, 30, 0.95));
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
+                inset 0 0 2px rgba(0, 238, 255, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.theme-options .theme-option .theme-icon {
+    font-size: 1.2rem !important;
+    filter: drop-shadow(0 0 2px rgba(51, 255, 153, 0.3));
+    color: var(--accent-green);
+    z-index: 2;
+}
+
+.theme-options .theme-option .theme-name {
+    font-size: 0.9rem !important;
+    font-weight: 500;
+    color: var(--primary-color);
+    letter-spacing: 0.5px;
+    margin-top: 0.3rem;
+    text-align: center;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.theme-options .theme-option:hover,
+.theme-options .theme-option:active {
+    transform: translateY(-4px) scale(1.05);
+    border-color: rgba(0, 255, 204, 0.5);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 255, 204, 0.3);
+    z-index: 5;
+}
+
+/* CTA按钮 */
+.hero-section .cta-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 36px !important;
+    font-size: 1.2rem !important;
+    font-weight: 600;
+    color: white;
+    background: linear-gradient(45deg, var(--accent-teal), var(--accent-color-2));
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    box-shadow: 0 0 20px rgba(170, 0, 255, 0.4), 0 0 0 1px rgba(0, 204, 170, 0.1) inset;
+    position: relative;
+    overflow: hidden;
+    margin-top: 2rem !important;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    text-decoration: none;
+    min-width: 200px;
+    max-width: 280px;
+}
+
+.hero-section .cta-button .arrow-icon {
+    margin-left: 12px;
+    font-size: 1.2rem;
+}
+
+/* 粒子效果 */
+.particle-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.particle {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background-color: var(--accent-green);
+    border-radius: 50%;
+    opacity: 0;
+    animation: particle-animation 8s linear infinite;
+    box-shadow: 0 0 5px currentColor;
+    z-index: -1;
+}
+
+.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; background-color: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); }
+.particle:nth-child(2) { left: 20%; top: 80%; animation-delay: 1s; background-color: var(--accent-blue); box-shadow: 0 0 8px var(--accent-blue); }
+.particle:nth-child(3) { left: 30%; top: 40%; animation-delay: 2s; background-color: var(--accent-color-5); box-shadow: 0 0 8px var(--accent-color-5); }
+.particle:nth-child(4) { left: 40%; top: 60%; animation-delay: 3s; background-color: var(--accent-teal); box-shadow: 0 0 8px var(--accent-teal); }
+.particle:nth-child(5) { left: 50%; top: 20%; animation-delay: 4s; background-color: var(--accent-color-1); box-shadow: 0 0 8px var(--accent-color-1); }
+.particle:nth-child(6) { left: 60%; top: 70%; animation-delay: 5s; background-color: var(--accent-purple); box-shadow: 0 0 8px var(--accent-purple); }
+.particle:nth-child(7) { left: 70%; top: 30%; animation-delay: 6s; background-color: var(--accent-color-2); box-shadow: 0 0 8px var(--accent-color-2); }
+.particle:nth-child(8) { left: 80%; top: 50%; animation-delay: 7s; background-color: var(--accent-yellow); box-shadow: 0 0 8px var(--accent-yellow); }
+.particle:nth-child(9) { left: 90%; top: 10%; animation-delay: 8s; background-color: var(--accent-pink); box-shadow: 0 0 8px var(--accent-pink); }
+.particle:nth-child(10) { left: 5%; top: 70%; animation-delay: 9s; background-color: var(--accent-color-3); box-shadow: 0 0 8px var(--accent-color-3); }
+.particle:nth-child(11) { left: 15%; top: 10%; animation-delay: 10s; background-color: var(--accent-color-4); box-shadow: 0 0 8px var(--accent-color-4); }
+.particle:nth-child(12) { left: 25%; top: 90%; animation-delay: 11s; background-color: var(--accent-teal); box-shadow: 0 0 8px var(--accent-teal); }
+
+@keyframes particle-animation {
+    0% {
+        transform: translateY(0) scale(0);
+        opacity: 0;
+        filter: brightness(0.5);
+    }
+    10% {
+        opacity: 0.8;
+        filter: brightness(1);
+    }
+    80% {
+        opacity: 0.8;
+        filter: brightness(1.2);
+    }
+    100% {
+        transform: translateY(-100vh) scale(1.2);
+        opacity: 0;
+        filter: brightness(0.5);
+    }
+}
+
+/* 电路效果 */
+.tech-circuit {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+    opacity: 0.5;
+    overflow: hidden;
+    will-change: opacity;
+    transform: translateZ(0);
+}
+
+.circuit-line {
+    position: absolute;
+    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
+    height: 2px;
+    width: 100%;
+    opacity: 0.3;
+    animation: circuit-pulse 4s infinite ease-in-out;
+    filter: drop-shadow(0 0 5px var(--accent-green));
+    transform: translateZ(0);
+    will-change: opacity, filter;
+    pointer-events: none;
+}
+
+.circuit-line:nth-child(1) { top: 15%; animation-delay: 0s; background: linear-gradient(90deg, transparent, var(--accent-green), transparent); }
+.circuit-line:nth-child(2) { top: 35%; animation-delay: 1s; background: linear-gradient(90deg, transparent, var(--accent-color-5), transparent); }
+.circuit-line:nth-child(3) { top: 55%; animation-delay: 2s; background: linear-gradient(90deg, transparent, var(--accent-purple), transparent); }
+.circuit-line:nth-child(4) { top: 75%; animation-delay: 3s; background: linear-gradient(90deg, transparent, var(--accent-color-1), transparent); }
+
+.circuit-vertical {
+    position: absolute;
+    background: linear-gradient(180deg, transparent, var(--accent-teal), transparent);
+    width: 2px;
+    height: 100%;
+    opacity: 0.3;
+    animation: circuit-pulse 4s infinite ease-in-out;
+    filter: drop-shadow(0 0 5px var(--accent-teal));
+    transform: translateZ(0);
+    will-change: opacity, filter;
+    pointer-events: none;
+}
+
+.circuit-vertical:nth-child(5) { left: 20%; animation-delay: 0.5s; background: linear-gradient(180deg, transparent, var(--accent-color-5), transparent); }
+.circuit-vertical:nth-child(6) { left: 40%; animation-delay: 1.5s; background: linear-gradient(180deg, transparent, var(--accent-color-5), transparent); }
+.circuit-vertical:nth-child(7) { left: 60%; animation-delay: 2.5s; background: linear-gradient(180deg, transparent, var(--accent-blue), transparent); }
+.circuit-vertical:nth-child(8) { left: 80%; animation-delay: 3.5s; background: linear-gradient(180deg, transparent, var(--accent-pink), transparent); }
+
+.circuit-node {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background-color: var(--accent-green);
+    border-radius: 50%;
+    opacity: 0.4;
+    box-shadow: 0 0 12px var(--accent-green);
+    animation: node-pulse 4s infinite;
+    transform: translateZ(0);
+    will-change: transform, opacity;
+    pointer-events: none;
+}
+
+.circuit-node:nth-child(9) { top: 15%; left: 20%; animation-delay: 0s; background-color: var(--accent-green); box-shadow: 0 0 15px var(--accent-green); }
+.circuit-node:nth-child(10) { top: 35%; left: 40%; animation-delay: 1s; background-color: var(--accent-color-5); box-shadow: 0 0 15px var(--accent-color-5); }
+.circuit-node:nth-child(11) { top: 55%; left: 60%; animation-delay: 2s; background-color: var(--accent-purple); box-shadow: 0 0 15px var(--accent-purple); }
+.circuit-node:nth-child(12) { top: 75%; left: 80%; animation-delay: 3s; background-color: var(--accent-color-1); box-shadow: 0 0 15px var(--accent-color-1); }
+
+.circuit-node-small {
+    width: 4px;
+    height: 4px;
+    animation: node-pulse-small 3s infinite alternate;
+}
+
+.circuit-node-small:nth-child(13) { top: 25%; left: 30%; animation-delay: 0.7s; background-color: var(--accent-yellow); box-shadow: 0 0 10px var(--accent-yellow); }
+.circuit-node-small:nth-child(14) { top: 45%; left: 10%; animation-delay: 1.2s; background-color: var(--accent-color-5); box-shadow: 0 0 10px var(--accent-color-5); }
+.circuit-node-small:nth-child(15) { top: 65%; left: 50%; animation-delay: 1.7s; background-color: var(--accent-teal); box-shadow: 0 0 10px var(--accent-teal); }
+.circuit-node-small:nth-child(16) { top: 85%; left: 70%; animation-delay: 2.2s; background-color: var(--accent-blue); box-shadow: 0 0 10px var(--accent-blue); }
+.circuit-node-small:nth-child(17) { top: 10%; left: 75%; animation-delay: 2.7s; background-color: var(--accent-purple); box-shadow: 0 0 10px var(--accent-purple); }
+.circuit-node-small:nth-child(18) { top: 60%; left: 90%; animation-delay: 3.2s; background-color: var(--accent-color-1); box-shadow: 0 0 10px var(--accent-color-1); }
+
+.circuit-diagonal {
+    position: absolute;
+    width: 150%;
+    height: 1px;
+    top: 50%;
+    left: -25%;
+    transform: rotate(15deg);
+    background: linear-gradient(90deg, transparent, var(--accent-color-3), transparent);
+    opacity: 0.25;
+    animation: circuit-pulse 5s infinite ease-in-out;
+    filter: drop-shadow(0 0 3px #00eeff);
+    transform: translateZ(0);
+    will-change: opacity, filter;
+    pointer-events: none;
+}
+
+.circuit-diagonal:nth-child(19) { top: 30%; animation-delay: 0.5s; background: linear-gradient(90deg, transparent, var(--accent-color-3), transparent); }
+.circuit-diagonal:nth-child(20) { top: 70%; animation-delay: 2.5s; background: linear-gradient(90deg, transparent, var(--accent-color-4), transparent); }
+
+.circuit-diagonal-reverse {
+    transform: rotate(-15deg);
+}
+
+.circuit-diagonal-reverse:nth-child(21) { top: 40%; animation-delay: 1.5s; background: linear-gradient(90deg, transparent, var(--accent-pink), transparent); }
+.circuit-diagonal-reverse:nth-child(22) { top: 80%; animation-delay: 3.5s; background: linear-gradient(90deg, transparent, var(--accent-color-2), transparent); }
+
+/* 优化动画性能 */
+@keyframes circuit-pulse {
+    0%, 100% {
+        opacity: 0.2;
+        filter: drop-shadow(0 0 1px currentColor);
+    }
+    50% {
+        opacity: 0.4;
+        filter: drop-shadow(0 0 4px currentColor);
+    }
+}
+
+@keyframes node-pulse {
+    0%, 100% {
+        opacity: 0.3;
+        transform: scale(1) translateZ(0);
+        filter: brightness(0.8);
+    }
+    50% {
+        opacity: 0.5;
+        transform: scale(1.2) translateZ(0);
+        filter: brightness(1.2);
+    }
+}
+
+@keyframes node-pulse-small {
+    0%, 100% {
+        opacity: 0.2;
+        transform: scale(1) translateZ(0);
+    }
+    50% {
+        opacity: 0.4;
+        transform: scale(1.2) translateZ(0);
+    }
+}
+
+/* 响应式设计 - 调整缩小后的尺寸 */
+@media screen and (max-width: 1200px) {
+    .title {
+        font-size: 5rem;
+    }
+    .hero-section {
+        min-height: 100vh;
+        padding: 2rem 1rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .title {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+        letter-spacing: 2px;
+    }
+    .subtitle {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+    }
+    .description {
+        font-size: 1rem;
+        margin-bottom: 1.5rem;
+        line-height: 1.6;
+        padding: 0 1rem;
+    }
+    .cta-button {
+        padding: 10px 24px;
+        font-size: 0.9rem;
+    }
+    .theme-selector {
+        margin: 1.5rem auto;
+        max-width: 90%;
+    }
+    .theme-options {
+        gap: 1rem;
+        justify-content: center;
+    }
+    .hero-section {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+    }
+    .theme-options .theme-option {
+        width: 70px !important;
+        height: 70px !important;
+        margin: 0 5px;
+        border: 1px solid rgba(0, 238, 255, 0.4);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 238, 255, 0.3);
+    }
+
+    .theme-options .theme-option .theme-icon-container {
+        width: 30px !important;
+        height: 30px !important;
+    }
+
+    .theme-options .theme-option .theme-name {
+        font-size: 0.75rem !important;
+    }
+
+    .hero-section .cta-button {
+        padding: 10px 24px !important;
+        font-size: 1rem !important;
+        margin-top: 1.5rem !important;
+    }
+    
+    .github-link {
+        width: 38px;
+        height: 38px;
+        font-size: 1.3rem;
+        top: 15px;
+        right: 15px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .title {
+        font-size: 3.2rem;
+        margin-bottom: 0.8rem;
+        letter-spacing: 1.5px;
+    }
+    .subtitle {
+        font-size: 1.2rem;
+        margin-bottom: 1rem;
+    }
+    .description {
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+        padding: 0 0.5rem;
+    }
+    .cta-button {
+        padding: 8px 20px;
+        font-size: 0.85rem;
+    }
+    .hero-section {
+        min-height: 100vh;
+        padding: 1.5rem 0.5rem;
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+    }
+    .theme-selector {
+        margin: 1rem auto;
+        padding: 0.5rem;
+        border-radius: 12px;
+        background: rgba(5, 15, 25, 0.3);
+        border: 1px solid rgba(0, 238, 255, 0.15);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+    }
+    .theme-options {
+        gap: 1rem;
+        padding: 0.5rem;
+    }
+    .theme-options .theme-option {
+        width: 65px !important;
+        height: 65px !important;
+        margin: 0 4px 8px;
+        border: 1px solid rgba(0, 238, 255, 0.5);
+        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 238, 255, 0.3);
+        background: linear-gradient(180deg, rgba(15, 35, 55, 0.95), rgba(8, 20, 40, 0.9));
+    }
+
+    .theme-options .theme-option .theme-icon-container {
+        width: 28px !important;
+        height: 28px !important;
+        margin-bottom: 0.4rem;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3),
+                    inset 0 0 4px rgba(0, 238, 255, 0.3);
+    }
+
+    .theme-options .theme-option .theme-name {
+        font-size: 0.7rem !important;
+        margin-top: 0.3rem;
+        text-shadow: 0 0 4px rgba(0, 255, 204, 0.4);
+    }
+
+    .theme-label {
+        margin-bottom: 0.6rem;
+        font-size: 1.1rem;
+        text-shadow: 0 0 6px rgba(0, 238, 255, 0.5);
+    }
+
+    .tech-circuit, .particle-container {
+        opacity: 0.6;
+    }
+
+    .hero-section .cta-button {
+        padding: 8px 18px !important;
+        font-size: 0.9rem !important;
+        min-width: 160px;
+        margin-top: 1rem !important;
+    }
+    
+    .github-link {
+        width: 34px;
+        height: 34px;
+        font-size: 1.2rem;
+        top: 12px;
+        right: 12px;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    .title {
+        font-size: 2.8rem;
+        margin-bottom: 0.7rem;
+    }
+    .subtitle {
+        font-size: 1rem;
+        margin-bottom: 0.7rem;
+    }
+    .description {
+        font-size: 0.8rem;
+        margin-bottom: 1.2rem;
+    }
+    .cta-button {
+        padding: 7px 16px;
+        font-size: 0.8rem;
+    }
+    .theme-options {
+        gap: 0.5rem;
+    }
+    .theme-options .theme-option {
+        width: 56px !important;
+        height: 56px !important;
+        margin: 0 3px 6px;
+    }
+
+    .theme-options .theme-option .theme-icon-container {
+        width: 24px !important;
+        height: 24px !important;
+    }
+
+    .theme-options .theme-option .theme-name {
+        font-size: 0.65rem !important;
+    }
+
+    .hero-section .cta-button {
+        padding: 7px 16px !important;
+        font-size: 0.85rem !important;
+        min-width: 140px;
+    }
+    
+    .github-link {
+        width: 30px;
+        height: 30px;
+        font-size: 1rem;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+@media screen and (max-height: 700px) {
+    .hero-section {
+        min-height: auto;
+        padding: 1rem 1rem;
+    }
+    .description {
+        margin-bottom: 1rem;
+        max-width: 600px;
+    }
+    .title {
+        margin-bottom: 0.5rem;
+    }
+    .subtitle {
+        margin-bottom: 0.5rem;
+    }
+}
+
+@media screen and (max-height: 500px) and (orientation: landscape) {
+    .hero-section {
+        padding: 0.5rem;
+    }
+    .title {
+        font-size: 2.5rem;
+        margin-bottom: 0.3rem;
+    }
+    .subtitle {
+        font-size: 1rem;
+        margin-bottom: 0.3rem;
+    }
+    .description {
+        font-size: 0.8rem;
+        margin-bottom: 0.8rem;
+    }
+    .cta-button {
+        padding: 6px 15px;
+        font-size: 0.8rem;
+    }
+    .theme-selector {
+        margin: 0.5rem 0;
+    }
+    .theme-label {
+        margin-bottom: 0.3rem;
+    }
+    .theme-options .theme-option {
+        width: 45px !important;
+        height: 45px !important;
+        margin: 0 2px 5px;
+    }
+
+    .theme-options .theme-option .theme-icon-container {
+        width: 18px !important;
+        height: 18px !important;
+    }
+
+    .theme-options .theme-option .theme-name {
+        font-size: 0.55rem !important;
+    }
+}
+
+/* 字体清晰度优化 */
+@supports (font-variation-settings: normal) {
+    * {
+        font-variation-settings: "wght" var(--font-weight, 400);
+        font-synthesis: none;
+    }
+}
+
+/* 防止字体在不同设备上渲染不一致 */
+@media screen and (-webkit-min-device-pixel-ratio: 2),
+       screen and (min-resolution: 192dpi) {
+    .title, .subtitle, .description, .description span, .powered-text {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+/* 调整 canvas 的层级和混合模式 */
+.matrix-rain {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    opacity: 0.4;
+    pointer-events: none;
+    mix-blend-mode: screen;
+}
+
+/* 隐藏所有滚动条 */
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background: transparent;
+}
+
+* {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+/* 修复某些设备上的overflow问题 */
+html, body {
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* GitHub 链接按钮 */
+.github-link {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: linear-gradient(145deg, #222, #000);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    text-decoration: none;
+    font-size: 1.6rem;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6), -2px -2px 8px rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    z-index: 100;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.github-link::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        to right,
+        transparent,
+        rgba(255, 255, 255, 0.1),
+        transparent
+    );
+    transform: rotate(45deg);
+    z-index: 1;
+}
+
+.github-link:hover {
+    transform: translateY(-3px);
+    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.7), -3px -3px 10px rgba(255, 255, 255, 0.15);
+    background: linear-gradient(145deg, #444, #111);
+}
+
+.github-link i {
+    position: relative;
+    z-index: 2;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+/* 加载页面样式 */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    overflow: hidden;
+    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
+}
+
+.loading-screen.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.loading-container {
+    position: relative;
+    width: 300px;
+    max-width: 80%;
+}
+
+.loading-title {
+    font-size: 3rem;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 2rem;
+    background: linear-gradient(45deg, var(--primary-color), var(--accent-color-5));
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: 5px;
+    position: relative;
+    filter: drop-shadow(0 0 8px rgba(0, 255, 204, 0.3));
+    font-family: var(--font-mono);
+    animation: glitch-text 1s infinite, loading-title-animation 1.5s forwards;
+}
+
+.loading-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, rgba(0, 255, 204, 0.05), transparent 70%);
+    z-index: -1;
+}
+
+.loading-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(rgba(0, 255, 204, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 255, 204, 0.1) 1px, transparent 1px);
+    background-size: 40px 40px;
+    opacity: 0.15;
+    z-index: -1;
+    animation: grid-animation 20s linear infinite;
+}
+
+.progress-container {
+    width: 100%;
+    height: 6px;
+    background: rgba(10, 30, 30, 0.5);
+    border-radius: 3px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
+}
+
+.progress-bar {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--accent-color-5), var(--primary-color));
+    position: relative;
+    border-radius: 3px;
+    transition: width 0.05s ease-out;
+}
+
+.progress-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: progress-shine 1s linear infinite;
+}
+
+.progress-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 5px;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
+    animation: pulse 0.5s ease-in-out infinite alternate;
+}
+
+.progress-text {
+    font-family: var(--font-mono);
+    text-align: right;
+    margin-top: 0.5rem;
+    font-size: 1rem;
+    color: var(--primary-color);
+    text-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
+    font-weight: 500;
+    letter-spacing: 1px;
+}
+
+.glitch-effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    mix-blend-mode: overlay;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.glitch-line {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background-color: rgba(0, 255, 204, 0.5);
+    opacity: 0;
+}
+
+.glitch-line:nth-child(1) { top: 20%; animation: glitch-line-animation 3s infinite 0.5s; }
+.glitch-line:nth-child(2) { top: 40%; animation: glitch-line-animation 4s infinite 1s; }
+.glitch-line:nth-child(3) { top: 60%; animation: glitch-line-animation 2.5s infinite 1.5s; }
+.glitch-line:nth-child(4) { top: 80%; animation: glitch-line-animation 3.5s infinite 0.2s; }
+
+.loading-message {
+    font-family: var(--font-mono);
+    margin-top: 1.5rem;
+    font-size: 0.9rem;
+    color: var(--accent-color-5);
+    letter-spacing: 1px;
+    text-align: center;
+    opacity: 0.8;
+    max-width: 80%;
+    animation: typing 3s steps(30, end) infinite;
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+}
+
+/* 自定义光标样式 */
+.loading-message::after {
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 16px;
+    background-color: var(--accent-color-5);
+    margin-left: 2px;
+    animation: cursor-blink 0.8s step-end infinite;
+    border-radius: 1px;
+    box-shadow: 0 0 8px var(--accent-color-5);
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+}
+
+@keyframes cursor-blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+/* 过渡故障特效 */
+.transition-glitch {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+.transition-glitch.active {
+    opacity: 1;
+    animation: transition-flicker 0.5s ease-out forwards;
+}
+
+.glitch-stripe {
+    position: absolute;
+    width: 100%;
+    height: 10vh;
+    background-color: rgba(0, 255, 204, 0.15);
+    transform: translateX(-100%);
+}
+
+.glitch-stripe:nth-child(1) { 
+    top: 15%; 
+    animation: glitch-stripe-move 0.3s cubic-bezier(0.2, 0.6, 0.8, 0.4) 0.1s forwards;
+    height: 8vh;
+}
+.glitch-stripe:nth-child(2) { 
+    top: 45%; 
+    animation: glitch-stripe-move 0.25s cubic-bezier(0.3, 0.8, 0.7, 0.2) 0.2s forwards;
+    height: 12vh;
+    background-color: rgba(170, 0, 255, 0.12);
+}
+.glitch-stripe:nth-child(3) { 
+    top: 70%; 
+    animation: glitch-stripe-move 0.35s cubic-bezier(0.1, 0.7, 0.9, 0.3) 0.15s forwards;
+    height: 6vh;
+    background-color: rgba(255, 0, 170, 0.1);
+}
+
+@keyframes glitch-stripe-move {
+    0% { transform: translateX(-100%) skewY(2deg); filter: hue-rotate(0deg); }
+    60% { filter: hue-rotate(45deg); }
+    100% { transform: translateX(100%) skewY(-2deg); filter: hue-rotate(0deg); }
+}
+
+@keyframes transition-flicker {
+    0% { opacity: 0; filter: brightness(1); }
+    5% { opacity: 0.8; filter: brightness(1.5) contrast(1.2); }
+    10% { opacity: 0.2; filter: brightness(0.8) contrast(1.5); }
+    15% { opacity: 0.9; filter: brightness(1.2) contrast(0.8) hue-rotate(10deg); }
+    20% { opacity: 0.3; filter: brightness(1.5) contrast(1.3); }
+    30% { opacity: 0.8; filter: brightness(0.9) contrast(1.8) hue-rotate(-15deg); }
+    40% { opacity: 0.2; filter: brightness(1.2) contrast(0.7); }
+    50% { opacity: 0.9; filter: brightness(1.1) contrast(1.2); }
+    60% { opacity: 0.3; filter: brightness(1.3) contrast(1.1) hue-rotate(5deg); }
+    80% { opacity: 0.2; filter: brightness(1) contrast(1); }
+    100% { opacity: 0; filter: brightness(1) contrast(1); }
+}
+
+/* 故障线条 */
+.glitch-line-horizontal {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background-color: var(--accent-color-5);
+    opacity: 0;
+    left: 0;
+    z-index: 1000;
+}
+
+.glitch-line-horizontal:nth-child(4) { top: 30%; animation: glitch-h-line 0.2s linear 0.1s; }
+.glitch-line-horizontal:nth-child(5) { top: 60%; animation: glitch-h-line 0.2s linear 0.25s; }
+.glitch-line-horizontal:nth-child(6) { top: 80%; animation: glitch-h-line 0.2s linear 0.15s; }
+
+@keyframes glitch-h-line {
+    0% { transform: translateX(-100%); opacity: 0.7; }
+    100% { transform: translateX(100%); opacity: 0; }
+}
+
+/* 进度条动画效果 */
+@keyframes progress-shine {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+@keyframes pulse {
+    0% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+@keyframes grid-animation {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(40px); }
+}
+
+@keyframes typing {
+    0% { width: 0; }
+    50% { width: 100%; }
+    90% { width: 100%; }
+    100% { width: 0; }
+}
+
+@keyframes glitch-line-animation {
+    0% { opacity: 0; transform: translateX(-100%); }
+    10% { opacity: 0.8; transform: translateX(0); }
+    15% { opacity: 0; transform: translateX(100%); }
+    20% { opacity: 0; }
+    100% { opacity: 0; }
+}
+
+@keyframes glitch-text {
+    0% { transform: translate(0); }
+    20% { transform: translate(-2px, 2px); }
+    40% { transform: translate(-2px, -2px); }
+    60% { transform: translate(2px, 2px); }
+    80% { transform: translate(2px, -2px); }
+    100% { transform: translate(0); }
+}
+
+@keyframes loading-title-animation {
+    0% { clip-path: inset(0 100% 0 0); }
+    100% { clip-path: inset(0 0 0 0); }
+}
+
+/* 数字字符故障效果 */
+.digital-glitch {
+    position: relative;
+    display: inline-block;
+    color: var(--primary-color);
+    font-family: var(--font-mono);
+    font-weight: bold;
+    mix-blend-mode: exclusion;
+    animation: digital-glitch 3s infinite;
+}
+
+@keyframes digital-glitch {
+    0% { opacity: 1; }
+    7% { opacity: 1; text-shadow: 0 0 5px var(--primary-color); }
+    8% { opacity: 0; text-shadow: none; }
+    9% { opacity: 1; }
+    10% { opacity: 1; text-shadow: 0 0 5px var(--primary-color); }
+    11% { opacity: 0; text-shadow: none; }
+    12% { opacity: 1; }
+    20% { opacity: 1; }
+    100% { opacity: 1; }
+}
+
+@media screen and (max-width: 768px) {
+    .loading-title {
+        font-size: 2rem;
+        margin-bottom: 1.5rem;
+    }
+    
+    .loading-container {
+        width: 250px;
+    }
+    
+    .progress-text {
+        font-size: 0.9rem;
+    }
+    
+    .loading-message {
+        font-size: 0.8rem;
+        margin-top: 1rem;
+    }
+}

static/themes/README.md

@@ -0,0 +1,51 @@
+# OpenManus 主题系统
+
+本文件夹包含OpenManus的不同用户界面主题。
+
+## 主题结构
+
+每个主题必须遵循以下文件结构：
+
+```
+主题名称/
+  ├── static/
+  │   ├── style.css  (必需)
+  │   ├── main.js    (必需)
+  │   └── ...        (其他静态资源)
+  ├── templates/
+  │   └── chat.html  (必需)
+  └── theme.json     (必需)
+```
+
+## 如何添加新主题
+
+1. 在`themes`文件夹中创建一个新文件夹，使用你的主题名称
+2. 复制`static`和`templates`文件夹结构
+3. 创建`theme.json`文件，包含以下内容：
+
+```json
+{
+    "name": "主题的中文名称",
+    "description": "主题的简短描述",
+    "author": "作者名",
+    "version": "1.0.0"
+}
+```
+
+4. 修改CSS和HTML文件以实现你想要的外观
+
+## 路径引用
+
+在`chat.html`中，确保使用以下路径格式引用资源：
+
+```html
+<link rel="stylesheet" href="/static/themes/你的主题名称/static/style.css">
+<script src="/static/themes/你的主题名称/static/main.js"></script>
+```
+
+## 示例主题
+
+- `Normal`: 默认主题
+- `cyberpunk`: 赛博朋克主题
+
+当你添加新主题后，系统会自动在首页显示它作为可选项。

static/themes/cyberpunk/static/main.js

@@ -0,0 +1,1255 @@
+let currentEventSource = null;
+let historyVisible = false; // Track history panel status
+
+function createTask() {
+    const promptInput = document.getElementById('prompt-input');
+    const prompt = promptInput.value.trim();
+
+    if (!prompt) {
+        alert("Please enter a valid task");
+        promptInput.focus();
+        return;
+    }
+
+    if (currentEventSource) {
+        currentEventSource.close();
+        currentEventSource = null;
+    }
+
+    const taskContainer = document.getElementById('task-container');
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+    const container = document.querySelector('.container');
+    const resultPanel = document.getElementById('result-panel');
+
+    // 重置UI状态
+    resetUIState();
+
+    // Hide welcome message, show step loading status
+    const welcomeMessage = taskContainer.querySelector('.welcome-message');
+    if (welcomeMessage) {
+        welcomeMessage.style.display = 'none';
+    }
+
+    stepsContainer.innerHTML = '<div class="loading">Initializing task...</div>';
+    resultContainer.innerHTML = '';
+
+    // Close history panel on mobile devices
+    closeHistoryOnMobile();
+
+    fetch('/tasks', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ prompt })
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(err => { throw new Error(err.detail || 'Request failed') });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (!data.task_id) {
+            throw new Error('Invalid task ID');
+        }
+        setupSSE(data.task_id);
+        loadHistory();
+        promptInput.value = '';
+    })
+    .catch(error => {
+        stepsContainer.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        updateResultPanel({result: error.message}, 'error');
+        showResultPanel();
+        console.error('Failed to create task:', error);
+    });
+}
+
+// 重置UI状态的独立函数，避免重复代码
+function resetUIState() {
+    const container = document.querySelector('.container');
+    const resultPanel = document.getElementById('result-panel');
+
+    // 重置容器布局
+    container.classList.remove('with-result');
+    container.style.width = '98%';
+
+    // 确保结果面板完全隐藏
+    if (resultPanel) {
+        resultPanel.classList.add('hidden');
+        resultPanel.style.display = 'none';
+    }
+
+    // 触发布局调整
+    handleResponsiveLayout();
+}
+
+function setupSSE(taskId) {
+    let retryCount = 0;
+    const maxRetries = 3;
+    const retryDelay = 2000;
+    let lastResultContent = '';
+    let stepsData = [];
+
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+
+    // Hide result panel by default
+    hideResultPanel();
+
+    function connect() {
+        const eventSource = new EventSource(`/tasks/${taskId}/events`);
+        currentEventSource = eventSource;
+
+        let heartbeatTimer = setInterval(() => {
+            const pingDiv = document.createElement('div');
+            pingDiv.className = 'ping';
+            pingDiv.innerHTML = '·';
+            stepsContainer.appendChild(pingDiv);
+        }, 5000);
+
+        // Initial polling
+        fetch(`/tasks/${taskId}`)
+            .then(response => response.json())
+            .then(task => {
+                updateTaskStatus(task);
+            })
+            .catch(error => {
+                console.error('Initial status retrieval failed:', error);
+            });
+
+        const handleEvent = (event, type) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                const loadingDiv = stepsContainer.querySelector('.loading');
+                if (loadingDiv) loadingDiv.remove();
+
+                const { formattedContent, timestamp, isoTimestamp } = formatStepContent(data, type);
+
+                stepsData.push({
+                    type: type,
+                    content: formattedContent,
+                    timestamp: timestamp,
+                    isoTimestamp: isoTimestamp,
+                    element: createStepElement(type, formattedContent, timestamp)
+                });
+
+                stepsData.sort((a, b) => {
+                    return new Date(a.isoTimestamp) - new Date(b.isoTimestamp);
+                });
+
+                stepsContainer.innerHTML = '';
+                stepsData.forEach(step => {
+                    stepsContainer.appendChild(step.element);
+                });
+
+                document.querySelectorAll('.step-item').forEach(item => {
+                    item.classList.remove('active');
+                });
+
+                const latestStep = stepsData[stepsData.length - 1];
+                if (latestStep && latestStep.element) {
+                    latestStep.element.classList.add('active');
+                }
+
+                autoScroll(stepsContainer);
+
+                if (type === 'tool' || type === 'act' || type === 'result') {
+                    updateResultPanel(data, type);
+                    showResultPanel();
+                }
+
+                fetch(`/tasks/${taskId}`)
+                    .then(response => response.json())
+                    .then(task => {
+                        updateTaskStatus(task);
+                    })
+                    .catch(error => {
+                        console.error('Failed to update status:', error);
+                    });
+            } catch (e) {
+                console.error(`Error processing ${type} event:`, e);
+            }
+        };
+
+        const eventTypes = ['think', 'tool', 'act', 'log', 'run', 'message'];
+        eventTypes.forEach(type => {
+            eventSource.addEventListener(type, (event) => handleEvent(event, type));
+        });
+
+        eventSource.addEventListener('complete', (event) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                lastResultContent = data.result || '';
+
+                const completeDiv = document.createElement('div');
+                completeDiv.className = 'complete';
+                completeDiv.innerHTML = '<div>✅ Task completed</div>';
+                stepsContainer.appendChild(completeDiv);
+
+                updateResultPanel({result: lastResultContent}, 'complete');
+                showResultPanel();
+
+                fetch(`/tasks/${taskId}`)
+                    .then(response => response.json())
+                    .then(task => {
+                        updateTaskStatus(task);
+                    })
+                    .catch(error => {
+                        console.error('Failed to update final status:', error);
+                    });
+
+                eventSource.close();
+                currentEventSource = null;
+            } catch (e) {
+                console.error('Error processing completion event:', e);
+            }
+        });
+
+        eventSource.addEventListener('error', (event) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'error';
+                errorDiv.innerHTML = `<div>❌ Error: ${data.message}</div>`;
+                stepsContainer.appendChild(errorDiv);
+
+                updateResultPanel({result: data.message}, 'error');
+                showResultPanel();
+
+                eventSource.close();
+                currentEventSource = null;
+            } catch (e) {
+                console.error('Error processing error:', e);
+            }
+        });
+
+        eventSource.onerror = (err) => {
+            if (eventSource.readyState === EventSource.CLOSED) return;
+
+            console.error('SSE connection error:', err);
+            clearInterval(heartbeatTimer);
+            eventSource.close();
+
+            fetch(`/tasks/${taskId}`)
+                .then(response => response.json())
+                .then(task => {
+                    if (task.status === 'completed' || task.status === 'failed') {
+                        updateTaskStatus(task);
+                        if (task.status === 'completed') {
+                            const completeDiv = document.createElement('div');
+                            completeDiv.className = 'complete';
+                            completeDiv.innerHTML = '<div>✅ Task completed</div>';
+                            stepsContainer.appendChild(completeDiv);
+
+                            if (task.steps && task.steps.length > 0) {
+                                const lastStep = task.steps[task.steps.length - 1];
+                                updateResultPanel({result: lastStep.result}, 'complete');
+                                showResultPanel();
+                            }
+                        } else {
+                            const errorDiv = document.createElement('div');
+                            errorDiv.className = 'error';
+                            errorDiv.innerHTML = `<div>❌ Error: ${task.error || 'Task failed'}</div>`;
+                            stepsContainer.appendChild(errorDiv);
+
+                            updateResultPanel({result: task.error || 'Task failed'}, 'error');
+                            showResultPanel();
+                        }
+                    } else if (retryCount < maxRetries) {
+                        retryCount++;
+                        const warningDiv = document.createElement('div');
+                        warningDiv.className = 'warning';
+                        warningDiv.innerHTML = `<div>⚠ Connection lost, retrying in ${retryDelay/1000} seconds (${retryCount}/${maxRetries})...</div>`;
+                        stepsContainer.appendChild(warningDiv);
+                        setTimeout(connect, retryDelay);
+                    } else {
+                        const errorDiv = document.createElement('div');
+                        errorDiv.className = 'error';
+                        errorDiv.innerHTML = '<div>⚠ Connection lost, please refresh the page</div>';
+                        stepsContainer.appendChild(errorDiv);
+
+                        updateResultPanel({result: 'Connection lost, please refresh the page'}, 'error');
+                        showResultPanel();
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to check task status:', error);
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(connect, retryDelay);
+                    }
+                });
+        };
+    }
+
+    connect();
+}
+
+function updateResultPanel(data, type) {
+    const resultContainer = document.getElementById('result-container');
+    const currentStep = document.getElementById('current-step');
+
+    if (!resultContainer || !currentStep) return;
+
+    // Update top step information
+    const typeLabel = getEventLabel(type);
+    const icon = getEventIcon(type);
+
+    // Clear and build new UI
+    currentStep.innerHTML = '';
+    currentStep.setAttribute('data-type', type); // 添加类型属性
+
+    // Add icon
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'emoji-icon';
+    iconSpan.innerHTML = icon; // 使用innerHTML而不是textContent以支持HTML标签
+    currentStep.appendChild(iconSpan);
+
+    // Create status text element, add typewriter effect
+    const statusText = document.createElement('span');
+    statusText.className = 'status-text';
+    currentStep.appendChild(statusText);
+
+    // Typewriter effect displaying status text
+    let i = 0;
+    let typingEffect = setInterval(() => {
+        if (i < typeLabel.length) {
+            statusText.textContent += typeLabel.charAt(i);
+            i++;
+        } else {
+            clearInterval(typingEffect);
+        }
+    }, 50);
+
+    // Update content area
+    let content = '';
+
+    if (data.result) {
+        content = data.result;
+    } else if (data.message) {
+        content = data.message;
+    } else {
+        content = JSON.stringify(data, null, 2);
+    }
+
+    // Clear previous content, add new content
+    resultContainer.innerHTML = '';
+
+    // Create content area with proper styling for overflow control
+    const contentDiv = document.createElement('div');
+    contentDiv.classList.add('content-box');
+    contentDiv.style.width = '100%';
+    contentDiv.style.maxWidth = '100%';
+    contentDiv.style.boxSizing = 'border-box';
+    contentDiv.style.overflowWrap = 'break-word';
+    contentDiv.style.wordWrap = 'break-word';
+    contentDiv.style.wordBreak = 'break-word';
+
+    const preElement = document.createElement('pre');
+    preElement.style.whiteSpace = 'pre-wrap';
+    preElement.style.wordWrap = 'break-word';
+    preElement.style.wordBreak = 'break-word';
+    preElement.style.maxWidth = '100%';
+    preElement.style.boxSizing = 'border-box';
+    preElement.textContent = content;
+
+    contentDiv.appendChild(preElement);
+    resultContainer.appendChild(contentDiv);
+
+    // Ensure proper scrolling
+    setTimeout(() => {
+        resultContainer.scrollTop = 0;
+    }, 100);
+}
+
+function loadHistory() {
+    fetch('/tasks')
+    .then(response => {
+        if (!response.ok) {
+            return response.text().then(text => {
+                throw new Error(`Request failed: ${response.status} - ${text.substring(0, 100)}`);
+            });
+        }
+        return response.json();
+    })
+    .then(tasks => {
+        const listContainer = document.getElementById('task-list');
+        if (tasks.length === 0) {
+            listContainer.innerHTML = '<div class="info">No history tasks</div>';
+            return;
+        }
+
+        // Update history count
+        const historyCount = document.querySelector('.history-count');
+        if (historyCount) {
+            historyCount.textContent = tasks.length;
+        }
+
+        listContainer.innerHTML = tasks.map(task => `
+            <div class="task-card" data-task-id="${task.id}" onclick="loadTask('${task.id}')">
+                <div class="task-title">${task.prompt}</div>
+                <div class="task-meta">
+                    <span>${new Date(task.created_at).toLocaleString()}</span>
+                    <span class="status status-${task.status ? task.status.toLowerCase() : 'unknown'}">
+                        ${getStatusText(task.status)}
+                    </span>
+                </div>
+            </div>
+        `).join('');
+    })
+    .catch(error => {
+        console.error('Failed to load history:', error);
+        const listContainer = document.getElementById('task-list');
+        listContainer.innerHTML = `<div class="error">Loading failed: ${error.message}</div>`;
+    });
+}
+
+function loadTask(taskId) {
+    if (currentEventSource) {
+        currentEventSource.close();
+        currentEventSource = null;
+    }
+
+    const taskContainer = document.getElementById('task-container');
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+
+    // 重置UI状态
+    resetUIState();
+
+    // Hide welcome message
+    const welcomeMessage = taskContainer.querySelector('.welcome-message');
+    if (welcomeMessage) {
+        welcomeMessage.style.display = 'none';
+    }
+
+    stepsContainer.innerHTML = '<div class="loading">Loading task...</div>';
+    resultContainer.innerHTML = '';
+
+    // Close history panel on mobile devices
+    closeHistoryOnMobile();
+
+    fetch(`/tasks/${taskId}`)
+        .then(response => response.json())
+        .then(task => {
+            // 高亮当前选中的任务卡片
+            highlightTaskCard(taskId);
+
+            stepsContainer.innerHTML = '';
+            if (task.steps && task.steps.length > 0) {
+                // 按时间戳排序渲染步骤
+                renderSortedSteps(task.steps, task.created_at);
+            } else {
+                stepsContainer.innerHTML = '<div class="info">No steps recorded for this task</div>';
+            }
+
+            updateTaskStatus(task);
+        })
+        .catch(error => {
+            console.error('Failed to load task:', error);
+            stepsContainer.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        });
+}
+
+// 高亮当前选中的任务卡片
+function highlightTaskCard(taskId) {
+    const taskCards = document.querySelectorAll('.task-card');
+    taskCards.forEach(card => {
+        card.classList.remove('active');
+        if (card.getAttribute('data-task-id') === taskId) {
+            card.classList.add('active');
+        }
+    });
+}
+
+// 按时间戳排序渲染步骤
+function renderSortedSteps(steps, taskCreatedAt) {
+    const stepsContainer = document.getElementById('steps-container');
+
+    // 存储步骤集合
+    let taskSteps = [];
+
+    steps.forEach((step, index) => {
+        const stepTimestamp = new Date(step.created_at || taskCreatedAt).toLocaleTimeString();
+        const stepElement = createStepElement(
+            step.type,
+            step.result,
+            stepTimestamp
+        );
+
+        // 将步骤添加到集合
+        taskSteps.push({
+            index: index,
+            timestamp: stepTimestamp,
+            isoTimestamp: step.created_at || taskCreatedAt, // 保存ISO时间戳
+            element: stepElement,
+            step: step
+        });
+    });
+
+    // 根据时间戳排序步骤
+    taskSteps.sort((a, b) => {
+        // 尝试使用ISO时间戳进行比较
+        if (a.isoTimestamp && b.isoTimestamp) {
+            return new Date(a.isoTimestamp) - new Date(b.isoTimestamp);
+        }
+
+        // 首先按时间戳排序，如果时间相同，按索引排序
+        const timeCompare = new Date(a.timestamp) - new Date(b.timestamp);
+        return timeCompare !== 0 ? timeCompare : a.index - b.index;
+    });
+
+    // 将排序后的步骤添加到容器
+    taskSteps.forEach((stepData, index) => {
+        // 只将最后一个步骤设为展开状态
+        if (index === taskSteps.length - 1) {
+            stepData.element.classList.add('expanded');
+            stepData.element.classList.add('active');
+
+            // 显示最后一个步骤的结果
+            updateResultPanel({result: stepData.step.result}, stepData.step.type);
+            showResultPanel();
+        }
+
+        stepsContainer.appendChild(stepData.element);
+    });
+}
+
+function formatStepContent(data, eventType) {
+    // 创建具有ISO格式的时间戳，确保排序一致性
+    const now = new Date();
+    const isoTimestamp = now.toISOString();
+    const localTime = now.toLocaleTimeString();
+
+    return {
+        formattedContent: data.result || (data.message || JSON.stringify(data)),
+        timestamp: localTime,
+        isoTimestamp: isoTimestamp // 添加ISO格式时间戳，用于排序
+    };
+}
+
+function createStepElement(type, content, timestamp) {
+    const step = document.createElement('div');
+
+    // Executing step
+    const stepRegex = /Executing step (\d+)\/(\d+)/;
+    if (type === 'log' && stepRegex.test(content)) {
+        const match = content.match(stepRegex);
+        const currentStep = parseInt(match[1]);
+        const totalSteps = parseInt(match[2]);
+
+        step.className = 'step-divider';
+        step.innerHTML = `
+            <div class="step-circle">${currentStep}</div>
+            <div class="step-line"></div>
+            <div class="step-info">${currentStep}/${totalSteps}</div>
+        `;
+    } else if (type === 'act') {
+        // Check if it contains information about file saving
+        const saveRegex = /Content successfully saved to (.+)/;
+        const match = content.match(saveRegex);
+
+        step.className = `step-item ${type}`;
+        step.dataset.type = type;
+        step.dataset.timestamp = timestamp; // 存储时间戳为数据属性
+
+        // 获取图标HTML
+        const iconHtml = getEventIcon(type);
+
+        if (match && match[1]) {
+            const filePath = match[1].trim();
+            const fileName = filePath.split('/').pop();
+            const fileExtension = fileName.split('.').pop().toLowerCase();
+
+            // Handling different types of files
+            let fileInteractionHtml = '';
+
+            if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(fileExtension)) {
+                fileInteractionHtml = `
+                    <div class="file-interaction image-preview">
+                        <img src="${filePath}" alt="${fileName}" class="preview-image" onclick="showFullImage('${filePath}')">
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载图片</a>
+                    </div>
+                `;
+            } else if (['mp3', 'wav', 'ogg'].includes(fileExtension)) {
+                fileInteractionHtml = `
+                    <div class="file-interaction audio-player">
+                        <audio controls src="${filePath}"></audio>
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载音频</a>
+                    </div>
+                `;
+            } else if (['html', 'js', 'py'].includes(fileExtension)) {
+                fileInteractionHtml = `
+                    <div class="file-interaction code-file">
+                        <button onclick="simulateRunPython('${filePath}')" class="run-button">▶️ 模拟运行</button>
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载文件</a>
+                    </div>
+                `;
+            } else {
+                fileInteractionHtml = `
+                    <div class="file-interaction">
+                        <a href="/download?file_path=${filePath}" download="${fileName}" class="download-link">⬇️ 下载文件: ${fileName}</a>
+                    </div>
+                `;
+            }
+
+            step.innerHTML = `
+                <div class="log-header" onclick="toggleStepContent(this)">
+                    <div class="log-prefix">
+                        <span class="log-prefix-icon">${iconHtml}</span>
+                        <span>${getEventLabel(type)}</span>
+                        <time>${timestamp}</time>
+                    </div>
+                    <div class="content-preview">${content.substring(0, 20) + (content.length > 20 ? "..." : "")}</div>
+                    <div class="step-controls">
+                        <span class="minimize-btn" onclick="minimizeStep(event, this)"></span>
+                    </div>
+                </div>
+                <div class="log-body">
+                    <div class="log-content">
+                        <pre>${content}</pre>
+                        ${fileInteractionHtml}
+                    </div>
+                </div>
+            `;
+        } else {
+            step.innerHTML = `
+                <div class="log-header" onclick="toggleStepContent(this)">
+                    <div class="log-prefix">
+                        <span class="log-prefix-icon">${iconHtml}</span>
+                        <span>${getEventLabel(type)}</span>
+                        <time>${timestamp}</time>
+                    </div>
+                    <div class="content-preview">${content.substring(0, 20) + (content.length > 20 ? "..." : "")}</div>
+                    <div class="step-controls">
+                        <span class="minimize-btn" onclick="minimizeStep(event, this)"></span>
+                    </div>
+                </div>
+                <div class="log-body">
+                    <div class="log-content">
+                        <pre>${content}</pre>
+                    </div>
+                </div>
+            `;
+        }
+    } else {
+        // Get content preview
+        let contentPreview = "";
+        if (type === 'think' && content.length > 0) {
+            // Extract the first 30 characters of the thinking content as preview
+            contentPreview = content.substring(0, 30) + (content.length > 30 ? "..." : "");
+        } else if (type === 'tool' && content.includes('selected')) {
+            // Tool selection content remains as is
+            contentPreview = content;
+        } else if (type === 'log') {
+            // Log content remains as is, usually short
+            contentPreview = content;
+        } else {
+            // Other types take the first 20 characters
+            contentPreview = content.substring(0, 20) + (content.length > 20 ? "..." : "");
+        }
+
+        step.className = `step-item ${type}`;
+        step.dataset.type = type;
+        step.dataset.timestamp = timestamp; // 存储时间戳为数据属性
+
+        // 获取图标HTML
+        const iconHtml = getEventIcon(type);
+
+        // 确保时间戳显示在log-prefix中，并将步骤类型标签包装在span标签中
+        step.innerHTML = `
+            <div class="log-header" onclick="toggleStepContent(this)">
+                <div class="log-prefix">
+                    <span class="log-prefix-icon">${iconHtml}</span>
+                    <span>${getEventLabel(type)}</span>
+                    <time>${timestamp}</time>
+                </div>
+                <div class="content-preview">${contentPreview}</div>
+                <div class="step-controls">
+                    <span class="minimize-btn" onclick="minimizeStep(event, this)"></span>
+                </div>
+            </div>
+            <div class="log-body">
+                <div class="log-content">
+                    <pre>${content}</pre>
+                </div>
+            </div>
+        `;
+    }
+
+    return step;
+}
+
+// Toggle display/hide of step content
+function toggleStepContent(header) {
+    const stepItem = header.closest('.step-item');
+    if (!stepItem) return;
+
+    const logBody = stepItem.querySelector('.log-body');
+    if (!logBody) return;
+
+    // 关闭其他展开的步骤
+    document.querySelectorAll('.step-item.expanded').forEach(item => {
+        if (item !== stepItem) {
+            item.classList.remove('expanded');
+        }
+    });
+
+    // 切换当前步骤的展开状态
+    stepItem.classList.toggle('expanded');
+
+    // 高亮当前步骤
+    highlightStep(stepItem);
+
+    // 如果步骤展开，更新结果面板并显示
+    if (stepItem.classList.contains('expanded')) {
+        const type = stepItem.dataset.type;
+        const content = stepItem.querySelector('pre')?.textContent || '';
+
+        updateResultPanel({result: content}, type);
+        showResultPanel();
+    }
+
+    // 触发布局调整
+    handleResponsiveLayout();
+}
+
+// Minimize step without toggling expansion
+function minimizeStep(event, btn) {
+    event.stopPropagation(); // 阻止事件冒泡
+
+    const stepItem = btn.closest('.step-item');
+    if (!stepItem) return;
+
+    stepItem.classList.remove('expanded');
+
+    // 触发布局调整
+    handleResponsiveLayout();
+}
+
+// Toggle result panel display state
+function toggleResultPanel() {
+    const resultPanel = document.getElementById('result-panel');
+
+    if (!resultPanel) return;
+
+    if (resultPanel.classList.contains('hidden')) {
+        showResultPanel();
+    } else {
+        hideResultPanel();
+    }
+}
+
+function hideResultPanel() {
+    const resultPanel = document.getElementById('result-panel');
+    const container = document.querySelector('.container');
+
+    if (!resultPanel) return;
+
+    // 先添加hidden类，触发CSS动画
+    resultPanel.classList.add('hidden');
+    container.classList.remove('with-result');
+
+    // 延迟处理样式变化，确保过渡效果
+    setTimeout(function() {
+        resultPanel.style.display = 'none';
+        container.style.width = '98%';
+        handleResponsiveLayout();
+    }, 300);
+}
+
+function showResultPanel() {
+    const resultPanel = document.getElementById('result-panel');
+    const container = document.querySelector('.container');
+    const resultContainer = document.getElementById('result-container');
+
+    if (!resultPanel) return;
+
+    // 设置为可见
+    resultPanel.style.display = 'flex';
+    resultPanel.style.flexDirection = 'column';
+
+    // 确保结果容器可滚动且内容不溢出
+    if (resultContainer) {
+        resultContainer.style.overflowY = 'auto';
+        resultContainer.style.overflowX = 'hidden';
+        resultContainer.style.maxHeight = 'calc(100vh - 200px)';
+        resultContainer.style.width = '100%';
+        resultContainer.style.wordWrap = 'break-word';
+        resultContainer.style.wordBreak = 'break-word';
+        resultContainer.style.boxSizing = 'border-box';
+        resultContainer.style.padding = '5px 10px 15px 5px';
+
+        // 应用内容溢出处理
+        ensureContentFitsContainer(resultContainer);
+    }
+
+    // 使用setTimeout确保DOM更新
+    setTimeout(() => {
+        resultPanel.classList.remove('hidden');
+        container.classList.add('with-result');
+
+        // 调整容器宽度
+        if (window.innerWidth > 1024) {
+            container.style.width = 'calc(68% - 10px)';
+            // 确保结果面板的视觉效果正确显示
+            resultPanel.style.transform = 'translateX(0)';
+        }
+
+        // 触发布局调整
+        handleResponsiveLayout();
+
+        // 再次应用内容溢出处理，确保所有内容都适应容器
+        if (resultContainer) {
+            ensureContentFitsContainer(resultContainer);
+        }
+    }, 50);
+}
+
+function autoScroll(element) {
+    if (element) {
+        element.scrollTop = element.scrollHeight;
+    }
+}
+
+// 综合处理响应式布局的函数
+function handleResponsiveLayout() {
+    const container = document.querySelector('.container');
+    const resultPanel = document.getElementById('result-panel');
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+    const isMobile = window.innerWidth <= 768;
+    const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;
+
+    // 确保滚动容器始终可滚动
+    if (stepsContainer) {
+        stepsContainer.style.overflowY = 'auto';
+        stepsContainer.style.overflowX = 'hidden';
+    }
+
+    if (resultContainer) {
+        resultContainer.style.overflowY = 'auto';
+        resultContainer.style.overflowX = 'hidden';
+        resultContainer.style.maxHeight = isMobile ? 'calc(50vh - 150px)' : 'calc(100vh - 200px)';
+        resultContainer.style.width = '100%';
+        resultContainer.style.boxSizing = 'border-box';
+
+        // 确保内容不会溢出
+        ensureContentFitsContainer(resultContainer);
+    }
+
+    // 调整步骤项布局
+    adjustStepItemsLayout();
+
+    // 根据屏幕尺寸调整容器宽度
+    if (window.innerWidth <= 1024) {
+        // 平板和手机布局
+        container.style.width = '98%';
+    } else {
+        // 桌面布局
+        if (resultPanel && !resultPanel.classList.contains('hidden')) {
+            container.style.width = 'calc(68% - 10px)';
+            container.classList.add('with-result');
+        } else {
+            container.style.width = '98%';
+            container.classList.remove('with-result');
+        }
+    }
+
+    // 根据屏幕尺寸确定历史面板显示
+    if (historyVisible) {
+        if (window.innerWidth > 768) {
+            container.classList.add('with-history');
+        } else {
+            container.classList.remove('with-history');
+        }
+    }
+}
+
+// 确保内容适合容器
+function ensureContentFitsContainer(container) {
+    if (!container) return;
+
+    // 查找容器内的所有内容元素
+    const contentElements = container.querySelectorAll('p, div, pre, span, code, table');
+
+    contentElements.forEach(element => {
+        // 设置必要的样式以防止溢出
+        element.style.maxWidth = '100%';
+        element.style.wordWrap = 'break-word';
+        element.style.wordBreak = 'break-word';
+        element.style.overflowWrap = 'break-word';
+        element.style.boxSizing = 'border-box';
+
+        // 处理长字符串或代码
+        if (element.scrollWidth > element.clientWidth) {
+            element.style.whiteSpace = 'pre-wrap';
+        }
+    });
+}
+
+// 调整步骤项布局
+function adjustStepItemsLayout() {
+    const stepItems = document.querySelectorAll('.step-item');
+    const isMobile = window.innerWidth <= 768;
+
+    stepItems.forEach(item => {
+        const logHeader = item.querySelector('.log-header');
+        const contentPreview = item.querySelector('.content-preview');
+        const logPrefix = item.querySelector('.log-prefix');
+        const timeElement = logPrefix ? logPrefix.querySelector('time') : null;
+
+        if (isMobile) {
+            // 手机布局
+            if (contentPreview) {
+                contentPreview.style.maxWidth = 'calc(100% - 40px)';
+                contentPreview.style.marginLeft = '34px';
+            }
+
+            if (timeElement) {
+                timeElement.style.fontSize = '0.7rem';
+            }
+        } else {
+            // 桌面布局
+            if (contentPreview) {
+                contentPreview.style.maxWidth = '';
+                contentPreview.style.marginLeft = '';
+            }
+
+            if (timeElement) {
+                timeElement.style.fontSize = '';
+            }
+        }
+    });
+}
+
+function getEventIcon(type) {
+    switch (type) {
+        case 'think': return '<i class="fas fa-brain"></i>';
+        case 'tool': return '<i class="fas fa-cog"></i>';
+        case 'act': return '<i class="fas fa-wave-square"></i>';
+        case 'log': return '<i class="fas fa-file-alt"></i>';
+        case 'run': return '<i class="fas fa-play"></i>';
+        case 'message': return '<i class="fas fa-comment"></i>';
+        case 'complete': return '<i class="fas fa-check"></i>';
+        case 'error': return '<i class="fas fa-times"></i>';
+        default: return '<i class="fas fa-thumbtack"></i>';
+    }
+}
+
+function getEventLabel(type) {
+    switch (type) {
+        case 'think': return 'Thinking';
+        case 'tool': return 'Using Tool';
+        case 'act': return 'Taking Action';
+        case 'log': return 'Log';
+        case 'run': return 'Running';
+        case 'message': return 'Message';
+        case 'complete': return 'Completed';
+        case 'error': return 'Error';
+        default: return 'Step';
+    }
+}
+
+function updateTaskStatus(task) {
+    const statusBar = document.getElementById('status-bar');
+    if (!statusBar) return;
+
+    if (task.status === 'completed') {
+        statusBar.innerHTML = `<span class="status-complete">✅ Task completed</span>`;
+
+        if (currentEventSource) {
+            currentEventSource.close();
+            currentEventSource = null;
+        }
+    } else if (task.status === 'failed') {
+        statusBar.innerHTML = `<span class="status-error">❌ Task failed: ${task.error || 'Unknown error'}</span>`;
+
+        if (currentEventSource) {
+            currentEventSource.close();
+            currentEventSource = null;
+        }
+    } else {
+        statusBar.innerHTML = `<span class="status-running">⚙️ Task running: ${task.status}</span>`;
+    }
+}
+
+function showFullImage(imageSrc) {
+    let modal = document.getElementById('image-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'image-modal';
+        modal.className = 'image-modal';
+        modal.innerHTML = `
+            <span class="close-modal">&times;</span>
+            <img src="${imageSrc}" class="modal-content" id="full-image">
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+            modal.classList.remove('active');
+        });
+
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.remove('active');
+            }
+        });
+    } else {
+        document.getElementById('full-image').src = imageSrc;
+    }
+
+    modal.classList.add('active');
+}
+
+function simulateRunPython(filePath) {
+    let modal = document.getElementById('python-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'python-modal';
+        modal.className = 'python-modal';
+        modal.innerHTML = `
+            <div class="python-console">
+                <div class="close-modal">&times;</div>
+                <div class="python-output">Loading Python file content...</div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+            modal.classList.remove('active');
+        });
+    }
+
+    modal.classList.add('active');
+
+    // Load Python file content
+    fetch(filePath)
+        .then(response => response.text())
+        .then(code => {
+            const outputDiv = modal.querySelector('.python-output');
+            outputDiv.innerHTML = '';
+
+            const codeElement = document.createElement('pre');
+            codeElement.textContent = code;
+            codeElement.style.marginBottom = '20px';
+            codeElement.style.padding = '10px';
+            codeElement.style.borderBottom = '1px solid #444';
+            outputDiv.appendChild(codeElement);
+
+            // Add simulation run results
+            const resultElement = document.createElement('div');
+            resultElement.innerHTML = `
+                <div style="color: #4CAF50; margin-top: 10px; margin-bottom: 10px;">
+                    > Simulation run output results:</div>
+                <pre style="color: #f8f8f8;">
+# This is the simulation run output results
+# Actual run results may vary
+
+# Running ${filePath.split('/').pop()}...
+print("Hello from Python Simulated environment!")
+
+# Code execution completed
+</pre>
+            `;
+            outputDiv.appendChild(resultElement);
+        })
+        .catch(error => {
+            console.error('Failed to load Python file:', error);
+            const outputDiv = modal.querySelector('.python-output');
+            outputDiv.innerHTML = `File loading error: ${error.message}`;
+        });
+}
+
+// Highlight current selected step
+function highlightStep(stepElement) {
+    // 移除其他步骤的高亮
+    document.querySelectorAll('.step-item').forEach(item => {
+        item.classList.remove('active');
+    });
+
+    // 添加当前步骤的高亮
+    stepElement.classList.add('active');
+
+    // 更新当前步骤信息到结果面板
+    const currentStep = document.getElementById('current-step');
+    if (currentStep) {
+        const type = stepElement.dataset.type;
+        currentStep.setAttribute('data-type', type);
+    }
+}
+
+// Toggle history panel display state
+function toggleHistory() {
+    const historyPanel = document.querySelector('.history-panel');
+    const overlay = document.querySelector('.overlay');
+    const historyToggle = document.querySelector('.history-toggle');
+    const container = document.querySelector('.container');
+
+    if (historyVisible) {
+        // Hide history
+        historyPanel.classList.remove('show');
+        overlay.classList.remove('show');
+        historyToggle.classList.remove('active');
+        container.classList.remove('with-history');
+    } else {
+        // Show history
+        historyPanel.classList.add('show');
+        overlay.classList.add('show');
+        historyToggle.classList.add('active');
+        // Add spacing on large screens
+        if (window.innerWidth > 768) {
+            container.classList.add('with-history');
+        }
+    }
+
+    historyVisible = !historyVisible;
+}
+
+// Close history panel on small screens
+function closeHistoryOnMobile() {
+    if (window.innerWidth <= 768 && historyVisible) {
+        toggleHistory();
+    }
+}
+
+// Get status text
+function getStatusText(status) {
+    switch (status) {
+        case 'pending': return 'Pending';
+        case 'running': return 'Running';
+        case 'completed': return 'Completed';
+        case 'failed': return 'Failed';
+        default: return 'Unknown';
+    }
+}
+
+// Initialize interface
+function initializeInterface() {
+    // 添加历史记录切换逻辑
+    const historyToggle = document.querySelector('.history-toggle');
+    if (historyToggle) {
+        historyToggle.addEventListener('click', toggleHistory);
+    }
+
+    // 添加遮罩层点击关闭历史记录
+    const overlay = document.querySelector('.overlay');
+    if (overlay) {
+        overlay.addEventListener('click', toggleHistory);
+    }
+
+    // 绑定输入框事件
+    const promptInput = document.getElementById('prompt-input');
+    if (promptInput) {
+        promptInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                createTask();
+            }
+        });
+    }
+
+    // 添加窗口大小调整事件监听
+    window.addEventListener('resize', handleWindowResize);
+
+    // 添加键盘事件监听，用于关闭模态框
+    document.addEventListener('keydown', handleKeyboardEvents);
+
+    // 添加屏幕方向变化监听
+    window.addEventListener('orientationchange', () => {
+        // 延迟执行以确保方向变化完成
+        setTimeout(handleResponsiveLayout, 300);
+    });
+
+    // 阻止页面滚动
+    preventPageScroll();
+
+    // 设置初始布局
+    setupInitialLayout();
+
+    // 加载历史任务
+    loadHistory();
+}
+
+// 阻止页面滚动
+function preventPageScroll() {
+    // 阻止文档滚轮事件，保留容器内滚动
+    document.addEventListener('wheel', function(event) {
+        // 检查是否在可滚动容器内
+        const isInScrollable =
+            event.target.closest('.steps-container') ||
+            event.target.closest('.result-container') ||
+            event.target.closest('.history-panel') ||
+            event.target.closest('.log-body');
+
+        if (!isInScrollable) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+}
+
+// 处理窗口大小调整
+function handleWindowResize() {
+    const container = document.querySelector('.container');
+
+    // 大屏幕上保持历史侧边栏效果，小屏幕上移除
+    if (window.innerWidth > 768 && historyVisible) {
+        container.classList.add('with-history');
+    } else {
+        container.classList.remove('with-history');
+    }
+
+    // 调用综合处理函数
+    handleResponsiveLayout();
+}
+
+// 处理键盘事件
+function handleKeyboardEvents(e) {
+    // ESC键关闭历史面板和模态框
+    if (e.key === 'Escape') {
+        if (historyVisible) {
+            toggleHistory();
+        }
+
+        const imageModal = document.getElementById('image-modal');
+        if (imageModal && imageModal.classList.contains('active')) {
+            imageModal.classList.remove('active');
+        }
+
+        const pythonModal = document.getElementById('python-modal');
+        if (pythonModal && pythonModal.classList.contains('active')) {
+            pythonModal.classList.remove('active');
+        }
+    }
+}
+
+// 设置初始布局
+function setupInitialLayout() {
+    // 调整步骤项布局
+    adjustStepItemsLayout();
+
+    // 初始化历史面板状态
+    const historyPanel = document.querySelector('.history-panel');
+    if (historyPanel) {
+        historyPanel.classList.remove('show');
+    }
+
+    // 确保结果面板初始隐藏
+    const resultPanel = document.getElementById('result-panel');
+    if (resultPanel) {
+        hideResultPanel();
+    }
+
+    // 手动触发一次响应式布局
+    handleResponsiveLayout();
+}
+
+// 当文档加载完成时初始化界面
+document.addEventListener('DOMContentLoaded', initializeInterface);

static/themes/cyberpunk/static/style.css

@@ -0,0 +1,2880 @@
+:root {
+    --primary-color: #00eeff;
+    --primary-hover: #00c8ff;
+    --primary-color-light: rgba(0, 238, 255, 0.1);
+    --success-color: #00ff9d;
+    --success-color-light: rgba(0, 255, 157, 0.1);
+    --error-color: #ff2a6d;
+    --error-color-light: rgba(255, 42, 109, 0.1);
+    --warning-color: #ffb627;
+    --warning-color-light: rgba(255, 182, 39, 0.1);
+    --info-color: #05d9e8;
+    --info-color-light: rgba(5, 217, 232, 0.1);
+    --text-color: rgba(255, 255, 255, 0.9);
+    --text-light: rgba(255, 255, 255, 0.6);
+    --bg-color: #0a0a1a;
+    --panel-bg: rgba(22, 24, 36, 0.9);
+    --border-color: rgba(0, 238, 255, 0.6);
+    --border-glow: 0 0 15px rgba(0, 238, 255, 0.6), 0 0 25px rgba(0, 238, 255, 0.3);
+    --neon-glow: 0 0 15px rgba(0, 238, 255, 0.7), 0 0 25px rgba(0, 238, 255, 0.4);
+    --neon-text-glow: 0 0 10px rgba(0, 238, 255, 0.7), 0 0 20px rgba(0, 238, 255, 0.4);
+    --secondary-glow: 0 0 12px rgba(255, 42, 109, 0.6), 0 0 20px rgba(255, 42, 109, 0.3);
+    --card-bg: rgba(22, 24, 36, 0.7);
+    --grid-color: rgba(0, 238, 255, 0.15);
+
+
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+
+
+    --font-size-xs: clamp(0.7rem, 2vw, 0.8rem);
+    --font-size-sm: clamp(0.8rem, 2vw, 0.9rem);
+    --font-size-base: clamp(0.9rem, 2.5vw, 1rem);
+    --font-size-md: clamp(1rem, 3vw, 1.1rem);
+    --font-size-lg: clamp(1.1rem, 3.5vw, 1.3rem);
+    --font-size-xl: clamp(1.3rem, 4vw, 1.5rem);
+    --font-size-2xl: clamp(1.5rem, 5vw, 1.8rem);
+    --font-size-3xl: clamp(1.8rem, 6vw, 2.2rem);
+    --font-size-4xl: clamp(2.2rem, 7vw, 2.8rem);
+
+
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+
+
+    --shadow-sm: 0 0 0.5rem rgba(0, 238, 255, 0.2);
+    --shadow-md: 0 0 1rem rgba(0, 238, 255, 0.3);
+    --shadow-lg: 0 0 1.5rem rgba(0, 238, 255, 0.4);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden; /* 防止整个页面滚动 */
+}
+
+body {
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #000000;
+    color: var(--text-color);
+    position: relative;
+    overflow-x: hidden;
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+}
+
+body::before {
+    display: none;
+}
+
+.container {
+    display: flex;
+    min-height: 100vh;
+    min-width: 0;
+    width: 100%;
+    max-width: 2560px;
+    margin: 0 auto;
+    padding: var(--spacing-md);
+    gap: var(--spacing-md);
+    position: relative;
+    transition: all 0.3s ease;
+    margin-top: 60px;
+    min-height: calc(100vh - 70px);
+    z-index: 1;
+    background-color: #000000;
+}
+
+.container.with-result {
+
+    width: calc(68% - 10px);
+    margin-right: auto;
+    margin-left: 0;
+}
+
+.card {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    border: 1px solid var(--border-color);
+}
+
+.history-panel {
+    width: 200px;
+    flex-shrink: 0;
+    background-color: var(--panel-bg);
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    height: calc(100vh - 80px);
+    overflow: auto;
+    border: 1px solid var(--border-color);
+}
+
+.steps-panel {
+    width: 300px;
+    flex-shrink: 0;
+    background-color: var(--panel-bg);
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    height: calc(100vh - 80px);
+    overflow: auto;
+    border: 1px solid var(--border-color);
+}
+
+.steps-container {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.main-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: calc(100vh - 80px);
+    min-width: 400px;
+    position: relative;
+    transition: all 0.3s ease;
+    z-index: 2;
+    background-color: transparent;
+}
+
+.task-container {
+    flex: 1;
+    width: 100%;
+    max-width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: #000000;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.2);
+    overflow: auto;
+    transition: width 0.3s ease;
+    border: 2px solid transparent !important;
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.3) !important;
+    position: relative;
+    z-index: 1;
+}
+
+.task-container::before, .task-container::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    background: linear-gradient(90deg,
+        var(--primary-color),
+        var(--error-color),
+        var(--primary-color));
+    background-size: 400% 100%;
+    animation: borderFlow 8s linear infinite;
+    border-radius: inherit;
+}
+
+.task-container::after {
+    background: var(--bg-color);
+    border-radius: inherit;
+    box-shadow: inset 0 0 20px rgba(0, 238, 255, 0.2),
+                inset 0 0 10px rgba(255, 42, 109, 0.1);
+    pointer-events: none;
+}
+
+.result-panel {
+    width: 31%;
+    min-width: 310px;
+    max-width: calc(100vw - 20px);
+    height: calc(100vh - 85px);
+    position: fixed;
+    right: 10px;
+    top: 70px;
+    background-color: rgba(15, 15, 30, 0.95);
+    border: 2px solid transparent !important;
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.3) !important;
+    border-radius: 8px;
+    padding: 12px 12px 20px 12px;
+    overflow: hidden;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    box-sizing: border-box;
+}
+
+.result-panel::before, .result-panel::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    background: linear-gradient(90deg,
+        var(--primary-color),
+        var(--error-color),
+        var(--primary-color));
+    background-size: 400% 100%;
+    animation: borderFlow 8s linear infinite;
+    border-radius: inherit;
+}
+
+.result-panel.hidden {
+    transform: translateX(calc(100% + 10px));
+    opacity: 0;
+    pointer-events: none;
+}
+
+.result-panel.minimized {
+    display: none !important;
+}
+
+.result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(0, 238, 255, 0.2);
+    background: linear-gradient(90deg, rgba(15, 15, 30, 0.9), rgba(20, 20, 40, 0.9));
+    padding: 15px;
+    border-radius: 8px 8px 0 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.result-header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(0, 238, 255, 0.4),
+        rgba(255, 42, 109, 0.6),
+        rgba(0, 238, 255, 0.4),
+        transparent
+    );
+}
+
+.result-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin: 0;
+    position: relative;
+    text-shadow: 0 0 10px rgba(0, 238, 255, 0.5);
+    display: flex;
+    align-items: center;
+    letter-spacing: 1px;
+    animation: none;
+}
+
+.result-header h2::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    margin-right: 10px;
+    box-shadow: 0 0 8px var(--primary-color);
+    animation: pulse-light 2s infinite;
+}
+
+.result-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.minimize-result {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s;
+    position: relative;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.minimize-result:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(0, 140, 255, 0.4);
+}
+
+
+.minimize-result::before,
+.minimize-result::after {
+    content: "";
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    transition: all 0.2s;
+}
+
+
+.minimize-result::before {
+    width: 12px;
+    height: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    background: transparent;
+}
+
+
+.minimize-result::after {
+    width: 5px;
+    height: 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    right: 7px;
+    bottom: 7px;
+}
+
+.result-container {
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-top: 0;
+    padding: 5px 5px 15px 5px;
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.85);
+    max-height: calc(100vh - 200px);
+    word-wrap: break-word;
+    word-break: break-word;
+    box-sizing: border-box;
+    position: relative;
+}
+
+/* 确保所有内容块被约束在容器内 */
+.result-container * {
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+.result-container p,
+.result-container div,
+.result-container pre,
+.result-container span {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+    margin-bottom: 5px;
+    line-height: 1.4;
+    box-sizing: border-box;
+}
+
+.result-container pre,
+.result-container code {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 5px;
+    border-radius: 5px;
+    overflow-x: auto;
+    box-sizing: border-box;
+}
+
+.result-container img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 5px 0;
+    box-sizing: border-box;
+}
+
+.result-container table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 10px 0;
+    overflow-x: auto;
+    display: block;
+    box-sizing: border-box;
+}
+
+.result-container th,
+.result-container td {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 5px;
+    text-align: left;
+    box-sizing: border-box;
+}
+
+
+.search-result-item {
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+}
+
+.search-result-item:hover {
+    background-color: #f0f0f0;
+}
+
+.search-result-title {
+    font-weight: 500;
+    color: #1a0dab;
+    margin-bottom: 3px;
+}
+
+.search-result-url {
+    color: #006621;
+    font-size: 0.8rem;
+    margin-bottom: 3px;
+}
+
+.search-result-description {
+    color: #545454;
+    font-size: 0.9rem;
+}
+
+
+.search-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+}
+
+.search-box-icon {
+    color: #777;
+    margin-right: 8px;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-size: 14px;
+    color: #333;
+}
+
+.search-box .search-button {
+    background-color: #f5f5f5;
+    color: #777;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.search-box .search-button:hover {
+    background-color: #e0e0e0;
+}
+
+.task-list {
+    margin-top: 10px;
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+
+.welcome-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: var(--text-light);
+    padding: 40px 20px;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+    position: relative;
+    margin: auto 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border: 2px solid transparent !important;
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.3) !important;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    max-width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+    .welcome-message {
+        min-height: 350px; padding: 30px 15px;
+    }
+    .title {
+        font-size: 2.5rem; letter-spacing: 2px;
+    }
+    .subtitle {
+        font-size: 1.2rem; margin-bottom: 20px;
+    }
+    .description {
+        font-size: 1rem; line-height: 1.5; margin-bottom: 30px;
+    }
+    .cta-button {
+        font-size: 0.9rem; padding: 10px 20px;
+    }
+    .emoji {
+        font-size: 2rem;
+    }
+    .step-item .log-header {
+        flex-wrap: wrap; padding: 4px 8px;
+    }
+    .log-prefix {
+        width: 100%; margin-bottom: 5px;
+    }
+    .content-preview {
+        width: calc(100% - 40px); max-width: none; margin-left: 34px; margin-bottom: 5px;
+    }
+    .step-controls {
+        position: absolute; top: 10px; right: 10px;
+    }
+    .log-prefix time {
+        font-size: 10px; padding: 1px 4px;
+    }
+    .log-prefix-icon {
+        width: 22px; height: 22px; font-size: 12px;
+    }
+    .title-text {
+        font-size: clamp(1.5rem, 6vw, 2.5rem); letter-spacing: 0.03em; margin: 0.3em 0; transform: scale(0.9);
+    }
+    .subtitle-text {
+        font-size: 1.2rem; letter-spacing: 3px; margin: 10px 0;
+    }
+    .command-text {
+        font-size: 0.7rem; letter-spacing: 1px; padding: 10px 0;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .welcome-message {
+        min-height: 300px; padding: 30px 15px;
+    }
+    .title {
+        font-size: 3.5rem; margin-bottom: 0.8rem;
+    }
+    .subtitle {
+        font-size: 1.3rem; margin-bottom: 1rem;
+    }
+    .description {
+        font-size: 0.9rem; line-height: 1.6; margin-bottom: 2rem;
+    }
+    .cta-button {
+        padding: 0.7rem 2rem; font-size: 0.9rem; border-radius: 20px;
+    }
+    .emoji {
+        font-size: 1.5rem;
+    }
+    .hero-section {
+        padding: 1.5rem 1rem;
+    }
+    .result-panel {
+        width: 90%; min-width: auto; right: 5%; left: 5%;
+    }
+    .step-item .log-header {
+        padding: 8px;
+    }
+    .log-prefix time {
+        font-size: 0.8em; padding: 2px 4px;
+    }
+    .log-prefix-icon {
+        width: 22px; height: 22px; font-size: 0.8em;
+    }
+    .title-text {
+        font-size: clamp(1.2rem, 5.5vw, 2rem); letter-spacing: 0.02em; transform: scale(0.85);
+    }
+    .subtitle-text {
+        font-size: 1rem; letter-spacing: 2px;
+    }
+}
+
+.welcome-message::before {
+    filter: blur(1px);
+    animation: borderFlow 12s linear infinite;
+    display: none;
+}
+
+.welcome-message::after {
+    background: rgba(10, 10, 26, 0.7);
+    box-shadow: inset 0 0 30px rgba(0, 238, 255, 0.3),
+                inset 0 0 15px rgba(255, 42, 109, 0.2);
+    animation: innerGlow 5s ease-in-out infinite alternate;
+    display: none;
+}
+
+.welcome-message h1 {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: var(--text-color);
+    font-weight: 600;
+    text-shadow: var(--neon-text-glow);
+}
+
+.logo-animation {
+    margin-bottom: 10px;
+    animation: none;
+}
+
+.welcome-logo {
+    width: min(320px, 90vw);
+    height: auto;
+    filter: drop-shadow(0 0 0.8em rgba(0, 238, 255, 0.7));
+    transition: all 0.3s ease;
+    margin-bottom: 5px;
+    animation: none;
+}
+
+.welcome-logo:hover {
+    transform: none;
+    filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.6));
+}
+
+.animated-text {
+    font-size: 1.8rem;
+    margin-bottom: 16px;
+    color: var(--primary-color);
+    animation: fadeIn 1s ease-in-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    text-shadow: var(--neon-text-glow);
+}
+
+.animated-subtext {
+    font-size: 0.9rem;
+    color: var(--text-light);
+    animation: fadeIn 1s ease-in-out;
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+    position: relative;
+    overflow: hidden;
+}
+
+.animated-subtext::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(0, 238, 255, 0.4),
+        rgba(255, 42, 109, 0.6),
+        rgba(0, 238, 255, 0.4),
+        transparent
+    );
+    animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+        filter: drop-shadow(0 0 1.5rem rgba(0, 238, 255, 0.8));
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(0.8em);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes titleShadow {
+    0%, 100% {
+        filter: drop-shadow(0 0 8px rgba(0, 238, 255, 0.3));
+    }
+    50% {
+        filter: drop-shadow(0 0 12px rgba(255, 42, 109, 0.4));
+    }
+}
+
+
+.highlight-text {
+    background: linear-gradient(135deg, #00eeff 0%, #01beff 50%, #0047e1 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-shadow: 0 0 8px rgba(0, 238, 255, 0.6), 0 0 15px rgba(0, 71, 225, 0.4);
+}
+
+
+.login-btn {
+    background: linear-gradient(135deg, rgba(0, 238, 255, 0.8), rgba(0, 71, 225, 0.8));
+    color: white;
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-weight: 500;
+    font-size: 14px;
+    transition: all 0.25s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    box-shadow: 0 4px 15px rgba(5, 117, 230, 0.2);
+}
+
+.login-btn:hover {
+    background: linear-gradient(135deg, #0468C8, #0086E8);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(5, 117, 230, 0.3);
+}
+
+.login-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 10px rgba(5, 117, 230, 0.15);
+}
+
+
+.send-btn {
+    padding: 12px 30px;
+    background: linear-gradient(135deg, rgba(0, 238, 255, 0.8), rgba(0, 71, 225, 0.8));
+    color: white;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    transition: all 0.25s ease;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.3);
+    text-transform: uppercase;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.send-btn::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(90deg,
+        var(--primary-color),
+        var(--error-color),
+        var(--primary-color));
+    background-size: 300% 100%;
+    z-index: -1;
+    animation: buttonGlow 6s linear infinite;
+    opacity: 0.9;
+}
+
+.send-btn::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -100%;
+    width: 70%;
+    height: 100%;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent);
+    transform: skewX(-25deg) translateY(-50%);
+    animation: buttonShine 4s infinite;
+}
+
+@keyframes buttonShine {
+    0% {
+        left: -100%;
+    }
+    20%, 100% {
+        left: 200%;
+    }
+}
+
+@keyframes buttonGlow {
+    0% {
+        background-position: 0% 0;
+    }
+    100% {
+        background-position: 300% 0;
+    }
+}
+
+.task-card {
+    background: var(--card-bg);
+    padding: 12px 15px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s;
+}
+
+.task-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    border-color: var(--primary-color);
+}
+
+.task-card.active {
+    border-left: 3px solid var(--primary-color);
+    background-color: rgba(0, 238, 255, 0.05);
+}
+
+.status-pending {
+    color: var(--text-light);
+}
+
+.status-running {
+    color: var(--primary-color);
+}
+
+.status-completed {
+    color: var(--success-color);
+}
+
+.status-failed {
+    color: var(--error-color);
+}
+
+.status-text {
+    margin-left: 5px;
+    position: relative;
+    color: var(--primary-color) !important;
+    font-weight: 600;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    text-shadow: 0 0 5px rgba(0, 238, 255, 0.4);
+    letter-spacing: 0.5px;
+}
+
+.status-text::after {
+    content: '|';
+    position: absolute;
+    right: -12px;
+    color: var(--primary-color);
+    animation: blink 1s infinite;
+    text-shadow: 0 0 8px rgba(0, 238, 255, 0.6);
+}
+
+@keyframes blink {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+.step-item {
+    padding: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    width: 100%;
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.1);
+    margin-bottom: 2px;
+    opacity: 1;
+    transform: none;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.step-item .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    background-color: rgba(15, 15, 30, 0.8);
+    transition: all 0.3s ease;
+    color: #ffffff !important;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    border: 2px solid var(--border-color);
+    border-radius: 4px 4px 0 0;
+    z-index: 1;
+}
+
+
+.step-item .log-header::before {
+    display: none;
+}
+
+
+.step-item.think .log-header {
+    background-color: rgba(5, 217, 232, 0.15);
+    border-left: 3px solid var(--info-color);
+    color: #ffffff !important;
+}
+
+.step-item.tool .log-header {
+    background-color: rgba(255, 182, 39, 0.15);
+    border-left: 3px solid var(--warning-color);
+    color: #ffffff !important;
+}
+
+.step-item.act .log-header {
+    background-color: rgba(0, 238, 255, 0.15);
+    border-left: 3px solid var(--primary-color);
+    color: #ffffff !important;
+}
+
+.step-item.log .log-header {
+    background-color: rgba(15, 15, 30, 0.5);
+    border-left: 3px solid var(--border-color);
+    color: #ffffff !important;
+}
+
+
+.step-item .log-header::after {
+    display: none;
+}
+
+.log-prefix {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #ffffff !important;
+    flex: 0 0 auto;
+    position: relative;
+}
+
+
+.step-item .log-header .log-prefix {
+    position: relative;
+    z-index: 2;
+}
+
+
+.step-item.think .log-header .log-prefix span:not(.log-prefix-icon):not(time),
+.step-item.tool .log-header .log-prefix span:not(.log-prefix-icon):not(time),
+.step-item.act .log-header .log-prefix span:not(.log-prefix-icon):not(time),
+.step-item.log .log-header .log-prefix span:not(.log-prefix-icon):not(time) {
+    background: linear-gradient(90deg, #00eeff, #7700ff, #ff00c8, #00eeff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent !important;
+    background-size: 300% 100%;
+    animation: textGradient 6s linear infinite;
+    font-weight: bold;
+    padding: 0 3px;
+}
+
+
+@keyframes textGradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+
+.log-prefix time {
+    font-weight: 500;
+    color: var(--primary-color);
+    background-color: rgba(0, 238, 255, 0.1);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 11px;
+    display: inline-block;
+    white-space: nowrap;
+    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+}
+
+.step-item.think .log-header {
+    background-color: rgba(5, 217, 232, 0.15);
+    border-left: 3px solid var(--info-color);
+    color: #ffffff !important;
+}
+
+.step-item.tool .log-header {
+    background-color: rgba(255, 182, 39, 0.15);
+    border-left: 3px solid var(--warning-color);
+    color: #ffffff !important;
+}
+
+.step-item.act .log-header {
+    background-color: rgba(0, 238, 255, 0.15);
+    border-left: 3px solid var(--primary-color);
+    color: #ffffff !important;
+}
+
+.step-item.log .log-header {
+    background-color: rgba(15, 15, 30, 0.5);
+    border-left: 3px solid var(--border-color);
+    color: #ffffff !important;
+}
+
+.log-prefix {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #ffffff !important;
+    flex: 0 0 auto;
+}
+
+.log-prefix time {
+    font-weight: 500;
+    color: var(--primary-color);
+    background-color: rgba(0, 238, 255, 0.1);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 11px;
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.log-prefix-icon {
+    display: inline-flex;
+    width: 26px;
+    height: 26px;
+    background: rgba(0, 238, 255, 0.1);
+    border-radius: 6px;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    flex: 0 0 auto;
+    position: relative;
+    z-index: 2;
+}
+
+.content-preview {
+    margin-left: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    opacity: 0.9;
+    font-size: 0.9em;
+    color: #ffffff !important;
+    min-width: 0;
+    padding-right: 8px;
+    position: relative;
+    z-index: 2;
+}
+
+.step-item .log-body {
+    display: none;
+    padding: 10px;
+    background-color: rgba(15, 15, 30, 0.6);
+    color: #ffffff !important;
+    border-top: 1px solid var(--border-color);
+}
+
+.step-controls {
+    display: flex;
+}
+
+.minimize-btn {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    justify-content: center;
+    align-items: center;
+    background: rgba(10, 10, 26, 0.6);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    color: var(--primary-color);
+    transition: all 0.2s;
+    font-size: 10px;
+}
+
+.minimize-btn:hover {
+    background: rgba(0, 238, 255, 0.1);
+    color: var(--text-color);
+    box-shadow: 0 0 8px rgba(0, 238, 255, 0.3);
+}
+
+.step-item .log-body {
+    display: none;
+    padding: 10px;
+    background-color: rgba(15, 15, 30, 0.6);
+    color: var(--text-color);
+    border-top: 1px solid var(--border-color);
+}
+
+
+.step-item pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 0.95em;
+    line-height: 1.5;
+    padding: 8px;
+    border-radius: 4px;
+    background: rgba(10, 10, 26, 0.7);
+    color: #ffffff !important;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    box-shadow: inset 0 0 10px rgba(0, 238, 255, 0.1);
+    border: 1px solid var(--border-color);
+}
+
+.step-item pre.think,
+.step-item pre.tool,
+.step-item pre.act,
+.step-item pre.result,
+.step-item pre.error {
+    color: #ffffff !important;
+}
+
+
+.step-circle {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(0, 238, 255, 0.8), rgba(255, 42, 109, 0.8));
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1em;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.4);
+    z-index: 2;
+    flex-shrink: 0;
+    text-shadow: 0 0 5px rgba(0, 238, 255, 0.5);
+    border: 1px solid rgba(0, 238, 255, 0.5);
+    position: relative;
+    overflow: hidden;
+}
+
+.step-circle::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 30% 30%, rgba(0, 238, 255, 0.4), transparent 70%);
+    z-index: -1;
+}
+
+.step-item.think .log-header {
+    background-color: rgba(5, 217, 232, 0.15);
+    border-left: 3px solid var(--info-color);
+    color: #ffffff !important;
+}
+
+.step-item.tool .log-header {
+    background-color: rgba(255, 182, 39, 0.15);
+    border-left: 3px solid var(--warning-color);
+    color: #ffffff !important;
+}
+
+.step-item.act .log-header {
+    background-color: rgba(0, 238, 255, 0.15);
+    border-left: 3px solid var(--primary-color);
+    color: #ffffff !important;
+}
+
+.step-item.log .log-header {
+    background-color: rgba(15, 15, 30, 0.5);
+    border-left: 3px solid var(--border-color);
+    color: #ffffff !important;
+}
+
+.step-item.expanded .log-body {
+    display: block;
+}
+
+.step-item pre.think {
+    background: rgba(5, 217, 232, 0.1);
+    border-left: 4px solid var(--info-color);
+    color: var(--text-color);
+}
+
+.step-item pre.tool {
+    background: rgba(255, 182, 39, 0.1);
+    border-left: 4px solid var(--warning-color);
+    color: var(--text-color);
+}
+
+.step-item pre.act {
+    background: rgba(0, 238, 255, 0.1);
+    border-left: 4px solid var(--primary-color);
+    color: var(--text-color);
+}
+
+.step-item pre.result {
+    background: rgba(0, 255, 157, 0.1);
+    border-left: 4px solid var(--success-color);
+    color: var(--text-color);
+}
+
+.step-item pre.error {
+    background: rgba(255, 42, 109, 0.1);
+    border-left: 4px solid var(--error-color);
+    color: var(--text-color);
+}
+
+.loading {
+    padding: 15px;
+    color: #666;
+    text-align: center;
+}
+
+.ping {
+    color: #ccc;
+    text-align: center;
+    margin: 5px 0;
+    height: 10px;
+    display: block;
+}
+
+.error {
+    color: #dc3545;
+    padding: 10px;
+    background: #ffe6e6;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+.complete {
+    color: #28a745;
+    padding: 10px;
+    background: #e6ffe6;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+.info {
+    color: #17a2b8;
+    padding: 10px;
+    background: #e3f2fd;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+
+.step-divider {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 15px 0;
+    position: relative;
+}
+
+.step-circle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1.2em;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    z-index: 2;
+    flex-shrink: 0;
+}
+
+
+.file-interaction {
+    margin-top: 15px;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: rgba(10, 10, 26, 0.7);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.file-interaction::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    background: linear-gradient(90deg,
+        var(--primary-color),
+        var(--error-color),
+        var(--primary-color));
+    background-size: 400% 100%;
+    animation: borderFlow 8s linear infinite;
+    border-radius: inherit;
+    opacity: 0.6;
+}
+
+.file-interaction::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    background: rgba(10, 10, 26, 0.8);
+    border-radius: inherit;
+    z-index: -1;
+    box-shadow: inset 0 0 20px rgba(0, 238, 255, 0.2),
+                inset 0 0 10px rgba(255, 42, 109, 0.1);
+}
+
+.download-link {
+    display: inline-block;
+    padding: 10px 20px;
+    background: linear-gradient(135deg, rgba(0, 238, 255, 0.8), rgba(0, 71, 225, 0.8));
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    font-size: 0.95em;
+    font-weight: 500;
+    letter-spacing: 1px;
+    transition: all 0.25s ease;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.3);
+    position: relative;
+    overflow: hidden;
+    border: 1px solid transparent;
+    text-transform: uppercase;
+    z-index: 1;
+}
+
+.download-link::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(90deg,
+        var(--primary-color),
+        var(--error-color),
+        var(--primary-color));
+    background-size: 300% 100%;
+    z-index: -1;
+    animation: buttonGlow 6s linear infinite;
+    opacity: 0.9;
+    border-radius: 4px;
+}
+
+.download-link::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -100%;
+    width: 70%;
+    height: 100%;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent);
+    transform: skewX(-25deg) translateY(-50%);
+    animation: buttonShine 4s infinite;
+}
+
+.download-link:hover {
+    background: linear-gradient(135deg, rgba(0, 238, 255, 1), rgba(0, 71, 225, 1));
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 0 25px rgba(0, 238, 255, 0.5), 0 0 5px rgba(255, 42, 109, 0.3);
+    letter-spacing: 1.5px;
+    color: white;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 200px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.2);
+}
+
+.preview-image:hover {
+    transform: scale(1.03);
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.5), 0 0 10px rgba(255, 42, 109, 0.3);
+    border-color: var(--primary-color);
+}
+
+.audio-player {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 15px 0;
+}
+
+.audio-player audio {
+    width: 100%;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    background: rgba(10, 10, 26, 0.7);
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.2);
+}
+
+.run-button {
+    display: inline-block;
+    padding: 10px 20px;
+    background: linear-gradient(135deg, rgba(0, 255, 157, 0.8), rgba(0, 180, 100, 0.8));
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.95em;
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin-right: 10px;
+    transition: all 0.25s ease;
+    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
+    position: relative;
+    overflow: hidden;
+    text-transform: uppercase;
+    z-index: 1;
+}
+
+.run-button::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(90deg,
+        var(--success-color),
+        var(--primary-color),
+        var(--success-color));
+    background-size: 300% 100%;
+    z-index: -1;
+    animation: buttonGlow 6s linear infinite;
+    opacity: 0.9;
+    border-radius: 4px;
+}
+
+.run-button::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -100%;
+    width: 70%;
+    height: 100%;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent);
+    transform: skewX(-25deg) translateY(-50%);
+    animation: buttonShine 4s infinite;
+}
+
+.run-button:hover {
+    background: linear-gradient(135deg, rgba(0, 255, 157, 1), rgba(0, 180, 100, 1));
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 0 25px rgba(0, 255, 157, 0.5), 0 0 5px rgba(0, 238, 255, 0.3);
+    letter-spacing: 1.5px;
+}
+
+@keyframes buttonGlow {
+    0% {
+        background-position: 0% 0;
+    }
+    100% {
+        background-position: 300% 0;
+    }
+}
+
+@keyframes buttonShine {
+    0% {
+        left: -100%;
+    }
+    20%, 100% {
+        left: 200%;
+    }
+}
+
+
+.image-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-modal.active {
+    display: flex;
+}
+
+.modal-content {
+    max-width: 90%;
+    max-height: 90%;
+}
+
+.close-modal {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+}
+
+
+.python-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.python-modal.active {
+    display: flex;
+}
+
+.python-console {
+    width: 80%;
+    height: 80%;
+    background-color: #1e1e1e;
+    color: #f8f8f8;
+    border-radius: 8px;
+    padding: 15px;
+    font-family: 'Courier New', monospace;
+    overflow: auto;
+}
+
+.python-output {
+    white-space: pre-wrap;
+    line-height: 1.5;
+}
+
+.step-line {
+    flex-grow: 1;
+    height: 2px;
+    background: linear-gradient(90deg, rgba(0, 238, 255, 0.8), rgba(255, 42, 109, 0.8));
+    margin-left: 10px;
+    box-shadow: 0 0 8px rgba(0, 238, 255, 0.3);
+}
+
+.step-info {
+    margin-left: 15px;
+    font-weight: bold;
+    color: var(--text-light);
+    font-size: 0.9em;
+}
+
+.step-item strong {
+    display: block;
+    margin-bottom: 8px;
+    color: #007bff;
+    font-size: 0.9em;
+}
+
+.step-item div {
+    color: #444;
+    line-height: 1.6;
+}
+
+.title {
+    font-size: 7rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: glow 2s ease-in-out infinite alternate;
+    letter-spacing: -2px;
+    font-weight: 900;
+    line-height: 1;
+}
+
+@keyframes glow {
+    from {
+        text-shadow: 0 0 20px rgba(0, 220, 130, 0.6),
+                     0 0 40px rgba(54, 228, 218, 0.4),
+                     0 0 60px rgba(0, 71, 225, 0.2);
+    }
+    to {
+        text-shadow: 0 0 40px rgba(0, 220, 130, 0.8),
+                     0 0 60px rgba(54, 228, 218, 0.6),
+                     0 0 80px rgba(0, 71, 225, 0.4);
+    }
+}
+
+.subtitle {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    color: #999;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    line-height: 1.3;
+}
+
+.description {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    margin-bottom: 2.5rem;
+    color: #888;
+    max-width: 680px;
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+}
+
+.cta-button {
+    display: inline-block;
+    padding: 0.9rem 2.5rem;
+    font-size: 1rem;
+    color: white;
+    background: linear-gradient(45deg, #00dc82, #36e4da);
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-weight: 600;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+.cta-button:hover {
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 6px 15px rgba(0, 220, 130, 0.4);
+}
+
+
+@media screen and (max-width: 1200px) {
+    .title {
+        font-size: 6rem;
+    }
+
+    .hero-section {
+        padding: 2rem 1.5rem;
+        max-width: 800px;
+    }
+}
+
+
+
+
+
+@media screen and (max-width: 360px) {
+    .title {
+        font-size: 3rem;
+    }
+
+    .subtitle {
+        font-size: 1.1rem;
+    }
+
+    .description {
+        font-size: 0.85rem;
+    }
+
+    .cta-button {
+        padding: 0.6rem 1.8rem;
+        font-size: 0.85rem;
+    }
+}
+
+
+@media screen and (max-height: 700px) {
+    .hero-section {
+        padding: 1rem;
+    }
+
+    .description {
+        margin-bottom: 2rem;
+    }
+}
+
+
+@media screen and (max-height: 500px) and (orientation: landscape) {
+    .hero-section {
+        padding: 1rem;
+    }
+
+    .title {
+        font-size: 3.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+        margin-bottom: 0.8rem;
+    }
+
+    .description {
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .cta-button {
+        padding: 0.8rem 2.5rem;
+    }
+
+    .emoji {
+        display: none;
+    }
+}
+
+
+.home-container {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #000000;
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.home-container::before {
+    display: none;
+}
+
+.hero-section {
+    text-align: center;
+    padding: 2rem;
+    position: relative;
+    z-index: 1;
+    max-width: 1000px;
+    margin: 0 auto;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.floating-emojis {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.emoji {
+    position: absolute;
+    font-size: 2.5rem;
+    opacity: 0;
+    animation: float 10s ease-in-out infinite;
+    animation-delay: var(--delay);
+    filter: drop-shadow(0 0 10px rgba(0, 220, 130, 0.3));
+}
+
+.emoji:nth-child(1) { top: 20%; left: 20%; }
+.emoji:nth-child(2) { top: 30%; left: 80%; }
+.emoji:nth-child(3) { top: 70%; left: 30%; }
+.emoji:nth-child(4) { top: 60%; left: 70%; }
+.emoji:nth-child(5) { top: 40%; left: 50%; }
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0);
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-100vh) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+.step-info-container {
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.step-info-box {
+    padding: 10px;
+    background-color: rgba(0, 20, 40, 0.3);
+    border: 1px solid rgba(0, 238, 255, 0.1);
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.1);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.current-step {
+    background-color: #f0f5ff;
+    border: 1px solid #e0e0e0;
+    border-left: 3px solid #4285f4;
+    padding: 8px 12px;
+    margin-top: 8px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.emoji-icon {
+    margin-right: 14px;
+    font-size: 18px;
+    display: inline-flex;
+    width: 36px;
+    height: 36px;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, rgba(45, 49, 66, 0.8), rgba(28, 31, 40, 0.8));
+    border-radius: 50%;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(60, 80, 220, 0.3);
+    position: relative;
+    z-index: 2;
+    border: 1px solid rgba(60, 80, 220, 0.15);
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.emoji-icon::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(60, 80, 220, 0.25), transparent 60%);
+    z-index: -1;
+}
+
+.step-highlight {
+    background-color: #ffefef;
+    border: 1px solid #ffcdd2;
+    border-left: 3px solid #f44336;
+    padding: 8px 12px;
+    margin-top: 8px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.content-highlight {
+    background-color: #e3f2fd;
+    border: 1px solid #bbdefb;
+    border-left: 3px solid #2196f3;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+.content-highlight pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background-color: rgba(10, 10, 26, 0.9);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    z-index: 100;
+    transition: all 0.3s ease;
+}
+
+.header-left, .header-center, .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-left {
+    flex: 1;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logo-img {
+    display: none;
+}
+
+.logo-text {
+    font-weight: 700;
+    font-size: 18px;
+    background: linear-gradient(90deg, var(--primary-color), var(--error-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-left: 0;
+    letter-spacing: 1px;
+    text-shadow: none;
+    text-transform: uppercase;
+    text-decoration: none;
+}
+
+
+.history-toggle {
+    all: unset;
+    cursor: pointer;
+    color: var(--primary-color);
+    position: relative;
+    margin: 0 15px 0 0;
+    padding: 0;
+    font-size: inherit;
+    line-height: normal;
+    display: inline-block;
+}
+
+.history-toggle i {
+    font-size: 18px;
+    text-shadow: 0 0 5px rgba(0, 238, 255, 0.5);
+}
+
+
+.history-count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background-color: #555;
+    color: white;
+    min-width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    font-size: 9px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 14px;
+    padding: 0 3px;
+}
+
+
+.history-panel {
+    position: fixed;
+    left: 0;
+    top: 56px;
+    width: 280px;
+    height: calc(100vh - 56px);
+    background-color: white;
+    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.05);
+    z-index: 99;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.history-panel.show {
+    transform: translateX(0);
+}
+
+.history-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+}
+
+.history-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--primary-color);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-shadow: 0 0 5px rgba(0, 238, 255, 0.3);
+}
+
+.history-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.history-action-btn {
+    background: transparent;
+    border: none;
+    color: #666;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.history-action-btn:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: #0575E6;
+    transform: none;
+    box-shadow: none;
+}
+
+.task-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px 15px;
+}
+
+.task-card {
+    background: #fff;
+    padding: 12px 15px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    border: 1px solid #eee;
+    transition: all 0.2s;
+}
+
+.task-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+    border-color: #ddd;
+}
+
+.task-card.active {
+    border-left: 3px solid #0e68f1;
+    background-color: rgba(14, 104, 241, 0.05);
+}
+
+.task-title {
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.task-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #888;
+}
+
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 98;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.overlay.show {
+    opacity: 1;
+    pointer-events: all;
+}
+
+
+.container.with-history {
+    padding-left: 280px;
+    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+
+.welcome-title {
+    font-size: 3.8rem;
+    margin-bottom: 18px;
+    color: #333;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.5px;
+}
+
+
+.welcome-message p {
+    font-size: 1.1rem;
+    color: #555;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, #0575E6 0%, #0096FF 35%, #00B4FF 65%, #00D2FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
+    animation: fadeIn 0.8s ease-in-out;
+    animation-delay: 0.2s;
+    animation-fill-mode: both;
+}
+
+
+.login-btn i {
+    font-size: 14px;
+}
+
+
+button {
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+
+.input-container {
+    width: 100%;
+    background-color: #000000;
+    border-radius: 8px;
+    padding: 15px 20px;
+    box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    display: flex;
+    gap: 15px;
+    margin-top: auto;
+    border: 2px solid transparent !important;
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.3) !important;
+    position: relative;
+    z-index: 10;
+    overflow: hidden;
+}
+
+
+#prompt-input {
+    flex: 1;
+    padding: 14px 20px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background-color: rgba(10, 10, 26, 0.7);
+    color: var(--text-color);
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.2);
+}
+
+#prompt-input:focus {
+    animation: inputGlow 3s infinite alternate;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.4),
+                0 0 10px rgba(255, 42, 109, 0.2);
+}
+
+#prompt-input::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+
+.title-text {
+    position: relative;
+    font-size: clamp(2.5rem, 8vw, 4rem);
+    margin: 0.5em 0;
+    color: transparent;
+    letter-spacing: 0.1em;
+    font-weight: 700;
+    line-height: 1;
+    text-transform: uppercase;
+    white-space: nowrap;
+    background: linear-gradient(90deg, #fff, #fff 50%, #ff2a6d 50%, #ff2a6d);
+    -webkit-background-clip: text;
+    background-clip: text;
+    filter: drop-shadow(0 0 0.4em rgba(0, 238, 255, 0.3));
+    animation: titleShadow 3s infinite;
+    width: 100%;
+    display: inline-block;
+}
+
+
+
+
+.title-text::before {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: -2px;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, #fff, #fff 50%, #ff2a6d 50%, #ff2a6d);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    mix-blend-mode: overlay;
+    opacity: 0.3;
+    z-index: -1;
+    animation: glitchMove 3s infinite;
+}
+
+.title-text::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 2px;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, #fff, #fff 50%, #ff2a6d 50%, #ff2a6d);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    mix-blend-mode: overlay;
+    opacity: 0.3;
+    z-index: -2;
+    animation: glitchMove 2s infinite reverse;
+}
+
+
+@keyframes glitchMove {
+    0%, 100% {
+        transform: translate(0);
+    }
+    25% {
+        transform: translate(-0.1em, 0.05em);
+    }
+    50% {
+        transform: translate(0.05em, -0.05em);
+    }
+    75% {
+        transform: translate(0.05em, 0.05em);
+    }
+}
+
+
+@keyframes textBlink {
+    0%, 100% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.03;
+        background: rgba(0, 238, 255, 0.1);
+    }
+}
+
+
+.arrow-icon {
+    display: inline-block;
+    margin-left: 8px;
+    font-weight: 700;
+    animation: pulse-arrow 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse-arrow {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(0.3em);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+
+.cyber-panel {
+    position: relative;
+    border: 1px solid rgba(0, 238, 255, 0.2) !important;
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.2) !important;
+    overflow: hidden;
+    background-color: #000000 !important;
+}
+
+.cyber-panel::before {
+    content: none;
+}
+
+
+.history-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--primary-color);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-shadow: 0 0 5px rgba(0, 238, 255, 0.3);
+}
+
+
+@keyframes borderPulse {
+    0% {
+        border-color: rgba(0, 238, 255, 0.3);
+        box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    }
+    50% {
+        border-color: rgba(255, 42, 109, 0.3);
+        box-shadow: 0 0 20px rgba(255, 42, 109, 0.2);
+    }
+    100% {
+        border-color: rgba(0, 238, 255, 0.3);
+        box-shadow: 0 0 15px rgba(0, 238, 255, 0.2);
+    }
+}
+
+
+.cyber-panel, .result-panel, .input-container {
+    animation: borderPulse 4s infinite ease-in-out;
+}
+
+
+.logo {
+    position: relative;
+    overflow: hidden;
+}
+
+.logo::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 238, 255, 0.2),
+        transparent
+    );
+    transform: skewX(-25deg);
+    animation: shine 3s infinite;
+}
+
+@keyframes shine {
+    0% {
+        left: -100%;
+    }
+    20% {
+        left: 100%;
+    }
+    100% {
+        left: 100%;
+    }
+
+}
+
+
+#prompt-input {
+    position: relative;
+    background-color: rgba(10, 10, 26, 0.8);
+    color: var(--text-color);
+    caret-color: var(--primary-color);
+}
+
+#prompt-input:focus {
+    animation: borderPulse 4s infinite ease-in-out;
+}
+
+
+.send-btn:hover, .login-btn:hover, .cta-button:hover {
+    background: linear-gradient(135deg, rgba(0, 238, 255, 1), rgba(0, 71, 225, 1));
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 0 25px rgba(0, 238, 255, 0.5), 0 0 5px rgba(255, 42, 109, 0.3);
+    letter-spacing: 1.5px;
+}
+
+
+.welcome-message {
+    position: relative;
+}
+
+.welcome-message::before {
+    display: none;
+}
+
+.welcome-message::after {
+    display: none;
+}
+
+
+.step-item:hover .log-header {
+    background-color: rgba(0, 238, 255, 0.05);
+}
+
+
+.status-text {
+    font-family: 'Courier New', monospace;
+    color: var(--primary-color) !important;
+}
+
+.status-text::after {
+    content: '|';
+    color: var(--primary-color);
+}
+
+
+::selection {
+    background: rgba(0, 238, 255, 0.2);
+    color: var(--primary-color);
+}
+
+
+.history-panel {
+    background: linear-gradient(180deg,
+        rgba(22, 24, 36, 0.95),
+        rgba(15, 15, 30, 0.95)
+    );
+}
+
+
+@keyframes pulse-light {
+    0% {
+        opacity: 0.5;
+        box-shadow: 0 0 0.3em var(--primary-color);
+    }
+    50% {
+        opacity: 1;
+        box-shadow: 0 0 0.8em var(--primary-color), 0 0 0.3em var(--error-color);
+    }
+    100% {
+        opacity: 0.5;
+        box-shadow: 0 0 0.3em var(--primary-color);
+    }
+
+}
+
+
+.logo-text-large {
+    font-size: 2.8rem;
+    color: #fff;
+    text-shadow: 0 0 20px rgba(0, 238, 255, 0.8);
+    margin: 5px 0;
+    font-weight: 500;
+}
+
+.subtitle-text {
+    font-size: 1.4rem;
+    letter-spacing: 4px;
+    color: #00eeff;
+    margin: 20px 0 20px;
+    font-weight: 500;
+    text-shadow: 0 0 15px rgba(0, 238, 255, 0.8);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    animation: pulse-light 2s infinite;
+}
+
+.command-text {
+    font-size: 0.8rem;
+    letter-spacing: 2px;
+    color: rgba(255, 255, 255, 0.9);
+    margin: 15px 0;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    position: relative;
+    padding: 15px 0;
+    text-transform: uppercase;
+    animation: fadeIn 1.5s ease-in-out;
+}
+
+.command-text::before, .command-text::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(0, 238, 255, 0.8),
+        rgba(255, 42, 109, 0.8),
+        rgba(0, 238, 255, 0.8),
+        transparent);
+    animation: lineExpand 2.5s forwards;
+    background-size: 200% 100%;
+}
+
+.command-text::before {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.command-text::after {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+@keyframes lineExpand {
+    0% { width: 0; }
+    100% { width: 80%; }
+}
+
+.dash {
+    color: #00eeff;
+    animation: blinkDash 1.5s infinite;
+}
+
+@keyframes blinkDash {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+}
+
+
+@keyframes borderFlow {
+    0% {
+        background-position: 0% 0;
+    }
+    100% {
+        background-position: 400% 0;
+    }
+}
+
+
+@keyframes innerGlow {
+    0% {
+        box-shadow: inset 0 0 30px rgba(0, 238, 255, 0.3),
+                    inset 0 0 15px rgba(255, 42, 109, 0.2);
+    }
+    100% {
+        box-shadow: inset 0 0 50px rgba(0, 238, 255, 0.5),
+                    inset 0 0 25px rgba(255, 42, 109, 0.3);
+    }
+}
+
+
+#prompt-input {
+    border: 2px solid var(--border-color);
+    background-color: rgba(10, 10, 26, 0.7);
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.2);
+}
+
+#prompt-input:focus {
+    animation: inputGlow 3s infinite alternate;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 20px rgba(0, 238, 255, 0.4),
+                0 0 10px rgba(255, 42, 109, 0.2);
+}
+
+@keyframes inputGlow {
+    0% {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0.8em rgba(0, 238, 255, 0.4);
+    }
+    100% {
+        border-color: var(--error-color);
+        box-shadow: 0 0 1em rgba(255, 42, 109, 0.5);
+    }
+}
+
+
+@keyframes logoFloat {
+    0%, 100% {
+        transform: translateY(0);
+        filter: drop-shadow(0 0 0.8em rgba(0, 238, 255, 0.7));
+    }
+    50% {
+        transform: translateY(-0.6em);
+        filter: drop-shadow(0 0 1.3em rgba(0, 238, 255, 0.9))
+                drop-shadow(0 0 0.6em rgba(255, 42, 109, 0.5));
+    }
+}
+
+
+.subtitle-text {
+    text-shadow: 0 0 15px rgba(0, 238, 255, 0.8);
+    animation: subtitlePulse 3s infinite;
+    letter-spacing: 5px;
+}
+
+@keyframes subtitlePulse {
+    0%, 100% {
+        opacity: 0.9;
+        text-shadow: 0 0 15px rgba(0, 238, 255, 0.7);
+    }
+    50% {
+        opacity: 1;
+        text-shadow: 0 0 25px rgba(0, 238, 255, 0.9),
+                    0 0 10px rgba(255, 42, 109, 0.6);
+        letter-spacing: 6px;
+    }
+}
+
+
+.send-btn:hover {
+    background: linear-gradient(135deg, rgba(0, 238, 255, 1), rgba(0, 71, 225, 1));
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 0 25px rgba(0, 238, 255, 0.5), 0 0 5px rgba(255, 42, 109, 0.3);
+    letter-spacing: 1.5px;
+}
+
+.send-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 10px rgba(5, 117, 230, 0.15);
+}
+
+
+.input-container::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    background: linear-gradient(90deg,
+        var(--primary-color),
+        var(--error-color),
+        var(--success-color),
+        var(--primary-color));
+    background-size: 400% 100%;
+    animation: borderFlow 8s linear infinite;
+    border-radius: inherit;
+}
+
+.input-container::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    background: var(--bg-color);
+    border-radius: inherit;
+    z-index: -1;
+    box-shadow: inset 0 0 20px rgba(0, 238, 255, 0.2),
+                inset 0 0 10px rgba(255, 42, 109, 0.1);
+    pointer-events: none;
+}
+
+
+.result-panel::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    background: rgba(15, 15, 30, 0.95);
+    border-radius: inherit;
+    z-index: -1;
+    box-shadow: inset 0 0 20px rgba(0, 238, 255, 0.2),
+                inset 0 0 10px rgba(255, 42, 109, 0.1);
+    pointer-events: none;
+}
+
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background: transparent;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 238, 255, 0.3);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 238, 255, 0.5);
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 238, 255, 0.3) rgba(0, 0, 0, 0.1);
+}
+
+* {
+    -ms-overflow-style: auto;
+}
+
+@media screen and (max-width: 1024px) {
+    .container.with-result {
+        width: 100%;
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    .result-panel {
+        width: 80%;
+        min-width: 300px;
+        height: 50vh;
+        position: fixed;
+        right: 10%;
+        left: 10%;
+        top: 25vh;
+        margin: 0 auto;
+        box-sizing: border-box;
+    }
+
+    .result-panel.hidden {
+        transform: translateY(calc(100% + 20px));
+        display: none !important;
+    }
+
+    .result-container {
+        max-height: calc(50vh - 150px);
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .result-panel {
+        width: 90%;
+        right: 5%;
+        left: 5%;
+        box-sizing: border-box;
+    }
+
+    .result-container {
+        padding: 5px;
+    }
+}
+
+
+
+
+.log-prefix time {
+    font-weight: 500;
+    color: var(--primary-color);
+    padding: 0 5px;
+    background-color: rgba(0, 238, 255, 0.1);
+    border-radius: 3px;
+    box-shadow: 0 0 5px rgba(0, 238, 255, 0.2);
+    display: inline-block;
+}
+
+
+.log-prefix-icon {
+    display: inline-flex;
+    width: 26px;
+    height: 26px;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 238, 255, 0.1);
+    border-radius: 50%;
+    margin-right: 6px;
+    box-shadow: 0 0 10px rgba(0, 238, 255, 0.2);
+    border: 1px solid var(--border-color);
+    color: var(--primary-color);
+    flex-shrink: 0;
+}
+
+
+.steps-container::-webkit-scrollbar,
+.result-container::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.steps-container::-webkit-scrollbar-track,
+.result-container::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
+.steps-container::-webkit-scrollbar-thumb,
+.result-container::-webkit-scrollbar-thumb {
+    background: rgba(0, 238, 255, 0.4);
+    border-radius: 4px;
+}
+
+.steps-container::-webkit-scrollbar-thumb:hover,
+.result-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 238, 255, 0.6);
+}
+
+/* Adjust for horizontal scrollbar when needed */
+.result-container::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+
+
+
+.title-container {
+    width: 100%;
+    overflow: visible;
+    text-align: center;
+    margin: 0.5em auto;
+    padding: 0;
+    max-width: 100%;
+    transform-origin: center;
+}
+.title-text {
+    position: relative;
+    font-size: clamp(1.8rem, 6vw, 3.2rem);
+    margin: 0.5em auto;
+    color: transparent;
+    letter-spacing: 0em;
+    font-weight: 700;
+    line-height: 1;
+    text-transform: uppercase;
+    white-space: nowrap;
+    background: linear-gradient(90deg, #fff, #fff 50%, #ff2a6d 50%, #ff2a6d);
+    -webkit-background-clip: text;
+    background-clip: text;
+    filter: drop-shadow(0 0 0.4em rgba(0, 238, 255, 0.3));
+    animation: titleShadow 3s infinite;
+    width: auto;
+    display: inline-block;
+    padding: 0;
+    transform: scale(0.9);
+    max-width: 100%;
+}

static/themes/cyberpunk/templates/chat.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenManus - Cyberpunk</title>
+    <link rel="stylesheet" href="/static/themes/cyberpunk/static/style.css">
+    <!-- Add Font Awesome icon library -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <!-- Top navigation bar -->
+    <header class="header">
+        <div class="header-left">
+            <a href="/" class="logo" style="text-decoration: none;">
+                <span class="logo-text">OPENMANUS</span>
+            </a>
+        </div>
+        <div class="header-right">
+            <!-- History icon button - using CSS class -->
+            <button class="history-toggle">
+                <i class="fas fa-history"></i>
+                <span class="history-count">0</span>
+            </button>
+            <a href="#" class="login-btn">
+                <i class="fas fa-user"></i>
+                LOGIN
+            </a>
+        </div>
+    </header>
+
+    <!-- History panel -->
+    <aside class="history-panel">
+        <div class="history-header">
+            <div class="history-title">History</div>
+            <div class="history-actions">
+                <button class="history-action-btn" title="Refresh" onclick="loadHistory()">
+                    <i class="fas fa-sync-alt"></i>
+                </button>
+            </div>
+        </div>
+        <div id="task-list" class="task-list">
+            <!-- Task list will be dynamically loaded through JavaScript -->
+        </div>
+    </aside>
+
+    <!-- Background overlay -->
+    <div class="overlay"></div>
+
+    <!-- Main container -->
+    <div class="container">
+        <div class="main-panel">
+            <div id="task-container" class="task-container cyber-panel">
+                <div class="welcome-message">
+                    <div class="logo-animation">
+                        <img src="/static/themes/cyberpunk/static/logo_white.png" alt="OpenManus Logo" class="welcome-logo">
+                    </div>
+
+                    <div class="title-container">
+                        <h2 class="title-text" data-text="MANUS INTERFACE">MANUS INTERFACE</h2>
+                    </div>
+                    <div class="title-glitch-overlay"></div>
+                    <div class="subtitle-text">AUTONOMOUS INTELLIGENCE</div>
+                    <div class="command-text"><span class="dash">—</span> / READY TO EXECUTE COMMAND \ <span class="dash">—</span></div>
+                </div>
+                <div id="steps-container" class="steps-container"></div>
+            </div>
+
+            <div id="result-panel" class="result-panel hidden">
+                <div class="result-header">
+                    <h2>MANUS INTERFACE</h2>
+                    <div class="result-controls">
+                        <div class="minimize-result" onclick="toggleResultPanel()"></div>
+                    </div>
+                </div>
+
+                <div class="step-info-container">
+                    <div id="current-step" class="step-info-box">
+                        <!-- Step information will be dynamically populated by JavaScript -->
+                    </div>
+                </div>
+
+                <div id="result-container" class="result-container"></div>
+            </div>
+
+            <div class="input-container">
+                <input type="text" id="prompt-input" placeholder="输入指令...">
+                <button onclick="createTask()" class="send-btn">EXECUTE</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/themes/cyberpunk/static/main.js" defer></script>
+</body>
+</html>

static/themes/cyberpunk/theme.json

@@ -0,0 +1,6 @@
+{
+    "name": "赛博朋克",
+    "description": "具有霓虹灯和未来科技感的赛博朋克风格界面",
+    "author": "Ray",
+    "version": "1.0.0"
+}

static/themes/openmanus/static/main.js

@@ -0,0 +1,900 @@
+let currentEventSource = null;
+let historyVisible = false; // Track history panel status
+
+function createTask() {
+    const promptInput = document.getElementById('prompt-input');
+    const prompt = promptInput.value.trim();
+
+    if (!prompt) {
+        alert("Please enter a valid task");
+        promptInput.focus();
+        return;
+    }
+
+    if (currentEventSource) {
+        currentEventSource.close();
+        currentEventSource = null;
+    }
+
+    const taskContainer = document.getElementById('task-container');
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+
+    // Hide result panel
+    hideResultPanel();
+
+    // Hide welcome message, show step loading status
+    const welcomeMessage = taskContainer.querySelector('.welcome-message');
+    if (welcomeMessage) {
+        welcomeMessage.style.display = 'none';
+    }
+
+    stepsContainer.innerHTML = '<div class="loading">Initializing task...</div>';
+    resultContainer.innerHTML = '';
+
+    // Close history panel on mobile devices
+    closeHistoryOnMobile();
+
+    fetch('/tasks', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ prompt })
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(err => { throw new Error(err.detail || 'Request failed') });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (!data.task_id) {
+            throw new Error('Invalid task ID');
+        }
+        setupSSE(data.task_id);
+        loadHistory();
+        promptInput.value = '';
+    })
+    .catch(error => {
+        stepsContainer.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        updateResultPanel({result: error.message}, 'error');
+        showResultPanel();
+        console.error('Failed to create task:', error);
+    });
+}
+
+function setupSSE(taskId) {
+    let retryCount = 0;
+    const maxRetries = 3;
+    const retryDelay = 2000;
+    let lastResultContent = '';
+    let stepsData = [];
+
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+
+    // Hide result panel by default
+    hideResultPanel();
+
+    function connect() {
+        const eventSource = new EventSource(`/tasks/${taskId}/events`);
+        currentEventSource = eventSource;
+
+        let heartbeatTimer = setInterval(() => {
+            const pingDiv = document.createElement('div');
+            pingDiv.className = 'ping';
+            pingDiv.innerHTML = '·';
+            stepsContainer.appendChild(pingDiv);
+        }, 5000);
+
+        // Initial polling
+        fetch(`/tasks/${taskId}`)
+            .then(response => response.json())
+            .then(task => {
+                updateTaskStatus(task);
+            })
+            .catch(error => {
+                console.error('Initial status retrieval failed:', error);
+            });
+
+        const handleEvent = (event, type) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                const loadingDiv = stepsContainer.querySelector('.loading');
+                if (loadingDiv) loadingDiv.remove();
+
+                const { formattedContent, timestamp, isoTimestamp } = formatStepContent(data, type);
+
+                stepsData.push({
+                    type: type,
+                    content: formattedContent,
+                    timestamp: timestamp,
+                    isoTimestamp: isoTimestamp,
+                    element: createStepElement(type, formattedContent, timestamp)
+                });
+
+                stepsData.sort((a, b) => {
+                    return new Date(a.isoTimestamp) - new Date(b.isoTimestamp);
+                });
+
+                stepsContainer.innerHTML = '';
+                stepsData.forEach(step => {
+                    stepsContainer.appendChild(step.element);
+                });
+
+                document.querySelectorAll('.step-item').forEach(item => {
+                    item.classList.remove('active');
+                });
+
+                const latestStep = stepsData[stepsData.length - 1];
+                if (latestStep && latestStep.element) {
+                    latestStep.element.classList.add('active');
+                }
+
+                autoScroll(stepsContainer);
+
+                if (type === 'tool' || type === 'act' || type === 'result') {
+                    updateResultPanel(data, type);
+                    showResultPanel();
+                }
+
+                fetch(`/tasks/${taskId}`)
+                    .then(response => response.json())
+                    .then(task => {
+                        updateTaskStatus(task);
+                    })
+                    .catch(error => {
+                        console.error('Failed to update status:', error);
+                    });
+            } catch (e) {
+                console.error(`Error processing ${type} event:`, e);
+            }
+        };
+
+        const eventTypes = ['think', 'tool', 'act', 'log', 'run', 'message'];
+        eventTypes.forEach(type => {
+            eventSource.addEventListener(type, (event) => handleEvent(event, type));
+        });
+
+        eventSource.addEventListener('complete', (event) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                lastResultContent = data.result || '';
+
+                const completeDiv = document.createElement('div');
+                completeDiv.className = 'complete';
+                completeDiv.innerHTML = '<div>✅ Task completed</div>';
+                stepsContainer.appendChild(completeDiv);
+
+                updateResultPanel({result: lastResultContent}, 'complete');
+                showResultPanel();
+
+                fetch(`/tasks/${taskId}`)
+                    .then(response => response.json())
+                    .then(task => {
+                        updateTaskStatus(task);
+                    })
+                    .catch(error => {
+                        console.error('Failed to update final status:', error);
+                    });
+
+                eventSource.close();
+                currentEventSource = null;
+            } catch (e) {
+                console.error('Error processing completion event:', e);
+            }
+        });
+
+        eventSource.addEventListener('error', (event) => {
+            clearInterval(heartbeatTimer);
+            try {
+                const data = JSON.parse(event.data);
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'error';
+                errorDiv.innerHTML = `<div>❌ Error: ${data.message}</div>`;
+                stepsContainer.appendChild(errorDiv);
+
+                updateResultPanel({result: data.message}, 'error');
+                showResultPanel();
+
+                eventSource.close();
+                currentEventSource = null;
+            } catch (e) {
+                console.error('Error processing error:', e);
+            }
+        });
+
+        eventSource.onerror = (err) => {
+            if (eventSource.readyState === EventSource.CLOSED) return;
+
+            console.error('SSE connection error:', err);
+            clearInterval(heartbeatTimer);
+            eventSource.close();
+
+            fetch(`/tasks/${taskId}`)
+                .then(response => response.json())
+                .then(task => {
+                    if (task.status === 'completed' || task.status === 'failed') {
+                        updateTaskStatus(task);
+                        if (task.status === 'completed') {
+                            const completeDiv = document.createElement('div');
+                            completeDiv.className = 'complete';
+                            completeDiv.innerHTML = '<div>✅ Task completed</div>';
+                            stepsContainer.appendChild(completeDiv);
+
+                            if (task.steps && task.steps.length > 0) {
+                                const lastStep = task.steps[task.steps.length - 1];
+                                updateResultPanel({result: lastStep.result}, 'complete');
+                                showResultPanel();
+                            }
+                        } else {
+                            const errorDiv = document.createElement('div');
+                            errorDiv.className = 'error';
+                            errorDiv.innerHTML = `<div>❌ Error: ${task.error || 'Task failed'}</div>`;
+                            stepsContainer.appendChild(errorDiv);
+
+                            updateResultPanel({result: task.error || 'Task failed'}, 'error');
+                            showResultPanel();
+                        }
+                    } else if (retryCount < maxRetries) {
+                        retryCount++;
+                        const warningDiv = document.createElement('div');
+                        warningDiv.className = 'warning';
+                        warningDiv.innerHTML = `<div>⚠ Connection lost, retrying in ${retryDelay/1000} seconds (${retryCount}/${maxRetries})...</div>`;
+                        stepsContainer.appendChild(warningDiv);
+                        setTimeout(connect, retryDelay);
+                    } else {
+                        const errorDiv = document.createElement('div');
+                        errorDiv.className = 'error';
+                        errorDiv.innerHTML = '<div>⚠ Connection lost, please refresh the page</div>';
+                        stepsContainer.appendChild(errorDiv);
+
+                        updateResultPanel({result: 'Connection lost, please refresh the page'}, 'error');
+                        showResultPanel();
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to check task status:', error);
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        setTimeout(connect, retryDelay);
+                    }
+                });
+        };
+    }
+
+    connect();
+}
+
+function updateResultPanel(data, type) {
+    const resultContainer = document.getElementById('result-container');
+    const currentStep = document.getElementById('current-step');
+
+    if (!resultContainer || !currentStep) return;
+
+    // Update top step information
+    const typeLabel = getEventLabel(type);
+    const icon = getEventIcon(type);
+
+    // Clear and build new UI
+    currentStep.innerHTML = '';
+
+    // Add icon
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'emoji-icon';
+    iconSpan.textContent = icon;
+    currentStep.appendChild(iconSpan);
+
+    // Create status text element, add typewriter effect
+    const statusText = document.createElement('span');
+    statusText.className = 'status-text';
+    currentStep.appendChild(statusText);
+
+    // Typewriter effect displaying status text
+    let i = 0;
+    let typingEffect = setInterval(() => {
+        if (i < typeLabel.length) {
+            statusText.textContent += typeLabel.charAt(i);
+            i++;
+        } else {
+            clearInterval(typingEffect);
+        }
+    }, 50);
+
+    // Update content area
+    let content = '';
+
+    if (data.result) {
+        content = data.result;
+    } else if (data.message) {
+        content = data.message;
+    } else {
+        content = JSON.stringify(data, null, 2);
+    }
+
+    // Clear previous content, add new content
+    resultContainer.innerHTML = '';
+
+    // Create content area
+    const contentDiv = document.createElement('div');
+    contentDiv.classList.add('content-box');
+    contentDiv.innerHTML = `<pre>${content}</pre>`;
+    resultContainer.appendChild(contentDiv);
+
+    // Delay adding visible class to trigger fade-in animation
+    setTimeout(() => {
+        contentDiv.classList.add('visible');
+    }, 100);
+}
+
+function loadHistory() {
+    fetch('/tasks')
+    .then(response => {
+        if (!response.ok) {
+            return response.text().then(text => {
+                throw new Error(`Request failed: ${response.status} - ${text.substring(0, 100)}`);
+            });
+        }
+        return response.json();
+    })
+    .then(tasks => {
+        const listContainer = document.getElementById('task-list');
+        if (tasks.length === 0) {
+            listContainer.innerHTML = '<div class="info">No history tasks</div>';
+            return;
+        }
+
+        // Update history count
+        const historyCount = document.querySelector('.history-count');
+        if (historyCount) {
+            historyCount.textContent = tasks.length;
+        }
+
+        listContainer.innerHTML = tasks.map(task => `
+            <div class="task-card" data-task-id="${task.id}" onclick="loadTask('${task.id}')">
+                <div class="task-title">${task.prompt}</div>
+                <div class="task-meta">
+                    <span>${new Date(task.created_at).toLocaleString()}</span>
+                    <span class="status status-${task.status ? task.status.toLowerCase() : 'unknown'}">
+                        ${getStatusText(task.status)}
+                    </span>
+                </div>
+            </div>
+        `).join('');
+    })
+    .catch(error => {
+        console.error('Failed to load history:', error);
+        const listContainer = document.getElementById('task-list');
+        listContainer.innerHTML = `<div class="error">Loading failed: ${error.message}</div>`;
+    });
+}
+
+function loadTask(taskId) {
+    if (currentEventSource) {
+        currentEventSource.close();
+        currentEventSource = null;
+    }
+
+    const taskContainer = document.getElementById('task-container');
+    const stepsContainer = document.getElementById('steps-container');
+    const resultContainer = document.getElementById('result-container');
+
+    // Hide welcome message
+    const welcomeMessage = taskContainer.querySelector('.welcome-message');
+    if (welcomeMessage) {
+        welcomeMessage.style.display = 'none';
+    }
+
+    // Hide result panel by default
+    hideResultPanel();
+
+    stepsContainer.innerHTML = '<div class="loading">Loading task...</div>';
+    resultContainer.innerHTML = '';
+
+    // Close history panel on mobile devices
+    closeHistoryOnMobile();
+
+    fetch(`/tasks/${taskId}`)
+        .then(response => response.json())
+        .then(task => {
+            const taskCards = document.querySelectorAll('.task-card');
+            taskCards.forEach(card => {
+                card.classList.remove('active');
+                if (card.getAttribute('data-task-id') === taskId) {
+                    card.classList.add('active');
+                }
+            });
+
+            stepsContainer.innerHTML = '';
+            if (task.steps && task.steps.length > 0) {
+                // 存储步骤集合
+                let taskSteps = [];
+
+                task.steps.forEach((step, index) => {
+                    const stepTimestamp = new Date(step.created_at || task.created_at).toLocaleTimeString();
+                    const stepElement = createStepElement(
+                        step.type,
+                        step.result,
+                        stepTimestamp
+                    );
+
+                    // 将步骤添加到集合而非直接添加到DOM
+                    taskSteps.push({
+                        index: index,
+                        timestamp: stepTimestamp,
+                        element: stepElement,
+                        step: step
+                    });
+                });
+
+                // 根据时间戳和索引排序步骤
+                taskSteps.sort((a, b) => {
+                    // 尝试使用ISO时间戳进行比较
+                    try {
+                        // 如果步骤数据中包含created_at字段，使用它来排序
+                        if (a.step.created_at && b.step.created_at) {
+                            return new Date(a.step.created_at) - new Date(b.step.created_at);
+                        }
+                    } catch (e) {
+                        console.error('Error sorting by ISO timestamp:', e);
+                    }
+
+                    // 首先按时间戳排序
+                    const timeCompare = new Date(a.timestamp) - new Date(b.timestamp);
+                    // 如果时间相同，按索引排序
+                    return timeCompare !== 0 ? timeCompare : a.index - b.index;
+                });
+
+                // 将排序后的步骤添加到容器
+                taskSteps.forEach((stepData, index) => {
+                    // 只将最后一个步骤设为展开状态
+                    if (index === taskSteps.length - 1) {
+                        stepData.element.classList.add('expanded');
+                        stepData.element.classList.add('active');
+                    }
+
+                    stepsContainer.appendChild(stepData.element);
+
+                    // 显示最后一个步骤的结果
+                    if (index === taskSteps.length - 1) {
+                        updateResultPanel({result: stepData.step.result}, stepData.step.type);
+                        showResultPanel();
+                    }
+                });
+            } else {
+                stepsContainer.innerHTML = '<div class="info">No steps recorded for this task</div>';
+            }
+
+            updateTaskStatus(task);
+        })
+        .catch(error => {
+            console.error('Failed to load task:', error);
+            stepsContainer.innerHTML = `<div class="error">Error: ${error.message}</div>`;
+        });
+}
+
+function formatStepContent(data, eventType) {
+    // 创建具有ISO格式的时间戳，确保排序一致性
+    const now = new Date();
+    const isoTimestamp = now.toISOString();
+    const localTime = now.toLocaleTimeString();
+
+    return {
+        formattedContent: data.result || (data.message || JSON.stringify(data)),
+        timestamp: localTime,
+        isoTimestamp: isoTimestamp // 添加ISO格式时间戳，用于排序
+    };
+}
+
+function createStepElement(type, content, timestamp) {
+    const step = document.createElement('div');
+
+    // Executing step
+    const stepRegex = /Executing step (\d+)\/(\d+)/;
+    if (type === 'log' && stepRegex.test(content)) {
+        const match = content.match(stepRegex);
+        const currentStep = parseInt(match[1]);
+        const totalSteps = parseInt(match[2]);
+
+        step.className = 'step-divider';
+        step.innerHTML = `
+            <div class="step-circle">${currentStep}</div>
+            <div class="step-line"></div>
+            <div class="step-info">${currentStep}/${totalSteps}</div>
+        `;
+    } else {
+        // Get content preview
+        let contentPreview = "";
+        if (type === 'think' && content.length > 0) {
+            // Extract the first 50 characters of the thinking content as preview
+            contentPreview = content.substring(0, 50) + (content.length > 50 ? "..." : "");
+        } else if (type === 'tool' && content.includes('selected')) {
+            // Tool selection content remains as is
+            contentPreview = content;
+        } else if (type === 'log') {
+            // Log content remains as is, usually short
+            contentPreview = content;
+        } else {
+            // Other types take the first 30 characters
+            contentPreview = content.substring(0, 30) + (content.length > 30 ? "..." : "");
+        }
+
+        step.className = `step-item ${type}`;
+        step.dataset.type = type;
+        step.dataset.timestamp = timestamp; // 存储时间戳为数据属性
+
+        // 增强时间戳显示格式
+        const formattedTimestamp = `<time>${timestamp}</time>`;
+
+        // Use modified layout, remove arrow indicator
+        step.innerHTML = `
+            <div class="log-header" onclick="toggleStepContent(this)">
+                <div class="log-prefix">
+                    <span class="log-prefix-icon">${getEventIcon(type)}</span>
+                    [${formattedTimestamp}] ${getEventLabel(type)}
+                    <span class="content-preview">${contentPreview}</span>
+                </div>
+                <div class="step-controls">
+                    <span class="minimize-btn" onclick="minimizeStep(event, this)"></span>
+                </div>
+            </div>
+            <div class="log-body">
+                <div class="log-content">
+                    <pre>${content}</pre>
+                </div>
+            </div>
+        `;
+    }
+
+    // Apply fade-in animation
+    step.style.opacity = '0';
+    step.style.transform = 'translateY(10px)';
+
+    setTimeout(() => {
+        step.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+        step.style.opacity = '1';
+        step.style.transform = 'translateY(0)';
+    }, 10);
+
+    return step;
+}
+
+// Toggle display/hide of step content
+function toggleStepContent(header) {
+    const stepItem = header.closest('.step-item');
+    if (!stepItem) return;
+
+    const logBody = stepItem.querySelector('.log-body');
+    if (!logBody) return;
+
+    stepItem.classList.toggle('expanded');
+
+    // Highlight current step
+    highlightStep(stepItem);
+
+    // If expanded, update result panel and show
+    if (stepItem.classList.contains('expanded')) {
+        const type = stepItem.dataset.type;
+        const content = stepItem.querySelector('pre')?.textContent || '';
+        updateResultPanel({result: content}, type);
+        showResultPanel();
+    }
+}
+
+// Minimize step
+function minimizeStep(event, btn) {
+    event.stopPropagation(); // Prevent event bubbling
+
+    const stepItem = btn.closest('.step-item');
+    if (!stepItem) return;
+
+    stepItem.classList.toggle('expanded');
+}
+
+// Toggle result panel display state
+function toggleResultPanel() {
+    const resultPanel = document.getElementById('result-panel');
+    const container = document.querySelector('.container');
+    if (!resultPanel) return;
+
+    // If panel is already minimized, fully display
+    if (resultPanel.classList.contains('minimized')) {
+        resultPanel.classList.remove('minimized');
+        container.classList.add('with-result');
+    } else {
+        // Otherwise minimize panel
+        resultPanel.classList.add('minimized');
+        container.classList.remove('with-result');
+    }
+}
+
+// Hide result panel
+function hideResultPanel() {
+    const resultPanel = document.getElementById('result-panel');
+    const container = document.querySelector('.container');
+    if (resultPanel) {
+        resultPanel.classList.add('hidden');
+        resultPanel.classList.remove('minimized'); // Ensure minimized state is reset when hiding
+        container.classList.remove('with-result'); // Remove container style
+    }
+}
+
+// Show result panel
+function showResultPanel() {
+    const resultPanel = document.getElementById('result-panel');
+    const container = document.querySelector('.container');
+    if (resultPanel) {
+        resultPanel.classList.remove('hidden');
+        resultPanel.classList.remove('minimized'); // Ensure not minimized when showing
+        container.classList.add('with-result'); // Add container style
+    }
+}
+
+function autoScroll(element) {
+    requestAnimationFrame(() => {
+        element.scrollTo({
+            top: element.scrollHeight,
+            behavior: 'smooth'
+        });
+    });
+    setTimeout(() => {
+        element.scrollTop = element.scrollHeight;
+    }, 100);
+}
+
+function getEventIcon(type) {
+    switch (type) {
+        case 'think': return '🤔';
+        case 'tool': return '🛠️';
+        case 'act': return '🚀';
+        case 'log': return '📝';
+        case 'run': return '▶️';
+        case 'message': return '💬';
+        case 'complete': return '✅';
+        case 'error': return '❌';
+        default: return '📌';
+    }
+}
+
+function getEventLabel(type) {
+    switch (type) {
+        case 'think': return 'Thinking';
+        case 'tool': return 'Using Tool';
+        case 'act': return 'Taking Action';
+        case 'log': return 'Log';
+        case 'run': return 'Running';
+        case 'message': return 'Message';
+        case 'complete': return 'Completed';
+        case 'error': return 'Error';
+        default: return 'Step';
+    }
+}
+
+function updateTaskStatus(task) {
+    const statusBar = document.getElementById('status-bar');
+    if (!statusBar) return;
+
+    if (task.status === 'completed') {
+        statusBar.innerHTML = `<span class="status-complete">✅ Task completed</span>`;
+
+        if (currentEventSource) {
+            currentEventSource.close();
+            currentEventSource = null;
+        }
+    } else if (task.status === 'failed') {
+        statusBar.innerHTML = `<span class="status-error">❌ Task failed: ${task.error || 'Unknown error'}</span>`;
+
+        if (currentEventSource) {
+            currentEventSource.close();
+            currentEventSource = null;
+        }
+    } else {
+        statusBar.innerHTML = `<span class="status-running">⚙️ Task running: ${task.status}</span>`;
+    }
+}
+
+function showFullImage(imageSrc) {
+    let modal = document.getElementById('image-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'image-modal';
+        modal.className = 'image-modal';
+        modal.innerHTML = `
+            <span class="close-modal">&times;</span>
+            <img src="${imageSrc}" class="modal-content" id="full-image">
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+            modal.classList.remove('active');
+        });
+
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.remove('active');
+            }
+        });
+    } else {
+        document.getElementById('full-image').src = imageSrc;
+    }
+
+    modal.classList.add('active');
+}
+
+function simulateRunPython(filePath) {
+    let modal = document.getElementById('python-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'python-modal';
+        modal.className = 'python-modal';
+        modal.innerHTML = `
+            <div class="python-console">
+                <div class="close-modal">&times;</div>
+                <div class="python-output">Loading Python file content...</div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.close-modal');
+        closeBtn.addEventListener('click', () => {
+            modal.classList.remove('active');
+        });
+    }
+
+    modal.classList.add('active');
+
+    // Load Python file content
+    fetch(filePath)
+        .then(response => response.text())
+        .then(code => {
+            const outputDiv = modal.querySelector('.python-output');
+            outputDiv.innerHTML = '';
+
+            const codeElement = document.createElement('pre');
+            codeElement.textContent = code;
+            codeElement.style.marginBottom = '20px';
+            codeElement.style.padding = '10px';
+            codeElement.style.borderBottom = '1px solid #444';
+            outputDiv.appendChild(codeElement);
+
+            // Add simulation run results
+            const resultElement = document.createElement('div');
+            resultElement.innerHTML = `
+                <div style="color: #4CAF50; margin-top: 10px; margin-bottom: 10px;">
+                    > Simulation run output results:</div>
+                <pre style="color: #f8f8f8;">
+# This is the simulation run output results
+# Actual run results may vary
+
+# Running ${filePath.split('/').pop()}...
+print("Hello from Python Simulated environment!")
+
+# Code execution completed
+</pre>
+            `;
+            outputDiv.appendChild(resultElement);
+        })
+        .catch(error => {
+            console.error('Failed to load Python file:', error);
+            const outputDiv = modal.querySelector('.python-output');
+            outputDiv.innerHTML = `File loading error: ${error.message}`;
+        });
+}
+
+// Highlight current selected step
+function highlightStep(stepElement) {
+    // Remove highlight from other steps
+    document.querySelectorAll('.step-item').forEach(item => {
+        item.classList.remove('active');
+    });
+
+    // Add highlight to current step
+    stepElement.classList.add('active');
+}
+
+// Toggle history panel display state
+function toggleHistory() {
+    const historyPanel = document.querySelector('.history-panel');
+    const overlay = document.querySelector('.overlay');
+    const historyToggle = document.querySelector('.history-toggle');
+    const container = document.querySelector('.container');
+
+    if (historyVisible) {
+        // Hide history
+        historyPanel.classList.remove('show');
+        overlay.classList.remove('show');
+        historyToggle.classList.remove('active');
+        container.classList.remove('with-history');
+    } else {
+        // Show history
+        historyPanel.classList.add('show');
+        overlay.classList.add('show');
+        historyToggle.classList.add('active');
+        // Add spacing on large screens
+        if (window.innerWidth > 768) {
+            container.classList.add('with-history');
+        }
+    }
+
+    historyVisible = !historyVisible;
+}
+
+// Close history panel on small screens
+function closeHistoryOnMobile() {
+    if (window.innerWidth <= 768 && historyVisible) {
+        toggleHistory();
+    }
+}
+
+// Get status text
+function getStatusText(status) {
+    switch (status) {
+        case 'pending': return 'Pending';
+        case 'running': return 'Running';
+        case 'completed': return 'Completed';
+        case 'failed': return 'Failed';
+        default: return 'Unknown';
+    }
+}
+
+// Initialize interface
+document.addEventListener('DOMContentLoaded', () => {
+    // Add history toggle logic
+    const historyToggle = document.querySelector('.history-toggle');
+    if (historyToggle) {
+        historyToggle.addEventListener('click', toggleHistory);
+    }
+
+    // Add overlay click to close history
+    const overlay = document.querySelector('.overlay');
+    if (overlay) {
+        overlay.addEventListener('click', toggleHistory);
+    }
+
+    // Load history
+    loadHistory();
+
+    // Bind input field events
+    document.getElementById('prompt-input').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            createTask();
+        }
+    });
+
+    // Listen for window size changes
+    window.addEventListener('resize', () => {
+        const container = document.querySelector('.container');
+
+        // Maintain history sidebar effect on large screens, remove on small screens
+        if (window.innerWidth > 768 && historyVisible) {
+            container.classList.add('with-history');
+        } else {
+            container.classList.remove('with-history');
+        }
+    });
+
+    // Add keyboard event listener to close modal
+    document.addEventListener('keydown', (e) => {
+        // ESC key closes history panel
+        if (e.key === 'Escape') {
+            if (historyVisible) {
+                toggleHistory();
+            }
+
+            const imageModal = document.getElementById('image-modal');
+            if (imageModal && imageModal.classList.contains('active')) {
+                imageModal.classList.remove('active');
+            }
+
+            const pythonModal = document.getElementById('python-modal');
+            if (pythonModal && pythonModal.classList.contains('active')) {
+                pythonModal.classList.remove('active');
+            }
+        }
+    });
+});

static/themes/openmanus/static/style.css

@@ -0,0 +1,1630 @@
+:root {
+    --primary-color: #007bff;
+    --primary-hover: #0056b3;
+    --primary-color-light: #e6f2ff;
+    --success-color: #28a745;
+    --success-color-light: #e8f5e9;
+    --error-color: #dc3545;
+    --error-color-light: #ffe6e6;
+    --warning-color: #ff9800;
+    --warning-color-light: #fff8e6;
+    --info-color: #2196f3;
+    --info-color-light: #e3f2fd;
+    --text-color: #333;
+    --text-light: #666;
+    --bg-color: #f8f9fa;
+    --border-color: #ddd;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+.container {
+    display: flex;
+    min-height: 100vh;
+    min-width: 0;
+    width: 98%;
+    margin: 0 auto;
+    padding: 10px;
+    gap: 10px;
+    position: relative;
+    transition: all 0.3s ease;
+    margin-top: 60px;  /* Top header height + spacing */
+    min-height: calc(100vh - 60px);
+}
+
+.container.with-result {
+    /* Reserve space for result panel, use calc to calculate width, reduce gap */
+    width: calc(68% - 10px); /* Increase main panel width, reduce right margin */
+    margin-right: auto;
+    margin-left: 0;
+}
+
+.card {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.history-panel {
+    width: 200px;
+    flex-shrink: 0;
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    height: calc(100vh - 80px);  /* 减去标题栏高度和间距 */
+    overflow: auto;
+}
+
+.steps-panel {
+    width: 300px;
+    flex-shrink: 0;
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    height: calc(100vh - 80px);  /* 减去标题栏高度和间距 */
+    overflow: auto;
+}
+
+.steps-container {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.main-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: calc(100vh - 80px);  /* 减去标题栏高度和间距 */
+    min-width: 400px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.task-container {
+    flex: 1;
+    width: 100%;
+    max-width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    overflow: auto;
+    transition: width 0.3s ease;
+}
+
+.result-panel {
+    width: 31%;  /* Slightly reduce result panel width */
+    min-width: 380px;  /* Reduce minimum width */
+    height: calc(100vh - 80px);  /* Subtract header height and spacing */
+    position: fixed;
+    right: 10px; /* Restore right position */
+    top: 70px; /* Adjust to fully align with history panel */
+    background-color: rgba(22, 24, 36, 0.98);
+    border: 1px solid rgba(60, 80, 220, 0.2);
+    border-radius: 8px;
+    padding: 12px;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3), 0 0 40px rgba(60, 80, 220, 0.15);
+    overflow: auto;
+    transition: transform 0.3s ease;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+}
+
+.result-panel.hidden {
+    transform: translateX(calc(100% + 10px)); /* Restore slide-out effect to the right */
+}
+
+.result-panel.minimized {
+    display: none !important;
+}
+
+.result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(80, 80, 80, 0.3);
+    background: linear-gradient(90deg, rgba(20, 25, 30, 0.9), rgba(30, 35, 45, 0.9));
+    padding: 15px;
+    border-radius: 8px 8px 0 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.result-header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(0, 180, 255, 0.4),
+        rgba(120, 0, 255, 0.6),
+        rgba(0, 180, 255, 0.4),
+        transparent
+    );
+}
+
+.result-header h2 {
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+    margin: 0;
+    position: relative;
+    text-shadow: 0 0 10px rgba(0, 140, 255, 0.3);
+    display: flex;
+    align-items: center;
+}
+
+.result-header h2::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-color: rgba(0, 180, 255, 0.8);
+    border-radius: 50%;
+    margin-right: 10px;
+    box-shadow: 0 0 8px rgba(0, 180, 255, 0.8);
+    animation: pulse-light 2s infinite;
+}
+
+.result-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.minimize-result {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s;
+    position: relative;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.minimize-result:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(0, 140, 255, 0.4);
+}
+
+/* 替换箭头为全屏图标 */
+.minimize-result::before,
+.minimize-result::after {
+    content: "";
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    transition: all 0.2s;
+}
+
+/* 创建全屏图标的外框 */
+.minimize-result::before {
+    width: 12px;
+    height: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    background: transparent;
+}
+
+/* 创建全屏图标的右下角小方块 */
+.minimize-result::after {
+    width: 5px;
+    height: 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    right: 7px;
+    bottom: 7px;
+}
+
+.result-container {
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+    margin-top: 0;
+    padding: 5px;
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.result-container p,
+.result-container div,
+.result-container pre,
+.result-container span {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-width: 100%;
+    margin-bottom: 5px;
+    line-height: 1.4;
+}
+
+/* Modified search result styles */
+.search-result-item {
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+}
+
+.search-result-item:hover {
+    background-color: #f0f0f0;
+}
+
+.search-result-title {
+    font-weight: 500;
+    color: #1a0dab;
+    margin-bottom: 3px;
+}
+
+.search-result-url {
+    color: #006621;
+    font-size: 0.8rem;
+    margin-bottom: 3px;
+}
+
+.search-result-description {
+    color: #545454;
+    font-size: 0.9rem;
+}
+
+/* Add search box styles */
+.search-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+}
+
+.search-box-icon {
+    color: #777;
+    margin-right: 8px;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-size: 14px;
+    color: #333;
+}
+
+.search-box .search-button {
+    background-color: #f5f5f5;
+    color: #777;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.search-box .search-button:hover {
+    background-color: #e0e0e0;
+}
+
+.task-list {
+    margin-top: 10px;
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.welcome-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: var(--text-light);
+    padding: 40px 20px;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+    position: relative;
+    margin: auto 0;
+}
+
+.welcome-message h1 {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: #333;
+    font-weight: 600;
+}
+
+.logo-animation {
+    margin-bottom: 10px;
+    animation: pulse 2s infinite ease-in-out;
+}
+
+.welcome-logo {
+    width: 320px;
+    height: auto;
+    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
+    transition: all 0.3s ease;
+    margin-bottom: 5px;
+}
+
+.welcome-logo:hover {
+    transform: scale(1.05);
+    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.3));
+}
+
+.animated-text {
+    font-size: 1.8rem;
+    margin-bottom: 16px;
+    color: var(--primary-color);
+    animation: fadeIn 1s ease-in-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+}
+
+.animated-subtext {
+    font-size: 0.9rem;
+    color: #666;
+    animation: fadeIn 1s ease-in-out;
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+    position: relative;
+    overflow: hidden;
+}
+
+.animated-subtext::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(0, 180, 255, 0.4),
+        rgba(120, 0, 255, 0.6),
+        rgba(0, 180, 255, 0.4),
+        transparent
+    );
+    animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 高亮文本 - 亮色系蓝色渐变 */
+.highlight-text {
+    background: linear-gradient(135deg, #0575E6 0%, #0096FF 35%, #00B4FF 65%, #00D2FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-shadow: 0 0 8px rgba(5, 117, 230, 0.3), 0 0 15px rgba(0, 198, 251, 0.2);
+}
+
+/* Login button - blue border color scheme */
+.login-btn {
+    background: linear-gradient(135deg, #0575E6, #0096FF);
+    color: white;
+    padding: 10px 24px;
+    border-radius: 30px;
+    font-weight: 500;
+    font-size: 14px;
+    transition: all 0.25s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    box-shadow: 0 4px 15px rgba(5, 117, 230, 0.2);
+}
+
+.login-btn:hover {
+    background: linear-gradient(135deg, #0468C8, #0086E8);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(5, 117, 230, 0.3);
+}
+
+.login-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 10px rgba(5, 117, 230, 0.15);
+}
+
+/* Send button styles - blue border color scheme */
+.send-btn {
+    padding: 12px 30px;
+    background: linear-gradient(135deg, #0575E6, #0096FF);
+    color: white;
+    border: none;
+    border-radius: 30px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 15px rgba(5, 117, 230, 0.2);
+}
+
+.send-btn:hover {
+    background: linear-gradient(135deg, #0468C8, #0086E8);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(5, 117, 230, 0.3);
+}
+
+.send-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 10px rgba(5, 117, 230, 0.15);
+}
+
+.task-card {
+    background: #fff;
+    padding: 15px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.task-card:hover {
+    transform: translateX(5px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.task-card.active {
+    border-left: 4px solid var(--primary-color);
+    background-color: var(--primary-color-light);
+}
+
+.status-pending {
+    color: var(--text-light);
+}
+
+.status-running {
+    color: var(--primary-color);
+}
+
+.status-completed {
+    color: var(--success-color);
+}
+
+.status-failed {
+    color: var(--error-color);
+}
+
+.status-text {
+    margin-left: 5px;
+    position: relative;
+    color: rgba(255, 255, 255, 1); /* 确保文字是纯白色 */
+    font-weight: 500;
+}
+
+.status-text::after {
+    content: '|';
+    position: absolute;
+    right: -12px;
+    color: rgba(0, 140, 255, 0.9); /* 蓝色光标 */
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+.step-item {
+    padding: 0;
+    background: white;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    width: 100%;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    margin-bottom: 8px;
+    opacity: 1;
+    transform: none;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.step-item .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #eee;
+    transition: all 0.3s ease;
+    color: #333;
+    position: relative;
+    overflow: hidden;
+}
+
+.step-item .log-body {
+    display: none; /* 默认隐藏详细内容 */
+    padding: 10px;
+    background-color: white;
+    color: #333;
+}
+
+.log-prefix {
+    color: #444;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    flex: 1;
+    min-width: 0; /* 允许flex项目收缩 */
+}
+
+/* 增强时间戳显示 */
+.log-prefix time {
+    font-weight: 500;
+    color: #0575E6;
+    padding: 0 5px;
+    background-color: rgba(5, 117, 230, 0.05);
+    border-radius: 3px;
+}
+
+.content-preview {
+    margin-left: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 60%;
+    opacity: 0.8;
+    font-size: 0.9em;
+}
+
+/* 步骤图标 */
+.log-prefix-icon {
+    display: inline-flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    background: #f0f0f0;
+    border-radius: 50%;
+    margin-right: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border: 1px solid #eee;
+    color: #333;
+    flex-shrink: 0;
+}
+
+.step-controls {
+    display: flex;
+}
+
+.minimize-btn {
+    display: inline-flex;
+    width: 22px;
+    height: 22px;
+    justify-content: center;
+    align-items: center;
+    background: #f0f0f0;
+    border: 1px solid #e0e0e0;
+    border-radius: 50%;
+    cursor: pointer;
+    user-select: none;
+    color: #555;
+    transition: all 0.2s;
+    font-size: 12px;
+}
+
+.minimize-btn:hover {
+    background: #e0e0e0;
+    color: #333;
+}
+
+/* 不同步骤类型的颜色 */
+.step-item.think .log-header {
+    background-color: var(--info-color-light);
+    border-left: 3px solid var(--info-color);
+}
+
+.step-item.tool .log-header {
+    background-color: var(--warning-color-light);
+    border-left: 3px solid var(--warning-color);
+}
+
+.step-item.act .log-header {
+    background-color: var(--primary-color-light);
+    border-left: 3px solid var(--primary-color);
+}
+
+.step-item.log .log-header {
+    background-color: #f8f9fa;
+    border-left: 3px solid #ddd;
+}
+
+.step-item.expanded .log-body {
+    display: block; /* 展开时才显示详细内容 */
+}
+
+.step-item pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 0.9em;
+    line-height: 1.4;
+    padding: 10px;
+    border-radius: 4px;
+    background: var(--bg-color);
+}
+
+.step-item pre.think {
+    background: var(--info-color-light);
+    border-left: 4px solid var(--info-color);
+}
+
+.step-item pre.tool {
+    background: var(--warning-color-light);
+    border-left: 4px solid var(--warning-color);
+}
+
+.step-item pre.act {
+    background: var(--primary-color-light);
+    border-left: 4px solid var(--primary-color);
+}
+
+.step-item pre.result {
+    background: var(--success-color-light);
+    border-left: 4px solid var(--success-color);
+}
+
+.step-item pre.error {
+    background: var(--error-color-light);
+    border-left: 4px solid var(--error-color);
+}
+
+.loading {
+    padding: 15px;
+    color: #666;
+    text-align: center;
+}
+
+.ping {
+    color: #ccc;
+    text-align: center;
+    margin: 5px 0;
+    height: 10px;
+    display: block;
+}
+
+.error {
+    color: #dc3545;
+    padding: 10px;
+    background: #ffe6e6;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+.complete {
+    color: #28a745;
+    padding: 10px;
+    background: #e6ffe6;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+.info {
+    color: #17a2b8;
+    padding: 10px;
+    background: #e3f2fd;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+/* Step division line style */
+.step-divider {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 15px 0;
+    position: relative;
+}
+
+.step-circle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1.2em;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    z-index: 2;
+    flex-shrink: 0;
+}
+
+/* File interaction style */
+.file-interaction {
+    margin-top: 15px;
+    padding: 10px;
+    border-radius: 6px;
+    background-color: #f5f7fa;
+    border: 1px solid var(--border-color);
+}
+
+.download-link {
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: var(--primary-color);
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    font-size: 0.9em;
+    transition: background-color 0.2s;
+}
+
+.download-link:hover {
+    background-color: var(--primary-hover);
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 200px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.preview-image:hover {
+    transform: scale(1.02);
+}
+
+.audio-player {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.audio-player audio {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.run-button {
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: var(--success-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+    margin-right: 10px;
+    transition: background-color 0.2s;
+}
+
+.run-button:hover {
+    background-color: #218838;
+}
+
+/* Full screen image modal box */
+.image-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-modal.active {
+    display: flex;
+}
+
+.modal-content {
+    max-width: 90%;
+    max-height: 90%;
+}
+
+.close-modal {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+}
+
+/* Python runs simulation modal boxes */
+.python-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.python-modal.active {
+    display: flex;
+}
+
+.python-console {
+    width: 80%;
+    height: 80%;
+    background-color: #1e1e1e;
+    color: #f8f8f8;
+    border-radius: 8px;
+    padding: 15px;
+    font-family: 'Courier New', monospace;
+    overflow: auto;
+}
+
+.python-output {
+    white-space: pre-wrap;
+    line-height: 1.5;
+}
+
+.step-line {
+    flex-grow: 1;
+    height: 2px;
+    background-color: var(--border-color);
+    margin-left: 10px;
+}
+
+.step-info {
+    margin-left: 15px;
+    font-weight: bold;
+    color: var(--text-light);
+    font-size: 0.9em;
+}
+
+.step-item strong {
+    display: block;
+    margin-bottom: 8px;
+    color: #007bff;
+    font-size: 0.9em;
+}
+
+.step-item div {
+    color: #444;
+    line-height: 1.6;
+}
+
+.title {
+    font-size: 7rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: glow 2s ease-in-out infinite alternate;
+    letter-spacing: -2px;
+    font-weight: 900;
+    line-height: 1;
+}
+
+@keyframes glow {
+    from {
+        text-shadow: 0 0 20px rgba(0, 220, 130, 0.6),
+                     0 0 40px rgba(54, 228, 218, 0.4),
+                     0 0 60px rgba(0, 71, 225, 0.2);
+    }
+    to {
+        text-shadow: 0 0 40px rgba(0, 220, 130, 0.8),
+                     0 0 60px rgba(54, 228, 218, 0.6),
+                     0 0 80px rgba(0, 71, 225, 0.4);
+    }
+}
+
+.subtitle {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    color: #999;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    line-height: 1.3;
+}
+
+.description {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    margin-bottom: 2.5rem;
+    color: #888;
+    max-width: 680px;
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+}
+
+.cta-button {
+    display: inline-block;
+    padding: 0.9rem 2.5rem;
+    font-size: 1rem;
+    color: white;
+    background: linear-gradient(45deg, #00dc82, #36e4da);
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-weight: 600;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+.cta-button:hover {
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 6px 15px rgba(0, 220, 130, 0.4);
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 1200px) {
+    .title {
+        font-size: 6rem;
+    }
+
+    .hero-section {
+        padding: 2rem 1.5rem;
+        max-width: 800px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .title {
+        font-size: 4.5rem;
+        letter-spacing: -1px;
+    }
+
+    .subtitle {
+        font-size: 1.5rem;
+        margin-bottom: 1.2rem;
+    }
+
+    .description {
+        font-size: 1rem;
+        margin-bottom: 2.5rem;
+        padding: 0 1rem;
+    }
+
+    .cta-button {
+        padding: 0.8rem 2.2rem;
+        font-size: 0.95rem;
+    }
+
+    .emoji {
+        font-size: 2rem;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .title {
+        font-size: 3.5rem;
+        margin-bottom: 0.8rem;
+    }
+
+    .subtitle {
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+    }
+
+    .description {
+        font-size: 0.9rem;
+        line-height: 1.6;
+        margin-bottom: 2rem;
+    }
+
+    .cta-button {
+        padding: 0.7rem 2rem;
+        font-size: 0.9rem;
+        border-radius: 20px;
+    }
+
+    .emoji {
+        font-size: 1.5rem;
+    }
+
+    .hero-section {
+        padding: 1.5rem 1rem;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    .title {
+        font-size: 3rem;
+    }
+
+    .subtitle {
+        font-size: 1.1rem;
+    }
+
+    .description {
+        font-size: 0.85rem;
+    }
+
+    .cta-button {
+        padding: 0.6rem 1.8rem;
+        font-size: 0.85rem;
+    }
+}
+
+/* 适配高度 */
+@media screen and (max-height: 700px) {
+    .hero-section {
+        padding: 1rem;
+    }
+
+    .description {
+        margin-bottom: 2rem;
+    }
+}
+
+/* 适配横屏模式 */
+@media screen and (max-height: 500px) and (orientation: landscape) {
+    .hero-section {
+        padding: 1rem;
+    }
+
+    .title {
+        font-size: 3.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+        margin-bottom: 0.8rem;
+    }
+
+    .description {
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .cta-button {
+        padding: 0.8rem 2.5rem;
+    }
+
+    .emoji {
+        display: none;
+    }
+}
+
+/* Homepage styles */
+.home-container {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-section {
+    text-align: center;
+    padding: 2rem;
+    position: relative;
+    z-index: 1;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.floating-emojis {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.emoji {
+    position: absolute;
+    font-size: 2.5rem;
+    opacity: 0;
+    animation: float 10s ease-in-out infinite;
+    animation-delay: var(--delay);
+    filter: drop-shadow(0 0 10px rgba(0, 220, 130, 0.3));
+}
+
+.emoji:nth-child(1) { top: 20%; left: 20%; }
+.emoji:nth-child(2) { top: 30%; left: 80%; }
+.emoji:nth-child(3) { top: 70%; left: 30%; }
+.emoji:nth-child(4) { top: 60%; left: 70%; }
+.emoji:nth-child(5) { top: 40%; left: 50%; }
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0);
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-100vh) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+.step-info-container {
+    margin-bottom: 10px;
+}
+
+.step-info-box {
+    background: linear-gradient(90deg, rgba(28, 30, 44, 0.9), rgba(36, 38, 52, 0.9));
+    border: 1px solid rgba(60, 80, 220, 0.2);
+    padding: 10px 15px;
+    margin-top: 8px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    position: relative;
+    overflow: hidden;
+}
+
+.step-info-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg,
+        rgba(60, 80, 220, 0.1),
+        rgba(60, 80, 220, 0.3),
+        rgba(120, 120, 220, 0.6),
+        rgba(60, 80, 220, 0.3),
+        rgba(60, 80, 220, 0.1)
+    );
+}
+
+.current-step {
+    background-color: #f0f5ff;
+    border: 1px solid #e0e0e0;
+    border-left: 3px solid #4285f4;
+    padding: 8px 12px;
+    margin-top: 8px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.emoji-icon {
+    margin-right: 14px;
+    font-size: 18px;
+    display: inline-flex;
+    width: 36px;
+    height: 36px;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, rgba(45, 49, 66, 0.8), rgba(28, 31, 40, 0.8));
+    border-radius: 50%;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(60, 80, 220, 0.3);
+    position: relative;
+    z-index: 2;
+    border: 1px solid rgba(60, 80, 220, 0.15);
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.emoji-icon::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(60, 80, 220, 0.25), transparent 60%);
+    z-index: -1;
+}
+
+.step-highlight {
+    background-color: #ffefef;  /* 红色背景 */
+    border: 1px solid #ffcdd2;
+    border-left: 3px solid #f44336;
+    padding: 8px 12px;
+    margin-top: 8px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.content-highlight {
+    background-color: #e3f2fd;  /* 蓝色背景 */
+    border: 1px solid #bbdefb;
+    border-left: 3px solid #2196f3;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+.content-highlight pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* New top navigation bar design */
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background-color: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    z-index: 100;
+    transition: all 0.3s ease;
+}
+
+.header-left, .header-center, .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-left {
+    flex: 1;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* 移除链接下划线的高优先级规则 */
+.header a.logo,
+.header-left a.logo,
+.header a,
+a.logo {
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+.header a.logo:hover,
+.header-left a.logo:hover,
+.header a:hover,
+a.logo:hover,
+.header a.logo:focus,
+.header-left a.logo:focus,
+.header a:focus,
+a.logo:focus,
+.header a.logo:active,
+.header-left a.logo:active,
+.header a:active,
+a.logo:active {
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+/* 优化OpenManus文字渐变效果 */
+.header .logo-text,
+.header-left .logo-text,
+span.logo-text,
+.logo-text {
+    font-size: 24px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #0575E6 0%, #0096FF 35%, #00B4FF 65%, #00D2FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-decoration: none !important;
+    border-bottom: none !important;
+    display: inline-block;
+    letter-spacing: -0.5px;
+    text-shadow: 0 0 8px rgba(5, 117, 230, 0.2);
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.header .logo-text:hover,
+.header-left .logo-text:hover,
+span.logo-text:hover,
+.logo-text:hover {
+    transform: scale(1.05);
+    text-shadow: 0 0 15px rgba(5, 117, 230, 0.4);
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+/* History button style reset - no visual effects */
+.history-toggle {
+    all: unset; /* Reset all CSS properties */
+    cursor: pointer; /* Only keep hand cursor */
+    color: #777;
+    position: relative;
+    margin: 0 15px 0 0;
+    padding: 0;
+    font-size: inherit;
+    line-height: normal;
+    display: inline-block;
+}
+
+/* Ensure icon style is simple */
+.history-toggle i {
+    font-size: 18px;
+}
+
+/* History count indicator - essential styles */
+.history-count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background-color: #555;
+    color: white;
+    min-width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    font-size: 9px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 14px;
+    padding: 0 3px;
+}
+
+/* Side history panel */
+.history-panel {
+    position: fixed;
+    left: 0;
+    top: 56px;
+    width: 280px;
+    height: calc(100vh - 56px);
+    background-color: white;
+    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.05);
+    z-index: 99;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.history-panel.show {
+    transform: translateX(0);
+}
+
+.history-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+}
+
+.history-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.history-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.history-action-btn {
+    background: transparent;
+    border: none;
+    color: #666;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.history-action-btn:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: #0575E6;
+    transform: none;
+    box-shadow: none;
+}
+
+.task-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px 15px;
+}
+
+.task-card {
+    background: #fff;
+    padding: 12px 15px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    border: 1px solid #eee;
+    transition: all 0.2s;
+}
+
+.task-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+    border-color: #ddd;
+}
+
+.task-card.active {
+    border-left: 3px solid #0e68f1;
+    background-color: rgba(14, 104, 241, 0.05);
+}
+
+.task-title {
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.task-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #888;
+}
+
+/* Overlay */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 98;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.overlay.show {
+    opacity: 1;
+    pointer-events: all;
+}
+
+/* Container adjustment, reserve space for history panel */
+.container.with-history {
+    padding-left: 280px;
+    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Welcome title style optimization */
+.welcome-title {
+    font-size: 3.8rem;
+    margin-bottom: 18px;
+    color: #333;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.5px;
+}
+
+/* Welcome page subtitle style optimization */
+.welcome-message p {
+    font-size: 1.1rem;
+    color: #555;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, #0575E6 0%, #0096FF 35%, #00B4FF 65%, #00D2FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
+    animation: fadeIn 0.8s ease-in-out;
+    animation-delay: 0.2s;
+    animation-fill-mode: both;
+}
+
+/* Restore login icon style */
+.login-btn i {
+    font-size: 14px;
+}
+
+/* Remove any possible overrides for new styles */
+button {
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.input-container {
+    width: 100%;
+    background-color: white;
+    border-radius: 12px;
+    padding: 15px 20px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+    display: flex;
+    gap: 15px;
+    margin-top: auto;
+}
+
+#prompt-input {
+    flex: 1;
+    padding: 14px 20px;
+    border: 1px solid #e0e0e0;
+    border-radius: 24px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+#prompt-input:focus {
+    border-color: #0096FF;
+    box-shadow: 0 2px 12px rgba(0, 150, 255, 0.15);
+    outline: none;
+}

static/themes/openmanus/templates/chat.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenManus</title>
+    <link rel="stylesheet" href="/static/themes/openmanus/static/style.css">
+    <!-- Add Font Awesome icon library -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <!-- Top navigation bar -->
+    <header class="header">
+        <div class="header-left">
+            <a href="/" class="logo">
+                <span class="logo-text">OpenManus</span>
+            </a>
+        </div>
+        <div class="header-right">
+            <!-- History icon button - using CSS class -->
+            <button class="history-toggle">
+                <i class="fas fa-history"></i>
+                <span class="history-count">0</span>
+            </button>
+            <a href="#" class="login-btn">
+                <i class="fas fa-user"></i>
+                Login
+            </a>
+        </div>
+    </header>
+
+    <!-- History panel -->
+    <aside class="history-panel">
+        <div class="history-header">
+            <div class="history-title">History</div>
+            <div class="history-actions">
+                <button class="history-action-btn" title="Refresh" onclick="loadHistory()">
+                    <i class="fas fa-sync-alt"></i>
+                </button>
+            </div>
+        </div>
+        <div id="task-list" class="task-list">
+            <!-- Task list will be dynamically loaded through JavaScript -->
+        </div>
+    </aside>
+
+    <!-- Background overlay -->
+    <div class="overlay"></div>
+
+    <!-- Main container -->
+    <div class="container">
+        <div class="main-panel">
+            <div id="task-container" class="task-container">
+                <div class="welcome-message">
+                    <!-- Add large logo animation -->
+                    <div class="logo-animation">
+                        <img src="/static/themes/openmanus/static/logo.png" alt="OpenManus Logo" class="welcome-logo">
+                    </div>
+
+                    <p class="highlight-text">Your autonomous intelligent assistant</p>
+                    <div class="animated-subtext">Ready to help with anything, anytime</div>
+                </div>
+                <div id="steps-container" class="steps-container"></div>
+            </div>
+
+            <div id="result-panel" class="result-panel hidden">
+                <div class="result-header">
+                    <h2>Manus Computer</h2>
+                    <div class="result-controls">
+                        <div class="minimize-result" onclick="toggleResultPanel()"></div>
+                    </div>
+                </div>
+
+                <div class="step-info-container">
+                    <div id="current-step" class="step-info-box">
+                        <!-- Step information will be dynamically populated by JavaScript -->
+                    </div>
+                </div>
+
+                <div id="result-container" class="result-container"></div>
+            </div>
+
+            <div class="input-container">
+                <input type="text" id="prompt-input" placeholder="Type your question here...">
+                <button onclick="createTask()" class="send-btn">Send</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/themes/openmanus/static/main.js"></script>
+</body>
+</html>

static/themes/openmanus/theme.json

@@ -0,0 +1,6 @@
+{
+    "name": "Manus",
+    "description": "OpenManus的默认界面主题",
+    "author": "Ray",
+    "version": "1.0.0"
+}