Fix missing avg_hr_day/weight data; add 24hr HR chart to daily snapshot

Backend:
- main.py: add ADD COLUMN IF NOT EXISTS migrations for avg_hr_day, max_hr_day,
  and intraday_hr (JSONB) on health_metrics — these columns were in the model
  but missing from existing DB instances, silently dropping all avg/max HR data.
- models/user.py: add intraday_hr JSON column to HealthMetric.
- garmin_connect_sync.py: fetch body composition (weight, BMI, body fat, muscle
  mass) via get_body_composition() per day, with stats.bodyWeight as fallback.
  Fetch intraday heart rate via get_heart_rates() and store non-null
  [epoch_ms, bpm] pairs in intraday_hr.
- health.py: add GET /health-metrics/intraday?date=YYYY-MM-DD endpoint that
  returns the stored intraday_hr array for a specific day.

Frontend (HealthPage):
- Add IntradayHrChart component: AreaChart rendering the 24-hour HR trace
  with time-of-day x-axis.
- DailySnapshot: show 24-hour HR chart (when intraday data present) above
  the activity strip; add weight + body fat % to the Heart & HRV card;
  show max HR alongside avg HR.
- HealthPage: query /intraday for the selected day and pass data down.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/HealthPage.jsx

@@ -31,6 +31,33 @@ function fmtTime(ts) {
   return new Date(ts).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
 }
 
+function IntradayHrChart({ values }) {
+  if (!values?.length) return null
+  const data = values.map(([ts, hr]) => ({ t: ts, hr }))
+  return (
+    <ResponsiveContainer width="100%" height={100}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
+        <defs>
+          <linearGradient id="grad-intraday-hr" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%"  stopColor="#f43f5e" stopOpacity={0.3} />
+            <stop offset="95%" stopColor="#f43f5e" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <XAxis dataKey="t" tick={{ fontSize: 9, fill: '#6b7280' }} axisLine={false} tickLine={false}
+          tickFormatter={ts => format(new Date(ts), 'HH:mm')}
+          interval={Math.max(1, Math.floor(data.length / 6))} />
+        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
+          tickFormatter={v => Math.round(v)} domain={['auto', 'auto']} />
+        <Tooltip contentStyle={tooltipStyle}
+          labelFormatter={ts => format(new Date(ts), 'HH:mm')}
+          formatter={v => [`${Math.round(v)} bpm`, 'HR']} />
+        <Area type="monotone" dataKey="hr" stroke="#f43f5e" strokeWidth={1.5}
+          fill="url(#grad-intraday-hr)" dot={false} isAnimationActive={false} connectNulls={false} />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}
+
 function SleepStagesBar({ deep, light, rem, awake }) {
   const total = (deep || 0) + (light || 0) + (rem || 0) + (awake || 0)
   if (!total) return null
@@ -71,7 +98,7 @@ function NavArrow({ onClick, disabled, children }) {
   )
 }
 
-function DailySnapshot({ day, avg30, onOlder, onNewer, hasOlder, hasNewer }) {
+function DailySnapshot({ day, avg30, intradayHr, onOlder, onNewer, hasOlder, hasNewer }) {
   if (!day) return (
     <div className="text-center py-10 text-gray-600">
       <p className="text-3xl mb-2">📊</p>
@@ -192,13 +219,36 @@ function DailySnapshot({ day, avg30, onOlder, onNewer, hasOlder, hasNewer }) {
               <p className="text-xs text-gray-500 mb-0.5">Avg HR (day)</p>
               <div className="flex items-baseline gap-1.5">
                 <span className="text-xl font-semibold text-orange-400">{Math.round(day.avg_hr_day)}</span>
-                <span className="text-xs text-gray-500">bpm</span>
+                {day.max_hr_day && <span className="text-xs text-gray-500">/ {Math.round(day.max_hr_day)} max bpm</span>}
+              </div>
+            </div>
+          )}
+          {day.weight_kg && (
+            <div>
+              <p className="text-xs text-gray-500 mb-0.5">Weight</p>
+              <div className="flex items-baseline gap-1.5 flex-wrap">
+                <span className="text-xl font-semibold text-emerald-400">{day.weight_kg.toFixed(1)}</span>
+                <span className="text-xs text-gray-500">kg</span>
+                {day.body_fat_pct && <span className="text-xs text-gray-500">{day.body_fat_pct.toFixed(1)}% fat</span>}
               </div>
             </div>
           )}
         </div>
       </div>
 
+      {/* 24-hour heart rate chart */}
+      {intradayHr?.length > 0 && (
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-sm font-medium text-gray-300">24-hour Heart Rate</h3>
+            {day.avg_hr_day && (
+              <span className="text-xs text-gray-500">avg {Math.round(day.avg_hr_day)} bpm</span>
+            )}
+          </div>
+          <IntradayHrChart values={intradayHr} />
+        </div>
+      )}
+
       {/* Activity strip */}
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
 
@@ -386,6 +436,12 @@ export default function HealthPage() {
         .then(r => r.data.map(d => ({ ...d, date: d10(d.date) }))),
   })
 
+  const { data: intradayData } = useQuery({
+    queryKey: ['health-intraday', selectedDay?.date],
+    queryFn: () => api.get('/health-metrics/intraday', { params: { date: selectedDay.date } }).then(r => r.data),
+    enabled: !!selectedDay?.date,
+  })
+
   // Trend window (changes with range selector).
   // Dates normalised to YYYY-MM-DD so XAxis values match ReferenceLine x.
   const { data: rawMetrics, isLoading } = useQuery({
@@ -433,6 +489,7 @@ export default function HealthPage() {
       <DailySnapshot
         day={selectedDay}
         avg30={summary?.avg_30d}
+        intradayHr={intradayData?.hr_values}
         onOlder={goOlder}
         onNewer={goNewer}
         hasOlder={selectedIdx >= 0 && selectedIdx < allDaysSorted.length - 1}