Implemented all 9 UI fixes across health charts and activity detail pages. Changes are ready to push to git for the Docker build to pick them up.

2026-06-07 19:57:25 +01:00
parent 67fd4b3c96
commit 45ff4c26aa
11 changed files with 1548 additions and 378 deletions
@@ -1,6 +1,9 @@
 import { formatDuration, formatDistance, formatPace, formatHeartRate, formatCadence } from '../../utils/format'

+const RUNNING_TYPES = new Set(['running', 'hiking', 'walking'])
+
 export default function LapTable({ laps, sportType }) {
+  const showPower = !RUNNING_TYPES.has(sportType?.toLowerCase())
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
@@ -12,7 +15,7 @@ export default function LapTable({ laps, sportType }) {
            <th className="text-right pb-2 font-medium">Pace</th>
            <th className="text-right pb-2 font-medium">Avg HR</th>
            <th className="text-right pb-2 font-medium">Cadence</th>
-            <th className="text-right pb-2 font-medium">Power</th>
+            {showPower && <th className="text-right pb-2 font-medium">Power</th>}
          </tr>
        </thead>
        <tbody>
@@ -28,9 +31,11 @@ export default function LapTable({ laps, sportType }) {
              <td className="py-2 text-right text-gray-400">
                {lap.avg_cadence ? formatCadence(lap.avg_cadence, sportType) : '--'}
              </td>
-              <td className="py-2 text-right text-gray-400">
-                {lap.avg_power ? `${Math.round(lap.avg_power)} W` : '--'}
-              </td>
+              {showPower && (
+                <td className="py-2 text-right text-gray-400">
+                  {lap.avg_power ? `${Math.round(lap.avg_power)} W` : '--'}
+                </td>
+              )}
            </tr>
          ))}
        </tbody>
@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom'
+import { useParams, Link } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { useState, useMemo } from 'react'
 import api from '../utils/api'
@@ -12,6 +12,16 @@ import {
  formatHeartRate, formatDateTime, formatCadence, sportIcon,
 } from '../utils/format'

+function segmentTime(points, startM, endM) {
+  let t0 = null
+  for (const p of points) {
+    if (t0 === null && p.distance_m >= startM) t0 = new Date(p.timestamp).getTime()
+    if (t0 !== null && p.distance_m >= endM)
+      return (new Date(p.timestamp).getTime() - t0) / 1000
+  }
+  return null
+}
+
 const METRICS = [
  { key: 'heart_rate', label: 'Heart Rate', unit: 'bpm', color: '#f43f5e' },
  { key: 'speed_ms', label: 'Pace / Speed', unit: '', color: '#3b82f6' },
@@ -45,6 +55,18 @@ export default function ActivityDetailPage() {
    enabled: !!activity,
  })

+  const { data: segments } = useQuery({
+    queryKey: ['segments', activity?.named_route_id],
+    queryFn: () => api.get(`/routes/${activity.named_route_id}/segments`).then(r => r.data),
+    enabled: !!activity?.named_route_id,
+  })
+
+  const { data: segmentBests } = useQuery({
+    queryKey: ['segment-bests', activity?.named_route_id],
+    queryFn: () => api.get(`/routes/${activity.named_route_id}/segment-bests`).then(r => r.data),
+    enabled: !!activity?.named_route_id,
+  })
+
  const toggleMetric = (key) => {
    setActiveMetrics(prev =>
      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
@@ -79,26 +101,28 @@ export default function ActivityDetailPage() {
        </div>
      </div>

-      {/* Primary stats */}
-      <div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
+      {/* Stats — all on one row */}
+      <div className="grid grid-cols-5 lg:grid-cols-10 gap-3">
        <StatCard label="Distance" value={formatDistance(activity.distance_m)} />
        <StatCard label="Time" value={formatDuration(activity.duration_s)} />
        <StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type)} />
        <StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m)} />
        <StatCard label="Avg HR" value={formatHeartRate(activity.avg_heart_rate)} accent="red" />
        <StatCard label="Calories" value={activity.calories ? `${Math.round(activity.calories)} kcal` : '--'} />
-      </div>
-
-      {/* Secondary stats */}
-      <div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
        <StatCard label="Max HR" value={formatHeartRate(activity.max_heart_rate)} />
        <StatCard label="Elevation ↓" value={formatElevation(activity.elevation_loss_m)} />
        <StatCard label="Cadence" value={formatCadence(activity.avg_cadence, activity.sport_type)} />
-        <StatCard label="Avg Power" value={activity.avg_power ? `${Math.round(activity.avg_power)} W` : '--'} />
-        <StatCard label="NP" value={activity.normalized_power ? `${Math.round(activity.normalized_power)} W` : '--'} />
        <StatCard label="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
      </div>

+      {/* HR Zones */}
+      {activity.hr_zones && Object.values(activity.hr_zones).some(v => v > 0) && (
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+          <h3 className="text-sm font-medium text-gray-300 mb-3">Heart Rate Zones</h3>
+          <HRZoneBar zones={activity.hr_zones} />
+        </div>
+      )}
+
      {/* Map with controls */}
      <div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
        {/* Map toolbar */}
@@ -143,14 +167,6 @@ export default function ActivityDetailPage() {
        </div>
      </div>

-      {/* HR Zones */}
-      {activity.hr_zones && Object.values(activity.hr_zones).some(v => v > 0) && (
-        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-          <h3 className="text-sm font-medium text-gray-300 mb-3">Heart Rate Zones</h3>
-          <HRZoneBar zones={activity.hr_zones} />
-        </div>
-      )}
-
      {/* Metric timeline */}
      <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
        <div className="flex items-center justify-between mb-4">
@@ -185,11 +201,53 @@ export default function ActivityDetailPage() {
        )}
      </div>

