ACE MCP Server

/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Header */ header { text-align: center; margin-bottom: 40px; color: white; } header h1 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } header p { font-size: 1.2rem; opacity: 0.9; } /* Status Grid */ .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; } /* Cards */ .card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .card h3 { margin-bottom: 16px; color: #2d3748; font-size: 1.1rem; } /* Status Indicator */ .status-indicator { display: flex; align-items: center; gap: 10px; } .dot { width: 12px; height: 12px; border-radius: 50%; background: #48bb78; animation: pulse 2s infinite; } .dot.warning { background: #ed8936; } .dot.error { background: #f56565; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* Provider Info */ .provider-info { display: flex; align-items: center; gap: 10px; } .provider-name { font-weight: 600; color: #4a5568; } /* Stats */ .stats, .config { display: flex; flex-direction: column; gap: 12px; } .stat, .config-item { display: flex; justify-content: space-between; align-items: center; } .label { color: #718096; font-size: 0.9rem; } .value { font-weight: 600; color: #2d3748; } /* Actions */ .actions { display: flex; gap: 15px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; } /* Buttons */ .btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .btn-secondary { background: #e2e8f0; color: #4a5568; } .btn-secondary:hover { background: #cbd5e0; transform: translateY(-1px); } /* Logs Section */ .logs-section { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .logs-section h3 { margin-bottom: 20px; color: #2d3748; } .logs { max-height: 300px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; background: #f7fafc; } .log-entry { display: flex; gap: 12px; margin-bottom: 8px; font-size: 0.9rem; align-items: center; } .timestamp { color: #718096; font-family: monospace; font-size: 0.8rem; } .level { padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .level.info { background: #bee3f8; color: #2b6cb0; } .level.warn { background: #faf089; color: #975a16; } .level.error { background: #fed7d7; color: #c53030; } .message { color: #4a5568; } /* Footer */ footer { text-align: center; margin-top: 40px; color: white; opacity: 0.8; } /* Auth Card */ .auth-card { margin-bottom: 20px; } .auth-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .token-input { flex: 1; min-width: 200px; padding: 10px 15px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; font-family: monospace; transition: border-color 0.2s ease; } .token-input:focus { outline: none; border-color: #667eea; } .token-status { margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; } .token-status.ok { background: #c6f6d5; color: #22543d; } .token-status.error { background: #fed7d7; color: #742a2a; } /* Playbook Card */ .playbook-card { margin-bottom: 20px; } .playbook-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .playbook-header h3 { margin: 0; } .btn-small { padding: 8px 16px; font-size: 0.85rem; } .playbook-content { margin-top: 20px; } .playbook-stats { display: flex; gap: 20px; margin-bottom: 24px; padding: 16px; background: #f7fafc; border-radius: 8px; flex-wrap: wrap; } .stat-item { display: flex; flex-direction: column; gap: 4px; } .stat-label { font-size: 0.85rem; color: #718096; } .stat-value { font-size: 1.1rem; font-weight: 600; color: #2d3748; } .playbook-section { margin-bottom: 24px; padding: 16px; background: #f7fafc; border-radius: 8px; border-left: 4px solid #667eea; } .playbook-section h4 { margin-bottom: 12px; color: #2d3748; font-size: 1rem; } .playbook-list { list-style: none; padding: 0; margin: 0; } .playbook-list li { padding: 10px 0; border-bottom: 1px solid #e2e8f0; color: #4a5568; line-height: 1.6; } .playbook-list li:last-child { border-bottom: none; } .playbook-list li::before { content: '•'; color: #667eea; font-weight: bold; display: inline-block; width: 1em; margin-right: 8px; } .empty-message { padding: 20px; text-align: center; color: #718096; font-style: italic; } .error-message { padding: 20px; text-align: center; color: #c53030; background: #fed7d7; border-radius: 8px; } /* Responsive Design */ @media (max-width: 768px) { .container { padding: 15px; } header h1 { font-size: 2rem; } .status-grid { grid-template-columns: 1fr; gap: 15px; } .actions { flex-direction: column; align-items: center; } .btn { width: 100%; max-width: 300px; justify-content: center; } } /* Loading Animation */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }