Show each curve's slept hours in the Sleep trend legend

Today, Yesterday and the N-day average chips now carry their totals
(e.g. "Yesterday 12.8h"), matching the projected chip.

src/app.js

@@ -1394,18 +1394,25 @@
     const curves = sleepTrendCurves(events);
     drawSleepTrendChart(curves);
     // Drop legend chips for missing reference lines (no data for them yet),
-    // and keep the average chip's label in step with the chart-days picker.
+    // keep the average chip's label in step with the chart-days picker, and
-    const yLegend = document.getElementById("legend-trend-yesterday");
+    // write each curve's slept-hours total into its chip.
-    const aLegend = document.getElementById("legend-trend-avg");
+    const chip = (id) => document.getElementById(id);
-    const aText   = document.getElementById("legend-trend-avg-text");
+    const hrs = (pts) => `${pts[pts.length - 1].y.toFixed(1)}h`;
-    const pLegend = document.getElementById("legend-trend-projected");
+    chip("legend-trend-today-text").textContent = `Today ${hrs(curves.today)}`;
-    const pText   = document.getElementById("legend-trend-projected-text");
+    const yLegend = chip("legend-trend-yesterday");
-    if (yLegend) yLegend.hidden = !curves.yesterday;
+    yLegend.hidden = !curves.yesterday;
-    if (aLegend) aLegend.hidden = !curves.avg;
+    if (curves.yesterday) {
-    if (aText)   aText.textContent = `${curves.avgDays}-day avg`;
+      chip("legend-trend-yesterday-text").textContent = `Yesterday ${hrs(curves.yesterday)}`;
-    if (pLegend) pLegend.hidden = !curves.projected;
+    }
-    if (pText && curves.projected) {
+    const aLegend = chip("legend-trend-avg");
-      pText.textContent = `Projected ~${curves.projected[curves.projected.length - 1].y.toFixed(1)}h`;
+    aLegend.hidden = !curves.avg;
+    if (curves.avg) {
+      chip("legend-trend-avg-text").textContent = `${curves.avgDays}-day avg ${hrs(curves.avg)}`;
+    }
+    const pLegend = chip("legend-trend-projected");
+    pLegend.hidden = !curves.projected;
+    if (curves.projected) {
+      chip("legend-trend-projected-text").textContent = `Projected ~${hrs(curves.projected)}`;
     }
   }
 

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-15", "text": "The Sleep trend legend shows the hours for each line — Today, Yesterday and the average, next to the projection" },
   { "date": "2026-07-15", "text": "The Sleep trend chart projects where today will land by midnight — a dashed tail continues today's line following the average day's rhythm" },
   { "date": "2026-07-15", "text": "The charts highlight the selected day, so it's easy to spot which bars, rows and cells you're looking at" },
   { "date": "2026-07-15", "text": "New Sleep trend chart: today's running sleep total through the day, against yesterday and the average over your chart window (7/14/30 days)" },

src/index.html

@@ -224,9 +224,9 @@
         <h2>Sleep trend</h2>
         <svg id="chart-sleep-trend" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Cumulative sleep hours through the day: today, yesterday, the recent average and the projected end-of-day total"></svg>
         <div class="legend">
-          <span class="lg trend-today"><span class="sw"></span>Today</span>
+          <span class="lg trend-today"><span class="sw"></span><span id="legend-trend-today-text">Today</span></span>
           <span class="lg trend-projected" id="legend-trend-projected" hidden><span class="sw"></span><span id="legend-trend-projected-text">Projected</span></span>
-          <span class="lg trend-yesterday" id="legend-trend-yesterday"><span class="sw"></span>Yesterday</span>
+          <span class="lg trend-yesterday" id="legend-trend-yesterday"><span class="sw"></span><span id="legend-trend-yesterday-text">Yesterday</span></span>
           <span class="lg trend-avg" id="legend-trend-avg"><span class="sw"></span><span id="legend-trend-avg-text">7-day avg</span></span>
         </div>
         <p class="muted-note">Hours slept so far at each point of the day, against yesterday and the average over the picked chart window. The dashed tail continues today's line the way the average day usually plays out.</p>