@cloudbase/cloudbase-mcp 1.7.0 → 1.7.1

package/dist/interactive-server.js

@@ -83,15 +83,24 @@ export class InteractiveServer {
         // API接口
         this.app.post('/api/submit', (req, res) => {
             const { type, data } = req.body;
+            debug('🔥 === /api/submit 收到请求 ===');
+            debug('🔥 请求体 req.body:', JSON.stringify(req.body, null, 2));
+            debug('🔥 解析后 type:', type);
+            debug('🔥 解析后 data:', data);
+            debug('🔥 当前 currentResolver 状态:', this.currentResolver ? '有' : '无');
             debug('Received submit request', { type, data });
             if (this.currentResolver) {
                 info('Resolving with user data');
+                debug('🔥 调用 currentResolver，参数:', { type, data });
                 this.currentResolver({ type, data });
                 this.currentResolver = null;
+                debug('🔥 已清空 currentResolver');
             }
             else {
                 warn('No resolver waiting for response');
+                debug('🔥 ❌ 没有等待响应的resolver！');
             }
+            debug('🔥 返回成功响应');
             res.json({ success: true });
         });
         this.app.post('/api/cancel', (req, res) => {
@@ -252,158 +261,311 @@ export class InteractiveServer {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CloudBase AI Toolkit - 环境配置</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+        
         * { margin: 0; padding: 0; box-sizing: border-box; }
         :root {
-            --primary-color: #4F46E5;
-            --primary-hover: #4338CA;
-            --text-primary: #1F2937;
-            --text-secondary: #6B7280;
-            --border-color: #E5E7EB;
-            --bg-secondary: #F9FAFB;
-            --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
+            --primary-color: #1a1a1a;
+            --primary-hover: #000000;
+            --accent-color: #67E9E9;
+            --accent-hover: #2BCCCC;
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0a0;
+            --border-color: rgba(255, 255, 255, 0.15);
+            --bg-secondary: rgba(255, 255, 255, 0.08);
+            --bg-glass: rgba(26, 26, 26, 0.95);
+            --shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
+            --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+            --header-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d1117 100%);
         }
+        
         body {
             font-family: var(--font-mono);
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 20px;
+            position: relative;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+        
+        /* Custom scrollbar styles */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent-color);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-hover);
         }
+        
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        body::after {
+            content: '';
+            position: fixed;
+            top: 50%; left: 50%;
+            width: 500px; height: 500px;
+            background: radial-gradient(circle, rgba(103, 233, 233, 0.05) 0%, transparent 70%);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: -1;
+            animation: pulse 8s ease-in-out infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
+            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
+        }
+        
         .modal {
-            background: white;
-            border-radius: 16px;
+            background: var(--bg-glass);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
             box-shadow: var(--shadow);
+            border: 2px solid var(--border-color);
             width: 100%;
-            max-width: 500px;
+            max-width: 520px;
             overflow: hidden;
-            animation: modalIn 0.3s ease-out;
+            animation: modalIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+        }
+        
+        .modal::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.02) 50%, transparent 70%);
+            animation: shimmer 3s infinite;
+            pointer-events: none;
+        }
+        
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
         }
+        
         @keyframes modalIn {
             from {
                 opacity: 0;
-                transform: scale(0.95) translateY(-10px);
+                transform: scale(0.9) translateY(-20px);
             }
             to {
                 opacity: 1;
                 transform: scale(1) translateY(0);
             }
         }
+        
         .header {
-            background: var(--primary-color);
-            color: white;
-            padding: 20px 24px;
+            background: var(--header-bg);
+            color: var(--text-primary);
+            padding: 24px 28px;
             display: flex;
             align-items: center;
             justify-content: space-between;
+            position: relative;
+            overflow: hidden;
         }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%);
+            animation: headerShimmer 4s infinite;
+            pointer-events: none;
+        }
+        
+        @keyframes headerShimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
         .header-left {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 16px;
+            z-index: 1;
         }
+        
         .logo {
-            width: 28px;
-            height: 28px;
-            animation: pulse 2s infinite;
+            width: 32px;
+            height: 32px;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+            animation: logoFloat 3s ease-in-out infinite;
         }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
+        
+        @keyframes logoFloat {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-3px); }
         }
