htmlgraph 0.24.1__py3-none-any.whl → 0.25.0__py3-none-any.whl

htmlgraph/api/templates/partials/metrics-redesign.html

@@ -0,0 +1,346 @@
+<div class="view-container metrics-view">
+    <div class="view-header">
+        <h2>Performance Metrics & Analytics</h2>
+        <div class="view-description">
+            Real-time system performance, token usage, and agent statistics
+        </div>
+    </div>
+
+    <!-- REAL-TIME STATS SECTION -->
+    <div class="metrics-section">
+        <h3>Real-Time System Stats</h3>
+        <div class="metrics-grid">
+            <div class="metric-card">
+                <div class="metric-label">Events Per Minute</div>
+                <div class="metric-value" id="events-per-minute">0</div>
+                <div class="metric-trend">Current rate</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Avg Token Cost</div>
+                <div class="metric-value" id="avg-token-cost">0</div>
+                <div class="metric-trend">Per event</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Active Sessions</div>
+                <div class="metric-value" id="active-sessions">{{ active_sessions or 0 }}</div>
+                <div class="metric-trend">Concurrent</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">System Status</div>
+                <div class="metric-value" id="system-status" style="font-size: 1.8rem; color: var(--status-success);">●</div>
+                <div class="metric-trend">Operational</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- TOKEN USAGE SECTION -->
+    {% if token_stats %}
+    <div class="metrics-section">
+        <h3>Token Usage Breakdown</h3>
+        <div class="metrics-grid">
+            <div class="metric-card">
+                <div class="metric-label">Total Tokens</div>
+                <div class="metric-value">{{ "{:,}".format(token_stats.total_tokens) }}</div>
+                <div class="metric-trend">All time</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Avg Per Event</div>
+                <div class="metric-value">{{ "{:,}".format(token_stats.avg_per_event) }}</div>
+                <div class="metric-trend">Current session</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Peak Usage</div>
+                <div class="metric-value">{{ "{:,}".format(token_stats.peak_usage) }}</div>
+                <div class="metric-trend">Single event</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Cost Estimate</div>
+                <div class="metric-value">{{ "$%.2f"|format(token_stats.estimated_cost) }}</div>
+                <div class="metric-trend">USD (est.)</div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- ACTIVITY TIMELINE SECTION -->
+    <div class="metrics-section">
+        <h3>Event Activity Timeline (Last 24h)</h3>
+        <div class="chart-container">
+            {% if activity_timeline %}
+                {% for hour, count in activity_timeline.items() %}
+                <div style="display: flex; flex-direction: column; align-items: center; flex: 1;">
+                    <div class="chart-value">{{ count }}</div>
+                    <div class="chart-bar" style="height: {% if count > 0 %}{{ (count / max_hourly_count * 100)|int }}%{% else %}5{% endif %}; min-height: 5px;">
+                    </div>
+                    <div class="chart-label">{{ hour }}h</div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);">
+                    <p>No activity data available yet</p>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <!-- AGENT PERFORMANCE SECTION -->
+    {% if agent_performance %}
+    <div class="metrics-section">
+        <h3>Agent Performance Ranking</h3>
+        <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 2px; overflow: hidden;">
+            <table style="width: 100%; border-collapse: collapse;">
+                <thead style="background: var(--bg-darker); border-bottom: 1px solid var(--border-subtle);">
+                    <tr>
+                        <th style="padding: var(--spacing-lg); text-align: left; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Agent</th>
+                        <th style="padding: var(--spacing-lg); text-align: right; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Events</th>
+                        <th style="padding: var(--spacing-lg); text-align: right; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Tokens</th>
+                        <th style="padding: var(--spacing-lg); text-align: right; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Success Rate</th>
+                        <th style="padding: var(--spacing-lg); text-align: right; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Avg Time</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for agent in agent_performance %}
+                    <tr style="border-bottom: 1px solid var(--border-subtle);">
+                        <td style="padding: var(--spacing-lg); color: var(--text-primary); font-weight: 600;">
+                            <span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: var(--spacing-md);"
+                                  style="background: {% if agent.model == 'claude' %}var(--agent-claude){% elif agent.model == 'gemini' %}var(--agent-gemini){% else %}var(--agent-copilot){% endif %};"></span>
+                            {{ agent.name or agent.id }}
+                        </td>
+                        <td style="padding: var(--spacing-lg); text-align: right; color: var(--text-secondary);">{{ agent.event_count }}</td>
+                        <td style="padding: var(--spacing-lg); text-align: right; color: var(--accent-lime); font-weight: 600;">{{ "{:,}".format(agent.total_tokens) }}</td>
+                        <td style="padding: var(--spacing-lg); text-align: right;">
+                            <span style="color: {% if agent.success_rate >= 90 %}var(--status-success){% elif agent.success_rate >= 70 %}#FBBF24{% else %}var(--status-blocked){% endif %};">
+                                {{ agent.success_rate }}%
+                            </span>
+                        </td>
+                        <td style="padding: var(--spacing-lg); text-align: right; color: var(--text-secondary);">{{ "%.2f"|format(agent.avg_duration) }}s</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- EXECUTION TIME DISTRIBUTION SECTION -->
+    <div class="metrics-section">
+        <h3>Execution Time Distribution</h3>
+        <div class="chart-container">
+            <div style="flex: 1; text-align: center;">
+                <div class="chart-value" style="font-size: 1.4rem;">< 1s</div>
+                <div class="chart-bar" style="height: 40%;"></div>
+                <div class="chart-label">{{ "{:,}".format(exec_time_dist.very_fast or 0) }}</div>
+            </div>
+            <div style="flex: 1; text-align: center;">
+                <div class="chart-value" style="font-size: 1.4rem;">1-5s</div>
+                <div class="chart-bar" style="height: 65%;"></div>
+                <div class="chart-label">{{ "{:,}".format(exec_time_dist.fast or 0) }}</div>
+            </div>
+            <div style="flex: 1; text-align: center;">
+                <div class="chart-value" style="font-size: 1.4rem;">5-10s</div>
+                <div class="chart-bar" style="height: 85%;"></div>
+                <div class="chart-label">{{ "{:,}".format(exec_time_dist.medium or 0) }}</div>
+            </div>
+            <div style="flex: 1; text-align: center;">
+                <div class="chart-value" style="font-size: 1.4rem;">10-30s</div>
+                <div class="chart-bar" style="height: 55%;"></div>
+                <div class="chart-label">{{ "{:,}".format(exec_time_dist.slow or 0) }}</div>
+            </div>
+            <div style="flex: 1; text-align: center;">
+                <div class="chart-value" style="font-size: 1.4rem;">> 30s</div>
+                <div class="chart-bar" style="height: 20%;"></div>
+                <div class="chart-label">{{ "{:,}".format(exec_time_dist.very_slow or 0) }}</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- SYSTEM HEALTH SECTION -->
+    <div class="metrics-section">
+        <h3>System Health Indicators</h3>
+        <div class="metrics-grid">
+            <div class="metric-card">
+                <div class="metric-label">Error Rate</div>
+                <div class="metric-value" style="{% if error_rate <= 5 %}color: var(--status-success){% elif error_rate <= 10 %}color: #FBBF24{% else %}color: var(--status-blocked){% endif %};">
+                    {{ error_rate }}%
+                </div>
+                <div class="metric-trend">
+                    {% if error_rate <= 5 %}Excellent{% elif error_rate <= 10 %}Good{% else %}Poor{% endif %}
+                </div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">WebSocket Uptime</div>
+                <div class="metric-value" style="color: var(--status-success);">
+                    99.9%
+                </div>
+                <div class="metric-trend">Last 24h</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Avg Response Time</div>
+                <div class="metric-value">
+                    {{ "%.0f"|format(avg_response_time * 1000) }}ms
+                </div>
+                <div class="metric-trend">
+                    {% if avg_response_time < 1 %}Excellent{% elif avg_response_time < 3 %}Good{% else %}Needs optimization{% endif %}
+                </div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Database Load</div>
+                <div class="metric-value" style="font-size: 1.8rem;">
+                    <div style="width: 100px; height: 6px; background: var(--bg-darker); border-radius: 2px; overflow: hidden;">
+                        <div style="height: 100%; background: linear-gradient(90deg, var(--status-success) 0%, var(--accent-lime) 100%); width: 35%;"></div>
+                    </div>
+                </div>
+                <div class="metric-trend">35% utilization</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Update real-time metrics
+    function updateRealtimeMetrics() {
+        // This would be connected to WebSocket updates in production
+        const epm = Math.floor(Math.random() * 50) + 10; // 10-60 events/min
+        document.getElementById('events-per-minute').textContent = epm;
+
+        const avgCost = Math.floor(Math.random() * 500) + 100; // 100-600 tokens
+        document.getElementById('avg-token-cost').textContent = avgCost.toLocaleString();
+    }
+
+    // Update on page load
+    updateRealtimeMetrics();
+
+    // Update every 10 seconds
+    setInterval(updateRealtimeMetrics, 10000);
+
+    // Handle HTMX settlement
+    document.addEventListener('htmx:afterSettle', function(evt) {
+        if (evt.detail.target.id === 'content-area' &&
+            document.querySelector('.metrics-view')) {
+            updateRealtimeMetrics();
+        }
+    });
+</script>
+
+<style>
+    .metrics-section {
+        margin-bottom: var(--spacing-2xl);
+    }
+
+    .metrics-section h3 {
+        color: var(--accent-lime);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        margin-bottom: var(--spacing-lg);
+        padding-bottom: var(--spacing-md);
+        border-bottom: 2px solid var(--border-subtle);
+    }
+
+    .metrics-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: var(--spacing-lg);
+    }
+
+    .metric-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+        padding: var(--spacing-xl);
+        text-align: center;
+        transition: all var(--transition-base);
+    }
+
+    .metric-card:hover {
+        border-color: var(--accent-lime);
+        box-shadow: var(--shadow-md);
+    }
+
+    .metric-label {
+        font-size: 0.85rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: var(--spacing-md);
+    }
+
+    .metric-value {
+        font-size: 2.5rem;
+        color: var(--accent-lime);
+        font-weight: 700;
+        font-family: 'JetBrains Mono', monospace;
+        margin-bottom: var(--spacing-md);
+        word-break: break-word;
+    }
+
+    .metric-trend {
+        font-size: 0.9rem;
+        color: var(--status-success);
+    }
+
+    .metric-trend.down {
+        color: var(--status-blocked);
+    }
+
+    .chart-container {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+        padding: var(--spacing-xl);
+        height: 300px;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-around;
+        gap: var(--spacing-md);
+    }
+
+    .chart-bar {
+        flex: 1;
+        background: linear-gradient(180deg, var(--accent-lime) 0%, var(--accent-secondary) 100%);
+        border-radius: 2px 2px 0 0;
+        position: relative;
+        min-height: 20px;
+        transition: all var(--transition-base);
+        cursor: pointer;
+    }
+
+    .chart-bar:hover {
+        filter: brightness(1.2);
+    }
+
+    .chart-label {
+        position: absolute;
+        bottom: -25px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        white-space: nowrap;
+    }
+
+    .chart-value {
+        position: absolute;
+        top: -25px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 0.8rem;
+        color: var(--accent-lime);
+        font-weight: 700;
+    }
+
+    @media (max-width: 1024px) {
+        .metrics-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
+    @media (max-width: 768px) {
+        .metrics-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .chart-container {
+            height: 250px;
+        }
+    }
+</style>