<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Game Evolution Platform - Live Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
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;
}
.dashboard {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
margin-bottom: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
text-align: center;
}
.header h1 {
font-size: 2.5rem;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.live-indicator {
display: inline-flex;
align-items: center;
background: #10b981;
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin-top: 10px;
}
.live-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
margin-right: 8px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.metric-card:hover {
transform: translateY(-5px);
}
.metric-header {
display: flex;
justify-content: between;
align-items: center;
margin-bottom: 20px;
}
.metric-title {
font-size: 1.2rem;
font-weight: 600;
color: #2d3748;
}
.metric-value {
font-size: 2.5rem;
font-weight: 700;
color: #667eea;
margin-bottom: 10px;
}
.progress-ring {
width: 80px;
height: 80px;
margin: 0 auto 20px;
}
.progress-ring circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}
.progress-ring .background {
stroke: #e2e8f0;
}
.progress-ring .progress {
stroke: #667eea;
stroke-dasharray: 251.2;
stroke-dashoffset: 251.2;
transition: stroke-dashoffset 0.5s ease;
}
.feature-status {
margin-bottom: 15px;
padding: 12px;
background: #f7fafc;
border-radius: 8px;
border-left: 4px solid #cbd5e0;
}
.feature-status.complete {
border-left-color: #48bb78;
background: #f0fff4;
}
.feature-status.missing {
border-left-color: #e53e3e;
background: #fff5f5;
}
.health-indicator {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
}
.health-excellent {
background: #c6f6d5;
color: #38a169;
}
.health-warning {
background: #fef5e7;
color: #d69e2e;
}
.health-critical {
background: #fed7d7;
color: #c53030;
}
.activity-feed {
max-height: 300px;
overflow-y: auto;
}
.activity-item {
display: flex;
align-items: center;
padding: 12px;
border-bottom: 1px solid #e2e8f0;
}
.activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: #667eea;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 0.8rem;
}
.next-steps {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.step-item {
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 8px;
background: #f7fafc;
border-radius: 8px;
}
.step-number {
width: 24px;
height: 24px;
background: #667eea;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
margin-right: 12px;
}
.error-message {
background: #fff5f5;
border: 2px solid #feb2b2;
border-radius: 15px;
padding: 20px;
color: #c53030;
text-align: center;
}
.loading {
text-align: center;
padding: 40px;
color: #4a5568;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #e2e8f0;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.refresh-button {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.3s ease;
}
.refresh-button:hover {
background: #5a67d8;
}
.timestamp {
color: #718096;
font-size: 0.85rem;
margin-top: 10px;
}
/* Modal styles for README display */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 0;
border: none;
border-radius: 15px;
width: 80%;
max-width: 800px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 20px 30px;
border-radius: 15px 15px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
font-size: 1.5rem;
}
.close-button {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.2s;
}
.close-button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.modal-body {
padding: 30px;
max-height: 60vh;
overflow-y: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
}
.modal-body h1, .modal-body h2, .modal-body h3 {
color: #333;
margin-top: 20px;
margin-bottom: 10px;
}
.modal-body h1 {
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
.modal-body code {
background-color: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
}
.modal-body pre {
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
border-left: 4px solid #667eea;
}
.modal-body ul, .modal-body ol {
margin-left: 20px;
}
.modal-body blockquote {
border-left: 4px solid #667eea;
margin: 20px 0;
padding-left: 20px;
color: #666;
font-style: italic;
}
/* Make feature items clickable */
.feature-status {
cursor: pointer;
transition: all 0.2s ease;
padding: 8px 12px;
margin: 4px 0;
border-radius: 8px;
border: 1px solid transparent;
}
.feature-status:hover {
background-color: rgba(102, 126, 234, 0.1);
border-color: rgba(102, 126, 234, 0.3);
transform: translateX(3px);
}
.feature-status.clickable {
position: relative;
}
.feature-status.clickable::after {
content: "📖";
position: absolute;
right: 10px;
opacity: 0;
transition: opacity 0.2s ease;
}
.feature-status.clickable:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="dashboard">
<div class="header">
<h1>🧬 AI Game Evolution Platform</h1>
<p>Live Project Dashboard</p>
<div class="live-indicator">
<div class="live-dot"></div>
<span>LIVE</span>
</div>
</div>
<div id="loading" class="loading">
<div class="loading-spinner"></div>
<p>Loading project status...</p>
</div>
<div id="error" class="error-message" style="display: none;">
<h3>Connection Error</h3>
<p id="error-message"></p>
<button class="refresh-button" onclick="location.reload()">Retry</button>
</div>
<div id="dashboard-content" style="display: none;">
<div class="metrics-grid">
<!-- Overall Status Card -->
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Overall Readiness</div>
<div id="health-indicator" class="health-indicator health-excellent">Excellent</div>
</div>
<svg class="progress-ring" viewBox="0 0 84 84">
<circle class="background" cx="42" cy="42" r="40"></circle>
<circle id="overall-progress" class="progress" cx="42" cy="42" r="40"></circle>
</svg>
<div id="overall-percentage" class="metric-value">90%</div>
<div class="timestamp" id="last-update">Last updated: --</div>
</div>
<!-- Infrastructure Status -->
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Infrastructure</div>
<button class="refresh-button" onclick="refreshData()">Refresh</button>
</div>
<div id="infra-percentage" class="metric-value">100%</div>
<div id="infrastructure-status"></div>
</div>
<!-- Implementation Status -->
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Implementation</div>
</div>
<div id="impl-percentage" class="metric-value">67%</div>
<div id="implementation-status"></div>
</div>
<!-- Project Stats -->
<div class="metric-card">
<div class="metric-header">
<div class="metric-title">Project Statistics</div>
</div>
<div id="project-stats"></div>
</div>
</div>
<!-- Next Steps -->
<div class="next-steps">
<h3>📋 Next Steps</h3>
<div id="next-steps-list"></div>
</div>
<!-- Recent Activity -->
<div class="metric-card" style="margin-top: 20px;">
<div class="metric-header">
<div class="metric-title">Recent Activity</div>
</div>
<div class="activity-feed" id="recent-activity"></div>
</div>
</div>
</div>
<script>
// WebSocket connection
const socket = io();
let dashboardData = null;
// Connection handlers
socket.on('connect', function() {
console.log('📡 Connected to dashboard server');
hideError();
});
socket.on('disconnect', function() {
console.log('📡 Disconnected from dashboard server');
showError('Lost connection to server. Attempting to reconnect...');
});
socket.on('status_update', function(data) {
console.log('📊 Received status update:', data);
dashboardData = data;
updateDashboard(data);
});
// Update dashboard with new data
function updateDashboard(data) {
hideLoading();
hideError();
showDashboard();
if (data.error) {
showError(data.error);
return;
}
// Update overall readiness
updateOverallReadiness(data.overall_readiness);
// Update infrastructure status
updateInfrastructureStatus(data.infrastructure);
// Update implementation status
updateImplementationStatus(data.implementation);
// Update project stats
updateProjectStats(data.project_structure);
// Update next steps
updateNextSteps(data.next_steps);
// Update recent activity
updateRecentActivity(data.recent_activity);
// Update health indicator
updateHealthIndicator(data.health_indicators);
// Update timestamp
updateTimestamp(data.timestamp);
}
function updateOverallReadiness(readiness) {
const percentage = parseFloat(readiness.split('(')[0].replace('%', ''));
document.getElementById('overall-percentage').textContent = percentage + '%';
// Update progress ring
const circle = document.getElementById('overall-progress');
const circumference = 2 * Math.PI * 40;
const offset = circumference - (percentage / 100) * circumference;
circle.style.strokeDashoffset = offset;
}
function updateInfrastructureStatus(infrastructure) {
document.getElementById('infra-percentage').textContent =
infrastructure.completion_percentage.toFixed(0) + '%';
const statusDiv = document.getElementById('infrastructure-status');
statusDiv.innerHTML = '';
Object.entries(infrastructure.status).forEach(([group, status]) => {
const featureDiv = document.createElement('div');
featureDiv.className = 'feature-status ' +
(status.includes('Complete') ? 'complete' : 'missing');
// Check if this feature group has a README
const readmePath = group.replace(/\s+/g, '_').toLowerCase();
const hasReadme = checkIfFeatureHasReadme(group);
if (hasReadme) {
featureDiv.classList.add('clickable');
featureDiv.style.cursor = 'pointer';
featureDiv.onclick = () => openReadmeModal(readmePath, group);
featureDiv.title = `Click to view ${group} README`;
}
featureDiv.innerHTML = `<strong>${group}:</strong> ${status}`;
statusDiv.appendChild(featureDiv);
});
}
function checkIfFeatureHasReadme(groupName) {
// Map display names to actual directory names
const featureMap = {
'project_context_mcp': 'project_context_mcp',
'genetic_evolution': 'genetic_evolution',
'ai_agents': 'ai_agents',
'image_generation': 'image_generation',
'ios_game_engine': 'ios_game_engine',
'xcode_automation': 'xcode_automation'
};
return Object.keys(featureMap).includes(groupName);
}
async function openReadmeModal(featureGroup, displayName) {
const modal = document.getElementById('readmeModal');
const modalTitle = document.getElementById('modalTitle');
const modalContent = document.getElementById('modalContent');
// Show modal with loading state
modalTitle.textContent = `${displayName} - README`;
modalContent.innerHTML = '<div style="text-align: center; padding: 40px;"><div class="loading-spinner"></div><p>Loading README...</p></div>';
modal.style.display = 'block';
try {
const response = await fetch(`/api/readme/${featureGroup}`);
const data = await response.json();
if (data.success && data.content) {
// Convert markdown to HTML (simple conversion)
const htmlContent = markdownToHtml(data.content);
modalContent.innerHTML = htmlContent;
} else {
modalContent.innerHTML = `
<div style="text-align: center; padding: 40px;">
<h3>📝 README Not Found</h3>
<p>No README.md file found for <strong>${displayName}</strong></p>
<p style="color: #666; font-size: 0.9em;">The feature directory exists but doesn't have documentation yet.</p>
</div>
`;
}
} catch (error) {
console.error('Error loading README:', error);
modalContent.innerHTML = `
<div style="text-align: center; padding: 40px;">
<h3>❌ Error Loading README</h3>
<p>Failed to load README for <strong>${displayName}</strong></p>
<p style="color: #666; font-size: 0.9em;">${error.message}</p>
</div>
`;
}
}
function closeReadmeModal() {
document.getElementById('readmeModal').style.display = 'none';
}
function markdownToHtml(markdown) {
// Simple markdown to HTML conversion
let html = markdown
// Headers
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
// Bold and italic
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.*?)\*/g, '<em>$1</em>')
// Code blocks
.replace(/```([^`]+)```/g, '<pre><code>$1</code></pre>')
.replace(/`([^`]+)`/g, '<code>$1</code>')
// Links
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
// Line breaks
.replace(/\n/g, '<br>');
return html;
}
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('readmeModal');
if (event.target === modal) {
closeReadmeModal();
}
}
// Close modal with Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeReadmeModal();
}
});
function updateImplementationStatus(implementation) {
document.getElementById('impl-percentage').textContent =
implementation.completion_percentage.toFixed(0) + '%';
const statusDiv = document.getElementById('implementation-status');
statusDiv.innerHTML = `
<div class="feature-status complete">
<strong>Xcode Projects:</strong> ${implementation.xcode_projects_count}
</div>
<div class="feature-status complete">
<strong>Swift Files:</strong> ${implementation.swift_files_count}
</div>
`;
Object.entries(implementation.status).forEach(([key, value]) => {
if (key !== 'xcode_projects' && key !== 'swift_files_count') {
const featureDiv = document.createElement('div');
featureDiv.className = 'feature-status ' +
(value.toString().includes('✅') ? 'complete' : 'missing');
featureDiv.innerHTML = `<strong>${key}:</strong> ${value}`;
statusDiv.appendChild(featureDiv);
}
});
}
function updateProjectStats(structure) {
const statsDiv = document.getElementById('project-stats');
statsDiv.innerHTML = `
<div style="margin-bottom: 10px;">
<strong>Total Files:</strong> ${structure.total_files}
</div>
<div style="margin-bottom: 10px;">
<strong>Swift Files:</strong> ${structure.swift_files}
</div>
<div style="margin-bottom: 10px;">
<strong>Python Files:</strong> ${structure.python_files}
</div>
<div style="margin-bottom: 10px;">
<strong>Config Files:</strong> ${structure.config_files}
</div>
`;
}
function updateNextSteps(steps) {
const stepsDiv = document.getElementById('next-steps-list');
stepsDiv.innerHTML = '';
steps.forEach((step, index) => {
const stepDiv = document.createElement('div');
stepDiv.className = 'step-item';
stepDiv.innerHTML = `
<div class="step-number">${index + 1}</div>
<div>${step}</div>
`;
stepsDiv.appendChild(stepDiv);
});
}
function updateRecentActivity(activities) {
const activityDiv = document.getElementById('recent-activity');
activityDiv.innerHTML = '';
if (!activities || activities.length === 0) {
activityDiv.innerHTML = '<p style="text-align: center; color: #718096;">No recent activity</p>';
return;
}
activities.forEach(activity => {
const activityItem = document.createElement('div');
activityItem.className = 'activity-item';
activityItem.innerHTML = `
<div class="activity-icon">📝</div>
<div>
<div>${activity.description}</div>
<div style="font-size: 0.8rem; color: #718096;">${activity.timestamp}</div>
</div>
`;
activityDiv.appendChild(activityItem);
});
}
function updateHealthIndicator(health) {
const indicator = document.getElementById('health-indicator');
indicator.className = 'health-indicator health-' + health.overall;
indicator.textContent = health.overall.charAt(0).toUpperCase() + health.overall.slice(1);
}
function updateTimestamp(timestamp) {
const date = new Date(timestamp);
document.getElementById('last-update').textContent =
'Last updated: ' + date.toLocaleTimeString();
}
function refreshData() {
socket.emit('request_refresh');
showLoading();
}
function showLoading() {
document.getElementById('loading').style.display = 'block';
document.getElementById('dashboard-content').style.display = 'none';
}
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
function showDashboard() {
document.getElementById('dashboard-content').style.display = 'block';
}
function showError(message) {
document.getElementById('error-message').textContent = message;
document.getElementById('error').style.display = 'block';
document.getElementById('dashboard-content').style.display = 'none';
}
function hideError() {
document.getElementById('error').style.display = 'none';
}
// Initial load
console.log('🌐 Dashboard initialized');
</script>
<!-- README Modal -->
<div id="readmeModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle">Feature README</h2>
<button class="close-button" onclick="closeReadmeModal()">×</button>
</div>
<div class="modal-body">
<div id="modalContent">Loading...</div>
</div>
</div>
</div>
</body>
</html>