+        
         .title {
-            font-size: 18px;
-            font-weight: 600;
-            letter-spacing: -0.025em;
+            font-size: 20px;
+            font-weight: 700;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+        
         .github-link {
-            color: white;
+            color: var(--text-primary);
             text-decoration: none;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
             font-size: 14px;
-            opacity: 0.9;
-            transition: opacity 0.2s;
-            padding: 6px 10px;
-            border-radius: 6px;
-            background: rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(10px);
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-weight: 500;
+            z-index: 1;
+            transition: all 0.3s ease;
         }
+        
         .github-link:hover {
-            opacity: 1;
-            background: rgba(255,255,255,0.2);
+            background: rgba(255,255,255,0.15);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
         }
+        
         .content {
             padding: 32px 24px;
+            position: relative;
         }
+        
         .content-title {
             font-size: 24px;
             font-weight: 700;
             color: var(--text-primary);
             margin-bottom: 8px;
+            animation: fadeInUp 0.8s ease-out 0.2s both;
         }
+        
         .content-subtitle {
             color: var(--text-secondary);
             margin-bottom: 24px;
             line-height: 1.5;
+            animation: fadeInUp 0.8s ease-out 0.4s both;
         }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
         .env-list {
             border: 1px solid var(--border-color);
             border-radius: 12px;
             margin-bottom: 24px;
             max-height: 300px;
             overflow-y: auto;
+            overflow-x: hidden;
+            background: rgba(255, 255, 255, 0.03);
+            animation: fadeInUp 0.8s ease-out 0.6s both;
         }
+        
         .env-item {
             padding: 16px 20px;
             border-bottom: 1px solid var(--border-color);
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
             gap: 14px;
+            position: relative;
+            overflow: hidden;
+            color: var(--text-primary);
         }
+        
+        .env-item::before {
+            content: '';
+            position: absolute;
+            left: 0; top: 0; bottom: 0;
+            width: 0;
+            background: var(--accent-color);
+            transition: width 0.3s ease;
+        }
+        
         .env-item:last-child {
             border-bottom: none;
         }
+        
         .env-item:hover {
             background: var(--bg-secondary);
+            transform: translateX(5px);
         }
+        
+        .env-item:hover::before {
+            width: 4px;
+        }
+        
         .env-item.selected {
-            background: #EEF2FF;
-            border-left: 4px solid var(--primary-color);
+            background: rgba(103, 233, 233, 0.1);
+            border-left: 4px solid var(--accent-color);
+            transform: translateX(5px);
         }
+        
         .env-icon {
             width: 20px;
             height: 20px;
-            color: var(--primary-color);
+            color: var(--accent-color);
             flex-shrink: 0;
+            animation: iconGlow 2s ease-in-out infinite;
+        }
+        
+        @keyframes iconGlow {
+            0%, 100% { filter: drop-shadow(0 0 2px rgba(103, 233, 233, 0.3)); }
+            50% { filter: drop-shadow(0 0 8px rgba(103, 233, 233, 0.6)); }
         }
+        
         .env-info {
             flex: 1;
-            min-width: 0;
         }
+        
         .env-name {
             font-weight: 600;
             color: var(--text-primary);
             margin-bottom: 4px;
         }
-        .env-id {
-            font-size: 13px;
+        
+        .env-alias {
             color: var(--text-secondary);
-            font-family: var(--font-mono);
-            background: var(--bg-secondary);
-            padding: 2px 8px;
-            border-radius: 4px;
-            display: inline-block;
+            font-size: 14px;
         }
+        
         .actions {
             display: flex;
             gap: 12px;
             justify-content: flex-end;
+            animation: fadeInUp 0.8s ease-out 0.8s both;
         }
+        
         .btn {
             padding: 12px 20px;
             border: none;
@@ -411,32 +573,58 @@ export class InteractiveServer {
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
             gap: 8px;
             font-family: var(--font-mono);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%; left: 50%;
+            width: 0; height: 0;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            transform: translate(-50%, -50%);
+        }
+        
+        .btn:hover::before {
+            width: 100px; height: 100px;
         }
+        
         .btn-primary {
             background: var(--primary-color);
-            color: white;
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
         }
+        
         .btn-primary:hover:not(:disabled) {
             background: var(--primary-hover);
-            transform: translateY(-1px);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
         }
+        
         .btn-secondary {
             background: var(--bg-secondary);
             color: var(--text-secondary);
             border: 1px solid var(--border-color);
         }
+        
         .btn-secondary:hover {
-            background: #F3F4F6;
+            background: rgba(255, 255, 255, 0.15);
+            color: var(--text-primary);
         }
+        
         .btn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
         }
+        
         .loading {
             display: none;
             align-items: center;
@@ -446,14 +634,16 @@ export class InteractiveServer {
             color: var(--text-secondary);
             font-size: 14px;
         }
+        
         .spinner {
             width: 16px;
             height: 16px;
             border: 2px solid var(--border-color);
-            border-top: 2px solid var(--primary-color);
+            border-top: 2px solid var(--accent-color);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
+        
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -464,11 +654,7 @@ export class InteractiveServer {
     <div class="modal">
         <div class="header">
             <div class="header-left">
-                <svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z"/>
-                    <path d="M12 22V12"/>
-                    <path d="M22 7L12 12L2 7"/>
-                </svg>
+                <img class="logo" src="https://7463-tcb-advanced-a656fc-1257967285.tcb.qcloud.la/mcp/cloudbase-logo.svg" alt="CloudBase Logo" />
                 <span class="title">CloudBase AI Toolkit</span>
             </div>
             <a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" target="_blank" class="github-link">
@@ -478,13 +664,23 @@ export class InteractiveServer {
                 GitHub
             </a>
         </div>
-        
+
         <div class="content">
             <h1 class="content-title">选择云开发环境</h1>
-            <p class="content-subtitle">请选择要使用的云开发环境，系统将自动配置环境ID</p>
+            <p class="content-subtitle">请选择您要使用的云开发环境</p>
             
             <div class="env-list" id="envList">
-                <!-- 环境列表将通过JavaScript动态加载 -->
+                ${(envs || []).map((env, index) => `
+                    <div class="env-item" onclick="selectEnv('${env.EnvId}', this)" style="animation-delay: ${index * 0.1}s;">
+                        <svg class="env-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                        </svg>
+                        <div class="env-info">
+                            <div class="env-name">${env.EnvId}</div>
+                            <div class="env-alias">${env.Alias || '无别名'}</div>
+                        </div>
+                    </div>
+                `).join('')}
             </div>
             
             <div class="actions">
@@ -511,57 +707,97 @@ export class InteractiveServer {
 
     <script>
         let selectedEnvId = null;
-        const envs = ${JSON.stringify(envs || [])};
         
-        function renderEnvList() {
-            const envList = document.getElementById('envList');
-            if (envs.length === 0) {
-                envList.innerHTML = '<div style="padding: 24px; text-align: center; color: var(--text-secondary);">暂无可用环境</div>';
-                return;
-            }
+        function selectEnv(envId, element) {
+            console.log('=== 环境选择事件触发 ===');
+            console.log('传入的envId:', envId);
+            console.log('传入的element:', element);
+            console.log('element类名:', element ? element.className : 'null');
             
-            envList.innerHTML = envs.map((env, index) => \`
-                <div class="env-item" onclick="selectEnv('\${env.EnvId}')">
-                    <svg class="env-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-                    </svg>
-                    <div class="env-info">
-                        <div class="env-name">\${env.Alias || env.EnvId}</div>
-                        <div class="env-id">\${env.EnvId}</div>
-                    </div>
-                </div>
-            \`).join('');
-        }
-        
-        function selectEnv(envId) {
             selectedEnvId = envId;
-            document.querySelectorAll('.env-item').forEach(item => {
+            console.log('设置selectedEnvId为:', selectedEnvId);
+            
+            // Remove selected class from all items
+            const allItems = document.querySelectorAll('.env-item');
+            console.log('找到的所有环境项数量:', allItems.length);
+            allItems.forEach(item => {
                 item.classList.remove('selected');
             });
-            event.currentTarget.classList.add('selected');
-            document.getElementById('confirmBtn').disabled = false;
+            
+            // Add selected class to current item
+            if (element) {
+                element.classList.add('selected');
+                console.log('✅ 已添加selected样式到当前项');
+                console.log('当前项的最终类名:', element.className);
+            } else {
+                console.error('❌ element为空，无法添加选中样式');
+            }
+            
+            // Enable confirm button
+            const confirmBtn = document.getElementById('confirmBtn');
+            if (confirmBtn) {
+                confirmBtn.disabled = false;
+                console.log('✅ 确认按钮已启用');
+            } else {
+                console.error('❌ 找不到确认按钮');
+            }
         }
         
         function confirm() {
-            if (!selectedEnvId) return;
+            console.log('=== CONFIRM BUTTON CLICKED ===');
+            console.log('selectedEnvId:', selectedEnvId);
+            
+            if (!selectedEnvId) {
+                console.error('❌ 没有选择环境ID！');
+                alert('请先选择一个环境');
+                return;
+            }
+            
+            console.log('✅ 环境ID验证通过，开始发送请求...');
             document.getElementById('loading').style.display = 'flex';
+            document.getElementById('confirmBtn').disabled = true;
+            
+            const requestBody = {
+                type: 'envId',
+                data: selectedEnvId
+            };
+            
+            console.log('📤 发送请求体:', JSON.stringify(requestBody, null, 2));
+            
             fetch('/api/submit', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    type: 'envId',
-                    data: { envId: selectedEnvId }
-                })
-            }).then(() => window.close());
+                body: JSON.stringify(requestBody)
+            }).then(response => {
+                console.log('📥 收到响应状态:', response.status);
+                console.log('📥 响应头:', [...response.headers.entries()]);
+                return response.json();
+            }).then(data => {
+                console.log('📥 响应数据:', data);
+                if (data.success) {
+                    console.log('✅ 请求成功，即将关闭窗口');
+                    window.close();
+                } else {
+                    console.error('❌ 请求失败:', data);
+                    alert('选择环境失败: ' + (data.error || '未知错误'));
+                    document.getElementById('loading').style.display = 'none';
+                    document.getElementById('confirmBtn').disabled = false;
+                }
+              }).catch(err => {
+                console.error('❌ 网络请求错误:', err);
+                alert('网络请求失败: ' + err.message);
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('confirmBtn').disabled = false;
+              });
         }
         
         function cancel() {
-            fetch('/api/cancel', { method: 'POST' }).then(() => window.close());
-        }
-        
-        renderEnvList();
-        if (envs.length === 1) {
-            selectEnv(envs[0].EnvId);
+            fetch('/api/cancel', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            }).then(() => {
+                window.close();
+            });
         }
     </script>
 </body>
@@ -576,72 +812,234 @@ export class InteractiveServer {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CloudBase MCP 调试日志</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+        
         * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root {
+            --primary-color: #1a1a1a;
+            --primary-hover: #000000;
+            --accent-color: #67E9E9;
+            --accent-hover: #2BCCCC;
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0a0;
+            --border-color: rgba(255, 255, 255, 0.15);
+            --bg-secondary: rgba(255, 255, 255, 0.08);
+            --bg-glass: rgba(26, 26, 26, 0.95);
+            --shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
+            --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+            --header-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d1117 100%);
+        }
+        
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: var(--font-mono);
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
             min-height: 100vh;
             padding: 20px;
+            position: relative;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+        
+        /* Custom scrollbar styles */
+        ::-webkit-scrollbar {
+            width: 8px;
         }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent-color);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-hover);
+        }
+        
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        body::after {
+            content: '';
+            position: fixed;
+            top: 50%; left: 50%;
+            width: 500px; height: 500px;
+            background: radial-gradient(circle, rgba(103, 233, 233, 0.05) 0%, transparent 70%);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: -1;
+            animation: pulse 8s ease-in-out infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
+            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
+        }
+        
         .container {
-            background: white;
+            background: var(--bg-glass);
+            backdrop-filter: blur(20px);
             border-radius: 20px;
             padding: 30px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            box-shadow: var(--shadow);
+            border: 2px solid var(--border-color);
             max-width: 1200px;
             margin: 0 auto;
+            animation: modalIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
         }
+        
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.02) 50%, transparent 70%);
+            animation: shimmer 3s infinite;
+            pointer-events: none;
+            border-radius: 20px;
+        }
+        
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
+        @keyframes modalIn {
+            from {
+                opacity: 0;
+                transform: scale(0.9) translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+        
         .header {
             text-align: center;
             margin-bottom: 30px;
+            position: relative;
+            z-index: 1;
         }
-        .icon {
-            width: 60px;
-            height: 60px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 50%;
-            margin: 0 auto 20px;
+        
+        .header-top {
             display: flex;
             align-items: center;
-            justify-content: center;
-            font-size: 30px;
-            color: white;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+        
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
         }
+        
+        .logo {
+            width: 40px;
+            height: 40px;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+            animation: logoFloat 3s ease-in-out infinite;
+        }
+        
+        @keyframes logoFloat {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-3px); }
+        }
+        
+        .github-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(10px);
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        
+        .github-link:hover {
+            background: rgba(255,255,255,0.15);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        }
+        
         h1 {
-            color: #2d3748;
+            color: var(--text-primary);
             margin-bottom: 10px;
-            font-size: 24px;
+            font-size: 28px;
             font-weight: 700;
+            animation: fadeInUp 0.8s ease-out 0.2s both;
+        }
+        
+        .subtitle {
+            color: var(--text-secondary);
+            font-size: 16px;
+            animation: fadeInUp 0.8s ease-out 0.4s both;
         }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
         .status {
-            background: #f7fafc;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border-color);
             border-radius: 12px;
             padding: 20px;
             margin-bottom: 20px;
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 15px;
+            animation: fadeInUp 0.8s ease-out 0.6s both;
         }
+        
         .status-item {
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
+        
         .status-label {
             font-weight: 600;
-            color: #4a5568;
+            color: var(--text-secondary);
         }
+        
         .status-value {
-            color: #2d3748;
-            font-family: 'Monaco', 'Menlo', monospace;
+            color: var(--text-primary);
+            font-family: var(--font-mono);
             font-size: 14px;
         }
+        
         .enabled {
-            color: #38a169;
+            color: var(--accent-color);
         }
+        
         .disabled {
-            color: #e53e3e;
+            color: #ff6b6b;
         }
+        
         .controls {
             display: flex;
             gap: 15px;
@@ -649,11 +1047,14 @@ export class InteractiveServer {
             justify-content: space-between;
             align-items: center;
             flex-wrap: wrap;
+            animation: fadeInUp 0.8s ease-out 0.8s both;
         }
+        
         .controls-left {
             display: flex;
             gap: 15px;
         }
+        
         .btn {
             padding: 10px 20px;
             border: none;
@@ -662,127 +1063,171 @@ export class InteractiveServer {
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
+            font-family: var(--font-mono);
+            position: relative;
+            overflow: hidden;
         }
+        
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%; left: 50%;
+            width: 0; height: 0;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            transform: translate(-50%, -50%);
+        }
+        
+        .btn:hover::before {
+            width: 100px; height: 100px;
+        }
+        
         .btn-primary {
-            background: #667eea;
-            color: white;
+            background: var(--accent-color);
+            color: var(--primary-color);
         }
+        
         .btn-primary:hover {
-            background: #5a67d8;
+            background: var(--accent-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(103, 233, 233, 0.3);
         }
+        
         .btn-danger {
-            background: #e53e3e;
+            background: #ff6b6b;
             color: white;
         }
+        
         .btn-danger:hover {
-            background: #c53030;
+            background: #ff5252;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
         }
+        
         .btn-secondary {
-            background: #e2e8f0;
-            color: #4a5568;
+            background: var(--bg-secondary);
+            color: var(--text-secondary);
+            border: 1px solid var(--border-color);
         }
+        
         .btn-secondary:hover {
-            background: #cbd5e0;
+            background: rgba(255, 255, 255, 0.15);
+            color: var(--text-primary);
         }
+        
         .log-container {
-            background: #1a202c;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid var(--border-color);
             border-radius: 12px;
             padding: 20px;
             height: 500px;
             overflow-y: auto;
-            font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+            font-family: var(--font-mono);
             font-size: 13px;
             line-height: 1.4;
+            animation: fadeInUp 0.8s ease-out 1s both;
         }
+        
         .log-container::-webkit-scrollbar {
             width: 8px;
         }
+        
         .log-container::-webkit-scrollbar-track {
-            background: #2d3748;
+            background: rgba(255, 255, 255, 0.1);
             border-radius: 4px;
         }
+        
         .log-container::-webkit-scrollbar-thumb {
-            background: #4a5568;
+            background: var(--accent-color);
             border-radius: 4px;
         }
+        
         .log-container::-webkit-scrollbar-thumb:hover {
-            background: #718096;
+            background: var(--accent-hover);
         }
+        
         .log-line {
-            color: #e2e8f0;
+            color: var(--text-primary);
             margin-bottom: 2px;
             word-break: break-all;
+            animation: logSlideIn 0.3s ease-out;
         }
+        
+        @keyframes logSlideIn {
+            from {
+                opacity: 0;
+                transform: translateX(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        
         .log-line.debug {
-            color: #a0aec0;
+            color: var(--text-secondary);
         }
+        
         .log-line.info {
-            color: #63b3ed;
+            color: #74c0fc;
         }
+        
         .log-line.warn {
-            color: #f6ad55;
+            color: #ffd43b;
         }
+        
         .log-line.error {
-            color: #fc8181;
+            color: #ff8787;
         }
+        
         .timestamp {
-            color: #718096;
+            color: var(--text-secondary);
         }
+        
         .level {
             font-weight: bold;
             margin: 0 8px;
         }
+        
         .empty-state {
             text-align: center;
-            color: #718096;
+            color: var(--text-secondary);
             padding: 40px;
             font-style: italic;
         }
-        .footer {
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
-            text-align: center;
-        }
-        .footer .brand {
-            font-size: 16px;
-            font-weight: 700;
-            color: #2d3748;
-            margin-bottom: 10px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .footer .links {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-        }
-        .footer .links a {
-            color: #718096;
-            text-decoration: none;
+        
+        .log-count {
+            color: var(--text-secondary);
             font-size: 14px;
-            transition: color 0.3s ease;
-        }
-        .footer .links a:hover {
-            color: #667eea;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <div class="icon">🔍</div>
-            <h1>CloudBase MCP 调试日志</h1>
-            <p style="color: #718096;">实时查看 MCP 服务器运行日志</p>
+            <div class="header-top">
+                <div class="header-left">
+                    <img class="logo" src="https://7463-tcb-advanced-a656fc-1257967285.tcb.qcloud.la/mcp/cloudbase-logo.svg" alt="CloudBase Logo" />
+                    <div style="text-align: left;">
+                        <h1>CloudBase MCP 调试日志</h1>
+                        <p class="subtitle">实时查看 MCP 服务器运行日志</p>
+                    </div>
+                </div>
+                <a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" target="_blank" class="github-link">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                    </svg>
+                    GitHub
+                </a>
+            </div>
         </div>
         
         <div class="status">
             <div class="status-item">
                 <span class="status-label">日志状态:</span>
                 <span class="status-value ${status.enabled ? 'enabled' : 'disabled'}">
-                    ${status.enabled ? '启用' : '禁用'}
+                    ${status.enabled ? '🟢 启用' : '🔴 禁用'}
                 </span>
             </div>
             <div class="status-item">
@@ -796,19 +1241,39 @@ export class InteractiveServer {
             <div class="status-item">
                 <span class="status-label">控制台输出:</span>
                 <span class="status-value ${status.useConsole ? 'enabled' : 'disabled'}">
-                    ${status.useConsole ? '启用' : '禁用'}
+                    ${status.useConsole ? '🟢 启用' : '🔴 禁用'}
                 </span>
             </div>
         </div>
         
         <div class="controls">
             <div class="controls-left">
-                <button class="btn btn-primary" onclick="refreshLogs()">刷新日志</button>
-                <button class="btn btn-danger" onclick="clearLogs()">清空日志</button>
-                <button class="btn btn-secondary" onclick="window.close()">关闭</button>
+                <button class="btn btn-primary" onclick="refreshLogs()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                        <path d="M8 16H3v5"/>
+                    </svg>
+                    刷新日志
+                </button>
+                <button class="btn btn-danger" onclick="clearLogs()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                        <path d="M3 6h18"/>
+                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
+                    </svg>
+                    清空日志
+                </button>
+                <button class="btn btn-secondary" onclick="window.close()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                        <path d="M18 6L6 18M6 6l12 12"/>
+                    </svg>
+                    关闭
+                </button>
             </div>
             <div>
-                <span style="color: #718096; font-size: 14px;">共 ${logs.length} 条日志</span>
+                <span class="log-count">📊 共 ${logs.length} 条日志</span>
             </div>
         </div>
         
@@ -821,15 +1286,7 @@ export class InteractiveServer {
                 return `<div class="log-line ${levelClass}"><span class="timestamp">[${timestamp}]</span><span class="level ${levelClass}">[${level}]</span>${message}</div>`;
             }
             return `<div class="log-line">${line}</div>`;
-        }).join('') : '<div class="empty-state">暂无日志记录</div>'}
-        </div>
-        
-        <div class="footer">
-            <p class="brand">CloudBase AI ToolKit</p>
-            <div class="links">
-                <a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" target="_blank">GitHub</a>
-                <a href="https://tcb.cloud.tencent.com/dev" target="_blank">控制台</a>
-            </div>
+        }).join('') : '<div class="empty-state">📝 暂无日志记录</div>'}
         </div>
     </div>
 
@@ -886,7 +1343,7 @@ export class InteractiveServer {
                             return \`<div class="log-line">\${line}</div>\`;
                         }).join('');
                         
-                        logContainer.innerHTML = newContent || '<div class="empty-state">暂无日志记录</div>';
+                        logContainer.innerHTML = newContent || '<div class="empty-state">📝 暂无日志记录</div>';
                         
                         if (isAtBottom) {
                             logContainer.scrollTop = logContainer.scrollHeight;
@@ -911,140 +1368,314 @@ export class InteractiveServer {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CloudBase AI Toolkit - 需求澄清</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+        
         * { margin: 0; padding: 0; box-sizing: border-box; }
         :root {
-            --primary-color: #4F46E5;
-            --primary-hover: #4338CA;
-            --text-primary: #1F2937;
-            --text-secondary: #6B7280;
-            --border-color: #E5E7EB;
-            --bg-secondary: #F9FAFB;
-            --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
+            --primary-color: #1a1a1a;
+            --primary-hover: #000000;
+            --accent-color: #67E9E9;
+            --accent-hover: #2BCCCC;
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0a0;
+            --border-color: rgba(255, 255, 255, 0.15);
+            --bg-secondary: rgba(255, 255, 255, 0.08);
+            --bg-glass: rgba(26, 26, 26, 0.95);
+            --shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
+            --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+            --header-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d1117 100%);
         }
+        
         body {
             font-family: var(--font-mono);
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 20px;
+            position: relative;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+        
+        /* Custom scrollbar styles */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent-color);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-hover);
         }
+        
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        body::after {
+            content: '';
+            position: fixed;
+            top: 50%; left: 50%;
+            width: 500px; height: 500px;
+            background: radial-gradient(circle, rgba(103, 233, 233, 0.05) 0%, transparent 70%);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: -1;
+            animation: pulse 8s ease-in-out infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
+            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
+        }
+        
         .modal {
-            background: white;
-            border-radius: 16px;
+            background: var(--bg-glass);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
             box-shadow: var(--shadow);
+            border: 2px solid var(--border-color);
             width: 100%;
             max-width: 600px;
             overflow: hidden;
-            animation: modalIn 0.3s ease-out;
+            animation: modalIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
         }
+        
+        .modal::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.02) 50%, transparent 70%);
+            animation: shimmer 3s infinite;
+            pointer-events: none;
+        }
+        
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
         @keyframes modalIn {
             from {
                 opacity: 0;
-                transform: scale(0.95) translateY(-10px);
+                transform: scale(0.9) translateY(-20px);
             }
             to {
                 opacity: 1;
                 transform: scale(1) translateY(0);
             }
         }
+        
         .header {
-            background: var(--primary-color);
-            color: white;
-            padding: 20px 24px;
+            background: var(--header-bg);
+            color: var(--text-primary);
+            padding: 24px 28px;
             display: flex;
             align-items: center;
             justify-content: space-between;
+            position: relative;
+            overflow: hidden;
         }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%);
+            animation: headerShimmer 4s infinite;
+            pointer-events: none;
+        }
+        
+        @keyframes headerShimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
         .header-left {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 16px;
+            z-index: 1;
         }
+        
         .logo {
-            width: 28px;
-            height: 28px;
-            animation: pulse 2s infinite;
+            width: 32px;
+            height: 32px;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+            animation: logoFloat 3s ease-in-out infinite;
         }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
+        
+        @keyframes logoFloat {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-3px); }
         }
+        
         .title {
-            font-size: 18px;
-            font-weight: 600;
-            letter-spacing: -0.025em;
+            font-size: 20px;
+            font-weight: 700;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+        
         .github-link {
-            color: white;
+            color: var(--text-primary);
             text-decoration: none;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
             font-size: 14px;
-            opacity: 0.9;
-            transition: opacity 0.2s;
-            padding: 6px 10px;
-            border-radius: 6px;
-            background: rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(10px);
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-weight: 500;
+            z-index: 1;
+            transition: all 0.3s ease;
         }
+        
         .github-link:hover {
-            opacity: 1;
-            background: rgba(255,255,255,0.2);
+            background: rgba(255,255,255,0.15);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
         }
+        
         .content {
             padding: 32px 24px;
+            position: relative;
         }
+        
         .content-title {
             font-size: 24px;
             font-weight: 700;
             color: var(--text-primary);
             margin-bottom: 8px;
+            animation: fadeInUp 0.8s ease-out 0.2s both;
         }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
         .message {
-            background: #EEF2FF;
-            border: 1px solid #C7D2FE;
-            border-left: 4px solid var(--primary-color);
+            background: rgba(103, 233, 233, 0.1);
+            border: 1px solid var(--accent-color);
+            border-left: 4px solid var(--accent-color);
             padding: 20px;
             border-radius: 12px;
             margin-bottom: 24px;
             font-size: 15px;
             line-height: 1.6;
             color: var(--text-primary);
+            animation: fadeInUp 0.8s ease-out 0.4s both;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .message::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 2px;
+            background: linear-gradient(90deg, var(--accent-color), transparent);
+            animation: progress 2s ease-out;
+        }
+        
+        @keyframes progress {
+            from { width: 0%; }
+            to { width: 100%; }
         }
+        
         .options {
             margin-bottom: 24px;
+            animation: fadeInUp 0.8s ease-out 0.6s both;
         }
+        
         .option-item {
             padding: 16px 20px;
             border: 1px solid var(--border-color);
             border-radius: 12px;
             margin-bottom: 12px;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
             gap: 14px;
+            background: rgba(255, 255, 255, 0.03);
+            position: relative;
+            overflow: hidden;
+            color: var(--text-primary);
+        }
+        
+        .option-item::before {
+            content: '';
+            position: absolute;
+            left: 0; top: 0; bottom: 0;
+            width: 0;
+            background: var(--accent-color);
+            transition: width 0.3s ease;
         }
+        
         .option-item:hover {
             background: var(--bg-secondary);
-            border-color: var(--primary-color);
+            border-color: var(--accent-color);
+            transform: translateX(5px);
         }
+        
+        .option-item:hover::before {
+            width: 4px;
+        }
+        
         .option-item.selected {
-            background: #EEF2FF;
-            border-color: var(--primary-color);
+            background: rgba(103, 233, 233, 0.1);
+            border-color: var(--accent-color);
+            transform: translateX(5px);
         }
+        
+        .option-item.selected::before {
+            width: 4px;
+        }
+        
         .option-icon {
             width: 20px;
             height: 20px;
-            color: var(--primary-color);
+            color: var(--accent-color);
             flex-shrink: 0;
+            animation: iconGlow 2s ease-in-out infinite;
         }
+        
+        @keyframes iconGlow {
+            0%, 100% { filter: drop-shadow(0 0 2px rgba(103, 233, 233, 0.3)); }
+            50% { filter: drop-shadow(0 0 8px rgba(103, 233, 233, 0.6)); }
+        }
+        
         .custom-input {
             margin-bottom: 24px;
+            animation: fadeInUp 0.8s ease-out 0.8s both;
         }
+        
         .custom-input textarea {
             width: 100%;
             min-height: 120px;
@@ -1054,19 +1685,30 @@ export class InteractiveServer {
             font-size: 15px;
             font-family: var(--font-mono);
             resize: vertical;
-            transition: all 0.2s;
+            transition: all 0.3s ease;
             line-height: 1.5;
+            background: rgba(255, 255, 255, 0.03);
+            color: var(--text-primary);
+        }
+        
+        .custom-input textarea::placeholder {
+            color: var(--text-secondary);
         }
+        
         .custom-input textarea:focus {
             outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(103, 233, 233, 0.1);
+            background: rgba(255, 255, 255, 0.05);
         }
+        
         .actions {
             display: flex;
             gap: 12px;
             justify-content: flex-end;
+            animation: fadeInUp 0.8s ease-out 1s both;
         }
+        
         .btn {
             padding: 12px 20px;
             border: none;
@@ -1074,31 +1716,58 @@ export class InteractiveServer {
             font-size: 14px;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
             gap: 8px;
             font-family: var(--font-mono);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%; left: 50%;
+            width: 0; height: 0;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            transform: translate(-50%, -50%);
+        }
+        
+        .btn:hover::before {
+            width: 100px; height: 100px;
         }
+        
         .btn-primary {
             background: var(--primary-color);
-            color: white;
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
         }
+        
         .btn-primary:hover:not(:disabled) {
             background: var(--primary-hover);
-            transform: translateY(-1px);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
         }
+        
         .btn-secondary {
             background: var(--bg-secondary);
             color: var(--text-secondary);
+            border: 1px solid var(--border-color);
         }
+        
         .btn-secondary:hover {
-            background: #F3F4F6;
+            background: rgba(255, 255, 255, 0.15);
+            color: var(--text-primary);
         }
+        
         .btn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
         }
+        
         .loading {
             display: none;
             align-items: center;
@@ -1108,14 +1777,16 @@ export class InteractiveServer {
             color: var(--text-secondary);
             font-size: 14px;
         }
+        
         .spinner {
             width: 16px;
             height: 16px;
             border: 2px solid var(--border-color);
-            border-top: 2px solid var(--primary-color);
+            border-top: 2px solid var(--accent-color);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
+        
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -1126,11 +1797,7 @@ export class InteractiveServer {
     <div class="modal">
         <div class="header">
             <div class="header-left">
-                <svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z"/>
-                    <path d="M12 22V12"/>
-                    <path d="M22 7L12 12L2 7"/>
-                </svg>
+                <img class="logo" src="https://7463-tcb-advanced-a656fc-1257967285.tcb.qcloud.la/mcp/cloudbase-logo.svg" alt="CloudBase Logo" />
                 <span class="title">CloudBase AI Toolkit</span>
             </div>
             <a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" target="_blank" class="github-link">
@@ -1148,11 +1815,11 @@ export class InteractiveServer {
             ${optionsArray ? `
             <div class="options" id="options">
                 ${optionsArray.map((option, index) => `
-                    <div class="option-item" onclick="selectOption('${option}')">
+                    <div class="option-item" onclick="selectOption('${option}')" style="animation-delay: ${index * 0.1}s;">
                         <svg class="option-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
                         </svg>
-                        ${option}
+                        <span>${option}</span>
                     </div>
                 `).join('')}
             </div>
@@ -1195,47 +1862,67 @@ export class InteractiveServer {
             });
             event.currentTarget.classList.add('selected');
             
-            document.getElementById('customInput').value = option;
             updateSubmitButton();
         }
         
         function updateSubmitButton() {
             const customInput = document.getElementById('customInput').value.trim();
             const submitBtn = document.getElementById('submitBtn');
-            submitBtn.disabled = !customInput;
+            
+            if (selectedOption || customInput) {
+                submitBtn.disabled = false;
+                submitBtn.style.opacity = '1';
+            } else {
+                submitBtn.disabled = true;
+                submitBtn.style.opacity = '0.5';
+            }
         }
         
         function submit() {
             const customInput = document.getElementById('customInput').value.trim();
+            const data = selectedOption || customInput;
             
-            if (!customInput) {
-                alert('请输入反馈内容');
-                return;
-            }
+            if (!data) return;
             
             document.getElementById('loading').style.display = 'flex';
+            document.getElementById('submitBtn').disabled = true;
             
             fetch('/api/submit', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     type: 'clarification',
-                    data: { response: customInput }
+                    data: data
                 })
-            }).then(() => window.close());
+            }).then(response => response.json())
+              .then(result => {
+                if (result.success) {
+                    window.close();
+                }
+              }).catch(err => {
+                console.error('Error:', err);
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('submitBtn').disabled = false;
+              });
         }
         
         function cancel() {
-            fetch('/api/cancel', { method: 'POST' }).then(() => window.close());
+            fetch('/api/cancel', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            }).then(() => {
+                window.close();
+            });
         }
         
+        // Initialize
         updateSubmitButton();
     </script>
 </body>
 </html>`;
     }
     getConfirmationHTML(message, risks, options) {
-        const confirmOptions = options || ["确认执行", "取消操作", "需要修改"];
+        const availableOptions = options || ['确认执行', '取消操作'];
         return `
 <!DOCTYPE html>
 <html lang="zh-CN">
@@ -1244,254 +1931,383 @@ export class InteractiveServer {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CloudBase AI Toolkit - 操作确认</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+        
         * { margin: 0; padding: 0; box-sizing: border-box; }
         :root {
-            --primary-color: #4F46E5;
-            --primary-hover: #4338CA;
-            --text-primary: #1F2937;
-            --text-secondary: #6B7280;
-            --border-color: #E5E7EB;
-            --bg-secondary: #F9FAFB;
-            --warning-color: #DC2626;
-            --warning-bg: #FEF2F2;
-            --warning-border: #FECACA;
-            --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
+            --primary-color: #1a1a1a;
+            --primary-hover: #000000;
+            --accent-color: #67E9E9;
+            --accent-hover: #2BCCCC;
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0a0;
+            --border-color: rgba(255, 255, 255, 0.15);
+            --bg-secondary: rgba(255, 255, 255, 0.08);
+            --bg-glass: rgba(26, 26, 26, 0.95);
+            --warning-color: #ff6b6b;
+            --warning-bg: rgba(255, 107, 107, 0.1);
+            --warning-border: rgba(255, 107, 107, 0.3);
+            --shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
+            --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
+            --header-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d1117 100%);
         }
+        
         body {
             font-family: var(--font-mono);
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 20px;
+            position: relative;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+        
+        /* Custom scrollbar styles */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent-color);
+            border-radius: 4px;
         }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-hover);