-      {/* Laps */}
-      {laps && laps.length > 0 && (
-        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-          <h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
-          <LapTable laps={laps} sportType={activity.sport_type} />
+      {/* Laps + Segments side by side */}
+      {((laps && laps.length > 0) || (segments && segments.length > 0 && dataPoints)) && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {laps && laps.length > 0 && (
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
+              <LapTable laps={laps} sportType={activity.sport_type} />
+            </div>
+          )}
+          {segments && segments.length > 0 && dataPoints && (
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-medium text-gray-300">Segments</h3>
+                <Link to="/segments" className="text-xs text-blue-400 hover:underline">Manage →</Link>
+              </div>
+              <div className="flex items-center gap-3 pb-1.5 border-b border-gray-800 mb-1">
+                <span className="flex-1 text-xs text-gray-600 uppercase tracking-wide">Segment</span>
+                <span className="font-mono text-xs w-14 text-right text-gray-600 uppercase tracking-wide">This run</span>
+                <span className="font-mono text-xs w-14 text-right text-gray-600 uppercase tracking-wide">Best</span>
+                <span className="font-mono text-xs w-14 text-right text-gray-600 uppercase tracking-wide">Δ</span>
+              </div>
+              <div className="space-y-0.5">
+                {segments.map(seg => {
+                  const t = segmentTime(dataPoints, seg.start_distance_m, seg.end_distance_m)
+                  const best = segmentBests?.find(b => b.segment_id === seg.id)
+                  const isNewBest = t != null && best?.best_s != null && t <= best.best_s + 0.5
+                  const delta = t != null && best?.best_s != null ? t - best.best_s : null
+                  return (
+                    <div key={seg.id} className="flex items-center gap-3 py-1.5 border-b border-gray-800/40 text-sm">
+                      <span className="flex-1 text-gray-300 text-xs truncate">{seg.name}</span>
+                      <span className={`font-mono text-xs w-14 text-right ${isNewBest ? 'text-yellow-400 font-semibold' : 'text-gray-200'}`}>
+                        {t != null ? formatDuration(t) : <span className="text-gray-700">--</span>}
+                      </span>
+                      <span className="font-mono text-xs w-14 text-right text-gray-500">
+                        {best?.best_s != null ? formatDuration(best.best_s) : '--'}
+                      </span>
+                      <span className={`font-mono text-xs w-14 text-right ${
+                        isNewBest ? 'text-yellow-400' : delta == null ? 'text-gray-700' : delta <= 0 ? 'text-green-400' : 'text-red-400'
+                      }`}>
+                        {isNewBest ? '🏆' : delta == null ? '--' : `${delta > 0 ? '+' : ''}${formatDuration(Math.abs(delta))}`}
+                      </span>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
        </div>
      )}
    </div>
@@ -1,13 +1,12 @@
 import { useState, useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, keepPreviousData } from '@tanstack/react-query'
 import {
-  LineChart, Line, AreaChart, Area, BarChart, Bar,
-  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+  AreaChart, Area, BarChart, Bar, ReferenceLine,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell,
 } from 'recharts'
 import { format, subDays } from 'date-fns'
 import api from '../utils/api'
-import StatCard from '../components/ui/StatCard'
-import { formatSleep, formatWeight, formatHeartRate } from '../utils/format'
+import { formatSleep, sportIcon } from '../utils/format'

 const RANGES = [
  { label: '1W', days: 7 },
@@ -18,16 +17,540 @@ const RANGES = [
  { label: '1Y', days: 365 },
 ]

-const tooltipStyle = { background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }
+const tooltipStyle = {
+  background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12,
+}

-function MetricChart({ data, dataKey, color, formatter, height = 140 }) {
+// Normalise any date string to YYYY-MM-DD so XAxis values and ReferenceLine x match.
+const d10 = (s) => (s || '').slice(0, 10)
+
+// ── Daily Snapshot ──────────────────────────────────────────────────────────
+
+function fmtTime(ts) {
+  if (!ts) return '--'
+  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>
+  )
+}
+
+// ── Body Battery ─────────────────────────────────────────────────────────────
+
+const BB_INFERRED_COLOR = {
+  sleep:    '#4f46e5',
+  rest:     '#0d9488',
+  activity: '#f97316',
+  stable:   '#374151',
+}
+const BB_INFERRED_LABEL = {
+  sleep:    'Sleep',
+  rest:     'Rest',
+  activity: 'Active/Stress',
+  stable:   'Stable',
+}
+
+function bbLevelColor(level) {
+  if (level == null) return '#6b7280'
+  if (level >= 75) return '#3b82f6'
+  if (level >= 50) return '#22c55e'
+  if (level >= 25) return '#f59e0b'
+  return '#ef4444'
+}
+
+function inferBBType(tsMs, level, prevLevel, sleepStartMs, sleepEndMs) {
+  const inSleep = sleepStartMs != null && sleepEndMs != null && tsMs >= sleepStartMs && tsMs <= sleepEndMs
+  if (inSleep) return 'sleep'
+  if (prevLevel != null) {
+    if (level > prevLevel + 0.3) return 'rest'
+    if (level < prevLevel - 0.3) return 'activity'
+  }
+  return 'stable'
+}
+
+function ActivityRefLabel({ viewBox, icon }) {
+  if (!viewBox) return null
+  const { x, y } = viewBox
+  return (
+    <text x={x} y={y + 12} textAnchor="middle" fontSize={14} fill="white" style={{ pointerEvents: 'none' }}>
+      {icon}
+    </text>
+  )
+}
+
+function BodyBatteryChart({ bb, hiresValues, sleepStart, sleepEnd, activities }) {
+  if (!bb) return null
+  const { charged, drained, start_level, end_level } = bb
+  if (!hiresValues?.length && !bb.values?.length && end_level == null) return null
+
+  const rawData = hiresValues?.length
+    ? hiresValues.map(([ts, level]) => ({ t: ts, level }))
+    : (bb.values || []).map(([ts, level]) => ({ t: ts, level }))
+
+  if (!rawData.length) return null
+
+  const sleepStartMs = sleepStart ? new Date(sleepStart).getTime() : null
+  const sleepEndMs   = sleepEnd   ? new Date(sleepEnd).getTime()   : null
+
+  const chartData = rawData.map((d, i) => ({
+    ...d,
+    type: inferBBType(d.t, d.level, i > 0 ? rawData[i - 1].level : null, sleepStartMs, sleepEndMs),
+  }))
+
+  const presentTypes = [...new Set(chartData.map(d => d.type))]
+  const levelColor = bbLevelColor(end_level)
+  const maxLevel = chartData.length ? Math.max(...chartData.map(d => d.level)) : null
+
+  return (
+    <div className="bg-gray-900 rounded-xl border border-gray-800 p-4 flex flex-col h-full">
+      <h3 className="text-sm font-medium text-gray-300 mb-2">Body Battery</h3>
+
+      <div className="flex items-baseline gap-3 flex-wrap mb-3">
+        {maxLevel != null && (
+          <span className="text-3xl font-bold" style={{ color: bbLevelColor(maxLevel) }}>{Math.round(maxLevel)}</span>
+        )}
+        {charged != null && (
+          <span className="text-sm font-semibold text-green-400">+{charged}</span>
+        )}
+        {drained != null && (
+          <span className="text-sm font-semibold text-orange-400">-{drained}</span>
+        )}
+        {end_level != null && (
+          <span className="text-xs text-gray-500">now {Math.round(end_level)}</span>
+        )}
+      </div>
+
+      <div className="flex-1">
+        <ResponsiveContainer width="100%" height={100}>
+          <BarChart data={chartData} margin={{ top: 2, right: 4, bottom: 0, left: 28 }} barCategoryGap={0}>
+            <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(chartData.length / 6))} />
+            <YAxis domain={[0, 100]} tick={{ fontSize: 9, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
+              tickFormatter={v => v} ticks={[0, 25, 50, 75, 100]} />
+            <Tooltip contentStyle={tooltipStyle}
+              labelFormatter={ts => format(new Date(ts), 'HH:mm')}
+              formatter={v => [`${Math.round(v)}`, 'Battery']} />
+            <Bar dataKey="level" isAnimationActive={false} radius={0}>
+              {chartData.map((d, i) => (
+                <Cell key={i} fill={BB_INFERRED_COLOR[d.type]} />
+              ))}
+            </Bar>
+            {(activities || []).map(a => (
+              <ReferenceLine
+                key={a.id}
+                x={new Date(a.start_time).getTime()}
+                stroke="rgba(255,255,255,0.3)"
+                strokeWidth={1.5}
+                label={<ActivityRefLabel icon={sportIcon(a.sport_type)} />}
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
+        {presentTypes.map(type => (
+          <div key={type} className="flex items-center gap-1">
+            <div className="w-2 h-2 rounded-sm" style={{ backgroundColor: BB_INFERRED_COLOR[type] }} />
+            <span className="text-xs text-gray-500">{BB_INFERRED_LABEL[type]}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Proper sleep hypnogram: 4 horizontal lanes (Awake/REM/Light/Deep), time on X axis
+const SLEEP_LANE_ORDER = [1, 4, 2, 3]  // top→bottom: awake, rem, light, deep
+const SLEEP_STAGE_COLOR = { 0: '#6b7280', 1: '#eab308', 2: '#a78bfa', 3: '#6366f1', 4: '#8b5cf6' }
+const SLEEP_STAGE_LABEL = { 1: 'Awake', 2: 'Light', 3: 'Deep', 4: 'REM' }
+const LANE_H = 15
+
+function SleepHypnogram({ sleepStart, sleepEnd, stages }) {
+  if (!sleepStart || !sleepEnd || !stages?.length) return null
+  const startMs = new Date(sleepStart).getTime()
+  const endMs   = new Date(sleepEnd).getTime()
+  const windowMs = endMs - startMs
+  if (windowMs <= 0) return null
+
+  // Build segments per lane
+  const segsByLane = {}
+  SLEEP_LANE_ORDER.forEach(lv => { segsByLane[lv] = [] })
+  stages.forEach(([tsMs, level], i) => {
+    if (!(level in segsByLane)) return
+    const nextTs = i + 1 < stages.length ? stages[i + 1][0] : endMs
+    const left  = Math.max(0, (tsMs - startMs) / windowMs * 100)
+    const right = Math.min(100, (nextTs - startMs) / windowMs * 100)
+    const w = right - left
+    if (w > 0) segsByLane[level].push({ left, w })
+  })
+
+  // Hour ticks
+  const sh = new Date(startMs); sh.setMinutes(0, 0, 0); sh.setHours(sh.getHours() + 1)
+  const ticks = []
+  for (let t = sh.getTime(); t < endMs; t += 3600000) {
+    const pct = (t - startMs) / windowMs * 100
+    if (pct >= 0 && pct <= 100)
+      ticks.push({ pct, label: new Date(t).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }) })
+  }
+
+  return (
+    <div className="pl-10">
+      <div className="space-y-px">
+        {SLEEP_LANE_ORDER.map(level => (
+          <div key={level} className="relative flex items-center">
+            <span className="absolute right-full pr-1.5 text-gray-500 whitespace-nowrap select-none"
+              style={{ fontSize: 10 }}>
+              {SLEEP_STAGE_LABEL[level]}
+            </span>
+            <div className="relative flex-1 rounded-sm overflow-hidden bg-gray-800/50" style={{ height: LANE_H }}>
+              {segsByLane[level].map((seg, i) => (
+                <div key={i} className="absolute top-0 h-full"
+                  style={{ left: `${seg.left}%`, width: `${seg.w}%`, backgroundColor: SLEEP_STAGE_COLOR[level] }} />
+              ))}
+              {ticks.map((t, i) => (
+                <div key={i} className="absolute top-0 bottom-0 w-px bg-black/20 pointer-events-none"
+                  style={{ left: `${t.pct}%` }} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="relative h-4 mt-1 ml-0">
+        <span className="absolute left-0 text-gray-500" style={{ fontSize: 10 }}>
+          {new Date(startMs).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}
+        </span>
+        {ticks.map((t, i) => (
+          <span key={i} className="absolute text-gray-600"
+            style={{ left: `${t.pct}%`, transform: 'translateX(-50%)', fontSize: 10 }}>
+            {t.label}
+          </span>
+        ))}
+        <span className="absolute right-0 text-gray-500" style={{ fontSize: 10 }}>
+          {new Date(endMs).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SleepStageFallbackBar({ deepS, remS, lightS, awakeS }) {
+  const total = (deepS || 0) + (remS || 0) + (lightS || 0) + (awakeS || 0)
+  if (!total) return null
+  const segments = [
+    { label: 'Deep',  s: deepS  || 0, color: '#6366f1' },
+    { label: 'REM',   s: remS   || 0, color: '#8b5cf6' },
+    { label: 'Light', s: lightS || 0, color: '#a78bfa' },
+    { label: 'Awake', s: awakeS || 0, color: '#eab308' },
+  ].filter(seg => seg.s > 0)
+  return (
+    <div className="mt-2">
+      <div className="flex h-5 rounded-sm overflow-hidden">
+        {segments.map(seg => (
+          <div key={seg.label} style={{ width: `${(seg.s / total) * 100}%`, backgroundColor: seg.color }} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function HrvBadge({ status }) {
+  if (!status) return null
+  const palette = {
+    balanced:   'text-green-400  bg-green-400/10  border-green-400/30',
+    unbalanced: 'text-yellow-400 bg-yellow-400/10 border-yellow-400/30',
+    low:        'text-orange-400 bg-orange-400/10 border-orange-400/30',
+    poor:       'text-red-400    bg-red-400/10    border-red-400/30',
+  }
+  const cls = palette[status.toLowerCase()] || 'text-gray-400 bg-gray-400/10 border-gray-400/30'
+  return <span className={`text-xs px-2 py-0.5 rounded-full border ${cls}`}>{status}</span>
+}
+
+function NavArrow({ onClick, disabled, children }) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400
+                 hover:text-white hover:bg-gray-800 disabled:opacity-20 disabled:cursor-default
+                 transition-colors text-base font-medium"
+    >
+      {children}
+    </button>
+  )
+}
+
+function DailySnapshot({ day, avg30, intradayHr, bodyBattery, bbHires, sleepStages, activities, onOlder, onNewer, hasOlder, hasNewer }) {
+  if (!day) return (
+    <div className="text-center py-10 text-gray-600">
+      <p className="text-3xl mb-2">📊</p>
+      <p>No health data yet</p>
+      <p className="text-sm mt-1">Import a Garmin export to see your daily snapshot</p>
+    </div>
+  )
+
+  const dateLabel = day.date ? format(new Date(day.date), 'EEEE, d MMMM yyyy') : 'Latest'
+  const hasSleepStages = day.sleep_deep_s || day.sleep_light_s || day.sleep_rem_s
+  const stepsGoal = 10000
+  const stepsPct = day.steps ? Math.min(100, Math.round(day.steps / stepsGoal * 100)) : 0
+
+  const stressLabel = !day.avg_stress ? null
+    : day.avg_stress < 25 ? 'Restful'
+    : day.avg_stress < 50 ? 'Low'
+    : day.avg_stress < 75 ? 'Medium' : 'High'
+  const stressColor = !day.avg_stress ? 'text-white'
+    : day.avg_stress < 25 ? 'text-green-400'
+    : day.avg_stress < 50 ? 'text-yellow-400'
+    : day.avg_stress < 75 ? 'text-orange-400' : 'text-red-400'
+
+  return (
+    <div className="space-y-4">
+
+      {/* Header + arrows */}
+      <div className="flex items-center gap-3">
+        <NavArrow onClick={onOlder} disabled={!hasOlder}>←</NavArrow>
+        <div className="min-w-0">
+          <p className="text-xs text-gray-500 uppercase tracking-wide">Daily snapshot</p>
+          <h2 className="text-xl font-semibold text-white leading-tight">{dateLabel}</h2>
+        </div>
+        <NavArrow onClick={onNewer} disabled={!hasNewer}>→</NavArrow>
+      </div>
+
+      {/* Sleep (wide) + Heart / HRV */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+
+        <div className="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-5 space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-medium text-gray-300">Sleep</h3>
+            {day.sleep_score != null && (
+              <span className="text-xs px-2 py-0.5 rounded-full border border-indigo-400/30 bg-indigo-400/10 text-indigo-300">
+                Score {Math.round(day.sleep_score)}
+              </span>
+            )}
+          </div>
+          <div className="flex items-end gap-3">
+            <span className="text-4xl font-bold text-white tracking-tight">
+              {formatSleep(day.sleep_duration_s)}
+            </span>
+            {day.sleep_start && day.sleep_end && (
+              <span className="text-sm text-gray-500 pb-1">
+                {fmtTime(day.sleep_start)} → {fmtTime(day.sleep_end)}
+              </span>
+            )}
+          </div>
+          {hasSleepStages ? (
+            <>
+              {sleepStages?.length ? (
+                <SleepHypnogram
+                  sleepStart={day.sleep_start} sleepEnd={day.sleep_end}
+                  stages={sleepStages}
+                />
+              ) : (
+                <SleepStageFallbackBar
+                  deepS={day.sleep_deep_s} remS={day.sleep_rem_s}
+                  lightS={day.sleep_light_s} awakeS={day.sleep_awake_s}
+                />
+              )}
+              <div className="flex flex-wrap gap-x-5 gap-y-1.5 mt-2">
+                {[
+                  ['Deep',  day.sleep_deep_s,  '#6366f1'],
+                  ['REM',   day.sleep_rem_s,   '#8b5cf6'],
+                  ['Light', day.sleep_light_s, '#a78bfa'],
+                  ['Awake', day.sleep_awake_s, '#eab308'],
+                ].map(([label, secs, color]) => secs ? (
+                  <div key={label} className="flex items-center gap-1.5">
+                    <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: color }} />
+                    <span className="text-xs text-gray-400">
+                      {label} <span className="text-white">{formatSleep(secs)}</span>
+                    </span>
+                  </div>
+                ) : null)}
+              </div>
+            </>
+          ) : !day.sleep_duration_s ? (
+            <p className="text-sm text-gray-600">No sleep data</p>
+          ) : null}
+        </div>
+
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 space-y-4">
+          <h3 className="text-sm font-medium text-gray-300">Heart & HRV</h3>
+          <div>
+            <p className="text-xs text-gray-500 mb-0.5">Resting HR</p>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-3xl font-bold text-rose-400">
+                {day.resting_hr ? Math.round(day.resting_hr) : '--'}
+              </span>
+              <span className="text-sm text-gray-500">bpm</span>
+            </div>
+            {avg30?.resting_hr && day.resting_hr && (
+              <p className="text-xs text-gray-500 mt-0.5">
+                30d avg {Math.round(avg30.resting_hr)} bpm
+                {day.resting_hr < avg30.resting_hr
+                  ? <span className="text-green-400 ml-1">↓</span>
+                  : day.resting_hr > avg30.resting_hr
+                  ? <span className="text-red-400 ml-1">↑</span>
+                  : null}
+              </p>
+            )}
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 mb-0.5">HRV</p>
+            <div className="flex items-baseline gap-1.5 flex-wrap">
+              <span className="text-3xl font-bold text-violet-400">
+                {day.hrv_nightly_avg ? Math.round(day.hrv_nightly_avg) : '--'}
+              </span>
+              <span className="text-sm text-gray-500">ms</span>
+              <HrvBadge status={day.hrv_status} />
+            </div>
+          </div>
+          {day.avg_hr_day && (
+            <div>
+              <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>
+                {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 + body battery (side by side) */}
+      {(intradayHr?.length > 0 || bodyBattery) && (
+        <div className={`grid gap-4 ${intradayHr?.length > 0 && bodyBattery ? 'grid-cols-1 lg:grid-cols-2' : 'grid-cols-1'}`}>
+          {intradayHr?.length > 0 && (
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4 flex flex-col">
+              <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>
+              <div className="flex-1 min-h-0">
+                <IntradayHrChart values={intradayHr} />
+              </div>
+            </div>
+          )}
+          <BodyBatteryChart bb={bodyBattery} hiresValues={bbHires} sleepStart={day?.sleep_start} sleepEnd={day?.sleep_end} activities={activities} />
+        </div>
+      )}
+
+      {/* Activity strip */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+          <p className="text-xs text-gray-500 mb-1">Steps</p>
+          <div className="flex items-baseline gap-1 mb-2">
+            <span className="text-2xl font-bold text-yellow-400">
+              {day.steps ? day.steps.toLocaleString() : '--'}
+            </span>
+          </div>
+          {day.steps ? (
+            <>
+              <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
+                <div className="h-full bg-yellow-400 rounded-full transition-all"
+                  style={{ width: `${stepsPct}%` }} />
+              </div>
+              <p className="text-xs text-gray-600 mt-1">{stepsPct}% of {stepsGoal.toLocaleString()}</p>
+            </>
+          ) : null}
+          {day.floors_climbed
+            ? <p className="text-xs text-gray-500 mt-1">{day.floors_climbed} floors</p>
+            : null}
+        </div>
+
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+          <p className="text-xs text-gray-500 mb-1">Calories</p>
+          <div className="flex items-baseline gap-1">
+            <span className="text-2xl font-bold text-white">
+              {day.total_calories
+                ? Math.round(day.total_calories)
+                : day.active_calories ? Math.round(day.active_calories) : '--'}
+            </span>
+            <span className="text-xs text-gray-500">kcal</span>
+          </div>
+          {day.active_calories && day.total_calories && (
+            <p className="text-xs text-gray-500 mt-1">Active {Math.round(day.active_calories)} kcal</p>
+          )}
+        </div>
+
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+          <p className="text-xs text-gray-500 mb-1">Stress</p>
+          <div className="flex items-baseline gap-1">
+            <span className={`text-2xl font-bold ${stressColor}`}>
+              {day.avg_stress ? Math.round(day.avg_stress) : '--'}
+            </span>
+            {day.avg_stress && <span className="text-xs text-gray-500">/100</span>}
+          </div>
+          {stressLabel && <p className="text-xs text-gray-500 mt-1">{stressLabel}</p>}
+        </div>
+
+        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+          <p className="text-xs text-gray-500 mb-1">VO2 Max</p>
+          <div className="flex items-baseline gap-1">
+            <span className="text-2xl font-bold text-blue-400">
+              {day.vo2max ? day.vo2max.toFixed(1) : '--'}
+            </span>
+          </div>
+          {day.fitness_age && <p className="text-xs text-gray-500 mt-1">Fitness age {day.fitness_age}</p>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Trend Charts ────────────────────────────────────────────────────────────
+
+function MetricChart({ data, dataKey, color, formatter, height = 140, selectedDate, onDayClick, connectNulls = false, showDots = false, domain, referenceLines }) {
  const vals = data.filter(d => d[dataKey] != null)
  if (!vals.length) return (
    <div className="flex items-center justify-center text-gray-600 text-xs" style={{ height }}>No data</div>
  )
  return (
    <ResponsiveContainer width="100%" height={height}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }}>
+      <AreaChart
+        data={data}
+        margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
+        style={{ cursor: onDayClick ? 'pointer' : 'default' }}
+        onClick={evt => {
+          const p = evt?.activePayload?.[0]?.payload
+          if (p?.date && onDayClick) onDayClick(p.date)
+        }}
+      >
        <defs>
          <linearGradient id={`grad-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor={color} stopOpacity={0.3} />
@@ -38,176 +561,307 @@ function MetricChart({ data, dataKey, color, formatter, height = 140 }) {
        <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
          tickFormatter={d => format(new Date(d), 'MMM d')} interval="preserveStartEnd" />
        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={36}
-          tickFormatter={formatter} />
+          tickFormatter={formatter} domain={domain} />
        <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')}
          formatter={v => [formatter ? formatter(v) : v?.toFixed(1)]} />
+        {selectedDate && (
+          <ReferenceLine x={selectedDate} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
+        )}
+        {(referenceLines || []).map((rl, i) => (
+          <ReferenceLine key={i} {...rl} />
+        ))}
        <Area type="monotone" dataKey={dataKey} stroke={color} strokeWidth={2}
-          fill={`url(#grad-${dataKey})`} dot={false} connectNulls={false} isAnimationActive={false} />
+          fill={`url(#grad-${dataKey})`}
+          dot={showDots ? { fill: color, r: 3, strokeWidth: 0 } : false}
+          connectNulls={connectNulls} isAnimationActive={false} />
      </AreaChart>
    </ResponsiveContainer>
  )
 }

-function SleepChart({ data }) {
+function SleepChart({ data, selectedDate, onDayClick }) {
  const chartData = data.map(d => ({
-    date: d.date,
-    deep: d.sleep_deep_s ? +(d.sleep_deep_s / 3600).toFixed(2) : null,
-    rem: d.sleep_rem_s ? +(d.sleep_rem_s / 3600).toFixed(2) : null,
+    date: d.date,   // already normalised to YYYY-MM-DD
+    deep:  d.sleep_deep_s  ? +(d.sleep_deep_s  / 3600).toFixed(2) : null,
+    rem:   d.sleep_rem_s   ? +(d.sleep_rem_s   / 3600).toFixed(2) : null,
    light: d.sleep_light_s ? +(d.sleep_light_s / 3600).toFixed(2) : null,
    awake: d.sleep_awake_s ? +(d.sleep_awake_s / 3600).toFixed(2) : null,
  }))
  const hasData = chartData.some(d => d.deep || d.rem || d.light)
-  if (!hasData) return <div className="flex items-center justify-center h-36 text-gray-600 text-xs">No sleep data</div>
+  if (!hasData) return (
+    <div className="flex items-center justify-center h-36 text-gray-600 text-xs">No sleep data</div>
+  )
  return (
    <ResponsiveContainer width="100%" height={140}>
-      <BarChart data={chartData} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={6}>
+      <BarChart
+        data={chartData}
+        margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
+        barSize={6}
+        style={{ cursor: onDayClick ? 'pointer' : 'default' }}
+        onClick={evt => {
+          const p = evt?.activePayload?.[0]?.payload
+          if (p?.date && onDayClick) onDayClick(p.date)
+        }}
+      >
        <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
        <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
          tickFormatter={d => format(new Date(d), 'MMM d')} interval="preserveStartEnd" />
        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={24}
          tickFormatter={v => `${v}h`} />
        <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
-        <Bar dataKey="deep" name="Deep" stackId="a" fill="#6366f1" />
-        <Bar dataKey="rem" name="REM" stackId="a" fill="#8b5cf6" />
+        {selectedDate && (
+          <ReferenceLine x={selectedDate} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
+        )}
+        <Bar dataKey="deep"  name="Deep"  stackId="a" fill="#6366f1" />
+        <Bar dataKey="rem"   name="REM"   stackId="a" fill="#8b5cf6" />
        <Bar dataKey="light" name="Light" stackId="a" fill="#a78bfa" />
-        <Bar dataKey="awake" name="Awake" stackId="a" fill="#374151" radius={[2, 2, 0, 0]} />
+        <Bar dataKey="awake" name="Awake" stackId="a" fill="#eab308" radius={[2, 2, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  )
 }

-export default function HealthPage() {
-  const [rangeDays, setRangeDays] = useState(7)  // default 1 week
+// ── Page ─────────────────────────────────────────────────────────────────────

-  const fromDate = useMemo(() => subDays(new Date(), rangeDays).toISOString(), [rangeDays])
+export default function HealthPage() {
+  const [rangeDays, setRangeDays] = useState(7)
+  const [selectedDateStr, setSelectedDateStr] = useState(null)   // YYYY-MM-DD or null = latest
+
+  const fromDate = useMemo(
+    () => format(subDays(new Date(), rangeDays), 'yyyy-MM-dd'),
+    [rangeDays],
+  )

  const { data: summary } = useQuery({
    queryKey: ['health-summary'],
    queryFn: () => api.get('/health-metrics/summary').then(r => r.data),
  })

-  const { data: metrics, isLoading } = useQuery({
-    queryKey: ['health-metrics', rangeDays],
+  // Full history for snapshot navigation.
+  // Key starts with ['health-metrics'] so UploadPage invalidation hits it automatically.
+  const { data: allDays } = useQuery({
+    queryKey: ['health-metrics', 'all'],
    queryFn: () =>
-      api.get('/health-metrics/', {
-        params: { from_date: fromDate, limit: rangeDays + 1 },
-      }).then(r => r.data.slice().reverse()),  // oldest first for charts
-    keepPreviousData: true,
+      api.get('/health-metrics/', { params: { limit: 365 } })
+        .then(r => r.data.map(d => ({ ...d, date: d10(d.date) }))),
  })

-  const latest = summary?.latest
-  const avg30 = summary?.avg_30d
+  // Trend window (changes with range selector).
+  // Dates normalised to YYYY-MM-DD so XAxis values match ReferenceLine x.
+  const { data: rawMetrics, isLoading } = useQuery({
+    queryKey: ['health-metrics', rangeDays],
+    queryFn: () =>
+      api.get('/health-metrics/', { params: { from_date: fromDate, limit: rangeDays + 1 } })
+        .then(r => r.data.slice().reverse().map(d => ({ ...d, date: d10(d.date) }))),
+    placeholderData: keepPreviousData,
+  })
+  const metrics = rawMetrics || []
+
+  // Snapshot navigation: newest-first sorted list of all available days
+  const allDaysSorted = useMemo(
+    () => (allDays || []).slice().sort((a, b) => b.date.localeCompare(a.date)),
+    [allDays],
+  )
+
+  const selectedDay = useMemo(() => {
+    if (!selectedDateStr) return allDaysSorted[0] || null
+    return allDaysSorted.find(d => d.date === selectedDateStr) || null
+  }, [selectedDateStr, allDaysSorted])
+
+  const selectedIdx = useMemo(() => {
+    if (!selectedDay) return -1
+    return allDaysSorted.findIndex(d => d.date === selectedDay.date)
+  }, [selectedDay, allDaysSorted])
+
+  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,
+  })
+
+  const { data: dayActivities } = useQuery({
+    queryKey: ['activities-day', selectedDay?.date],
+    queryFn: () => api.get('/activities/', { params: {
+      from_date: selectedDay.date + 'T00:00:00',
+      to_date:   selectedDay.date + 'T23:59:59',
+      per_page: 20,
+    }}).then(r => r.data),
+    enabled: !!selectedDay?.date,
+  })
+
+  const handleDayClick = (dateStr) => setSelectedDateStr(d10(dateStr))
+  const goOlder = () => {
+    if (selectedIdx < allDaysSorted.length - 1)
+      setSelectedDateStr(allDaysSorted[selectedIdx + 1].date)
+  }
+  const goNewer = () => {
+    if (selectedIdx > 0)
+      setSelectedDateStr(allDaysSorted[selectedIdx - 1].date)
+  }
+
+  // The date string to highlight in charts (only shown if it falls within the current trend window)
+  const selDateForCharts = selectedDay?.date

  return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 space-y-8">
      <h1 className="text-2xl font-bold text-white">Health</h1>

-      {/* Summary cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-        <StatCard label="Resting HR" value={formatHeartRate(latest?.resting_hr)}
-          sub={avg30?.resting_hr ? `30d avg: ${Math.round(avg30.resting_hr)} bpm` : undefined} accent="red" />
-        <StatCard label="HRV" value={latest?.hrv_nightly_avg ? `${Math.round(latest.hrv_nightly_avg)} ms` : '--'}
-          sub={latest?.hrv_status || undefined} />
-        <StatCard label="Sleep" value={formatSleep(latest?.sleep_duration_s)}
-          sub={latest?.sleep_score ? `Score: ${Math.round(latest.sleep_score)}` : undefined} />
-        <StatCard label="Weight" value={formatWeight(latest?.weight_kg)}
-          sub={latest?.body_fat_pct ? `${latest.body_fat_pct.toFixed(1)}% body fat` : undefined} />
-        <StatCard label="VO2 Max" value={latest?.vo2max ? latest.vo2max.toFixed(1) : '--'}
-          sub={latest?.fitness_age ? `Fitness age: ${latest.fitness_age}` : undefined} accent="blue" />
-        <StatCard label="Steps" value={latest?.steps ? latest.steps.toLocaleString() : '--'}
-          sub={avg30?.steps ? `30d avg: ${Math.round(avg30.steps).toLocaleString()}` : undefined} />
-        <StatCard label="Stress" value={latest?.avg_stress ? `${Math.round(latest.avg_stress)}` : '--'} />
-        <StatCard label="SpO2" value={latest?.spo2_avg ? `${latest.spo2_avg.toFixed(1)}%` : '--'} />
-      </div>
+      <DailySnapshot
+        day={selectedDay}
+        avg30={summary?.avg_30d}
+        intradayHr={intradayData?.hr_values}
+        bodyBattery={intradayData?.body_battery}
+        bbHires={intradayData?.body_battery_hires}
+        sleepStages={intradayData?.sleep_stages}
+        activities={dayActivities}
+        onOlder={goOlder}
+        onNewer={goNewer}
+        hasOlder={selectedIdx >= 0 && selectedIdx < allDaysSorted.length - 1}
+        hasNewer={selectedIdx > 0}
+      />

-      {/* Range selector */}
-      <div className="flex gap-2">
-        {RANGES.map(({ label, days }) => (
-          <button key={label} onClick={() => setRangeDays(days)}
-            className={`text-xs px-3 py-1.5 rounded-full border transition-colors ${
-              rangeDays === days ? 'bg-blue-600 border-blue-600 text-white' : 'border-gray-700 text-gray-400 hover:text-white'
-            }`}>
-            {label}
-          </button>
-        ))}
-      </div>
+      <div className="border-t border-gray-800" />

-      {isLoading ? (
-        <div className="text-gray-500 text-sm">Loading…</div>
-      ) : metrics && metrics.length > 0 ? (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-
-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">Resting Heart Rate</h3>
-            <MetricChart data={metrics} dataKey="resting_hr" color="#f43f5e"
-              formatter={v => `${Math.round(v)} bpm`} />
+      <div className="space-y-4">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          <div>
+            <h2 className="text-base font-semibold text-gray-300">Trends</h2>
+            <p className="text-xs text-gray-600">Click any point to load that day above</p>
          </div>
-
-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">HRV (nightly avg)</h3>
-            <MetricChart data={metrics} dataKey="hrv_nightly_avg" color="#8b5cf6"
-              formatter={v => `${Math.round(v)} ms`} />
+          <div className="flex gap-1.5">
+            {RANGES.map(({ label, days }) => (
+              <button key={label} onClick={() => setRangeDays(days)}
+                className={`text-xs px-3 py-1.5 rounded-full border transition-colors ${
+                  rangeDays === days
+                    ? 'bg-blue-600 border-blue-600 text-white'
+                    : 'border-gray-700 text-gray-400 hover:text-white'
+                }`}>
+                {label}
+              </button>
+            ))}
          </div>
+        </div>

-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">Sleep Stages</h3>
-            <SleepChart data={metrics} />
-            <div className="flex gap-4 mt-2">
-              {[['Deep','#6366f1'],['REM','#8b5cf6'],['Light','#a78bfa'],['Awake','#374151']].map(([l,c]) => (
-                <div key={l} className="flex items-center gap-1.5">
-                  <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: c }} />
-                  <span className="text-xs text-gray-400">{l}</span>
-                </div>
-              ))}
+        {isLoading ? (
+          <div className="text-gray-500 text-sm">Loading…</div>
+        ) : metrics.length > 0 ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Resting Heart Rate</h3>
+              <MetricChart data={metrics} dataKey="resting_hr" color="#f43f5e"
+                formatter={v => Math.round(v)}
+                domain={[0, 200]}
+                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
            </div>
-          </div>

-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">Weight</h3>
-            <MetricChart data={metrics} dataKey="weight_kg" color="#34d399"
-              formatter={v => `${v.toFixed(1)} kg`} />
-          </div>
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">HRV (nightly avg)</h3>
+              <MetricChart data={metrics} dataKey="hrv_nightly_avg" color="#8b5cf6"
+                formatter={v => `${Math.round(v)} ms`}
+                selectedDate={selDateForCharts} onDayClick={handleDayClick}
+                referenceLines={[
+                  { y: 20, stroke: '#f59e0b', strokeDasharray: '3 3', label: { value: 'Low', position: 'insideTopRight', fill: '#f59e0b', fontSize: 9 } },
+                  { y: 60, stroke: '#22c55e', strokeDasharray: '3 3', label: { value: 'Good', position: 'insideTopRight', fill: '#22c55e', fontSize: 9 } },
+                ]}
+              />
+            </div>

-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">VO2 Max</h3>
-            <MetricChart data={metrics} dataKey="vo2max" color="#3b82f6" formatter={v => v.toFixed(1)} />
-          </div>
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Sleep</h3>
+              <SleepChart data={metrics}
+                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
+              <div className="flex gap-4 mt-2">
+                {[['Deep','#6366f1'],['REM','#8b5cf6'],['Light','#a78bfa'],['Awake','#eab308']].map(([l,c]) => (
+                  <div key={l} className="flex items-center gap-1.5">
+                    <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: c }} />
+                    <span className="text-xs text-gray-400">{l}</span>
+                  </div>
+                ))}
+              </div>
+            </div>

-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">Daily Steps</h3>
-            <ResponsiveContainer width="100%" height={140}>
-              <BarChart data={metrics} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={6}>
-                <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
-                <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
-                  tickFormatter={d => format(new Date(d), 'MMM d')} interval="preserveStartEnd" />
-                <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={36}
-                  tickFormatter={v => v >= 1000 ? `${(v/1000).toFixed(0)}k` : v} />
-                <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
-                <Bar dataKey="steps" name="Steps" fill="#fbbf24" radius={[2, 2, 0, 0]} isAnimationActive={false} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Weight</h3>
+              <MetricChart
+                data={metrics.filter(d => d.weight_kg != null)}
+                dataKey="weight_kg" color="#34d399"
+                formatter={v => `${v.toFixed(1)} kg`}
+                selectedDate={selDateForCharts} onDayClick={handleDayClick}
+                connectNulls showDots />
+            </div>

-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">Avg Heart Rate (day)</h3>
-            <MetricChart data={metrics} dataKey="avg_hr_day" color="#f97316"
-              formatter={v => `${Math.round(v)} bpm`} />
-          </div>
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Daily Steps</h3>
+              <ResponsiveContainer width="100%" height={140}>
+                <BarChart
+                  data={metrics}
+                  margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
+                  barSize={6}
+                  style={{ cursor: 'pointer' }}
+                  onClick={evt => {
+                    const p = evt?.activePayload?.[0]?.payload
+                    if (p?.date) handleDayClick(p.date)
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
+                  <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
+                    tickFormatter={d => format(new Date(d), 'MMM d')} interval="preserveStartEnd" />
+                  <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={36}
+                    tickFormatter={v => v >= 1000 ? `${(v/1000).toFixed(0)}k` : v} />
+                  <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
+                  {selDateForCharts && (
+                    <ReferenceLine x={selDateForCharts} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
+                  )}
+                  <Bar dataKey="steps" name="Steps" fill="#fbbf24" radius={[2, 2, 0, 0]} isAnimationActive={false} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>

-          <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
-            <h3 className="text-sm font-medium text-gray-300 mb-3">Stress Level</h3>
-            <MetricChart data={metrics} dataKey="avg_stress" color="#a78bfa"
-              formatter={v => Math.round(v)} />
-          </div>
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Stress Level</h3>
+              <MetricChart data={metrics} dataKey="avg_stress" color="#a78bfa"
+                formatter={v => Math.round(v)}
+                domain={[0, 100]}
+                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
+            </div>

-        </div>
-      ) : (
-        <div className="text-center py-16 text-gray-600">
-          <p className="text-4xl mb-3">📊</p>
-          <p className="text-lg">No health data for this period</p>
-          <p className="text-sm mt-1">Import a Garmin export or try a longer date range</p>
-        </div>
-      )}
+            <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">Heart Rate</h3>
+              <MetricChart data={metrics} dataKey="avg_hr_day" color="#f97316"
+                formatter={v => Math.round(v)}
+                domain={[0, 200]}
+                selectedDate={selDateForCharts} onDayClick={handleDayClick} />
+            </div>
+
+            {metrics.some(d => d.body_battery?.end_level != null) && (
+              <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+                <h3 className="text-sm font-medium text-gray-300 mb-3">Body Battery (end of day)</h3>
+                <MetricChart
+                  data={metrics.map(d => ({ ...d, body_battery_level: d.body_battery?.end_level ?? null }))}
+                  dataKey="body_battery_level" color="#3b82f6"
+                  formatter={v => `${Math.round(v)}`}
+                  selectedDate={selDateForCharts} onDayClick={handleDayClick} />
+              </div>
+            )}
+
+            {metrics.some(d => d.vo2max) && (
+              <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
+                <h3 className="text-sm font-medium text-gray-300 mb-3">VO2 Max</h3>
+                <MetricChart data={metrics} dataKey="vo2max" color="#3b82f6"
+                  formatter={v => v.toFixed(1)}
+                  selectedDate={selDateForCharts} onDayClick={handleDayClick} />
+              </div>
+            )}
+
+          </div>
+        ) : (
+          <div className="text-center py-12 text-gray-600">
+            <p className="text-lg">No trend data for this period</p>
+            <p className="text-sm mt-1">Try a longer date range</p>
+          </div>
+        )}
+      </div>
    </div>
  )
 }
@@ -1,19 +1,22 @@
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
 import { format } from 'date-fns'
 import api from '../utils/api'
-import { formatDuration, formatDate } from '../utils/format'
+import { formatDuration, formatDate, formatPace, formatDistance } from '../utils/format'
+import RouteMiniMap from '../components/ui/RouteMiniMap'

-const SPORTS = ['running', 'cycling', 'swimming']
+const SPORTS = ['running', 'cycling']

 const DISTANCE_ORDER = [
  '400m', '800m', '1k', '1 mile', '3k', '5k', '10k',
  'Half marathon', 'Marathon', '50k', '100k',
 ]

-export default function RecordsPage() {
+const TABS = ['Distance PRs', 'Route Records', 'Segment Records']
+
+function DistancePRs() {
  const [sport, setSport] = useState('running')
  const [selectedDistance, setSelectedDistance] = useState(null)

@@ -31,7 +34,6 @@ export default function RecordsPage() {
    enabled: !!selectedDistance,
  })

-  // Sort by standard distance order
  const sortedRecords = records?.slice().sort((a, b) => {
    const ai = DISTANCE_ORDER.indexOf(a.distance_label)
    const bi = DISTANCE_ORDER.indexOf(b.distance_label)
@@ -39,10 +41,7 @@ export default function RecordsPage() {
  })

  return (
-    <div className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold text-white">Personal Records</h1>
-
-      {/* Sport selector */}
+    <div className="space-y-4">
      <div className="flex gap-2">
        {SPORTS.map(s => (
          <button
@@ -67,7 +66,6 @@ export default function RecordsPage() {
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Records table */}
        <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
          <table className="w-full text-sm">
            <thead>
@@ -84,9 +82,7 @@ export default function RecordsPage() {
                  key={rec.id}
                  onClick={() => setSelectedDistance(rec.distance_label)}
                  className={`border-b border-gray-800/50 cursor-pointer transition-colors ${
-                    selectedDistance === rec.distance_label
-                      ? 'bg-blue-900/20'
-                      : 'hover:bg-gray-800/40'
+                    selectedDistance === rec.distance_label ? 'bg-blue-900/20' : 'hover:bg-gray-800/40'
                  }`}
                >
                  <td className="px-4 py-3 font-medium text-white">{rec.distance_label}</td>
@@ -111,52 +107,29 @@ export default function RecordsPage() {
          </table>
        </div>

-        {/* Progress chart */}
        <div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
          {selectedDistance && history ? (
            <>
-              <h3 className="text-sm font-medium text-gray-300 mb-1">
-                {selectedDistance} progression
-              </h3>
+              <h3 className="text-sm font-medium text-gray-300 mb-1">{selectedDistance} progression</h3>
              <p className="text-xs text-gray-600 mb-4">Lower is faster</p>
              {history.length > 1 ? (
                <ResponsiveContainer width="100%" height={220}>
                  <LineChart
-                    data={history.map(h => ({
-                      date: h.achieved_at,
-                      time: h.duration_s,
-                    }))}
+                    data={history.map(h => ({ date: h.achieved_at, time: h.duration_s }))}
                    margin={{ top: 4, right: 4, bottom: 4, left: 8 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
-                    <XAxis
-                      dataKey="date"
-                      tick={{ fontSize: 10, fill: '#6b7280' }}
-                      axisLine={false}
-                      tickLine={false}
-                      tickFormatter={d => format(new Date(d), 'MMM yy')}
-                    />
-                    <YAxis
-                      tick={{ fontSize: 10, fill: '#6b7280' }}
-                      axisLine={false}
-                      tickLine={false}
-                      width={40}
-                      tickFormatter={formatDuration}
-                      reversed
-                    />
+                    <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
+                      tickFormatter={d => format(new Date(d), 'MMM yy')} />
+                    <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
+                      width={40} tickFormatter={formatDuration} reversed />
                    <Tooltip
                      contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
                      labelFormatter={d => format(new Date(d), 'MMM d, yyyy')}
                      formatter={v => [formatDuration(v), 'Time']}
                    />
-                    <Line
-                      type="monotone"
-                      dataKey="time"
-                      stroke="#fbbf24"
-                      strokeWidth={2}
-                      dot={{ fill: '#fbbf24', r: 4 }}
-                      isAnimationActive={false}
-                    />
+                    <Line type="monotone" dataKey="time" stroke="#fbbf24" strokeWidth={2}
+                      dot={{ fill: '#fbbf24', r: 4 }} isAnimationActive={false} />
                  </LineChart>
                </ResponsiveContainer>
              ) : (
@@ -175,3 +148,210 @@ export default function RecordsPage() {
    </div>
  )
 }
+
+function RouteRecords() {
+  const navigate = useNavigate()
+  const { data: records, isLoading } = useQuery({
+    queryKey: ['route-records'],
+    queryFn: () => api.get('/records/routes').then(r => r.data),
+  })
+
+  if (isLoading) return <p className="text-gray-500 text-sm">Loading…</p>
+
+  if (!records?.length) return (
+    <div className="text-center py-16 text-gray-600">
+      <p className="text-4xl mb-3">🗺️</p>
+      <p>No route records yet — create named routes and complete activities on them</p>
+    </div>
+  )
+
+  return (
+    <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-xs text-gray-500 border-b border-gray-800 bg-gray-900/80">
+            <th className="px-3 py-3" />
+            <th className="text-left px-3 py-3 font-medium">Route</th>
+            <th className="text-right px-3 py-3 font-medium">Distance</th>
+            <th className="text-right px-3 py-3 font-medium">Best time</th>
+            <th className="text-right px-3 py-3 font-medium">Pace</th>
+            <th className="text-right px-3 py-3 font-medium">Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {records.map(rec => (
+            <tr
+              key={rec.route_id}
+              onClick={() => navigate(`/activities/${rec.activity_id}`)}
+              className="border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors cursor-pointer"
+            >
+              <td className="px-3 py-2">
+                <RouteMiniMap polyline={rec.reference_polyline} sportType={rec.sport_type} width={72} height={50} />
+              </td>
+              <td className="px-3 py-3 font-medium text-white">
+                <span className="capitalize text-xs text-gray-500 mr-2">{rec.sport_type}</span>
+                {rec.route_name}
+              </td>
+              <td className="px-3 py-3 text-right text-gray-400 text-xs">
+                {formatDistance(rec.distance_m)}
+              </td>
+              <td className="px-3 py-3 text-right font-mono text-yellow-400 font-semibold">
+                {formatDuration(rec.duration_s)}
+              </td>
+              <td className="px-3 py-3 text-right text-gray-400 text-xs">
+                {formatPace(rec.avg_speed_ms, rec.sport_type)}
+              </td>
+              <td className="px-3 py-3 text-right text-gray-400 text-xs">
+                {formatDate(rec.start_time)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function SegmentRecords() {
+  const [selectedRouteId, setSelectedRouteId] = useState(null)
+
+  const { data: routes } = useQuery({
+    queryKey: ['routes'],
+    queryFn: () => api.get('/routes/').then(r => r.data),
+  })
+
+  const { data: bests, isLoading } = useQuery({
+    queryKey: ['segment-bests', selectedRouteId],
+    queryFn: () => api.get(`/routes/${selectedRouteId}/segment-bests`).then(r => r.data),
+    enabled: !!selectedRouteId,
+  })
+
+  const kmBests = (bests || []).filter(b => b.name?.startsWith('km '))
+  const theoreticalBest = kmBests.length && kmBests.every(b => b.best_s != null)
+    ? kmBests.reduce((sum, b) => sum + b.best_s, 0)
+    : null
+
+  if (!routes?.length) return (
+    <p className="text-sm text-gray-600">
+      No named routes yet.{' '}
+      <Link to="/routes" className="text-blue-400 hover:underline">Create one on the Routes page.</Link>
+    </p>
+  )
+
+  return (
+    <div className="space-y-4">
+      {/* Route tile grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+        {routes.map(r => (
+          <button
+            key={r.id}
+            onClick={() => setSelectedRouteId(r.id === selectedRouteId ? null : r.id)}
+            className={`text-left rounded-xl border p-2 transition-colors ${
+              selectedRouteId === r.id
+                ? 'border-blue-500 bg-blue-900/20'
+                : 'border-gray-800 bg-gray-900 hover:border-gray-600'
+            }`}
+          >
+            <RouteMiniMap
+              polyline={r.reference_polyline}
+              sportType={r.sport_type}
+              width="100%"
+              height={80}
+            />
+            <p className="text-xs font-medium text-white mt-2 truncate">{r.name}</p>
+            {r.distance_m && (
+              <p className="text-xs text-gray-500">{(r.distance_m / 1000).toFixed(1)} km</p>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {selectedRouteId && (
+        isLoading ? (
+          <p className="text-gray-500 text-sm">Loading…</p>
+        ) : !bests?.length ? (
+          <p className="text-gray-600 text-sm">
+            No segments for this route.{' '}
+            <Link to="/segments" className="text-blue-400 hover:underline">Create some on the Segments page.</Link>
+          </p>
+        ) : (
+          <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-xs text-gray-500 border-b border-gray-800 bg-gray-900/80">
+                  <th className="text-left px-4 py-3 font-medium">Segment</th>
+                  <th className="text-right px-4 py-3 font-medium">Length</th>
+                  <th className="text-right px-4 py-3 font-medium">Best time</th>
+                  <th className="text-right px-4 py-3 font-medium">Runs</th>
+                  <th className="px-4 py-3" />
+                </tr>
+              </thead>
+              <tbody>
+                {bests.map(b => (
+                  <tr key={b.segment_id} className="border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors">
+                    <td className="px-4 py-3 text-gray-200">
+                      {b.name}
+                      {b.auto_generated && <span className="ml-2 text-xs text-gray-600">(auto)</span>}
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-500 text-xs">
+                      {formatDistance(b.end_distance_m - b.start_distance_m)}
+                    </td>
+                    <td className="px-4 py-3 text-right font-mono font-semibold">
+                      {b.best_s != null
+                        ? <span className="text-yellow-400">{formatDuration(b.best_s)}</span>
+                        : <span className="text-gray-700">--</span>}
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-500 text-xs">{b.count}</td>
+                    <td className="px-4 py-3 text-right">
+                      {b.best_activity_id && (
+                        <Link to={`/activities/${b.best_activity_id}`} className="text-xs text-blue-400 hover:underline">
+                          View →
+                        </Link>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {theoreticalBest != null && (
+              <div className="flex items-center justify-between px-4 py-3 border-t border-gray-800 bg-gray-900/60">
+                <span className="text-xs text-gray-500">Theoretical best (1km splits only)</span>
+                <span className="font-mono text-sm font-semibold text-blue-400">{formatDuration(theoreticalBest)}</span>
+              </div>
+            )}
+          </div>
+        )
+      )}
+    </div>
+  )
+}
+
+export default function RecordsPage() {
+  const [tab, setTab] = useState('Distance PRs')
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold text-white">Records</h1>
+
+      <div className="flex gap-2 flex-wrap">
+        {TABS.map(t => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`text-sm px-4 py-1.5 rounded-full border transition-colors ${
+              tab === t
+                ? 'bg-blue-600 border-blue-600 text-white'
+                : 'border-gray-700 text-gray-400 hover:text-white'
+            }`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'Distance PRs' && <DistancePRs />}
+      {tab === 'Route Records' && <RouteRecords />}
+      {tab === 'Segment Records' && <SegmentRecords />}
+    </div>
+  )
+}
@@ -1,12 +1,151 @@
 import { useState } from 'react'
+import { Link } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import api from '../utils/api'
 import { formatDistance, formatDuration, formatDate, formatPace, sportIcon } from '../utils/format'

+function formatSegDist(m) {
+  if (m == null) return '--'
+  return m >= 1000 ? `${(m / 1000).toFixed(2)} km` : `${Math.round(m)} m`
+}
+
+function SegmentsPanel({ routeId, sportType }) {
+  const qc = useQueryClient()
+
+  const { data: segments } = useQuery({
+    queryKey: ['segments', routeId],
+    queryFn: () => api.get(`/routes/${routeId}/segments`).then(r => r.data),
+  })
+
+  const { data: bests } = useQuery({
+    queryKey: ['segment-bests', routeId],
+    queryFn: () => api.get(`/routes/${routeId}/segment-bests`).then(r => r.data),
+  })
+
+  const deleteSeg = useMutation({
+    mutationFn: segId => api.delete(`/routes/${routeId}/segments/${segId}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['segments', routeId] })
+      qc.invalidateQueries({ queryKey: ['segment-bests', routeId] })
+    },
+  })
+
+  if (!segments?.length) return null
+
+  const bestMap = Object.fromEntries((bests || []).map(b => [b.segment_id, b]))
+
+  const kmSplits = segments.filter(s => s.name.startsWith('km '))
+  const hillsTurns = segments.filter(s => !s.name.startsWith('km '))
+
+  const kmBests = (bests || []).filter(b => b.name?.startsWith('km '))
+  const theoreticalBest = kmBests.length && kmBests.every(b => b.best_s != null)
+    ? kmBests.reduce((sum, b) => sum + b.best_s, 0)
+    : null
+
+  const renderGroup = (group, title) => {
+    if (!group.length) return null
+    return (
+      <div className="space-y-1">
+        <p className="text-xs font-medium text-gray-500 uppercase tracking-wide">{title}</p>
+        {group.map(seg => {
+          const best = bestMap[seg.id]
+          return (
+            <div key={seg.id} className="flex items-center gap-3 py-1.5 border-b border-gray-800/50 text-sm">
+              <span className="flex-1 text-gray-300 text-xs truncate">{seg.name}</span>
+              <span className="text-gray-600 text-xs">{formatSegDist(seg.end_distance_m - seg.start_distance_m)}</span>
+              {best?.best_s != null ? (
+                <span className="font-mono text-yellow-400 text-xs w-14 text-right">{formatDuration(best.best_s)}</span>
+              ) : (
+                <span className="text-gray-700 text-xs w-14 text-right">--</span>
+              )}
+              <button
+                onClick={() => { if (confirm(`Delete "${seg.name}"?`)) deleteSeg.mutate(seg.id) }}
+                className="text-gray-700 hover:text-red-400 transition-colors text-xs ml-1"
+                title="Delete segment"
+              >✕</button>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="border-t border-gray-800 pt-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-gray-400">Segments</h3>
+        <Link to="/segments" className="text-xs text-blue-400 hover:underline">Manage →</Link>
+      </div>
+      {renderGroup(kmSplits, '1km Splits')}
+      {renderGroup(hillsTurns, 'Hills & Turns')}
+      {theoreticalBest != null && (
+        <div className="flex items-center justify-between pt-1 border-t border-gray-800/50">
+          <span className="text-xs text-gray-500">Theoretical best (1km splits only)</span>
+          <span className="font-mono text-xs font-semibold text-blue-400">{formatDuration(theoreticalBest)}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Decode Google encoded polyline to [[lat,lng], ...]
+function decodePolyline(encoded) {
+  if (!encoded) return []
+  const points = []
+  let idx = 0, lat = 0, lng = 0
+  while (idx < encoded.length) {
+    let shift = 0, result = 0, byte
+    do { byte = encoded.charCodeAt(idx++) - 63; result |= (byte & 0x1f) << shift; shift += 5 } while (byte >= 0x20)
+    lat += result & 1 ? ~(result >> 1) : result >> 1
+    shift = 0; result = 0
+    do { byte = encoded.charCodeAt(idx++) - 63; result |= (byte & 0x1f) << shift; shift += 5 } while (byte >= 0x20)
+    lng += result & 1 ? ~(result >> 1) : result >> 1
+    points.push([lat / 1e5, lng / 1e5])
+  }
+  return points
+}
+
+function RouteMap({ polyline, className = '', sportType = '' }) {
+  const pts = decodePolyline(polyline)
+  if (pts.length < 2) return (
+    <div className={`bg-gray-800 rounded flex items-center justify-center text-gray-600 text-xs ${className}`}>
+      no track
+    </div>
+  )
+  const t = (sportType || '').toLowerCase()
+  const stroke = (t.includes('cycl') || t.includes('bike') || t.includes('ride')) ? '#f97316' : '#3b82f6'
+  const lats = pts.map(p => p[0]), lngs = pts.map(p => p[1])
+  const minLat = Math.min(...lats), maxLat = Math.max(...lats)
+  const minLng = Math.min(...lngs), maxLng = Math.max(...lngs)
+  const rangeL = maxLng - minLng || 1e-5
+  const rangeA = maxLat - minLat || 1e-5
+  const pad = 4
+  const w = 100, h = 60
+  const toX = lng => pad + ((lng - minLng) / rangeL) * (w - pad * 2)
+  const toY = lat => pad + ((maxLat - lat) / rangeA) * (h - pad * 2)
+  const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${toX(p[1]).toFixed(1)},${toY(p[0]).toFixed(1)}`).join(' ')
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} className={`bg-gray-800 rounded ${className}`} xmlns="http://www.w3.org/2000/svg">
+      <path d={d} fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+function routeSportStyle(sportType) {
+  const t = (sportType || '').toLowerCase()
+  if (t.includes('cycl') || t.includes('bike') || t.includes('ride'))
+    return { border: 'border-orange-500/50', selected: 'border-orange-500 bg-orange-900/20', accent: 'text-orange-400', color: '#f97316' }
+  if (t.includes('run') || t.includes('jog') || t.includes('walk'))
+    return { border: 'border-blue-500/30', selected: 'border-blue-500 bg-blue-900/20', accent: 'text-blue-400', color: '#3b82f6' }
+  return { border: 'border-gray-800', selected: 'border-gray-500 bg-gray-800/50', accent: 'text-gray-400', color: '#6b7280' }
+}
+
 export default function RoutesPage() {
  const [selected, setSelected] = useState(null)
  const [showCreate, setShowCreate] = useState(false)
  const [newRoute, setNewRoute] = useState({ name: '', activity_id: '' })
+  const [merging, setMerging] = useState(false)
+  const [mergeTarget, setMergeTarget] = useState('')
  const qc = useQueryClient()

  const { data: routes } = useQuery({
@@ -14,6 +153,9 @@ export default function RoutesPage() {
    queryFn: () => api.get('/routes/').then(r => r.data),
  })

+  // Sort by most completions first
+  const sortedRoutes = [...(routes || [])].sort((a, b) => (b.activity_count || 0) - (a.activity_count || 0))
+
  const { data: routeActivities } = useQuery({
    queryKey: ['route-activities', selected?.id],
    queryFn: () => api.get(`/routes/${selected.id}/activities`).then(r => r.data),
@@ -27,8 +169,8 @@ export default function RoutesPage() {
  })

  const createRoute = useMutation({
-    mutationFn: (data) => api.post('/routes/', data).then(r => r.data),
-    onSuccess: (route) => {
+    mutationFn: data => api.post('/routes/', data).then(r => r.data),
+    onSuccess: route => {
      qc.invalidateQueries({ queryKey: ['routes'] })
      setShowCreate(false)
      setNewRoute({ name: '', activity_id: '' })
@@ -36,7 +178,27 @@ export default function RoutesPage() {
    },
  })

+  const mergeRoute = useMutation({
+    mutationFn: ({ into, from }) => api.post(`/routes/${into}/merge/${from}`).then(r => r.data),
+    onSuccess: updated => {
+      qc.invalidateQueries({ queryKey: ['routes'] })
+      qc.invalidateQueries({ queryKey: ['route-activities', updated.id] })
+      setMerging(false)
+      setMergeTarget('')
+      setSelected(updated)
+    },
+  })
+
+  const deleteRoute = useMutation({
+    mutationFn: id => api.delete(`/routes/${id}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['routes'] })
+      setSelected(null)
+    },
+  })
+
  const fastest = routeActivities?.[0]
+  const otherRoutes = routes?.filter(r => r.id !== selected?.id && r.sport_type === selected?.sport_type) ?? []

  return (
    <div className="p-6 space-y-6">
@@ -53,7 +215,7 @@ export default function RoutesPage() {
        </button>
      </div>

-      {/* Create route */}
+      {/* Create route panel */}
      {showCreate && (
        <div className="bg-gray-900 border border-gray-700 rounded-xl p-5 space-y-4">
          <h3 className="text-sm font-semibold text-white">Create named route</h3>
@@ -63,34 +225,25 @@ export default function RoutesPage() {
          <div className="space-y-3">
            <div>
              <label className="text-xs text-gray-400 mb-1 block">Route name</label>
-              <input value={newRoute.name}
-                onChange={e => setNewRoute(r => ({ ...r, name: e.target.value }))}
+              <input value={newRoute.name} onChange={e => setNewRoute(r => ({ ...r, name: e.target.value }))}
                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="e.g. Morning park loop" />
            </div>
            <div>
              <label className="text-xs text-gray-400 mb-1 block">Reference activity (last 2 weeks)</label>
-              {recentActivities?.length === 0 ? (
-                <p className="text-xs text-gray-600 py-2">No recent activities found.</p>
-              ) : (
-                <select
-                  value={newRoute.activity_id}
-                  onChange={e => setNewRoute(r => ({ ...r, activity_id: e.target.value }))}
-                  className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Select an activity…</option>
-                  {recentActivities?.map(a => (
-                    <option key={a.id} value={a.id}>
-                      {sportIcon(a.sport_type)} {a.name} — {formatDistance(a.distance_m)} on {formatDate(a.start_time)}
-                    </option>
-                  ))}
-                </select>
-              )}
+              <select value={newRoute.activity_id} onChange={e => setNewRoute(r => ({ ...r, activity_id: e.target.value }))}
+                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <option value="">Select an activity…</option>
+                {recentActivities?.map(a => (
+                  <option key={a.id} value={a.id}>
+                    {sportIcon(a.sport_type)} {a.name} — {formatDistance(a.distance_m)} on {formatDate(a.start_time)}
+                  </option>
+                ))}
+              </select>
            </div>
          </div>
          <div className="flex gap-3">
-            <button
-              onClick={() => createRoute.mutate({ ...newRoute, activity_id: parseInt(newRoute.activity_id) })}
+            <button onClick={() => createRoute.mutate({ ...newRoute, activity_id: parseInt(newRoute.activity_id) })}
              disabled={!newRoute.name || !newRoute.activity_id || createRoute.isPending}
              className="bg-blue-600 hover:bg-blue-700 disabled:opacity-40 text-white text-sm px-4 py-2 rounded-lg transition-colors">
              Create
@@ -103,49 +256,105 @@ export default function RoutesPage() {
        </div>
      )}

-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Route list */}
-        <div className="space-y-2">
-          {routes?.length === 0 && !showCreate && (
-            <div className="text-center py-12 text-gray-600">
-              <p className="text-3xl mb-2">🗺️</p>
-              <p className="text-sm">No named routes yet</p>
-              <p className="text-xs mt-1">Routes are created automatically when you repeat a run, or create one manually above.</p>
-            </div>
-          )}
-          {routes?.map(route => (
-            <button key={route.id} onClick={() => setSelected(route)}
-              className={`w-full text-left p-4 rounded-xl border transition-all ${
-                selected?.id === route.id ? 'bg-blue-900/20 border-blue-700' : 'bg-gray-900 border-gray-800 hover:border-gray-600'
-              }`}>
-              <div className="flex items-start justify-between">
-                <p className="font-medium text-white">{route.name}</p>
-                {route.auto_detected && (
-                  <span className="text-xs bg-gray-800 text-gray-400 px-2 py-0.5 rounded-full ml-2">auto</span>
-                )}
-              </div>
-              <div className="flex gap-3 mt-1 text-xs text-gray-500">
-                <span>{formatDistance(route.distance_m)}</span>
-                {route.sport_type && <span className="capitalize">{route.sport_type}</span>}
-                <span>{formatDate(route.created_at)}</span>
-              </div>
-            </button>
-          ))}
+      {/* Route tile grid */}
+      {routes?.length === 0 && !showCreate ? (
+        <div className="text-center py-12 text-gray-600">
+          <p className="text-3xl mb-2">🗺️</p>
+          <p className="text-sm">No named routes yet</p>
+          <p className="text-xs mt-1">Routes are created automatically when you repeat a run, or create one manually above.</p>
        </div>
-
-        {/* Route detail */}
-        {selected && (
-          <div className="lg:col-span-2 space-y-4">
-            <div className="bg-gray-900 rounded-xl border border-gray-800 p-5">
-              <div className="flex items-start justify-between mb-3">
-                <h2 className="text-lg font-semibold text-white">{selected.name}</h2>
-                {selected.auto_detected && (
-                  <span className="text-xs bg-blue-900/40 text-blue-400 border border-blue-700/40 px-2 py-0.5 rounded-full">
-                    Auto-detected
-                  </span>
+      ) : (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
+          {sortedRoutes.map(route => {
+            const style = routeSportStyle(route.sport_type)
+            const isSelected = selected?.id === route.id
+            return (
+              <button key={route.id}
+                onClick={() => { setSelected(isSelected ? null : route); setMerging(false) }}
+                className={`text-left rounded-xl border p-2 transition-all ${
+                  isSelected ? style.selected : `bg-gray-900 ${style.border} hover:border-gray-600`
+                }`}>
+                <RouteMap polyline={route.reference_polyline} className="w-full h-20" sportType={route.sport_type} />
+                <p className="text-xs font-medium text-white mt-2 truncate">{route.name}</p>
+                <div className="flex items-center justify-between mt-0.5 gap-1">
+                  <span className="text-xs text-gray-500">{formatDistance(route.distance_m)}</span>
+                  {route.activity_count > 0 && (
+                    <span className={`text-xs font-medium ${style.accent}`}>
+                      {route.activity_count}×
+                    </span>
+                  )}
+                </div>
+                {route.auto_detected && (
+                  <span className="text-xs text-gray-600">auto</span>
                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Route detail — shown below the tile grid when a route is selected */}
+      {selected && (
+        <div className="space-y-4">
+          <div className="bg-gray-900 rounded-xl border border-gray-800 p-5">
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex gap-4 items-start">
+                  <RouteMap polyline={selected.reference_polyline} className="w-36 h-24 flex-shrink-0" sportType={selected.sport_type} />
+                  <div>
+                    <h2 className="text-lg font-semibold text-white">{selected.name}</h2>
+                    <div className="flex flex-wrap gap-2 mt-1 text-xs text-gray-500">
+                      {selected.sport_type && <span className="capitalize">{selected.sport_type}</span>}
+                      <span>{formatDistance(selected.distance_m)}</span>
+                      {selected.auto_detected && (
+                        <span className="text-blue-400 border border-blue-700/40 px-1.5 py-0.5 rounded-full">Auto-detected</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex gap-2 flex-shrink-0">
+                  <button onClick={() => { setMerging(m => !m); setMergeTarget('') }}
+                    className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-lg transition-colors">
+                    Merge
+                  </button>
+                  <button
+                    onClick={() => { if (confirm(`Delete "${selected.name}"? Activities will be unlinked.`)) deleteRoute.mutate(selected.id) }}
+                    className="text-xs text-red-500 hover:text-red-400 px-2 py-1.5 rounded-lg transition-colors">
+                    Delete
+                  </button>
+                </div>
              </div>

+              {/* Merge panel */}
+              {merging && (
+                <div className="mb-4 bg-yellow-900/20 border border-yellow-700/40 rounded-lg p-3 space-y-2">
+                  <p className="text-xs text-yellow-400 font-medium">Merge another route into this one</p>
+                  <p className="text-xs text-gray-500">All activities from the selected route will be moved here, then the other route will be deleted.</p>
+                  <div className="flex gap-2">
+                    <select value={mergeTarget} onChange={e => setMergeTarget(e.target.value)}
+                      className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
+                      <option value="">Select route to merge in…</option>
+                      {otherRoutes.map(r => (
+                        <option key={r.id} value={r.id}>{r.name} ({formatDistance(r.distance_m)})</option>
+                      ))}
+                    </select>
+                    <button
+                      disabled={!mergeTarget || mergeRoute.isPending}
+                      onClick={() => mergeRoute.mutate({ into: selected.id, from: parseInt(mergeTarget) })}
+                      className="bg-yellow-600 hover:bg-yellow-700 disabled:opacity-40 text-white text-sm px-4 py-2 rounded-lg transition-colors">
+                      Merge
+                    </button>
+                    <button onClick={() => setMerging(false)}
+                      className="text-gray-400 hover:text-white text-sm px-3 py-2 rounded-lg transition-colors">
+                      Cancel
+                    </button>
+                  </div>
+                  {otherRoutes.length === 0 && (
+                    <p className="text-xs text-gray-600">No other {selected.sport_type} routes to merge with.</p>
+                  )}
+                </div>
+              )}
+
+              {/* Course record */}
              {fastest && (
                <div className="bg-yellow-900/20 border border-yellow-700/40 rounded-lg p-3 mb-4">
                  <p className="text-xs text-yellow-600 mb-1">Course record 🏆</p>
@@ -158,13 +367,15 @@ export default function RoutesPage() {
                </div>
              )}

+              {/* Activity list */}
              <h3 className="text-sm font-medium text-gray-400 mb-2">
-                All runs ({routeActivities?.length ?? 0})
+                All completions ({routeActivities?.length ?? 0})
              </h3>
-              <div className="space-y-2">
+              <div className="space-y-1">
                {routeActivities?.map((act, i) => (
-                  <div key={act.id} className="flex items-center gap-4 py-2 border-b border-gray-800/50 text-sm">
-                    <span className="text-gray-600 w-5 text-right">{i + 1}</span>
+                  <Link key={act.id} to={`/activities/${act.id}`}
+                    className="flex items-center gap-4 px-2 py-2 rounded-lg hover:bg-gray-800/60 transition-colors text-sm group">
+                    <span className="text-gray-600 w-5 text-right flex-shrink-0">{i + 1}</span>
                    <span className="text-gray-400 flex-1">{formatDate(act.start_time)}</span>
                    <span className="font-mono text-white font-medium">{formatDuration(act.duration_s)}</span>
                    <span className="text-gray-500">{formatPace(act.avg_speed_ms, selected.sport_type)}</span>
@@ -174,13 +385,15 @@ export default function RoutesPage() {
                    {i === 0 && (
                      <span className="text-xs bg-yellow-900/40 text-yellow-400 px-2 py-0.5 rounded-full border border-yellow-700/40">CR</span>
                    )}
-                  </div>
+                    <span className="text-gray-700 group-hover:text-gray-400 text-xs transition-colors">→</span>
+                  </Link>
                ))}
              </div>
-            </div>
+
+              <SegmentsPanel routeId={selected.id} sportType={selected.sport_type} />
          </div>
-        )}
-      </div>
+        </div>
+      )}
    </div>
  )
 }