Speed history: rework chart and add live stats

- Replace 8-point scatter chart with proper 60-point line chart
  - Blue gradient fill (rgba 35%→2%), tension 0.4 smooth curve
  - No legend (obvious), no X axis grid, soft Y axis gridlines
  - Y axis auto-scales: max(60, sessionMax*1.2) rounded to 10s
  - Ticks: '0 km/h' labels on Y, time strings on X (max 6)
  - chart.update('none') for live updates (no animation stutter)
- Speed history card header now shows current speed + session max
  even when the graph is collapsed
- Footer bar inside expanded graph: session avg, point count, last reading time
- makeGradient() refreshed on every update in case canvas was resized
- obd_rpm now appends ' rpm' to the displayed value

Co-authored-by: Copilot <[email protected]>

templates/index.html

@@ -115,18 +115,26 @@
     </div>
     <div class="col-lg-7 col-xl-8">
         <div class="card shadow-sm h-100">
-            <div class="card-header py-2 d-flex align-items-center justify-content-between">
-                <h6 class="text-primary fw-bold m-0">Speed history</h6>
-                <button class="btn btn-link btn-sm p-0 text-muted" id="speed-graph-toggle" type="button"
+            <div class="card-header py-2 d-flex align-items-center gap-3">
+                <h6 class="text-primary fw-bold m-0 me-auto">Speed history</h6>
+                {# Live speed badge — visible even when graph is collapsed #}
+                <span class="text-xs text-muted fw-bold text-uppercase">Now</span>
+                <span id="speed-now-badge" class="fw-bold text-dark" style="min-width:3.5rem;text-align:right;">—</span>
+                <span class="text-xs text-muted fw-bold text-uppercase ms-2">Max</span>
+                <span id="speed-max-badge" class="fw-bold text-danger" style="min-width:3.5rem;text-align:right;">—</span>
+                <button class="btn btn-link btn-sm p-0 text-muted ms-2" id="speed-graph-toggle" type="button"
                         aria-expanded="false" aria-controls="speed-graph-body">
                     <i class="fas fa-chevron-down"></i>
                 </button>
             </div>
             <div class="collapse" id="speed-graph-body">
-                <div class="card-body">
-                    <div class="chart-container" style="position:relative;height:14rem;">
-                        <canvas id="speedGraph"></canvas>
-                    </div>
+                <div class="card-body pb-2 pt-3 px-3">
+                    <canvas id="speedGraph" style="height:13rem;"></canvas>
+                </div>
+                <div class="card-footer py-2 d-flex gap-4 bg-white border-top small text-muted">
+                    <div><span class="fw-bold text-uppercase" style="font-size:.65rem;">Avg (session)</span> <span id="speed-avg-badge" class="text-dark fw-semibold">—</span></div>
+                    <div><span class="fw-bold text-uppercase" style="font-size:.65rem;">Points</span> <span id="speed-points-badge" class="text-dark fw-semibold">0</span></div>
+                    <div class="ms-auto"><span id="speed-last-time" class="text-muted" style="font-size:.7rem;"></span></div>
                 </div>
             </div>
         </div>