+        }
+        
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        body::after {
+            content: '';
+            position: fixed;
+            top: 50%; left: 50%;
+            width: 500px; height: 500px;
+            background: radial-gradient(circle, rgba(255, 107, 107, 0.03) 0%, transparent 70%);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: -1;
+            animation: pulse 8s ease-in-out infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
+            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
+        }
+        
         .modal {
-            background: white;
-            border-radius: 16px;
+            background: var(--bg-glass);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
             box-shadow: var(--shadow);
+            border: 2px solid var(--border-color);
             width: 100%;
             max-width: 600px;
             overflow: hidden;
-            animation: modalIn 0.3s ease-out;
+            animation: modalIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+        }
+        
+        .modal::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.02) 50%, transparent 70%);
+            animation: shimmer 3s infinite;
+            pointer-events: none;
+        }
+        
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
         }
+        
         @keyframes modalIn {
             from {
                 opacity: 0;
-                transform: scale(0.95) translateY(-10px);
+                transform: scale(0.9) translateY(-20px);
             }
             to {
                 opacity: 1;
                 transform: scale(1) translateY(0);
             }
         }
+        
         .header {
-            background: var(--primary-color);
-            color: white;
-            padding: 20px 24px;
+            background: var(--header-bg);
+            color: var(--text-primary);
+            padding: 24px 28px;
             display: flex;
             align-items: center;
             justify-content: space-between;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%);
