forked from Rockachopa/Timmy-time-dashboard
622a6a9204
Major:
- Extract all inline <style> blocks from 22 Jinja2 templates into
static/css/mission-control.css — single cacheable stylesheet
- Add tox lint check that fails on inline <style> in templates
Minor:
1. Connection status indicator in topbar (green/amber/red dot) reflecting
WebSocket + Ollama reachability, with auto-reconnect
2. Jinja2 {% macro panel(title) %} in macros.html — eliminates repeated
.card.mc-panel markup; index.html converted as example
3. SVG favicon (purple T + orange dot)
4. 30-second TTL cache on _check_ollama() to avoid blocking the event loop
on every health poll (asyncio.to_thread was already in place)
5. Toast notification system (McToast.show) for transient status messages —
wired into connection status for Ollama/WebSocket state changes
Enforcement:
- CLAUDE.md updated with conventions 11-14 (no inline CSS, use panel macro,
use toasts, never block the event loop)
- tox lint + pre-push environments now fail on inline <style> blocks
https://claude.ai/code/session_014FQ785MQdyJQ4BAXrRSo9w
Co-authored-by: Claude <noreply@anthropic.com>
112 lines
3.6 KiB
HTML
112 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Router Status - Timmy Time{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mc-panel">
|
|
<div class="mc-panel-header">
|
|
<h1 class="page-title">Router Status</h1>
|
|
<p class="mc-text-secondary">LLM provider health and metrics</p>
|
|
</div>
|
|
|
|
<!-- Overall Stats -->
|
|
<div class="mc-stats-row">
|
|
<div class="mc-stat-card">
|
|
<div class="mc-stat-value">{{ providers|length }}</div>
|
|
<div class="mc-stat-label">Providers</div>
|
|
</div>
|
|
<div class="mc-stat-card">
|
|
<div class="mc-stat-value">{{ total_requests }}</div>
|
|
<div class="mc-stat-label">Total Requests</div>
|
|
</div>
|
|
<div class="mc-stat-card">
|
|
<div class="mc-stat-value">{{ total_success }}</div>
|
|
<div class="mc-stat-label">Successful</div>
|
|
</div>
|
|
<div class="mc-stat-card">
|
|
<div class="mc-stat-value">{{ total_failed }}</div>
|
|
<div class="mc-stat-label">Failed</div>
|
|
</div>
|
|
<div class="mc-stat-card">
|
|
<div class="mc-stat-value">{{ avg_latency_ms }}<small>ms</small></div>
|
|
<div class="mc-stat-label">Avg Latency</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preferred Provider -->
|
|
{% if preferred_provider %}
|
|
<div class="mc-alert mc-alert-success">
|
|
<strong>Preferred Provider:</strong> {{ preferred_provider }}
|
|
<span class="mc-badge mc-badge-success">ACTIVE</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="mc-alert mc-alert-warning">
|
|
<strong>Warning:</strong> No healthy providers available
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Provider Cards -->
|
|
<div class="mc-providers-grid">
|
|
{% for provider in providers %}
|
|
<div class="mc-provider-card provider-{{ provider.status }}">
|
|
<div class="provider-header">
|
|
<h3>{{ provider.name }}</h3>
|
|
<span class="mc-badge mc-badge-{{ provider.status }}">
|
|
{{ provider.status }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="provider-meta">
|
|
<span class="provider-type">{{ provider.type }}</span>
|
|
<span class="provider-priority">Priority: {{ provider.priority }}</span>
|
|
{% if not provider.enabled %}
|
|
<span class="mc-badge mc-badge-disabled">DISABLED</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="provider-circuit">
|
|
Circuit: <span class="circuit-{{ provider.circuit_state }}">{{ provider.circuit_state }}</span>
|
|
</div>
|
|
|
|
<div class="provider-metrics">
|
|
<div class="metric">
|
|
<span class="metric-value">{{ provider.metrics.total }}</span>
|
|
<span class="metric-label">Requests</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value">{{ provider.metrics.success }}</span>
|
|
<span class="metric-label">Success</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value">{{ provider.metrics.failed }}</span>
|
|
<span class="metric-label">Failed</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value">{{ provider.metrics.avg_latency_ms }}ms</span>
|
|
<span class="metric-label">Latency</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value">{{ "%.1f"|format(provider.metrics.error_rate * 100) }}%</span>
|
|
<span class="metric-label">Error Rate</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if provider.metrics.error_rate > 0.1 %}
|
|
<div class="mc-alert mc-alert-warning mc-alert-small">
|
|
High error rate detected
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if not providers %}
|
|
<div class="mc-empty-state">
|
|
<p>No providers configured.</p>
|
|
<p class="mc-text-secondary">Check config/providers.yaml</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% endblock %}
|