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

fix: comprehensive iPhone UI overhaul — glassmorphism, responsive layouts, theme unification

Browse Source 
- base.html: add missing {% block extra_styles %}, mobile hamburger menu with
  slide-out nav, interactive-widget viewport meta, -webkit-text-size-adjust
- style.css: define 15+ missing CSS variables (--bg-secondary, --text-muted,
  --accent, --success, --danger, etc.), add missing utility classes (.grid,
  .stat, .agent-card, .agent-avatar, .form-group), glassmorphism card effects,
  iPhone breakpoints (768px, 390px), 44pt min touch targets, smooth animations
- mobile.html: rewrite with proper theme variables, glass cards, touch-friendly
  quick actions grid, chat with proper message bubbles
- swarm_live.html: replace undefined CSS vars, use mc-panel theme cards
- marketplace.html: responsive agent cards that stack on iPhone, themed pricing
- voice_button.html & voice_enhanced.html: proper theme integration, touch-sized
  buttons, themed result containers
- create_task.html: mobile-friendly forms with 16px font (prevents iOS zoom)
- tools.html & creative.html: themed headers, responsive column stacking
- spark.html: replace all hardcoded blue (#00d4ff) colors with theme purple/orange
- briefing.html: replace hardcoded bootstrap colors with theme variables

Fixes: header nav overflow on iPhone (7 links in single row), missing
extra_styles block silently dropping child template styles, undefined CSS
variables breaking mobile/swarm/marketplace/voice pages, sub-44pt touch
targets, missing -webkit-text-size-adjust, inconsistent color themes.

97 UI tests pass (91 UI-specific + 6 creative route).

https://claude.ai/code/session_01JiyhGyee2zoMN4p8xWYqEe
This commit is contained in:
Claude
2026-02-24 22:25:04 +00:00
parent d96b7593fc
commit 65a278dbee
13 changed files with 2121 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

652
src/dashboard/templates/spark.html
View File

@@ -2,11 +2,295 @@
{% 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 content %}
<div class="container-fluid spark-container py-4">
<div class="container-fluid spark-container py-3">
<!-- Header -->
<div class="spark-header mb-4">
<div class="spark-header">
<div class="spark-title">SPARK INTELLIGENCE</div>
<div class="spark-subtitle">
Self-evolving cognitive layer &mdash;
@@ -21,7 +305,6 @@
<!-- Left column: Status + Advisories -->
<div class="col-12 col-lg-4 d-flex flex-column gap-3">
<!-- EIDOS Status -->
<div class="card mc-panel">
<div class="card-header mc-panel-header">// EIDOS LOOP</div>
<div class="card-body p-3">
@@ -48,7 +331,6 @@
</div>
</div>
<!-- Event Counts -->
<div class="card mc-panel">
<div class="card-header mc-panel-header">// EVENT PIPELINE</div>
<div class="card-body p-3">
@@ -61,7 +343,6 @@
</div>
</div>
<!-- Advisories -->
<div class="card mc-panel"
hx-get="/spark/insights"
hx-trigger="load, every 30s"
@@ -69,7 +350,7 @@
hx-swap="innerHTML">
<div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
<span>// ADVISORIES</span>
<span class="badge bg-info">{{ advisories | length }}</span>
<span class="badge badge-info">{{ advisories | length }}</span>
</div>
<div class="card-body p-3" id="spark-insights-body">
{% if advisories %}
@@ -85,7 +366,7 @@
</div>
{% endfor %}
{% else %}
<div class="text-center text-muted py-3">No advisories yet. Run more tasks to build intelligence.</div>
<div style="text-align:center; color:var(--text-dim); padding:16px; font-size:0.85rem;">No advisories yet. Run more tasks to build intelligence.</div>
{% endif %}
</div>
</div>
@@ -94,7 +375,6 @@
<!-- Middle column: Predictions -->
<div class="col-12 col-lg-4 d-flex flex-column gap-3">
<!-- EIDOS Predictions -->
<div class="card mc-panel">
<div class="card-header mc-panel-header">// EIDOS PREDICTIONS</div>
<div class="card-body p-3">
@@ -139,12 +419,11 @@
</div>
{% endfor %}
{% else %}
<div class="text-center text-muted py-3">No predictions yet. Post tasks to activate the EIDOS loop.</div>
<div style="text-align:center; color:var(--text-dim); padding:16px; font-size:0.85rem;">No predictions yet. Post tasks to activate the EIDOS loop.</div>
{% endif %}
</div>
</div>
<!-- Consolidated Memories -->
<div class="card mc-panel">
<div class="card-header mc-panel-header">// MEMORIES</div>
<div class="card-body p-3">
@@ -162,7 +441,7 @@
</div>
{% endfor %}
{% else %}
<div class="text-center text-muted py-3">Memories will form as patterns emerge.</div>
<div style="text-align:center; color:var(--text-dim); padding:16px; font-size:0.85rem;">Memories will form as patterns emerge.</div>
{% endif %}
</div>
</div>
@@ -178,7 +457,7 @@
hx-swap="innerHTML">
<div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
<span>// EVENT TIMELINE</span>
<span class="badge bg-secondary">{{ status.events_captured }} total</span>
<span class="badge badge-secondary">{{ status.events_captured }} total</span>
</div>
<div class="card-body p-3 spark-timeline-scroll" id="spark-timeline-body">
{% if timeline %}
@@ -198,7 +477,7 @@
</div>
{% endfor %}
{% else %}
<div class="text-center text-muted py-3">No events captured yet.</div>
<div style="text-align:center; color:var(--text-dim); padding:16px; font-size:0.85rem;">No events captured yet.</div>
{% endif %}
</div>
</div>
@@ -206,351 +485,4 @@
</div>
</div>
<style>
/* ------------------------------------------------------------------ */
/* Spark Intelligence — Mission Control theme */
/* ------------------------------------------------------------------ */
.spark-container {
max-width: 1400px;
margin: 0 auto;
}
.spark-header {
border-left: 3px solid #00d4ff;
padding-left: 1rem;
}
.spark-title {
font-size: 1.6rem;
font-weight: 700;
color: #00d4ff;
letter-spacing: 0.08em;
font-family: 'JetBrains Mono', monospace;
}
.spark-subtitle {
font-size: 0.75rem;
color: #6c757d;
margin-top: 0.25rem;
}
.spark-status-val {
color: #00d4ff;
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 #1a2a3a;
border-radius: 4px;
background: #0a1520;
}
.spark-stat-label {
font-size: 0.65rem;
color: #6c757d;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.spark-stat-value {
font-size: 1.3rem;
font-weight: 700;
color: #f8f9fa;
font-family: 'JetBrains Mono', monospace;
}
/* Event pipeline rows */
.spark-event-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0;
border-bottom: 1px solid #1a2a3a;
}
.spark-event-row:last-child {
border-bottom: none;
}
.spark-event-count {
font-weight: 600;
color: #adb5bd;
font-family: 'JetBrains Mono', monospace;
}
/* 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;
}
.spark-type-task_posted .spark-event-type-badge,
.spark-event-type-badge.spark-type-task_posted { background: #1a3a5a; color: #5baaff; }
.spark-type-bid_submitted .spark-event-type-badge,
.spark-event-type-badge.spark-type-bid_submitted { background: #3a2a1a; color: #ffaa5b; }
.spark-type-task_assigned .spark-event-type-badge,
.spark-event-type-badge.spark-type-task_assigned { background: #1a3a2a; color: #5bffaa; }
.spark-type-task_completed .spark-event-type-badge,
.spark-event-type-badge.spark-type-task_completed { background: #1a3a1a; color: #5bff5b; }
.spark-type-task_failed .spark-event-type-badge,
.spark-event-type-badge.spark-type-task_failed { background: #3a1a1a; color: #ff5b5b; }
.spark-type-agent_joined .spark-event-type-badge,
.spark-event-type-badge.spark-type-agent_joined { background: #2a1a3a; color: #aa5bff; }
.spark-type-prediction_result .spark-event-type-badge,
.spark-event-type-badge.spark-type-prediction_result { background: #1a2a3a; color: #00d4ff; }
/* Advisories */
.spark-advisory {
border: 1px solid #2a3a4a;
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.75rem;
background: #0d1b2a;
}
.spark-advisory.priority-high {
border-left: 3px solid #dc3545;
}
.spark-advisory.priority-medium {
border-left: 3px solid #fd7e14;
}
.spark-advisory.priority-low {
border-left: 3px solid #198754;
}
.spark-advisory-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.spark-advisory-cat {
font-size: 0.6rem;
color: #6c757d;
letter-spacing: 0.08em;
}
.spark-advisory-priority {
font-size: 0.65rem;
color: #adb5bd;
font-family: 'JetBrains Mono', monospace;
}
.spark-advisory-title {
font-weight: 600;
font-size: 0.9rem;
color: #f8f9fa;
margin-bottom: 0.25rem;
}
.spark-advisory-detail {
font-size: 0.8rem;
color: #adb5bd;
margin-bottom: 0.4rem;
line-height: 1.4;
}
.spark-advisory-action {
font-size: 0.75rem;
color: #00d4ff;
font-style: italic;
border-left: 2px solid #00d4ff;
padding-left: 0.5rem;
}
/* Predictions */
.spark-prediction {
border: 1px solid #1a2a3a;
border-radius: 6px;
padding: 0.6rem;
margin-bottom: 0.6rem;
background: #0a1520;
}
.spark-prediction.evaluated {
border-left: 3px solid #198754;
}
.spark-prediction.pending {
border-left: 3px solid #fd7e14;
}
.spark-pred-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.3rem;
}
.spark-pred-task {
font-size: 0.75rem;
color: #adb5bd;
font-family: 'JetBrains Mono', monospace;
}
.spark-pred-accuracy {
font-weight: 700;
font-size: 0.85rem;
font-family: 'JetBrains Mono', monospace;
}
.spark-pred-pending-badge {
font-size: 0.6rem;
background: #fd7e14;
color: #fff;
padding: 0.1em 0.4em;
border-radius: 3px;
font-weight: 600;
}
.spark-pred-detail {
font-size: 0.75rem;
color: #adb5bd;
}
.spark-pred-item {
padding: 0.1rem 0;
}
.spark-pred-label {
color: #6c757d;
font-weight: 600;
}
.spark-pred-actual {
margin-top: 0.3rem;
padding-top: 0.3rem;
border-top: 1px dashed #1a2a3a;
color: #dee2e6;
}
.spark-pred-time {
font-size: 0.6rem;
color: #495057;
margin-top: 0.3rem;
font-family: 'JetBrains Mono', monospace;
}
/* Memories */
.spark-memory-card {
border: 1px solid #1a2a3a;
border-radius: 6px;
padding: 0.6rem;
margin-bottom: 0.6rem;
background: #0a1520;
}
.spark-memory-card.mem-pattern {
border-left: 3px solid #198754;
}
.spark-memory-card.mem-anomaly {
border-left: 3px solid #dc3545;
}
.spark-memory-card.mem-insight {
border-left: 3px solid #00d4ff;
}
.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: #6c757d;
font-weight: 600;
}
.spark-mem-confidence {
font-size: 0.65rem;
color: #adb5bd;
font-family: 'JetBrains Mono', monospace;
}
.spark-mem-content {
font-size: 0.8rem;
color: #dee2e6;
line-height: 1.4;
}
.spark-mem-meta {
font-size: 0.6rem;
color: #495057;
margin-top: 0.3rem;
}
/* Timeline */
.spark-timeline-scroll {
max-height: 70vh;
overflow-y: auto;
}
.spark-event {
border: 1px solid #1a2a3a;
border-radius: 4px;
padding: 0.5rem;
margin-bottom: 0.5rem;
background: #0a1520;
}
.spark-event-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.2rem;
}
.spark-event-importance {
font-size: 0.5rem;
color: #00d4ff;
}
.spark-event-desc {
font-size: 0.8rem;
color: #dee2e6;
}
.spark-event-meta {
font-size: 0.65rem;
color: #6c757d;
font-family: 'JetBrains Mono', monospace;
margin-top: 0.15rem;
}
.spark-event-time {
font-size: 0.6rem;
color: #495057;
font-family: 'JetBrains Mono', monospace;
}
/* Responsive */
@media (max-width: 992px) {
.spark-title { font-size: 1.2rem; }
.spark-stat-value { font-size: 1.1rem; }
}
</style>
{% endblock %}