+            animation: headerShimmer 4s infinite;
+            pointer-events: none;
         }
+        
+        @keyframes headerShimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
         .header-left {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 16px;
+            z-index: 1;
         }
+        
         .logo {
-            width: 28px;
-            height: 28px;
-            animation: pulse 2s infinite;
+            width: 32px;
+            height: 32px;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+            animation: logoFloat 3s ease-in-out infinite;
+        }
+        
+        @keyframes logoFloat {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-3px); }
         }
+        
         .title {
-            font-size: 18px;
-            font-weight: 600;
-            letter-spacing: -0.025em;
+            font-size: 20px;
+            font-weight: 700;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+        
         .github-link {
-            color: white;
+            color: var(--text-primary);
             text-decoration: none;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
             font-size: 14px;
-            opacity: 0.9;
-            transition: opacity 0.2s;
-            padding: 6px 10px;
-            border-radius: 6px;
-            background: rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(10px);
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-weight: 500;
+            z-index: 1;
+            transition: all 0.3s ease;
         }
+        
         .github-link:hover {
-            opacity: 1;
-            background: rgba(255,255,255,0.2);
+            background: rgba(255,255,255,0.15);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
         }
+        
         .content {
             padding: 32px 24px;
+            position: relative;
         }
-        @keyframes slideIn {
+        
+        @keyframes fadeInUp {
             from {
                 opacity: 0;
-                transform: translateY(-20px);
+                transform: translateY(20px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-            50% {
-                transform: scale(1.05);
-            }
-            100% {
-                transform: scale(1);
-            }
-        }
-        .title {
-            font-size: 20px;
-            margin-bottom: 16px;
+        
+        .content-title {
+            font-size: 24px;
+            margin-bottom: 8px;
             color: var(--text-primary);
             display: flex;
             align-items: center;
             gap: 12px;
             position: relative;
+            animation: fadeInUp 0.8s ease-out 0.2s both;
         }
-        .title:after {
-            content: '';
-            position: absolute;
-            bottom: -8px;
-            left: 0;
-            width: 40px;
-            height: 3px;
-            background: var(--primary-color);
-            border-radius: 2px;
-        }
+        
         .message {
-            background: var(--bg-secondary);
-            border-left: 3px solid var(--primary-color);
-            padding: 16px;
-            border-radius: 6px;
+            background: rgba(103, 233, 233, 0.1);
+            border: 1px solid var(--accent-color);
+            border-left: 4px solid var(--accent-color);
+            padding: 20px;
+            border-radius: 12px;
             margin-bottom: 24px;
             font-size: 15px;
             line-height: 1.6;
             color: var(--text-primary);
+            animation: fadeInUp 0.8s ease-out 0.4s both;
+            position: relative;
+            overflow: hidden;
         }
+        
+        .message::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 2px;
+            background: linear-gradient(90deg, var(--accent-color), transparent);
+            animation: progress 2s ease-out;
+        }
+        
+        @keyframes progress {
+            from { width: 0%; }
+            to { width: 100%; }
+        }
+        
         .risks {
             background: var(--warning-bg);
-            border: 1px solid var(--warning-color);
-            border-radius: 6px;
-            padding: 16px;
+            border: 1px solid var(--warning-border);
+            border-radius: 12px;
+            padding: 20px;
             margin-bottom: 24px;
+            animation: fadeInUp 0.8s ease-out 0.6s both;
         }
+        
         .risks-title {
             color: var(--warning-color);
-            font-weight: 500;
+            font-weight: 600;
             margin-bottom: 12px;
             display: flex;
             align-items: center;
             gap: 8px;
+            animation: warningGlow 2s ease-in-out infinite;
+        }
+        
+        @keyframes warningGlow {
+            0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 107, 107, 0.3)); }
+            50% { filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6)); }
         }
