Dashboard: per-widget add/delete, free placement, VO2/HRV stats, body battery graph, more widgets

- VO2 max and HRV status now available as top-bar stat widgets
- Edit mode can add (palette) and remove (x) individual widgets
- Body Battery widget shows todays intraday graph (fixed collapsing height)
- compactType disabled so widgets stay put and align along top edges (no jumping up)
- New optional widgets: cycling, stress, active calories, floors, VO2 trend, sleep stages, weight trend

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/DashboardPage.jsx

@@ -1,5 +1,5 @@
 import { Link, useNavigate } from 'react-router-dom'
-import { useQuery, useMutation } from '@tanstack/react-query'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState, useEffect, useRef } from 'react'
 import {
   BarChart, Bar, AreaChart, Area, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
@@ -20,6 +20,7 @@ import { BB_INFERRED_COLOR, BB_INFERRED_LABEL, bbLevelColor, inferBBType } from
 const Grid = WidthProvider(GridLayout)
 
 const MEDALS = { 1: '🥇', 2: '🥈', 3: '🥉' }
+const tooltipStyle = { background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12, color: '#fff' }
 
 const HRV_PALETTE = {
   balanced:   'text-green-400  bg-green-400/10  border-green-400/30',
@@ -28,31 +29,59 @@ const HRV_PALETTE = {
   poor:       'text-red-400    bg-red-400/10    border-red-400/30',
 }
 
-// Widget registry + default grid positions (12-col grid). minW/minH keep widgets usable.
+// Compact single-stat widgets. val(health, ytdStats) → display string.
-const WIDGETS = [
+const STAT_DEFS = {
-  { id: 'stats',       default: { x: 0, y: 0,  w: 12, h: 1 }, minW: 4, minH: 1 },
+  stat_steps:      { label: 'Steps today', accent: 'green',  sub: 'goal 10,000', val: h => h.steps != null ? h.steps.toLocaleString() : '--' },
-  { id: 'weekly',      default: { x: 0, y: 1,  w: 6,  h: 3 }, minW: 4, minH: 2 },
+  stat_resting_hr: { label: 'Resting HR',  accent: 'red',    val: h => formatHeartRate(h.resting_hr) },
-  { id: 'bodyBattery', default: { x: 6, y: 1,  w: 3,  h: 3 }, minW: 3, minH: 2 },
+  stat_sleep:      { label: 'Sleep',       accent: 'default', val: h => formatSleep(h.sleep_duration_s) },
-  { id: 'vo2max',      default: { x: 9, y: 1,  w: 3,  h: 3 }, minW: 2, minH: 2 },
+  stat_vo2max:     { label: 'VO₂ max',     accent: 'blue',   val: h => h.vo2max != null ? h.vo2max.toFixed(1) : '--', sub: h => h.fitness_age != null ? `fitness age ${h.fitness_age}` : undefined },
-  { id: 'sleep',       default: { x: 0, y: 4,  w: 5,  h: 3 }, minW: 3, minH: 2 },
+  stat_hrv:        { label: 'HRV status',  accent: 'purple', val: h => h.hrv_nightly_avg != null ? `${Math.round(h.hrv_nightly_avg)} ms` : '--', sub: h => h.hrv_status || undefined },
-  { id: 'hrv',         default: { x: 5, y: 4,  w: 3,  h: 2 }, minW: 2, minH: 2 },
+  stat_running:    { label: 'Running this year', accent: 'blue',   val: (h, y) => y ? `${y.running_km.toFixed(0)} km` : '--' },
-  { id: 'featured',    default: { x: 0, y: 7,  w: 8,  h: 5 }, minW: 4, minH: 3 },
+  stat_cycling:    { label: 'Cycling this year', accent: 'orange', val: (h, y) => y ? `${y.cycling_km.toFixed(0)} km` : '--' },
-  { id: 'recent',      default: { x: 8, y: 7,  w: 4,  h: 5 }, minW: 3, minH: 3 },
+  stat_stress:     { label: 'Stress',          accent: 'purple', val: h => h.avg_stress != null ? Math.round(h.avg_stress) : '--' },
-  { id: 'prs',         default: { x: 0, y: 12, w: 12, h: 2 }, minW: 4, minH: 2 },
+  stat_calories:   { label: 'Active calories', accent: 'orange', val: h => h.active_calories != null ? Math.round(h.active_calories).toLocaleString() : '--' },
-]
+  stat_floors:     { label: 'Floors climbed',  accent: 'green',  val: h => h.floors_climbed != null ? h.floors_climbed : '--' },
-
-// Merge a saved layout with the registry: keep saved positions for known widgets,
-// fall back to defaults for any widget the saved layout doesn't include (e.g. new ones).
-function buildLayout(saved) {
-  const byId = Object.fromEntries((saved || []).map(l => [l.i, l]))
-  return WIDGETS.map(w => {
-    const s = byId[w.id]
-    const pos = s ? { x: s.x, y: s.y, w: s.w, h: s.h } : w.default
-    return { i: w.id, ...pos, minW: w.minW, minH: w.minH }
-  })
 }
 
-// ── Widgets ──────────────────────────────────────────────────────────────────
+// Full widget registry: size defaults + palette label. Stats inherit from STAT_DEFS.
+const WIDGETS = {
+  ...Object.fromEntries(Object.entries(STAT_DEFS).map(([id, d]) => [id, { label: d.label, w: 2, h: 1, minW: 2, minH: 1 }])),
+  weekly:      { label: 'Weekly distance',  w: 6, h: 3, minW: 4, minH: 2 },
+  bodyBattery: { label: 'Body Battery',     w: 4, h: 3, minW: 3, minH: 2 },
+  vo2maxTrend: { label: 'VO₂ max trend',    w: 3, h: 3, minW: 2, minH: 2 },
+  sleepDetail: { label: 'Sleep stages',     w: 5, h: 3, minW: 3, minH: 2 },
+  weight:      { label: 'Weight trend',     w: 3, h: 3, minW: 2, minH: 2 },
+  featured:    { label: 'Latest activity',  w: 8, h: 5, minW: 4, minH: 3 },
+  recent:      { label: 'Recent activities', w: 4, h: 5, minW: 3, minH: 3 },
+  prs:         { label: 'Running PRs',      w: 12, h: 2, minW: 4, minH: 2 },
+}
+
+// Default arrangement (used for new users and to migrate pre-redesign layouts).
+const DEFAULT_LAYOUT = [
+  { i: 'stat_steps', x: 0, y: 0, w: 2, h: 1 },
+  { i: 'stat_resting_hr', x: 2, y: 0, w: 2, h: 1 },
+  { i: 'stat_sleep', x: 4, y: 0, w: 2, h: 1 },
+  { i: 'stat_vo2max', x: 6, y: 0, w: 2, h: 1 },
+  { i: 'stat_hrv', x: 8, y: 0, w: 2, h: 1 },
+  { i: 'stat_running', x: 10, y: 0, w: 2, h: 1 },
+  { i: 'weekly', x: 0, y: 1, w: 6, h: 3 },
+  { i: 'bodyBattery', x: 6, y: 1, w: 4, h: 3 },
+  { i: 'featured', x: 0, y: 4, w: 8, h: 5 },
+  { i: 'recent', x: 8, y: 4, w: 4, h: 5 },
+  { i: 'prs', x: 0, y: 9, w: 12, h: 2 },
+]
+
+const attachMins = (lay) =>
+  lay.filter(l => WIDGETS[l.i]).map(l => ({ ...l, minW: WIDGETS[l.i].minW, minH: WIDGETS[l.i].minH }))
+
+function buildLayout(saved) {
+  const known = (saved || []).filter(l => WIDGETS[l.i])
+  // Migrate old layouts (no stat_* widgets) or empty/missing to the new default.
+  const hasStats = known.some(l => l.i.startsWith('stat_'))
+  return attachMins(known.length && hasStats ? known : DEFAULT_LAYOUT)
+}
+
+// ── Reusable card shell ──────────────────────────────────────────────────────
 
 function Card({ title, viewHref, children, className = '' }) {
   return (
@@ -77,25 +106,15 @@ function Stat({ label, value }) {
   )
 }
 
-function StatsRow({ health, ytdStats }) {
+// ── Chart widgets ────────────────────────────────────────────────────────────
-  return (
-    <div className="grid grid-cols-2 sm:grid-cols-5 gap-3 h-full">
-      <StatCard label="Steps today" value={health.steps != null ? health.steps.toLocaleString() : '--'} accent="green" sub="goal 10,000" />
-      <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(health.resting_hr)} accent="red" />
-      <StatCard label="Sleep" value={formatSleep(health.sleep_duration_s)} />
-    </div>
-  )
-}
 
-function MiniBodyBattery({ bb, hires, sleepStart, sleepEnd }) {
+function BodyBatteryToday({ bb, hires, sleepStart, sleepEnd }) {
-  const raw = (hires?.length ? hires : bb?.values || []).map(([ts, level]) => ({ ts, level }))
+  const raw = (hires?.length ? hires : bb?.values || []).map(([ts, level]) => ({ t: ts, level }))
   const sleepStartMs = sleepStart ? new Date(sleepStart).getTime() : null
   const sleepEndMs   = sleepEnd   ? new Date(sleepEnd).getTime()   : null
   const data = raw.map((d, i) => ({
     ...d,
-    type: inferBBType(d.ts, d.level, i > 0 ? raw[i - 1].level : null, sleepStartMs, sleepEndMs),
+    type: inferBBType(d.t, d.level, i > 0 ? raw[i - 1].level : null, sleepStartMs, sleepEndMs),
   }))
   const charged = bb?.charged, drained = bb?.drained, end_level = bb?.end_level
   const peak = data.length ? Math.max(...data.map(d => d.level)) : end_level
@@ -104,84 +123,114 @@ function MiniBodyBattery({ bb, hires, sleepStart, sleepEnd }) {
 
   return (
     <Card title="Body Battery" viewHref="/health">
-      <div className="flex items-baseline gap-3 flex-wrap">
+      <div className="flex flex-col h-full">
-        {peak != null && (
+        <div className="flex items-baseline gap-3 flex-wrap">
-          <span className="text-3xl font-bold" style={{ color: bbLevelColor(peak) }}>{Math.round(peak)}</span>
+          {peak != null && <span className="text-3xl font-bold" style={{ color: bbLevelColor(peak) }}>{Math.round(peak)}</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>
+        {hasGraph ? (
+          <>
+            <div className="flex-1 min-h-0 mt-2">
+              <ResponsiveContainer width="100%" height="100%" minHeight={80}>
+                <BarChart data={data} margin={{ top: 2, right: 4, bottom: 0, left: 0 }} 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(data.length / 6))} />
+                  <YAxis domain={[0, 100]} tick={{ fontSize: 9, fill: '#6b7280' }} axisLine={false} tickLine={false}
+                    width={26} ticks={[0, 50, 100]} />
+                  <Tooltip contentStyle={tooltipStyle} itemStyle={{ color: '#fff' }} labelStyle={{ color: '#fff' }}
+                    labelFormatter={ts => format(new Date(ts), 'HH:mm')} formatter={v => [`${Math.round(v)}%`, 'Battery']} />
+                  <Bar dataKey="level" isAnimationActive={false} radius={0}>
+                    {data.map((d, i) => <Cell key={i} fill={BB_INFERRED_COLOR[d.type]} />)}
+                  </Bar>
+                </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>
+          </>
+        ) : (
+          <p className="text-xs text-gray-600 mt-3">No body battery data today</p>
         )}
-        {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>
-      {hasGraph ? (
-        <>
-          <div className="mt-3 flex-1 min-h-0">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={data} margin={{ top: 2, right: 0, bottom: 0, left: 0 }} barCategoryGap={0}>
-                <YAxis domain={[0, 100]} hide />
-                <Tooltip
-                  contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 6, fontSize: 11, color: '#fff' }}
-                  itemStyle={{ color: '#fff' }} labelStyle={{ color: '#fff' }}
-                  labelFormatter={ts => format(new Date(ts), 'HH:mm')}
-                  formatter={v => [`${Math.round(v)}%`, 'Battery']}
-                />
-                <Bar dataKey="level" isAnimationActive={false} radius={0}>
-                  {data.map((d, i) => <Cell key={i} fill={BB_INFERRED_COLOR[d.type]} />)}
-                </Bar>
-              </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>
-        </>
-      ) : (
-        <p className="text-xs text-gray-600 mt-3">No body battery data today</p>
-      )}
     </Card>
   )
 }
 
-function Vo2MaxWidget({ health, recentHealth }) {
+function Sparkline({ data, dataKey, color, gradId, fmt }) {
+  return (
+    <ResponsiveContainer width="100%" height="100%" minHeight={60}>
+      <AreaChart data={data} margin={{ top: 4, right: 2, bottom: 0, left: 0 }}>
+        <defs>
+          <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+            <stop offset="95%" stopColor={color} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <YAxis domain={['dataMin - 1', 'dataMax + 1']} hide />
+        <Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d')}
+          formatter={v => [fmt ? fmt(v) : v, '']} />
+        <Area type="monotone" dataKey={dataKey} stroke={color} strokeWidth={2} fill={`url(#${gradId})`}
+          dot={false} connectNulls isAnimationActive={false} />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}
+
+function Vo2MaxTrend({ health, recentHealth }) {
   const series = useMemo(
-    () => [...(recentHealth || [])]
+    () => [...(recentHealth || [])].filter(d => d.vo2max != null)
-      .filter(d => d.vo2max != null)
       .sort((a, b) => new Date(a.date) - new Date(b.date))
       .map(d => ({ date: d.date, v: d.vo2max })),
     [recentHealth],
   )
   return (
     <Card title="VO₂ Max" viewHref="/health">
-      <div className="flex items-baseline gap-2">
+      <div className="flex flex-col h-full">
-        <span className="text-3xl font-bold text-blue-400">{health.vo2max != null ? health.vo2max.toFixed(1) : '--'}</span>
+        <div className="flex items-baseline gap-2">
-        <span className="text-xs text-gray-500">ml/kg/min</span>
+          <span className="text-3xl font-bold text-blue-400">{health.vo2max != null ? health.vo2max.toFixed(1) : '--'}</span>
-      </div>
+          <span className="text-xs text-gray-500">ml/kg/min</span>
-      {health.fitness_age != null && (
-        <p className="text-xs text-gray-500 mt-0.5">Fitness age {health.fitness_age}</p>
-      )}
-      {series.length >= 2 && (
-        <div className="flex-1 min-h-0 mt-2">
-          <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={series} margin={{ top: 4, right: 2, bottom: 0, left: 0 }}>
-              <defs>
-                <linearGradient id="grad-dash-vo2" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
-                  <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
-                </linearGradient>
-              </defs>
-              <YAxis domain={['dataMin - 1', 'dataMax + 1']} hide />
-              <Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 6, fontSize: 11 }}
-                labelFormatter={d => format(new Date(d), 'MMM d')} formatter={v => [v.toFixed(1), 'VO₂ max']} />
-              <Area type="monotone" dataKey="v" stroke="#3b82f6" strokeWidth={2} fill="url(#grad-dash-vo2)"
-                dot={false} connectNulls isAnimationActive={false} />
-            </AreaChart>
-          </ResponsiveContainer>
         </div>
-      )}
+        {health.fitness_age != null && <p className="text-xs text-gray-500 mt-0.5">Fitness age {health.fitness_age}</p>}
+        <div className="flex-1 min-h-0 mt-2">
+          {series.length >= 2
+            ? <Sparkline data={series} dataKey="v" color="#3b82f6" gradId="grad-dash-vo2" fmt={v => v.toFixed(1)} />
+            : <p className="text-xs text-gray-600">Not enough history</p>}
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+function WeightMini({ recentHealth }) {
+  const series = useMemo(
+    () => [...(recentHealth || [])].filter(d => d.weight_kg != null)
+      .sort((a, b) => new Date(a.date) - new Date(b.date))
+      .map(d => ({ date: d.date, w: +d.weight_kg.toFixed(2) })),
+    [recentHealth],
+  )
+  const latest = series.length ? series[series.length - 1].w : null
+  return (
+    <Card title="Weight" viewHref="/health">
+      <div className="flex flex-col h-full">
+        <div className="flex items-baseline gap-2">
+          <span className="text-3xl font-bold text-emerald-300">{latest != null ? latest.toFixed(1) : '--'}</span>
+          <span className="text-xs text-gray-500">kg</span>
+        </div>
+        <div className="flex-1 min-h-0 mt-2">
+          {series.length >= 2
+            ? <Sparkline data={series} dataKey="w" color="#34d399" gradId="grad-dash-weight" fmt={v => `${v.toFixed(1)} kg`} />
+            : <p className="text-xs text-gray-600">Not enough history</p>}
+        </div>
+      </div>
     </Card>
   )
 }
@@ -193,7 +242,7 @@ const SLEEP_STAGES = [
   { key: 'sleep_awake_s', label: 'Awake', color: '#6b7280' },
 ]
 
-function SleepMini({ health }) {
+function SleepDetail({ health }) {
   const total = SLEEP_STAGES.reduce((s, st) => s + (health[st.key] || 0), 0)
   return (
     <Card title="Sleep" viewHref="/health">
@@ -229,60 +278,39 @@ function SleepMini({ health }) {
   )
 }
 
-function HrvWidget({ health }) {
-  const status = health.hrv_status
-  const cls = status ? (HRV_PALETTE[status.toLowerCase()] || 'text-gray-400 bg-gray-400/10 border-gray-400/30') : null
-  return (
-    <Card title="HRV status" viewHref="/health">
-      <div className="flex flex-col items-start justify-center h-full gap-2">
-        <div className="flex items-baseline gap-2">
-          <span className="text-3xl font-bold text-violet-300">{health.hrv_nightly_avg != null ? Math.round(health.hrv_nightly_avg) : '--'}</span>
-          <span className="text-xs text-gray-500">ms</span>
-        </div>
-        {status
-          ? <span className={`text-xs px-2 py-0.5 rounded-full border ${cls}`}>{status}</span>
-          : <span className="text-xs text-gray-600">No HRV status</span>}
-      </div>
-    </Card>
-  )
-}
-
 function WeeklyChart({ activities }) {
   const navigate = useNavigate()
-  if (!activities?.length) return (
+  const data = useMemo(() => {
-    <div className="flex items-center justify-center h-full text-gray-600 text-sm">No activities yet</div>
+    if (!activities?.length) return []
-  )
+    const now = new Date()
-  const now = new Date()
+    const weeks = eachWeekOfInterval({ start: subWeeks(startOfWeek(now), 7), end: startOfWeek(now) })
-  const weeks = eachWeekOfInterval({ start: subWeeks(startOfWeek(now), 7), end: startOfWeek(now) })
+    return weeks.map(weekStart => {
-  const data = weeks.map(weekStart => {
+      const weekEnd = addDays(weekStart, 7)
-    const weekEnd = addDays(weekStart, 7)
+      const km = activities
-    const km = activities
+        .filter(a => { const t = new Date(a.start_time); return t >= weekStart && t < weekEnd })
-      .filter(a => { const t = new Date(a.start_time); return t >= weekStart && t < weekEnd })
+        .reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
-      .reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
+      return { week: format(weekStart, 'MMM d'), km: parseFloat(km.toFixed(2)), weekStartISO: format(weekStart, 'yyyy-MM-dd'), weekEndISO: format(weekEnd, 'yyyy-MM-dd') }
-    return {
+    })
-      week: format(weekStart, 'MMM d'),
+  }, [activities])
-      km: parseFloat(km.toFixed(2)),
+
-      weekStartISO: format(weekStart, 'yyyy-MM-dd'),
-      weekEndISO: format(weekEnd, 'yyyy-MM-dd'),
-    }
-  })
-  const handleBarClick = (entry) => {
-    const p = entry?.activePayload?.[0]?.payload
-    if (p) navigate(`/activities?from=${p.weekStartISO}&to=${p.weekEndISO}`)
-  }
   return (
-    <ResponsiveContainer width="100%" height="100%">
+    <Card title="Weekly distance (km)">
-      <BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}
+      {data.length ? (
-        onClick={handleBarClick} style={{ cursor: 'pointer' }}>
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
-        <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
+          <BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}
-        <XAxis dataKey="week" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} />
+            onClick={e => { const p = e?.activePayload?.[0]?.payload; if (p) navigate(`/activities?from=${p.weekStartISO}&to=${p.weekEndISO}`) }}
-        <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
+            style={{ cursor: 'pointer' }}>
-          tickFormatter={v => `${v.toFixed(0)}`} />
+            <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
-        <Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
+            <XAxis dataKey="week" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} />
-          formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']} cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
+            <YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28} tickFormatter={v => `${v.toFixed(0)}`} />
-        <Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
+            <Tooltip contentStyle={tooltipStyle} formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']} cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
-      </BarChart>
+            <Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
-    </ResponsiveContainer>
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <div className="flex items-center justify-center h-full text-gray-600 text-sm">No activities yet</div>
+      )}
+    </Card>
   )
 }
 
@@ -296,9 +324,7 @@ function FeaturedActivity({ activity, segments }) {
         <div className="flex items-center gap-2 min-w-0">
           <span className="text-xl">{sportIcon(activity.sport_type)}</span>
           <div className="min-w-0">
-            <Link to={`/activities/${activity.id}`} className="text-sm font-semibold text-white hover:text-blue-400 transition-colors truncate block">
+            <Link to={`/activities/${activity.id}`} className="text-sm font-semibold text-white hover:text-blue-400 transition-colors truncate block">{activity.name}</Link>
-              {activity.name}
-            </Link>
             <p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
           </div>
         </div>
@@ -330,15 +356,11 @@ function FeaturedActivity({ activity, segments }) {
               return (
                 <div key={seg.segment_id} className="flex items-center gap-2 text-sm">
                   <span className="flex-1 text-gray-300 text-xs truncate">{seg.name}</span>
-                  <span className={`font-mono text-xs ${isPodium ? 'text-yellow-400 font-semibold' : 'text-gray-200'}`}>
+                  <span className={`font-mono text-xs ${isPodium ? 'text-yellow-400 font-semibold' : 'text-gray-200'}`}>{formatDuration(seg.duration_s)}</span>
-                    {formatDuration(seg.duration_s)}
-                  </span>
                   <span className="w-8 text-right text-xs">
-                    {isPodium
+                    {isPodium ? <span title={`#${seg.rank} of ${seg.effort_count}`}>{MEDALS[seg.rank]}</span>
-                      ? <span title={`#${seg.rank} of ${seg.effort_count}`}>{MEDALS[seg.rank]}</span>
+                      : delta != null ? <span className="text-red-400 font-mono">+{formatDuration(delta)}</span>
-                      : delta != null
+                      : <span className="text-gray-700">--</span>}
-                        ? <span className="text-red-400 font-mono">+{formatDuration(delta)}</span>
-                        : <span className="text-gray-700">--</span>}
                   </span>
                 </div>
               )
@@ -369,9 +391,7 @@ function RecentActivities({ activities }) {
           </Link>
         ))}
         {!activities?.length && (
-          <p className="text-gray-600 text-sm text-center py-8">
+          <p className="text-gray-600 text-sm text-center py-8">No activities yet — <Link to="/upload" className="text-blue-400 hover:underline">import some data</Link></p>
-            No activities yet — <Link to="/upload" className="text-blue-400 hover:underline">import some data</Link>
-          </p>
         )}
       </div>
     </Card>
@@ -404,18 +424,14 @@ export default function DashboardPage() {
     queryKey: ['activities-recent'],
     queryFn: () => api.get('/activities/', { params: { per_page: 10 } }).then(r => r.data),
   })
-
   const { data: allActivities } = useQuery({
     queryKey: ['activities-all-chart'],
-    queryFn: () =>
+    queryFn: () => api.get('/activities/', { params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() } }).then(r => r.data),
-      api.get('/activities/', { params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() } }).then(r => r.data),
   })
-
   const { data: recentHealth } = useQuery({
     queryKey: ['health-metrics', 'dash'],
     queryFn: () => api.get('/health-metrics/', { params: { limit: 365 } }).then(r => r.data),
   })
-
   const { data: profile } = useQuery({
     queryKey: ['profile'],
     queryFn: () => api.get('/profile/').then(r => r.data),
@@ -431,7 +447,6 @@ export default function DashboardPage() {
       sleep_duration_s: pick('sleep_duration_s'),
       sleep_start: latest.sleep_start ?? null,
       sleep_end: latest.sleep_end ?? null,
-      // Sleep stages + score for the latest night (same row as sleep_start).
       sleep_deep_s: latest.sleep_deep_s ?? null,
       sleep_rem_s: latest.sleep_rem_s ?? null,
       sleep_light_s: latest.sleep_light_s ?? null,
@@ -443,6 +458,8 @@ export default function DashboardPage() {
       vo2max: pick('vo2max'),
       fitness_age: pick('fitness_age'),
       avg_stress: pick('avg_stress'),
+      active_calories: pick('active_calories'),
+      floors_climbed: pick('floors_climbed'),
     }
   }, [recentHealth])
 
@@ -451,17 +468,14 @@ export default function DashboardPage() {
     queryFn: () => api.get('/health-metrics/intraday', { params: { date: health.date } }).then(r => r.data),
     enabled: !!health.date,
   })
-
   const { data: records } = useQuery({
     queryKey: ['records-running'],
     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 featured = recentActivities?.[0]
   const { data: featuredSegments } = useQuery({
     queryKey: ['activity-segments', featured?.id],
@@ -471,11 +485,11 @@ export default function DashboardPage() {
 
   // ── Layout state ──────────────────────────────────────────────────────────
   const [editMode, setEditMode] = useState(false)
+  const [addOpen, setAddOpen] = useState(false)
   const [layout, setLayout] = useState(() => buildLayout(null))
   const saveTimer = useRef(null)
   const loadedRef = useRef(false)
 
-  // Apply the saved layout once the profile loads.
   useEffect(() => {
     if (profile && !loadedRef.current) {
       loadedRef.current = true
@@ -483,48 +497,84 @@ export default function DashboardPage() {
     }
   }, [profile])
 
+  const qc = useQueryClient()
+  const stripLayout = (lay) => lay.map(({ i, x, y, w, h }) => ({ i, x, y, w, h }))
   const saveLayout = useMutation({
-    mutationFn: (lay) =>
+    mutationFn: (lay) => api.put('/profile/dashboard-layout', { layout: stripLayout(lay) }),
-      api.put('/profile/dashboard-layout', { layout: lay.map(({ i, x, y, w, h }) => ({ i, x, y, w, h })) }),
+    // Keep the cached profile in sync so re-mounting the page doesn't revert the layout.
+    onSuccess: (_d, lay) => qc.setQueryData(['profile'], p => (p ? { ...p, dashboard_layout: stripLayout(lay) } : p)),
   })
 
+  const persist = (lay) => { clearTimeout(saveTimer.current); saveLayout.mutate(lay) }
+
   const handleLayoutChange = (next) => {
-    setLayout(next)
+    const withMins = attachMins(next)
+    setLayout(withMins)
     if (editMode) {
       clearTimeout(saveTimer.current)
-      saveTimer.current = setTimeout(() => saveLayout.mutate(next), 700)
+      saveTimer.current = setTimeout(() => saveLayout.mutate(withMins), 700)
     }
   }
 
-  const finishEditing = () => {
+  const addWidget = (id) => {
-    clearTimeout(saveTimer.current)
+    if (layout.some(l => l.i === id)) { setAddOpen(false); return }
-    saveLayout.mutate(layout)
+    const maxY = layout.reduce((m, l) => Math.max(m, l.y + l.h), 0)
-    setEditMode(false)
+    const def = WIDGETS[id]
+    const next = attachMins([...layout, { i: id, x: 0, y: maxY, w: def.w, h: def.h }])
+    setLayout(next); persist(next); setAddOpen(false)
+  }
+  const removeWidget = (id) => { const next = layout.filter(l => l.i !== id); setLayout(next); persist(next) }
+
+  const finishEditing = () => { persist(layout); setEditMode(false); setAddOpen(false) }
+  const resetLayout = () => { const def = attachMins(DEFAULT_LAYOUT); setLayout(def); persist(def) }
+
+  const renderWidget = (id) => {
+    if (STAT_DEFS[id]) {
+      const d = STAT_DEFS[id]
+      return <StatCard label={d.label} accent={d.accent} value={d.val(health, ytdStats)}
+        sub={typeof d.sub === 'function' ? d.sub(health) : d.sub} />
+    }
+    switch (id) {
+      case 'weekly':      return <WeeklyChart activities={allActivities} />
+      case 'bodyBattery': return <BodyBatteryToday bb={intraday?.body_battery} hires={intraday?.body_battery_hires} sleepStart={health.sleep_start} sleepEnd={health.sleep_end} />
+      case 'vo2maxTrend': return <Vo2MaxTrend health={health} recentHealth={recentHealth} />
+      case 'sleepDetail': return <SleepDetail health={health} />
+      case 'weight':      return <WeightMini recentHealth={recentHealth} />
+      case 'featured':    return <FeaturedActivity activity={featured} segments={featuredSegments} />
+      case 'recent':      return <RecentActivities activities={recentActivities} />
+      case 'prs':         return <RunningPRs records={records} />
+      default:            return null
+    }
   }
 
-  const resetLayout = () => {
+  const presentIds = new Set(layout.map(l => l.i))
-    const def = buildLayout(null)
+  const available = Object.keys(WIDGETS).filter(id => !presentIds.has(id))
-    setLayout(def)
-    saveLayout.mutate(def)
-  }
-
-  const WIDGET_CONTENT = {
-    stats:       <StatsRow health={health} ytdStats={ytdStats} />,
-    weekly:      <Card title="Weekly distance (km)"><WeeklyChart activities={allActivities} /></Card>,
-    bodyBattery: <MiniBodyBattery bb={intraday?.body_battery} hires={intraday?.body_battery_hires} sleepStart={health.sleep_start} sleepEnd={health.sleep_end} />,
-    vo2max:      <Vo2MaxWidget health={health} recentHealth={recentHealth} />,
-    sleep:       <SleepMini health={health} />,
-    hrv:         <HrvWidget health={health} />,
-    featured:    <FeaturedActivity activity={featured} segments={featuredSegments} />,
-    recent:      <RecentActivities activities={recentActivities} />,
-    prs:         <RunningPRs records={records} />,
-  }
 
   return (
     <div className="p-6">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold text-white">Dashboard</h1>
         <div className="flex items-center gap-3">
+          {editMode && (
+            <div className="relative">
+              <button onClick={() => setAddOpen(o => !o)}
+                className="text-sm font-medium px-3 py-1.5 rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-200 transition-colors">
+                + Add widget
+              </button>
+              {addOpen && (
+                <div className="absolute right-0 mt-1 w-56 max-h-80 overflow-auto bg-gray-900 border border-gray-700 rounded-lg shadow-xl z-50 py-1">
+                  {available.length === 0
+                    ? <p className="text-xs text-gray-500 px-3 py-2">All widgets are on the dashboard</p>
+                    : available.map(id => (
+                      <button key={id} onClick={() => addWidget(id)}
+                        className="block w-full text-left text-sm text-gray-300 hover:bg-gray-800 px-3 py-1.5 transition-colors">
+                        {WIDGETS[id].label}
+                      </button>
+                    ))}
+                </div>
+              )}
+            </div>
+          )}
           {editMode && (
             <button onClick={resetLayout} className="text-xs text-gray-400 hover:text-white transition-colors">Reset layout</button>
           )}
@@ -540,7 +590,7 @@ export default function DashboardPage() {
       </div>
 
       {editMode && (
-        <p className="text-xs text-gray-500 mb-3">Drag widgets to move them, or drag a corner to resize. Changes save automatically.</p>
+        <p className="text-xs text-gray-500 mb-3">Drag to move, drag a corner to resize, or remove a widget with ✕. Add widgets from the menu. Changes save automatically.</p>
       )}
 
       <Grid
@@ -552,13 +602,19 @@ export default function DashboardPage() {
         isDraggable={editMode}
         isResizable={editMode}
         onLayoutChange={handleLayoutChange}
-        compactType="vertical"
+        compactType={null}
+        preventCollision={false}
+        draggableCancel=".widget-delete"
       >
-        {WIDGETS.map(w => (
+        {layout.filter(l => WIDGETS[l.i]).map(l => (
-          <div key={w.id}
+          <div key={l.i} className={`rounded-xl relative ${editMode ? 'ring-2 ring-blue-500/40 cursor-move' : ''}`}>
-            className={`rounded-xl ${editMode ? 'ring-2 ring-blue-500/40 cursor-move' : ''}`}>
+            {editMode && (
+              <button onClick={() => removeWidget(l.i)}
+                className="widget-delete absolute -top-2 -right-2 z-20 w-6 h-6 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white text-xs shadow-lg"
+                title="Remove widget">✕</button>
+            )}
             <div className={`h-full ${editMode ? 'pointer-events-none select-none' : ''}`}>
-              {WIDGET_CONTENT[w.id]}
+              {renderWidget(l.i)}
             </div>
           </div>
         ))}