timmy-config/wizards/allegro-primus/dashboard/templates/index.html

{% extends "base.html" %}

{% block title %}Dashboard - {{ app_name }}{% endblock %}
{% block page_title %}Dashboard Overview{% endblock %}

{% block content %}
<!-- Key Metrics Cards -->
<div class="metrics-grid">
    <div class="metric-card success">
        <div class="metric-icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="metric-info">
            <span class="metric-label">Success Rate</span>
            <span class="metric-value">{{ "%.1f"|format(overview.metrics.success_rate * 100) }}%</span>
            <span class="metric-subtitle">{{ overview.metrics.successful_cycles }} / {{ overview.metrics.total_cycles }} cycles</span>
        </div>
    </div>

    <div class="metric-card info">
        <div class="metric-icon">
            <i class="fas fa-tasks"></i>
        </div>
        <div class="metric-info">
            <span class="metric-label">Total Tasks</span>
            <span class="metric-value">{{ overview.performance.total_tasks }}</span>
            <span class="metric-subtitle">All time</span>
        </div>
    </div>

    <div class="metric-card warning">
        <div class="metric-icon">
            <i class="fas fa-clock"></i>
        </div>
        <div class="metric-info">
            <span class="metric-label">Avg Response</span>
            <span class="metric-value">{{ "%.0f"|format(overview.performance.avg_response_time_ms) }}ms</span>
            <span class="metric-subtitle">Min: {{ "%.0f"|format(overview.performance.min_response_time_ms) }}ms</span>
        </div>
    </div>

    <div class="metric-card danger">
        <div class="metric-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="metric-info">
            <span class="metric-label">Open Issues</span>
            <span class="metric-value">{{ overview.issues.open }}</span>
            <span class="metric-subtitle">{{ overview.issues.critical_issues }} critical</span>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="charts-row">
    <div class="chart-container">
        <h3><i class="fas fa-chart-area"></i> Task Volume (7 Days)</h3>
        <canvas id="volumeChart"></canvas>
    </div>
    <div class="chart-container">
        <h3><i class="fas fa-percentage"></i> Success Rate Trend</h3>
        <canvas id="successChart"></canvas>
    </div>
</div>

<!-- Model Comparison & Knowledge -->
<div class="two-column">
    <div class="panel">
        <h3><i class="fas fa-brain"></i> Model Performance</h3>
        <div class="model-comparison">
            {% for model_id, model in overview.model_comparison.models.items() %}
            <div class="model-card">
                <h4>{{ model.name }}</h4>
                <div class="model-stats">
                    <div class="stat">
                        <span class="stat-label">Success Rate</span>
                        <span class="stat-value">{{ "%.0f"|format(model.success_rate * 100) }}%</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Avg Response</span>
                        <span class="stat-value">{{ "%.0f"|format(model.avg_response_time_ms) }}ms</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Memory</span>
                        <span class="stat-value">{{ "%.0f"|format(model.memory_usage_mb / 1024) }}GB</span>
                    </div>
                </div>
                <div class="model-strengths">
                    {% for strength in model.strengths %}
                    <span class="strength-tag">{{ strength }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="panel">
        <h3><i class="fas fa-lightbulb"></i> Recommendations</h3>
        <ul class="recommendations-list">
            {% for rec in overview.model_comparison.recommendations %}
            <li><i class="fas fa-arrow-right"></i> {{ rec }}</li>
            {% endfor %}
        </ul>
    </div>
</div>

<!-- Recent Activity -->
<div class="panel full-width">
    <h3><i class="fas fa-history"></i> Recent Activity</h3>
    <div class="activity-table-wrapper">
        <table class="activity-table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Task</th>
                    <th>Result</th>
                    <th>Status</th>
                    <th>Response Time</th>
                </tr>
            </thead>
            <tbody>
                {% for task in overview.performance.recent_tasks[:5] %}
                <tr>
                    <td>{{ task.timestamp.split('T')[1].split('.')[0] if task.timestamp else '-' }}</td>
                    <td>{{ task.task[:50] }}{% if task.task|length > 50 %}...{% endif %}</td>
                    <td>{{ task.result[:40] }}{% if task.result|length > 40 %}...{% endif %}</td>
                    <td>
                        {% if task.success %}
                        <span class="badge success"><i class="fas fa-check"></i> Success</span>
                        {% else %}
                        <span class="badge danger"><i class="fas fa-times"></i> Failed</span>
                        {% endif %}
                    </td>
                    <td>{{ task.response_time_ms }}ms</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Chart.js configuration
const chartsData = {{ charts_data | tojson }};

// Task Volume Chart
const volumeCtx = document.getElementById('volumeChart').getContext('2d');
new Chart(volumeCtx, {
    type: 'bar',
    data: {
        labels: chartsData.task_volume.map(d => d.date.slice(5)),
        datasets: [{
            label: 'Tasks',
            data: chartsData.task_volume.map(d => d.tasks),
            backgroundColor: 'rgba(59, 130, 246, 0.6)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true, ticks: { stepSize: 1 } }
        }
    }
});

// Success Rate Chart
const successCtx = document.getElementById('successChart').getContext('2d');
new Chart(successCtx, {
    type: 'line',
    data: {
        labels: chartsData.success_rate_trend.map(d => d.date.slice(5)),
        datasets: [{
            label: 'Success Rate %',
            data: chartsData.success_rate_trend.map(d => d.rate.toFixed(1)),
            backgroundColor: 'rgba(16, 185, 129, 0.1)',
            borderColor: 'rgba(16, 185, 129, 1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true, max: 100 }
        }
    }
});
</script>
{% endblock %}