Add segments, YTD stats, route matching fixes, body battery layout, pace fix

- Segments page: new /segments route with auto-generate (1km splits, turn
  detection, hill detection), manual segment creation, per-segment performance
  times across matched activities; fixed auth on existing segment endpoints
- YTD distance: new /activities/stats/ytd endpoint; Dashboard replaces
  'Total distance' with 'Running this year' + 'Cycling this year'; Activities
  page shows YTD stats row
- Weekly chart click: clicking a Dashboard bar navigates to Activities filtered
  to that week; Activities reads from/to query params with dismissable chip
- Route matching: add ±2.5% distance gate + 3% relative DTW threshold
  (was flat 80m); tighten candidate pre-filter from 80/120% to 95/105%
- Body battery layout: HR chart and body battery now side-by-side at same
  height on large screens instead of stacked full-width
- Pace display fix: MetricTimeline clamps GPS speed outliers before computing
  Y-axis domain; tick formatter guards against v<=0 or v>25 m/s

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

frontend/src/pages/DashboardPage.jsx

@@ -1,7 +1,7 @@
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
-import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays } from 'date-fns'
+import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays, addDays } from 'date-fns'
 import api from '../utils/api'
 import StatCard from '../components/ui/StatCard'
 import {
@@ -10,6 +10,8 @@ import {
 } from '../utils/format'
 
 function WeeklyChart({ activities }) {
+  const navigate = useNavigate()
+
   if (!activities?.length) return (
     <div className="flex items-center justify-center h-36 text-gray-600 text-sm">No activities yet</div>
   )
@@ -23,26 +25,39 @@ function WeeklyChart({ activities }) {
 
   const data = weeks.map(weekStart => {
     const weekKey = format(weekStart, 'MMM d')
-    const weekEnd = new Date(weekStart)
-    weekEnd.setDate(weekEnd.getDate() + 7)
+    const weekEnd = addDays(weekStart, 7)
     const km = activities
       .filter(a => {
         const t = new Date(a.start_time)
         return t >= weekStart && t < weekEnd
       })
       .reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
-    return { week: weekKey, km: parseFloat(km.toFixed(2)) }
+    return {
+      week: weekKey,
+      km: parseFloat(km.toFixed(2)),
+      weekStartISO: format(weekStart, 'yyyy-MM-dd'),
+      weekEndISO: format(weekEnd, 'yyyy-MM-dd'),
+    }
   })
 
+  const handleBarClick = (entry) => {
+    if (entry?.activePayload?.[0]?.payload) {
+      const { weekStartISO, weekEndISO } = entry.activePayload[0].payload
+      navigate(`/activities?from=${weekStartISO}&to=${weekEndISO}`)
+    }
+  }
+
   return (
     <ResponsiveContainer width="100%" height={140}>
-      <BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}>
+      <BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}
+        onClick={handleBarClick} style={{ cursor: 'pointer' }}>
         <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
         <XAxis dataKey="week" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} />
         <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
           tickFormatter={v => `${v.toFixed(0)}`} />
         <Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
-          formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']} />
+          formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']}
+          cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
         <Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
       </BarChart>
     </ResponsiveContainer>
@@ -73,8 +88,12 @@ export default function DashboardPage() {
     queryFn: () => api.get('/records/', { params: { sport_type: 'running' } }).then(r => r.data),
   })
 
+  const { data: ytdStats } = useQuery({
+    queryKey: ['ytd-stats'],
+    queryFn: () => api.get('/activities/stats/ytd').then(r => r.data),
+  })
+
   const latest = healthSummary?.latest
-  const totalDistance = recentActivities?.reduce((s, a) => s + (a.distance_m || 0), 0) ?? 0
 
   return (
     <div className="p-6 space-y-6">
@@ -84,8 +103,8 @@ export default function DashboardPage() {
       </div>
 
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-        <StatCard label="Recent activities" value={recentActivities?.length ?? 0} />
-        <StatCard label="Total distance" value={formatDistance(totalDistance)} accent="blue" />
+        <StatCard label="Running this year" value={ytdStats ? `${ytdStats.running_km.toFixed(0)} km` : '--'} accent="blue" />
+        <StatCard label="Cycling this year" value={ytdStats ? `${ytdStats.cycling_km.toFixed(0)} km` : '--'} accent="orange" />
         <StatCard label="Resting HR" value={formatHeartRate(latest?.resting_hr)} accent="red" />
         <StatCard label="Sleep" value={formatSleep(latest?.sleep_duration_s)} />
       </div>