+        
         .risk-item {
             color: var(--text-primary);
             margin-bottom: 8px;
             padding-left: 24px;
             position: relative;
         }
+        
         .risk-item:before {
-            content: "•";
+            content: "⚠️";
             position: absolute;
-            left: 8px;
+            left: 0;
             color: var(--warning-color);
         }
+        
         .options {
             margin-bottom: 24px;
+            animation: fadeInUp 0.8s ease-out 0.8s both;
         }
+        
         .option-item {
-            padding: 16px;
+            padding: 16px 20px;
             border: 1px solid var(--border-color);
-            border-radius: 6px;
+            border-radius: 12px;
             margin-bottom: 12px;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
-            gap: 12px;
-        }
-        .option-item:hover {
-            background: var(--bg-secondary);
+            gap: 14px;
+            background: rgba(255, 255, 255, 0.03);
+            position: relative;
+            overflow: hidden;
+            color: var(--text-primary);
         }
-        .option-item.selected {
-            background: rgba(0, 82, 217, 0.1);
-            border-color: var(--primary-color);
+        
+        .option-item::before {
+            content: '';
+            position: absolute;
+            left: 0; top: 0; bottom: 0;
+            width: 0;
+            background: var(--accent-color);
+            transition: width 0.3s ease;
         }
-        .button-group {
-            display: flex;
-            gap: 12px;
-            justify-content: flex-end;
+        
+        .option-item.confirm::before {
+            background: var(--accent-color);
         }
-        .btn {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-family: var(--font-mono);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+        
+        .option-item.cancel::before {
+            background: var(--warning-color);
         }
-        .btn-primary {
-            background: var(--primary-color);
-            color: white;
-            box-shadow: 0 4px 12px rgba(0,82,217,0.2);
+        
+        .option-item:hover {
+            background: var(--bg-secondary);
+            transform: translateX(5px);
         }
-        .btn-primary:hover {
-            background: var(--hover-color);
-            transform: translateY(-1px);
-            box-shadow: 0 6px 16px rgba(0,82,217,0.3);
+        
+        .option-item:hover::before {
+            width: 4px;
         }
-        .btn-secondary {
-            background: var(--bg-secondary);
-            color: var(--text-secondary);
+        
+        .option-item.selected {
+            background: rgba(103, 233, 233, 0.1);
+            border-color: var(--accent-color);
+            transform: translateX(5px);
         }
-        .btn-secondary:hover {
-            background: #E0E0E0;
-            transform: translateY(-1px);
+        
+        .option-item.selected.cancel {
+            background: rgba(255, 107, 107, 0.1);
+            border-color: var(--warning-color);
         }
-        .btn-warning {
-            background: var(--warning-color);
-            color: white;
+        
+        .option-item.selected::before {
+            width: 4px;
         }
-        .btn-warning:hover {
-            background: #FF7875;
+        
+        .option-icon {
+            width: 20px;
+            height: 20px;
+            color: var(--accent-color);
+            flex-shrink: 0;
         }
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
+        
+        .option-item.cancel .option-icon {
+            color: var(--warning-color);
         }
+        
         .loading {
             display: none;
             align-items: center;
+            justify-content: center;
             gap: 8px;
             margin-top: 16px;
             color: var(--text-secondary);
             font-size: 14px;
+            animation: fadeInUp 0.8s ease-out 1s both;
         }
+        
         .spinner {
             width: 16px;
             height: 16px;
             border: 2px solid var(--border-color);
-            border-top: 2px solid var(--primary-color);
+            border-top: 2px solid var(--accent-color);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
+        
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -1502,11 +2318,7 @@ export class InteractiveServer {
     <div class="modal">
         <div class="header">
             <div class="header-left">
-                <svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z"/>
-                    <path d="M12 22V12"/>
-                    <path d="M22 7L12 12L2 7"/>
-                </svg>
+                <img class="logo" src="https://7463-tcb-advanced-a656fc-1257967285.tcb.qcloud.la/mcp/cloudbase-logo.svg" alt="CloudBase Logo" />
                 <span class="title">CloudBase AI Toolkit</span>
             </div>
             <a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" target="_blank" class="github-link">
@@ -1517,57 +2329,55 @@ export class InteractiveServer {
             </a>
         </div>
 
-            <div class="content">
-                <h1 class="content-title">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
-                        <path d="M12 16V12"/>
-                        <path d="M12 8H12.01"/>
+        <div class="content">
+            <h1 class="content-title">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                    <line x1="12" y1="9" x2="12" y2="13"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+                操作确认
+            </h1>
+            <div class="message">${message}</div>
+            
+            ${risks && risks.length > 0 ? `
+            <div class="risks">
+                <div class="risks-title">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                        <line x1="12" y1="9" x2="12" y2="13"/>
+                        <line x1="12" y1="17" x2="12.01" y2="17"/>
                     </svg>
-                    操作确认
-                </h1>
-                
-                <div class="message">${message}</div>
-                
-                ${risks && risks.length > 0 ? `
-                <div class="risks">
-                    <div class="risks-title">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
-                            <path d="M12 9v4"/>
-                            <path d="M12 17h.01"/>
-                        </svg>
-                        风险提示
-                    </div>
-                    ${risks.map(risk => `<div class="risk-item">${risk}</div>`).join('')}
+                    风险提示
                 </div>
-                ` : ''}
-                
-                <div class="options">
-                    ${confirmOptions.map((option, index) => {
-            const className = option.includes('确认') ? 'confirm' : option.includes('取消') ? 'cancel' : '';
-            const iconPath = option.includes('确认') ?
-                '<path d="M20 6L9 17l-5-5"/>' :
-                option.includes('取消') ?
-                    '<path d="M18 6L6 18M6 6l12 12"/>' :
-                    '<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>';
+                ${risks.map(risk => `<div class="risk-item">${risk}</div>`).join('')}
+            </div>
+            ` : ''}
+            
+            <div class="options">
+                ${availableOptions.map((option, index) => {
+            const isCancel = option.includes('取消') || option.toLowerCase().includes('cancel');
+            const className = isCancel ? 'cancel' : 'confirm';
+            const iconPath = isCancel
+                ? '<path d="M18 6L6 18M6 6l12 12"/>'
+                : '<path d="M20 6L9 17l-5-5"/>';
             return `
-                            <div class="option-item ${className}" onclick="selectOption('${option}')">
-                                <svg class="option-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    ${iconPath}
-                                </svg>
-                                ${option}
-                            </div>
-                        `;
+                        <div class="option-item ${className}" onclick="selectOption('${option}')" style="animation-delay: ${index * 0.1}s;">
+                            <svg class="option-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                ${iconPath}
+                            </svg>
+                            <span>${option}</span>
+                        </div>
+                    `;
         }).join('')}
-                </div>
-                
-                <div class="loading" id="loading">
-                    <div class="spinner"></div>
-                    <span>正在处理...</span>
-                </div>
+            </div>
+            
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <span>正在处理...</span>
             </div>
         </div>
+    </div>
 
     <script>
         let selectedOption = null;
@@ -1580,31 +2390,47 @@ export class InteractiveServer {
             });
             event.currentTarget.classList.add('selected');
             
-            if (option.includes('确认')) {
+            // Auto submit after selection
+            setTimeout(() => {
                 submit();
-            } else if (option.includes('取消')) {
-                cancel();
-            } else {
-                // 需要修改的情况
-                cancel();
-            }
+            }, 500);
         }
         
         function submit() {
+            if (!selectedOption) return;
+            
             document.getElementById('loading').style.display = 'flex';
             
+            const isConfirmed = !selectedOption.includes('取消') && !selectedOption.toLowerCase().includes('cancel');
+            
             fetch('/api/submit', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     type: 'confirmation',
-                    data: { response: selectedOption || '确认执行' }
+                    data: {
+                        confirmed: isConfirmed,
+                        option: selectedOption
+                    }
                 })
-            }).then(() => window.close());
+            }).then(response => response.json())
+              .then(result => {
+                if (result.success) {
+                    window.close();
+                }
+              }).catch(err => {
+                console.error('Error:', err);
+                document.getElementById('loading').style.display = 'none';
+              });
         }
         
         function cancel() {
-            fetch('/api/cancel', { method: 'POST' }).then(() => window.close());
+            fetch('/api/cancel', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            }).then(() => {
+                window.close();
+            });
         }
     </script>
 </body>