perplexity/Timmy-time-dashboard
Archived
1
0
Fork 0
forked from Rockachopa/Timmy-time-dashboard
Code Issues Pull Requests 1 Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

22
src/dashboard/templates/experiments.html
View File

@@ -2,27 +2,7 @@
{% block title %}{{ page_title }}{% endblock %}
{% block extra_styles %}
<style>
.experiments-container { max-width: 1000px; margin: 0 auto; }
.exp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.exp-title { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
.exp-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
.exp-config { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-dim); }
.exp-config span { background: var(--glass-bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; }
.exp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.exp-table th { text-align: left; padding: 8px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; }
.exp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.exp-table tr:hover { background: var(--glass-bg); }
.metric-good { color: var(--success); }
.metric-bad { color: var(--danger); }
.btn-start { background: var(--accent); color: #fff; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.btn-start:hover { opacity: 0.9; }
.btn-start:disabled { opacity: 0.4; cursor: not-allowed; }
.disabled-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; }
.empty-state { text-align: center; padding: 40px; color: var(--text-dim); }
</style>
{% endblock %}
{% block extra_styles %}{% endblock %}
{% block content %}
<div class="experiments-container">