forked from Rockachopa/Timmy-time-dashboard
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
committed by
GitHub
GitHub
parent
07f2c1b41e
commit
622a6a9204
@@ -2,289 +2,7 @@
|
||||
|
||||
{% block title %}Timmy Time — Spark Intelligence{% endblock %}
|
||||
|
||||
{% block extra_styles %}
|
||||
<style>
|
||||
/* ── Spark Intelligence — unified theme ── */
|
||||
|
||||
.spark-container { max-width: 1400px; margin: 0 auto; }
|
||||
|
||||
.spark-header {
|
||||
border-left: 3px solid var(--purple);
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.spark-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--purple);
|
||||
letter-spacing: 0.08em;
|
||||
font-family: var(--font);
|
||||
}
|
||||
.spark-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.spark-status-val {
|
||||
color: var(--purple);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Stat grid */
|
||||
.spark-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.spark-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(8, 4, 18, 0.5);
|
||||
}
|
||||
.spark-stat-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.spark-stat-value {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
/* Event pipeline rows */
|
||||
.spark-event-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.spark-event-row:last-child { border-bottom: none; }
|
||||
.spark-event-count {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
/* Event type badges */
|
||||
.spark-event-type-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.15em 0.5em;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
background: rgba(59, 26, 92, 0.4);
|
||||
color: var(--text);
|
||||
}
|
||||
.spark-type-task_posted .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-task_posted { background: rgba(124, 58, 237, 0.2); color: var(--purple); }
|
||||
.spark-type-bid_submitted .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-bid_submitted { background: rgba(255, 122, 42, 0.2); color: var(--orange); }
|
||||
.spark-type-task_assigned .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-task_assigned { background: rgba(0, 232, 122, 0.15); color: var(--green); }
|
||||
.spark-type-task_completed .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-task_completed { background: rgba(0, 232, 122, 0.2); color: var(--green); }
|
||||
.spark-type-task_failed .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-task_failed { background: rgba(255, 68, 85, 0.2); color: var(--red); }
|
||||
.spark-type-agent_joined .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-agent_joined { background: rgba(168, 85, 247, 0.2); color: var(--purple); }
|
||||
.spark-type-prediction_result .spark-event-type-badge,
|
||||
.spark-event-type-badge.spark-type-prediction_result { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
|
||||
|
||||
/* Advisories */
|
||||
.spark-advisory {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
background: rgba(24, 10, 45, 0.5);
|
||||
}
|
||||
.spark-advisory.priority-high { border-left: 3px solid var(--red); }
|
||||
.spark-advisory.priority-medium { border-left: 3px solid var(--orange); }
|
||||
.spark-advisory.priority-low { border-left: 3px solid var(--green); }
|
||||
|
||||
.spark-advisory-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.spark-advisory-cat {
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.spark-advisory-priority {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
.spark-advisory-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.spark-advisory-detail {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.spark-advisory-action {
|
||||
font-size: 0.75rem;
|
||||
color: var(--purple);
|
||||
font-style: italic;
|
||||
border-left: 2px solid var(--purple);
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Predictions */
|
||||
.spark-prediction {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
background: rgba(8, 4, 18, 0.5);
|
||||
}
|
||||
.spark-prediction.evaluated { border-left: 3px solid var(--green); }
|
||||
.spark-prediction.pending { border-left: 3px solid var(--orange); }
|
||||
|
||||
.spark-pred-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.spark-pred-task {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
.spark-pred-accuracy {
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
font-family: var(--font);
|
||||
}
|
||||
.spark-pred-pending-badge {
|
||||
font-size: 0.6rem;
|
||||
background: var(--amber-dim);
|
||||
color: var(--amber);
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.spark-pred-detail { font-size: 0.75rem; color: var(--text); }
|
||||
.spark-pred-item { padding: 0.1rem 0; }
|
||||
.spark-pred-label { color: var(--text-dim); font-weight: 600; }
|
||||
.spark-pred-actual {
|
||||
margin-top: 0.3rem;
|
||||
padding-top: 0.3rem;
|
||||
border-top: 1px dashed var(--border);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.spark-pred-time {
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-dim);
|
||||
margin-top: 0.3rem;
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
/* Memories */
|
||||
.spark-memory-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
background: rgba(8, 4, 18, 0.5);
|
||||
}
|
||||
.spark-memory-card.mem-pattern { border-left: 3px solid var(--green); }
|
||||
.spark-memory-card.mem-anomaly { border-left: 3px solid var(--red); }
|
||||
.spark-memory-card.mem-insight { border-left: 3px solid var(--purple); }
|
||||
|
||||
.spark-mem-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.spark-mem-type {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
}
|
||||
.spark-mem-confidence {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
.spark-mem-content {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.spark-mem-meta {
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-dim);
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.spark-timeline-scroll {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.spark-event {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: rgba(8, 4, 18, 0.5);
|
||||
}
|
||||
.spark-event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.spark-event-importance {
|
||||
font-size: 0.5rem;
|
||||
color: var(--purple);
|
||||
}
|
||||
.spark-event-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.spark-event-meta {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.spark-event-time {
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.spark-title { font-size: 1.1rem; }
|
||||
.spark-stat-value { font-size: 1.1rem; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.spark-timeline-scroll { max-height: 50vh; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block extra_styles %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid spark-container py-3">
|
||||
|
||||
Reference in New Issue
Block a user