1
0

polish: extract inline CSS, add connection status, panel macro, favicon, ollama cache, toast system (#164)

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>
This commit is contained in:
Alexander Whitestone
2026-03-11 09:52:57 -04:00
committed by GitHub
parent 07f2c1b41e
commit 622a6a9204
30 changed files with 2171 additions and 2065 deletions

View File

@@ -2,6 +2,8 @@
{% block title %}Hands — Timmy Time{% endblock %}
{% block extra_styles %}{% endblock %}
{% block content %}
<div class="container-fluid py-4">
<!-- Header -->
@@ -87,48 +89,4 @@
</div>
</div>
<style>
.hand-card {
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.hand-card:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.hand-card.running {
border-left-color: #0dcaf0;
}
.hand-card.scheduled {
border-left-color: #198754;
}
.hand-card.paused {
border-left-color: #ffc107;
}
.hand-card.error {
border-left-color: #dc3545;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-dot.running { background-color: #0dcaf0; animation: pulse 1.5s infinite; }
.status-dot.scheduled { background-color: #198754; }
.status-dot.paused { background-color: #ffc107; }
.status-dot.error { background-color: #dc3545; }
.status-dot.idle { background-color: #6c757d; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
{% endblock %}