Add Capacitor Health Connect sync

.forgejo/workflows/release.yml

@@ -21,7 +21,11 @@ jobs:
       - name: Install tools
         run: |
           apt-get update
-          apt-get install -y --no-install-recommends ca-certificates curl nodejs npm unzip
+          apt-get install -y --no-install-recommends ca-certificates curl unzip
+          curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
+          apt-get install -y --no-install-recommends nodejs
+          node --version
+          npm --version
 
       - name: Build web app and sync Capacitor
         env:
@@ -53,7 +57,7 @@ jobs:
             release_json="$(node -e 'console.log(JSON.stringify({ tag_name: process.env.GITHUB_REF_NAME, name: `Calorie AI ${process.env.GITHUB_REF_NAME}`, body: "Capacitor Android APK for Calorie AI.", draft: false, prerelease: false }))' | curl -fsS -X POST -H "$auth_header" -H 'Content-Type: application/json' --data-binary @- "$FORGEJO_API/repos/${GITHUB_REPOSITORY}/releases")"
           fi
           release_id="$(printf '%s' "$release_json" | node -e 'let data=""; process.stdin.on("data", c => data += c); process.stdin.on("end", () => console.log(JSON.parse(data).id));')"
-          asset_id="$(printf '%s' "$release_json" | node -e 'let data=""; process.stdin.on("data", c => data += c); process.stdin.on("end", () => { const release = JSON.parse(data); const asset = (release.assets || []).find(item => item.name === \`calorie-ai-${process.env.GITHUB_REF_NAME}.apk\`); if (asset) console.log(asset.id); });')"
+          asset_id="$(printf '%s' "$release_json" | node -e 'let data=""; process.stdin.on("data", c => data += c); process.stdin.on("end", () => { const release = JSON.parse(data); const expected = "calorie-ai-" + process.env.GITHUB_REF_NAME + ".apk"; const asset = (release.assets || []).find(item => item.name === expected); if (asset) console.log(asset.id); });')"
           if [ -n "$asset_id" ]; then
             curl -fsS -X DELETE -H "$auth_header" "$FORGEJO_API/repos/${GITHUB_REPOSITORY}/releases/${release_id}/assets/${asset_id}"
           fi

.forgejo/workflows/web.yml

@@ -19,7 +19,11 @@ jobs:
       - name: Install Node and browsers
         run: |
           apt-get update
-          apt-get install -y --no-install-recommends ca-certificates curl nodejs npm postgresql postgresql-client
+          apt-get install -y --no-install-recommends ca-certificates curl postgresql postgresql-client
+          curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
+          apt-get install -y --no-install-recommends nodejs
+          node --version
+          npm --version
           service postgresql start
           su - postgres -c "psql -tc \"SELECT 1 FROM pg_roles WHERE rolname='calorie_ai'\" | grep -q 1 || psql -c \"CREATE USER calorie_ai WITH PASSWORD 'calorie_ai';\""
           su - postgres -c "psql -tc \"SELECT 1 FROM pg_database WHERE datname='calorie_ai_test'\" | grep -q 1 || createdb -O calorie_ai calorie_ai_test"

app/build.gradle

@@ -12,8 +12,8 @@ android {
         applicationId 'com.danvics.calorieai'
         minSdk 26
         targetSdk 35
-        versionCode 4
+        versionCode 11
-        versionName '1.3'
+        versionName '1.11'
     }
 
     buildFeatures {

web/android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: 'com.android.application'
+apply plugin: 'org.jetbrains.kotlin.android'
 
 android {
     namespace = "com.danvics.calorieai"
@@ -7,8 +8,8 @@ android {
         applicationId "com.danvics.calorieai"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 11
-        versionName "1.0"
+        versionName "1.11"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -22,6 +23,13 @@ android {
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
     }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_21
+        targetCompatibility JavaVersion.VERSION_21
+    }
+    kotlinOptions {
+        jvmTarget = '21'
+    }
 }
 
 repositories {
@@ -35,6 +43,8 @@ dependencies {
     implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
     implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
     implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation 'androidx.health.connect:connect-client:1.1.0-alpha12'
+    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0'
     implementation project(':capacitor-android')
     testImplementation "junit:junit:$junitVersion"
     androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"

web/android/app/src/main/AndroidManifest.xml

@@ -24,6 +24,17 @@
 
         </activity>
 
+        <activity-alias
+            android:name=".ViewPermissionUsageActivity"
+            android:exported="true"
+            android:permission="android.permission.START_VIEW_PERMISSION_USAGE"
+            android:targetActivity=".MainActivity">
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW_PERMISSION_USAGE" />
+                <category android:name="android.intent.category.HEALTH_PERMISSIONS" />
+            </intent-filter>
+        </activity-alias>
+
         <provider
             android:name="androidx.core.content.FileProvider"
             android:authorities="${applicationId}.fileprovider"
@@ -41,4 +52,7 @@
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
+    <uses-permission android:name="androidx.health.permission.READ_STEPS" />
+    <uses-permission android:name="androidx.health.permission.READ_ACTIVE_CALORIES_BURNED" />
+    <uses-permission android:name="androidx.health.permission.READ_EXERCISE" />
 </manifest>

web/android/app/src/main/java/com/danvics/calorieai/HealthConnectPlugin.kt

@@ -0,0 +1,171 @@
+package com.danvics.calorieai
+
+import androidx.activity.result.ActivityResultLauncher
+import androidx.health.connect.client.HealthConnectClient
+import androidx.health.connect.client.permission.HealthPermission
+import androidx.health.connect.client.records.ActiveCaloriesBurnedRecord
+import androidx.health.connect.client.records.ExerciseSessionRecord
+import androidx.health.connect.client.records.StepsRecord
+import androidx.health.connect.client.records.metadata.DataOrigin
+import androidx.health.connect.client.request.AggregateRequest
+import androidx.health.connect.client.request.ReadRecordsRequest
+import androidx.health.connect.client.time.TimeRangeFilter
+import androidx.health.connect.client.PermissionController
+import com.getcapacitor.JSArray
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import java.time.Instant
+import java.time.LocalDate
+import java.time.ZoneId
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.launch
+
+@CapacitorPlugin(name = "HealthConnect")
+class HealthConnectPlugin : Plugin() {
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    private val permissions = setOf(
+        HealthPermission.getReadPermission(StepsRecord::class),
+        HealthPermission.getReadPermission(ActiveCaloriesBurnedRecord::class),
+        HealthPermission.getReadPermission(ExerciseSessionRecord::class),
+    )
+    private var permissionLauncher: ActivityResultLauncher<Set<String>>? = null
+    private var pendingSyncCall: PluginCall? = null
+
+    override fun load() {
+        permissionLauncher = activity.registerForActivityResult(
+            PermissionController.createRequestPermissionResultContract()
+        ) { granted ->
+            val call = pendingSyncCall ?: return@registerForActivityResult
+            pendingSyncCall = null
+            if (granted.containsAll(permissions)) readAndResolve(call) else call.reject("Health Connect permission was not granted.")
+        }
+    }
+
+    @PluginMethod
+    fun sync(call: PluginCall) {
+        when (HealthConnectClient.getSdkStatus(context)) {
+            HealthConnectClient.SDK_AVAILABLE -> ensurePermissionsThenSync(call)
+            HealthConnectClient.SDK_UNAVAILABLE_PROVIDER_UPDATE_REQUIRED -> call.reject("Install or update Health Connect, then try again.")
+            else -> call.reject("Health Connect is not available on this device.")
+        }
+    }
+
+    private fun ensurePermissionsThenSync(call: PluginCall) {
+        scope.launch {
+            runCatching {
+                val granted = HealthConnectClient.getOrCreate(context).permissionController.getGrantedPermissions()
+                if (granted.containsAll(permissions)) {
+                    readActivities(call)
+                } else {
+                    pendingSyncCall = call
+                    permissionLauncher?.launch(permissions) ?: call.reject("Health Connect permissions are not ready.")
+                }
+            }.onFailure { error -> call.reject(error.message ?: "Health Connect sync failed.") }
+        }
+    }
+
+    private fun readAndResolve(call: PluginCall) {
+        scope.launch {
+            runCatching { readActivities(call) }
+                .onFailure { error -> call.reject(error.message ?: "Health Connect sync failed.") }
+        }
+    }
+
+    private suspend fun readActivities(call: PluginCall) {
+        val days = (call.getInt("days") ?: 14).coerceIn(1, 90).toLong()
+        val client = HealthConnectClient.getOrCreate(context)
+        val zone = ZoneId.systemDefault()
+        val today = LocalDate.now(zone)
+        val syncedAt = Instant.now().toString()
+        val activities = JSArray()
+
+        for (offset in 0 until days) {
+            val date = today.minusDays(offset)
+            val start = date.atStartOfDay(zone).toInstant()
+            val end = date.plusDays(1).atStartOfDay(zone).toInstant()
+            val aggregate = client.aggregate(
+                AggregateRequest(
+                    metrics = setOf(StepsRecord.COUNT_TOTAL, ActiveCaloriesBurnedRecord.ACTIVE_CALORIES_TOTAL),
+                    timeRangeFilter = TimeRangeFilter.between(start, end),
+                )
+            )
+            val steps = aggregate[StepsRecord.COUNT_TOTAL] ?: 0L
+            val calories = aggregate[ActiveCaloriesBurnedRecord.ACTIVE_CALORIES_TOTAL]?.inKilocalories ?: 0.0
+            if (steps > 0L || calories > 0.0) {
+                activities.put(
+                    activityJson(
+                        id = "health-connect-day-$date",
+                        sourceName = "Health Connect",
+                        type = "Daily activity",
+                        title = "Daily activity",
+                        startAt = start.toString(),
+                        endAt = end.toString(),
+                        calories = calories,
+                        steps = steps,
+                        syncedAt = syncedAt,
+                    )
+                )
+            }
+        }
+
+        val rangeStart = today.minusDays(days - 1).atStartOfDay(zone).toInstant()
+        val rangeEnd = today.plusDays(1).atStartOfDay(zone).toInstant()
+        client.readRecords(
+            ReadRecordsRequest(
+                recordType = ExerciseSessionRecord::class,
+                timeRangeFilter = TimeRangeFilter.between(rangeStart, rangeEnd),
+                pageSize = 200,
+            )
+        ).records.forEach { session ->
+            activities.put(
+                activityJson(
+                    id = "health-connect-session-${session.metadata.id}",
+                    sourceName = sourceName(session.metadata.dataOrigin),
+                    type = "Exercise ${session.exerciseType}",
+                    title = session.title ?: "Exercise session",
+                    startAt = session.startTime.toString(),
+                    endAt = session.endTime.toString(),
+                    syncedAt = syncedAt,
+                )
+            )
+        }
+
+        call.resolve(JSObject().put("activities", activities))
+    }
+
+    private fun activityJson(
+        id: String,
+        sourceName: String,
+        type: String,
+        title: String,
+        startAt: String,
+        endAt: String,
+        calories: Double = 0.0,
+        steps: Long = 0L,
+        syncedAt: String,
+    ): JSObject = JSObject()
+        .put("id", id)
+        .put("source", "health_connect")
+        .put("sourceName", sourceName)
+        .put("type", type)
+        .put("title", title)
+        .put("startAt", startAt)
+        .put("endAt", endAt)
+        .put("calories", calories)
+        .put("steps", steps)
+        .put("distanceMeters", 0)
+        .put("syncedAt", syncedAt)
+
+    private fun sourceName(origin: DataOrigin): String = origin.packageName.ifBlank { "Health Connect" }
+
+    override fun handleOnDestroy() {
+        super.handleOnDestroy()
+        scope.cancel()
+    }
+}

web/android/app/src/main/java/com/danvics/calorieai/MainActivity.java

@@ -1,5 +1,12 @@
 package com.danvics.calorieai;
 
+import android.os.Bundle;
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+    @Override
+    public void onCreate(Bundle savedInstanceState) {
+        registerPlugin(HealthConnectPlugin.class);
+        super.onCreate(savedInstanceState);
+    }
+}

web/android/build.gradle

@@ -9,6 +9,7 @@ buildscript {
     dependencies {
         classpath 'com.android.tools.build:gradle:8.13.0'
         classpath 'com.google.gms:google-services:4.4.4'
+        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:2.0.21'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

web/android/variables.gradle

@@ -1,5 +1,5 @@
 ext {
-    minSdkVersion = 24
+    minSdkVersion = 26
     compileSdkVersion = 36
     targetSdkVersion = 36
     androidxActivityVersion = '1.11.0'
@@ -13,4 +13,4 @@ ext {
     androidxJunitVersion = '1.3.0'
     androidxEspressoCoreVersion = '3.7.0'
     cordovaAndroidVersion = '14.0.1'
-}
+}

web/docker-compose.yml

@@ -28,16 +28,9 @@ services:
       - /home/danvics/docker/quiz/backend/.env
     environment:
       CALORIE_AI_DATABASE_URL: postgresql://calorie_ai@postgres:5432/calorie_ai
-      LITELLM_API_BASE: http://litellm:4000/v1
+      LITELLM_API_BASE: https://llm.danvics.com/v1
       LITELLM_MODEL: openrouter-claude-haiku-4.5
     ports:
       - "127.0.0.1:8095:8080"
     volumes:
       - ./data:/app/data
-    networks:
-      - default
-      - litellm_default
-
-networks:
-  litellm_default:
-    external: true

web/src/AnalyticsPage.svelte

@@ -0,0 +1,97 @@
+<script>
+  import { onDestroy, onMount, tick } from 'svelte';
+
+  export let week = [];
+
+  let calorieCanvas;
+  let produceCanvas;
+  let chartTimer;
+
+  onMount(scheduleCharts);
+  onDestroy(() => clearTimeout(chartTimer));
+
+  $: scheduleCharts(week);
+
+  function scheduleCharts() {
+    clearTimeout(chartTimer);
+    chartTimer = setTimeout(drawCharts, 0);
+  }
+
+  async function drawCharts() {
+    await tick();
+    drawBars(calorieCanvas, week, 'calories');
+    drawBars(produceCanvas, week, 'produce');
+  }
+
+  function drawBars(canvas, days, mode) {
+    if (!canvas) return;
+    const dpr = window.devicePixelRatio || 1;
+    const cssW = canvas.offsetWidth || 400;
+    const cssH = canvas.offsetHeight || 200;
+    canvas.width = cssW * dpr;
+    canvas.height = cssH * dpr;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    const values = days.map(day => mode === 'calories' ? day.calories : day.fruit + day.vegetables);
+    const max = Math.max(1, ...values);
+    const left = 4;
+    const bottom = cssH - 32;
+    const barHeight = cssH - 52;
+    const gap = 8;
+    const bar = (cssW - left * 2 - gap * 6) / 7;
+    ctx.textAlign = 'center';
+    days.forEach((day, index) => {
+      const x = left + index * (bar + gap);
+      const h = values[index] / max * barHeight;
+      ctx.fillStyle = '#e2e8f0';
+      roundRect(ctx, x, bottom - barHeight, bar, barHeight, 6);
+      ctx.fillStyle = mode === 'calories' ? '#2563eb' : '#f59e0b';
+      roundRect(ctx, x, bottom - h, bar, h, 6);
+      if (mode === 'produce' && day.vegetables > 0) {
+        const vegH = day.vegetables / max * barHeight;
+        ctx.fillStyle = '#10b981';
+        roundRect(ctx, x + bar * 0.52, bottom - vegH, bar * 0.48, vegH, 5);
+      }
+      ctx.fillStyle = '#64748b';
+      ctx.font = `${Math.max(10, Math.min(13, bar * 0.55))}px Inter, sans-serif`;
+      ctx.fillText(day.label, x + bar / 2, bottom + 20);
+    });
+  }
+
+  function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, Math.max(1, h), r);
+    ctx.fill();
+  }
+</script>
+
+<section class="space-y-4">
+  <div>
+    <h2 class="text-xl font-bold">Analytics</h2>
+    <p class="text-sm text-slate-500">Seven-day calorie and produce trends.</p>
+  </div>
+  <div class="grid gap-4 xl:grid-cols-2">
+    <section class="card">
+      <h3 class="card-title">Calories - last 7 days</h3>
+      <div class="p-4" style="height:220px">
+        <canvas id="calorieChart" bind:this={calorieCanvas} class="w-full h-full"></canvas>
+      </div>
+    </section>
+    <section class="card">
+      <h3 class="card-title">Fruit and vegetables</h3>
+      <div class="p-4" style="height:220px">
+        <canvas id="produceChart" bind:this={produceCanvas} class="w-full h-full"></canvas>
+      </div>
+    </section>
+  </div>
+  <div class="grid gap-3 sm:grid-cols-3">
+    {#each week.slice().reverse().slice(0, 3) as day}
+      <article class="card p-4">
+        <div class="text-xs font-semibold text-slate-400">{day.date}</div>
+        <div class="mt-1 text-xl font-black text-slate-800">{day.calories} kcal</div>
+        <div class="text-xs text-slate-500">P {day.protein}g · C {day.carbs}g · F {day.fat}g</div>
+        <div class="text-xs text-slate-400">Fruit {day.fruit.toFixed(1)} · Veg {day.vegetables.toFixed(1)}</div>
+      </article>
+    {/each}
+  </div>
+</section>

web/src/App.svelte

@@ -1,48 +1,17 @@
 <script>
-  import { onMount, tick } from 'svelte';
+  import { onMount } from 'svelte';
-  import Icon from './Icon.svelte';
+  import { registerPlugin } from '@capacitor/core';
-  import Field from './Field.svelte';
+  import AppShell from './AppShell.svelte';
-  import Stat from './Stat.svelte';
+  import DashboardPage from './DashboardPage.svelte';
+  import AnalyticsPage from './AnalyticsPage.svelte';
   import MealForm from './MealForm.svelte';
   import DiaryPage from './DiaryPage.svelte';
   import SettingsPage from './SettingsPage.svelte';
   import PlansPage from './PlansPage.svelte';
+  import { defaultSettings, fallbackModels, mealTypes, pages } from './appConfig.js';
   import { calculateCaloriePlan, planSummary } from './calorie.js';
 
-  const pages = [
+  const HealthConnect = registerPlugin('HealthConnect');
-    { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', group: 'Tracker' },
-    { id: 'log', label: 'Log meal', icon: 'plus', group: 'Tracker' },
-    { id: 'analytics', label: 'Analytics', icon: 'analytics', group: 'Tracker' },
-    { id: 'diary', label: 'Diary', icon: 'diary', group: 'Tracker' },
-    { id: 'trash', label: 'Trash', icon: 'trash', group: 'Tracker' },
-    { id: 'plans', label: 'Plans', icon: 'plans', group: 'Tracker' },
-    { id: 'settings', label: 'Settings', icon: 'settings', group: 'Admin' },
-  ];
-  const mealTypes = ['Breakfast', 'Lunch', 'Dinner', 'Snack', 'Other'];
-  const fallbackModels = [
-    { id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
-    { id: 'claude-sonnet-4.6', name: 'Claude Sonnet 4.6' },
-    { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash' },
-    { id: 'gpt-4o-mini', name: 'GPT-4o mini' },
-  ];
-  const defaultSettings = {
-    visionModel: fallbackModels[0].id,
-    taskModel: fallbackModels[0].id,
-    sex: '',
-    age: '',
-    heightCm: '',
-    weightKg: '',
-    targetWeightKg: '',
-    goal: 'Lose weight',
-    calorieTarget: '',
-    activityLevel: 'Moderate',
-    pace: 'Steady',
-    motivation: '',
-    challenge: '',
-    trackingStyle: '',
-    calorieCountingExperience: '',
-    fastingInterest: '',
-  };
 
   let loginMode = location.pathname === '/login' || location.pathname === '/reset' || location.pathname === '/verify';
   let username = 'admin';
@@ -70,6 +39,7 @@
   let modelStatus = '';
   let modelError = false;
   let modelSearching = false;
+  let modelActionId = '';
   let settings = { ...defaultSettings };
   let currentPassword = '';
   let newPassword = '';
@@ -78,6 +48,9 @@
   let accountVerified = false;
   let accountStatus = '';
   let accountError = false;
+  let healthConnectStatus = 'Health Connect not synced.';
+  let healthConnectError = false;
+  let healthConnectSyncing = false;
   let passwordStatus = '';
   let passwordError = false;
   let resetPasswordValue = '';
@@ -107,11 +80,6 @@
   let selectedEntryIds = [];
   let trash = [];
 
-  let calorieCanvas;
-  let produceCanvas;
-
-  $: trackerPages = pages.filter(item => item.group === 'Tracker');
-  $: adminPages = pages.filter(item => item.group === 'Admin');
   $: today = totalsFor(todayKey());
   $: week = last7Days();
   $: weekAverage = Math.round(week.reduce((sum, day) => sum + day.calories, 0) / week.length);
@@ -138,22 +106,17 @@
   $: diaryDays = Array.from(new Set(diaryRows.map(entry => entry.date))).sort((a, b) => b.localeCompare(a));
 
   onMount(async () => {
-    await loadSession();
     if (location.pathname === '/verify' && resetToken) await verifyAccountToken();
+    if (loginMode) return;
+
+    await loadSession();
     page = localStorage.getItem('calorie_ai_last_tab') || 'dashboard';
     setDefaultMealDateTime();
-    await Promise.all([loadSettingsFromServer(), loadEntriesFromServer(), loadActivitiesFromServer(), loadModels(), loadPlans()]);
+    await loadSettingsFromServer();
-    await drawCharts();
+    await loadModels();
+    await Promise.all([loadEntriesFromServer(), loadActivitiesFromServer(), loadPlans()]);
   });
 
-  $: if (!loginMode) scheduleCharts(entries, page);
-
-  let chartTimer;
-  function scheduleCharts() {
-    clearTimeout(chartTimer);
-    chartTimer = setTimeout(drawCharts, 0);
-  }
-
   function dateKey(date) {
     return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
   }
@@ -282,10 +245,17 @@
   async function loadSettingsFromServer() {
     try {
       const response = await fetch('/api/settings');
-      if (response.ok) settings = { ...defaultSettings, ...await response.json() };
+      if (response.ok) settings = normalizeSettings(await response.json());
     } catch {}
   }
 
+  function normalizeSettings(data = {}) {
+    const next = { ...defaultSettings, ...data };
+    if (!next.visionModel) next.visionModel = defaultSettings.visionModel;
+    if (!next.taskModel) next.taskModel = defaultSettings.taskModel;
+    return next;
+  }
+
   async function saveSettings() {
     try {
       await fetch('/api/settings', {
@@ -315,6 +285,30 @@
     } catch {}
   }
 
+  async function syncHealthConnect() {
+    healthConnectStatus = 'Syncing Health Connect...';
+    healthConnectError = false;
+    healthConnectSyncing = true;
+    try {
+      const nativeResult = await HealthConnect.sync({ days: 14 });
+      const synced = Array.isArray(nativeResult.activities) ? nativeResult.activities : [];
+      const response = await fetch('/api/activities/sync', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ source: 'health_connect', activities: synced }),
+      });
+      const data = await response.json().catch(() => ({ error: 'Health Connect server sync failed.' }));
+      if (!response.ok) throw new Error(data.error || 'Health Connect server sync failed.');
+      activities = data.activities || [];
+      healthConnectStatus = `Synced ${synced.length} Health Connect record${synced.length === 1 ? '' : 's'}.`;
+    } catch (error) {
+      healthConnectStatus = error?.message || 'Health Connect sync failed.';
+      healthConnectError = true;
+    } finally {
+      healthConnectSyncing = false;
+    }
+  }
+
   function applyPlanConfig(config) {
     plans = config.plans || [];
     selectedPlanId = config.selectedPlanId || plans[0]?.id || '';
@@ -362,6 +356,20 @@
     return { mealName: '', calories: 0, proteinGrams: 0, carbsGrams: 0, fatGrams: 0, fruitServings: 0, vegetableServings: 0, foodGroups: '', notes: '' };
   }
 
+  function normalizeEstimateDraft() {
+    return {
+      mealName: estimateDraft.mealName || description.trim() || 'Manual meal',
+      calories: Math.max(0, Math.round(Number(estimateDraft.calories) || 0)),
+      proteinGrams: Math.max(0, Math.round(Number(estimateDraft.proteinGrams) || 0)),
+      carbsGrams: Math.max(0, Math.round(Number(estimateDraft.carbsGrams) || 0)),
+      fatGrams: Math.max(0, Math.round(Number(estimateDraft.fatGrams) || 0)),
+      fruitServings: Math.max(0, Number(estimateDraft.fruitServings) || 0),
+      vegetableServings: Math.max(0, Number(estimateDraft.vegetableServings) || 0),
+      foodGroups: String(estimateDraft.foodGroups || ''),
+      notes: String(estimateDraft.notes || ''),
+    };
+  }
+
   async function saveSelectedModels() {
     await saveSettings();
     modelStatus = 'Models saved.';
@@ -398,43 +406,63 @@
   }
 
   async function addModel(model) {
-    const response = await fetch('/api/models/add', {
+    modelActionId = model.id;
-      method: 'POST',
+    modelStatus = `Adding ${model.name || model.id}...`;
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify(model),
-    });
-    if (!response.ok) {
-      modelStatus = (await response.json().catch(() => ({}))).error || 'Failed to add model.';
-      modelError = true;
-      return;
-    }
-    const data = await response.json();
-    models = data.models?.length ? data.models : models;
-    settings.visionModel = models.some(item => item.id === settings.visionModel) ? settings.visionModel : models[0].id;
-    settings.taskModel = model.id;
-    await saveSettings();
-    modelStatus = `Added ${model.name || model.id}.`;
     modelError = false;
+    try {
+      const response = await fetch('/api/models/add', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(model),
+      });
+      if (!response.ok) {
+        modelStatus = (await response.json().catch(() => ({}))).error || 'Failed to add model.';
+        modelError = true;
+        return;
+      }
+      const data = await response.json();
+      models = data.models?.length ? data.models : models;
+      settings.visionModel = models.some(item => item.id === settings.visionModel) ? settings.visionModel : models[0].id;
+      settings.taskModel = model.id;
+      await saveSettings();
+      modelStatus = `Added ${model.name || model.id}.`;
+      modelError = false;
+    } catch (error) {
+      modelStatus = error?.message || 'Failed to add model.';
+      modelError = true;
+    } finally {
+      modelActionId = '';
+    }
   }
 
   async function removeModel(modelId) {
-    const response = await fetch('/api/models/remove', {
+    modelActionId = modelId;
-      method: 'POST',
+    modelStatus = 'Removing model...';
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ id: modelId }),
-    });
-    if (!response.ok) {
-      modelStatus = (await response.json().catch(() => ({}))).error || 'Failed to remove model.';
-      modelError = true;
-      return;
-    }
-    const data = await response.json();
-    models = data.models?.length ? data.models : fallbackModels;
-    if (!models.some(model => model.id === settings.visionModel)) settings.visionModel = data.defaultModel || models[0].id;
-    if (!models.some(model => model.id === settings.taskModel)) settings.taskModel = data.defaultModel || models[0].id;
-    await saveSettings();
-    modelStatus = 'Model removed.';
     modelError = false;
+    try {
+      const response = await fetch('/api/models/remove', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ id: modelId }),
+      });
+      if (!response.ok) {
+        modelStatus = (await response.json().catch(() => ({}))).error || 'Failed to remove model.';
+        modelError = true;
+        return;
+      }
+      const data = await response.json();
+      models = data.models?.length ? data.models : fallbackModels;
+      if (!models.some(model => model.id === settings.visionModel)) settings.visionModel = data.defaultModel || models[0].id;
+      if (!models.some(model => model.id === settings.taskModel)) settings.taskModel = data.defaultModel || models[0].id;
+      await saveSettings();
+      modelStatus = 'Model removed.';
+      modelError = false;
+    } catch (error) {
+      modelStatus = error?.message || 'Failed to remove model.';
+      modelError = true;
+    } finally {
+      modelActionId = '';
+    }
   }
 
   async function changePassword() {
@@ -522,15 +550,32 @@
   }
 
   async function chatCompletion(body) {
+    const payload = { ...body, model: selectedModel(body.model) };
     const response = await fetch('/api/chat', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ body }),
+      body: JSON.stringify({ body: payload }),
     });
     const text = await response.text();
-    if (!response.ok) throw new Error(text);
+    if (!response.ok) throw new Error(readApiError(text, 'AI request failed'));
     const json = JSON.parse(text);
-    return json.choices[0].message.content.trim();
+    const content = json.choices?.[0]?.message?.content;
+    if (!content) throw new Error('AI returned an empty response.');
+    return content.trim();
+  }
+
+  function selectedModel(preferred) {
+    if (preferred && models.some(model => model.id === preferred)) return preferred;
+    return models[0]?.id || fallbackModels[0].id;
+  }
+
+  function readApiError(text, fallback) {
+    try {
+      const data = JSON.parse(text);
+      return data.error?.message || data.error || fallback;
+    } catch {
+      return text || fallback;
+    }
   }
 
   async function requestImageEstimate() {
@@ -656,6 +701,7 @@
       });
       if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error || 'Failed to save meal');
       applyEntriesData(await response.json());
+      estimateDraft = emptyEstimate();
       description = '';
       measure = '';
       selectedImageDataUrl = '';
@@ -693,7 +739,7 @@
     if (!existing) return;
     const updated = {
       ...existing,
-      ...estimateDraft,
+      ...normalizeEstimateDraft(),
       date: mealDate,
       time: mealTime,
       mealType,
@@ -720,6 +766,47 @@
     }
   }
 
+  async function saveManualMeal() {
+    if (!mealDate || !mealTime || !mealType) return setMealStatus('Choose a date, time, and meal type.', true);
+    if (!description.trim() && !String(estimateDraft.mealName || '').trim()) return setMealStatus('Describe the meal or enter a meal name.', true);
+    const estimate = normalizeEstimateDraft();
+    if (!estimate.calories) return setMealStatus('Enter estimated calories before saving manually.', true);
+    savingMeal = true;
+    try {
+      const meal = {
+        ...estimate,
+        id: editingEntryId || entryId(),
+        date: mealDate,
+        time: mealTime,
+        mealType,
+        description,
+        measure,
+        imageIncluded: Boolean(selectedImageDataUrl),
+        imageName: selectedImageName,
+        updatedAt: new Date().toISOString(),
+      };
+      const response = await fetch('/api/entries', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(meal),
+      });
+      if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error || 'Failed to save meal');
+      applyEntriesData(await response.json());
+      estimateDraft = emptyEstimate();
+      description = '';
+      measure = '';
+      selectedImageDataUrl = '';
+      selectedImageName = '';
+      editingEntryId = '';
+      setDefaultMealDateTime();
+      setMealStatus(`Saved manually. ${estimate.mealName} · ${estimate.calories} kcal`);
+    } catch (error) {
+      setMealStatus(error.message, true);
+    } finally {
+      savingMeal = false;
+    }
+  }
+
   function cancelEdit() {
     editingEntryId = '';
     estimateDraft = emptyEstimate();
@@ -866,52 +953,6 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
     if (response.ok) applyPlanConfig(await response.json());
   }
 
-  async function drawCharts() {
-    await tick();
-    drawBars(calorieCanvas, week, 'calories');
-    drawBars(produceCanvas, week, 'produce');
-  }
-
-  function drawBars(canvas, days, mode) {
-    if (!canvas) return;
-    const dpr = window.devicePixelRatio || 1;
-    const cssW = canvas.offsetWidth || 400;
-    const cssH = canvas.offsetHeight || 200;
-    canvas.width = cssW * dpr;
-    canvas.height = cssH * dpr;
-    const ctx = canvas.getContext('2d');
-    ctx.scale(dpr, dpr);
-    const values = days.map(day => mode === 'calories' ? day.calories : day.fruit + day.vegetables);
-    const max = Math.max(1, ...values);
-    const left = 4;
-    const bottom = cssH - 32;
-    const barHeight = cssH - 52;
-    const gap = 8;
-    const bar = (cssW - left * 2 - gap * 6) / 7;
-    ctx.textAlign = 'center';
-    days.forEach((day, index) => {
-      const x = left + index * (bar + gap);
-      const h = values[index] / max * barHeight;
-      ctx.fillStyle = '#e2e8f0';
-      roundRect(ctx, x, bottom - barHeight, bar, barHeight, 6);
-      ctx.fillStyle = mode === 'calories' ? '#2563eb' : '#f59e0b';
-      roundRect(ctx, x, bottom - h, bar, h, 6);
-      if (mode === 'produce' && day.vegetables > 0) {
-        const vegH = day.vegetables / max * barHeight;
-        ctx.fillStyle = '#10b981';
-        roundRect(ctx, x + bar * 0.52, bottom - vegH, bar * 0.48, vegH, 5);
-      }
-      ctx.fillStyle = '#64748b';
-      ctx.font = `${Math.max(10, Math.min(13, bar * 0.55))}px Inter, sans-serif`;
-      ctx.fillText(day.label, x + bar / 2, bottom + 20);
-    });
-  }
-
-  function roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.roundRect(x, y, w, Math.max(1, h), r);
-    ctx.fill();
-  }
 </script>
 
 {#if loginMode}
@@ -968,137 +1009,20 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
     </div>
   </main>
 {:else}
-  <div class="min-h-screen bg-slate-50 text-slate-900 lg:grid lg:grid-cols-[auto_1fr]">
+  <AppShell {pages} {page} bind:menuOpen bind:sidebarCollapsed {selectPage} {logout}>
-    <aside class:translate-x-0={menuOpen} class:collapsed-sidebar={sidebarCollapsed} class="sidebar-shell fixed inset-y-0 left-0 z-40 w-64 -translate-x-full overflow-hidden border-r border-slate-200 bg-white shadow-xl transition-all duration-200 lg:sticky lg:top-0 lg:h-screen lg:translate-x-0 lg:shadow-none lg:w-56">
-      <div class="sidebar-header flex h-16 items-center justify-between border-b border-slate-200 px-4">
-        <div class="flex min-w-0 items-center gap-3">
-          <div class="sidebar-logo grid h-9 w-9 flex-none place-items-center rounded-xl bg-blue-600 text-xs font-black text-white">CA</div>
-          <div class="sidebar-brand min-w-0">
-            <div class="truncate text-base font-black text-slate-950">Calorie AI</div>
-            <div class="text-xs text-slate-500">Food diary</div>
-          </div>
-        </div>
-        <button class="collapse-button hidden h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 lg:grid" type="button" on:click={() => sidebarCollapsed = !sidebarCollapsed} aria-label="Collapse menu">
-          <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
-        </button>
-        <button class="rounded-md px-2.5 py-1 text-xs font-bold text-slate-600 hover:bg-slate-100 lg:hidden" type="button" on:click={() => menuOpen = false}>Close</button>
-      </div>
-      <nav class="p-2" aria-label="Main menu">
-        {#if trackerPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Tracker</div>{/if}
-        {#each trackerPages as item}
-          <button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
-            <span class="tab-icon"><Icon name={item.icon} /></span>
-            <span class="tab-label">{item.label}</span>
-          </button>
-        {/each}
-        {#if adminPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Admin</div>{/if}
-        {#each adminPages as item}
-          <button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
-            <span class="tab-icon"><Icon name={item.icon} /></span>
-            <span class="tab-label">{item.label}</span>
-          </button>
-        {/each}
-      </nav>
-    </aside>
-    {#if menuOpen}<button class="fixed inset-0 z-30 bg-slate-950/40 lg:hidden" type="button" aria-label="Close menu" on:click={() => menuOpen = false}></button>{/if}
-
-    <div class="min-w-0">
-      <header class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 shadow-sm backdrop-blur">
-        <div class="flex h-16 items-center justify-between gap-3 px-4 lg:px-6">
-          <div class="flex min-w-0 items-center gap-3">
-            <button class="grid h-9 w-9 place-items-center rounded-xl bg-blue-600 text-white hover:bg-blue-700 lg:hidden" type="button" on:click={() => menuOpen = true} aria-label="Open menu">
-              <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
-            </button>
-            <h1 class="truncate text-base font-bold text-slate-900">{pages.find(item => item.id === page)?.label || 'Dashboard'}</h1>
-          </div>
-          <button class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-semibold text-slate-600 hover:border-slate-300 hover:text-slate-900" type="button" on:click={logout}>Sign out</button>
-        </div>
-      </header>
-
-      <main class="min-w-0 flex-1 p-4 lg:p-6">
         {#if page === 'dashboard'}
-          <section class="space-y-4">
+          <DashboardPage
-            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+            {today}
-              <article class="sm:col-span-2 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-5 text-white shadow-sm">
+            {activeCalorieTarget}
-                <div class="text-xs font-semibold uppercase tracking-widest text-blue-200">Today</div>
+            {targetPercent}
-                <div id="todayCalories" class="mt-1 text-4xl font-black tracking-tight">{today.calories} kcal</div>
+            {macroTotal}
-                {#if activeCalorieTarget}
+            {produceToday}
-                  <div class="mt-2 h-2 overflow-hidden rounded-full bg-white/20"><div class="h-full rounded-full bg-white" style="width:{targetPercent}%"></div></div>
+            {todayEntries}
-                  <div class="mt-1 text-xs font-semibold text-blue-100">{Math.max(0, activeCalorieTarget - today.calories)} kcal left of {activeCalorieTarget}</div>
+            {todayActivities}
-                {/if}
+            {activityToday}
-                <div id="todayMacroText" class="mt-2 text-sm font-medium text-blue-100">P {today.protein}g &nbsp;·&nbsp; C {today.carbs}g &nbsp;·&nbsp; F {today.fat}g</div>
+            {weekAverage}
-                <div id="todayProduceText" class="text-sm text-blue-200">Fruit {today.fruit.toFixed(1)} &nbsp;·&nbsp; Veg {today.vegetables.toFixed(1)}</div>
+            {selectPage}
-              </article>
+          />
-              <Stat label="Meals today" value={today.meals} note={today.meals === 1 ? 'meal logged' : 'meals logged'} />
-              <Stat label="7-day average" value={`${weekAverage} kcal`} note="Calories per day" />
-              <Stat label="Activity today" value={`${Math.round(activityToday.calories)} kcal`} note={`${activityToday.steps} steps`} />
-            </div>
-
-            <div class="grid gap-4 lg:grid-cols-2">
-              <section class="card">
-                <h3 class="card-title">Macros today</h3>
-                <div class="space-y-3 p-4">
-                  {#each [['Protein', today.protein, '#2563eb', 'bg-blue-500'], ['Carbs', today.carbs, '#f59e0b', 'bg-amber-400'], ['Fat', today.fat, '#7c3aed', 'bg-violet-500']] as [label, val, , cls]}
-                    <div>
-                      <div class="mb-1.5 flex justify-between text-sm">
-                        <span class="font-semibold text-slate-700">{label}</span>
-                        <span class="text-slate-500">{val}g &nbsp;·&nbsp; {Math.round(val / macroTotal * 100)}%</span>
-                      </div>
-                      <div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
-                        <div class="h-full rounded-full transition-all {cls}" style="width:{Math.round(val / macroTotal * 100)}%"></div>
-                      </div>
-                    </div>
-                  {/each}
-                  <div class="border-t border-slate-100 pt-2 text-xs text-slate-400">{today.calories} kcal total &nbsp;·&nbsp; produce {produceToday.toFixed(1)} / 5</div>
-                </div>
-              </section>
-
-              <section class="card">
-                <h3 class="card-title">Today's meals</h3>
-                <div class="divide-y divide-slate-100">
-                  {#each todayEntries as entry}
-                    <div class="flex items-center justify-between px-4 py-3">
-                      <div class="min-w-0">
-                        <div class="truncate text-sm font-semibold text-slate-800">{entry.mealName || entry.description}</div>
-                        <div class="text-xs text-slate-400">{entry.mealType} · {entry.time}</div>
-                      </div>
-                      <div class="ml-3 shrink-0 text-sm font-bold text-slate-600">{entry.calories} kcal</div>
-                    </div>
-                  {:else}
-                    <div class="px-4 py-8 text-center text-sm text-slate-400">No meals logged today</div>
-                  {/each}
-                </div>
-                {#if todayEntries.length}
-                  <div class="border-t border-slate-100 px-4 py-2">
-                    <button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>+ Log another meal</button>
-                  </div>
-                {:else}
-                  <div class="border-t border-slate-100 px-4 py-2">
-                    <button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>Log your first meal today</button>
-                  </div>
-                {/if}
-              </section>
-              <section class="card lg:col-span-2">
-                <h3 class="card-title">Synced activity</h3>
-                <div class="divide-y divide-slate-100">
-                  {#each todayActivities.slice(0, 5) as activity}
-                    <div class="flex items-center justify-between px-4 py-3">
-                      <div class="min-w-0">
-                        <div class="truncate text-sm font-semibold text-slate-800">{activity.title || activity.type || 'Activity'}</div>
-                        <div class="text-xs text-slate-400">{activity.sourceName || activity.source || 'External'} · {String(activity.startAt || '').slice(11, 16) || 'All day'}</div>
-                      </div>
-                      <div class="ml-3 shrink-0 text-right text-sm font-bold text-slate-600">
-                        {Math.round(Number(activity.calories || 0))} kcal
-                        {#if activity.steps}<div class="text-xs font-medium text-slate-400">{activity.steps} steps</div>{/if}
-                      </div>
-                    </div>
-                  {:else}
-                    <div class="px-4 py-8 text-center text-sm text-slate-400">No activity synced yet. Connect Garmin or gym apps through Health Connect on Android.</div>
-                  {/each}
-                </div>
-              </section>
-            </div>
-          </section>
 
         {:else if page === 'log'}
           <MealForm
@@ -1116,41 +1040,13 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
             bind:estimateDraft
             {chooseImage}
             {saveMeal}
+            {saveManualMeal}
             {saveMealEdits}
             {cancelEdit}
           />
 
         {:else if page === 'analytics'}
-          <section class="space-y-4">
+          <AnalyticsPage {week} />
-            <div>
-              <h2 class="text-xl font-bold">Analytics</h2>
-              <p class="text-sm text-slate-500">Seven-day calorie and produce trends.</p>
-            </div>
-            <div class="grid gap-4 xl:grid-cols-2">
-              <section class="card">
-                <h3 class="card-title">Calories — last 7 days</h3>
-                <div class="p-4" style="height:220px">
-                  <canvas id="calorieChart" bind:this={calorieCanvas} class="w-full h-full"></canvas>
-                </div>
-              </section>
-              <section class="card">
-                <h3 class="card-title">Fruit and vegetables</h3>
-                <div class="p-4" style="height:220px">
-                  <canvas id="produceChart" bind:this={produceCanvas} class="w-full h-full"></canvas>
-                </div>
-              </section>
-            </div>
-            <div class="grid gap-3 sm:grid-cols-3">
-              {#each week.slice().reverse().slice(0, 3) as day}
-                <article class="card p-4">
-                  <div class="text-xs font-semibold text-slate-400">{day.date}</div>
-                  <div class="mt-1 text-xl font-black text-slate-800">{day.calories} kcal</div>
-                  <div class="text-xs text-slate-500">P {day.protein}g · C {day.carbs}g · F {day.fat}g</div>
-                  <div class="text-xs text-slate-400">Fruit {day.fruit.toFixed(1)} · Veg {day.vegetables.toFixed(1)}</div>
-                </article>
-              {/each}
-            </div>
-          </section>
 
         {:else if page === 'diary'}
           <DiaryPage
@@ -1209,10 +1105,14 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
             {modelStatus}
             {modelError}
             {modelSearching}
+            {modelActionId}
             bind:accountEmail
             {accountVerified}
             {accountStatus}
             {accountError}
+            {healthConnectStatus}
+            {healthConnectError}
+            {healthConnectSyncing}
             {passwordStatus}
             {passwordError}
             {resetPasswordValue}
@@ -1226,23 +1126,10 @@ Include: daily calorie target, maintenance calories, protein target, meal loggin
             {removeModel}
             {saveAccountEmail}
             {sendVerificationEmail}
+            {syncHealthConnect}
             {changePassword}
             {resetPassword}
           />
         {/if}
-      </main>
+  </AppShell>
-    </div>
-  </div>
 {/if}
-
-<style>
-  .tab-button { display: flex; width: 100%; align-items: center; gap: 0.6rem; border-left: 3px solid transparent; border-radius: 0.5rem; padding: 0.55rem 0.85rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: #64748b; transition: background 0.1s, color 0.1s; }
-  .tab-button:hover { background: #f8fafc; color: #0f172a; }
-  .active-tab { border-left-color: #2563eb; background: #eff6ff; color: #2563eb; }
-  .tab-icon { display: flex; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; align-items: center; justify-content: center; }
-  :global(.collapsed-sidebar) { width: 4.25rem !important; }
-  :global(.collapsed-sidebar .sidebar-header) { justify-content: center; padding-left: 0; padding-right: 0; }
-  :global(.collapsed-sidebar .tab-label), :global(.collapsed-sidebar .sidebar-section-label), :global(.collapsed-sidebar .sidebar-brand) { display: none; }
-  :global(.collapsed-sidebar .tab-button) { justify-content: center; padding-left: 0; padding-right: 0; }
-  :global(.collapsed-sidebar .collapse-button) { display: grid; }
-</style>

web/src/AppShell.svelte

@@ -0,0 +1,79 @@
+<script>
+  import Icon from './Icon.svelte';
+
+  export let pages = [];
+  export let page = 'dashboard';
+  export let menuOpen = false;
+  export let sidebarCollapsed = false;
+  export let selectPage;
+  export let logout;
+
+  $: trackerPages = pages.filter(item => item.group === 'Tracker');
+  $: adminPages = pages.filter(item => item.group === 'Admin');
+  $: pageLabel = pages.find(item => item.id === page)?.label || 'Dashboard';
+</script>
+
+<div class="min-h-screen bg-slate-50 text-slate-900 lg:grid lg:grid-cols-[auto_1fr]">
+  <aside class:translate-x-0={menuOpen} class:collapsed-sidebar={sidebarCollapsed} class="sidebar-shell fixed inset-y-0 left-0 z-40 w-64 -translate-x-full overflow-hidden border-r border-slate-200 bg-white shadow-xl transition-all duration-200 lg:sticky lg:top-0 lg:h-screen lg:translate-x-0 lg:shadow-none lg:w-56">
+    <div class="sidebar-header flex h-16 items-center justify-between border-b border-slate-200 px-4">
+      <div class="flex min-w-0 items-center gap-3">
+        <div class="sidebar-logo grid h-9 w-9 flex-none place-items-center rounded-xl bg-blue-600 text-xs font-black text-white">CA</div>
+        <div class="sidebar-brand min-w-0">
+          <div class="truncate text-base font-black text-slate-950">Calorie AI</div>
+          <div class="text-xs text-slate-500">Food diary</div>
+        </div>
+      </div>
+      <button class="collapse-button hidden h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 lg:grid" type="button" on:click={() => sidebarCollapsed = !sidebarCollapsed} aria-label="Collapse menu">
+        <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
+      </button>
+      <button class="rounded-md px-2.5 py-1 text-xs font-bold text-slate-600 hover:bg-slate-100 lg:hidden" type="button" on:click={() => menuOpen = false}>Close</button>
+    </div>
+    <nav class="p-2" aria-label="Main menu">
+      {#if trackerPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Tracker</div>{/if}
+      {#each trackerPages as item}
+        <button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
+          <span class="tab-icon"><Icon name={item.icon} /></span>
+          <span class="tab-label">{item.label}</span>
+        </button>
+      {/each}
+      {#if adminPages.length}<div class="sidebar-section-label px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">Admin</div>{/if}
+      {#each adminPages as item}
+        <button class:active-tab={page === item.id} class="tab-button" type="button" title={item.label} on:click={() => selectPage(item.id)}>
+          <span class="tab-icon"><Icon name={item.icon} /></span>
+          <span class="tab-label">{item.label}</span>
+        </button>
+      {/each}
+    </nav>
+  </aside>
+  {#if menuOpen}<button class="fixed inset-0 z-30 bg-slate-950/40 lg:hidden" type="button" aria-label="Close menu" on:click={() => menuOpen = false}></button>{/if}
+
+  <div class="min-w-0">
+    <header class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 shadow-sm backdrop-blur">
+      <div class="flex h-16 items-center justify-between gap-3 px-4 lg:px-6">
+        <div class="flex min-w-0 items-center gap-3">
+          <button class="grid h-9 w-9 place-items-center rounded-xl bg-blue-600 text-white hover:bg-blue-700 lg:hidden" type="button" on:click={() => menuOpen = true} aria-label="Open menu">
+            <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
+          </button>
+          <h1 class="truncate text-base font-bold text-slate-900">{pageLabel}</h1>
+        </div>
+        <button class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-semibold text-slate-600 hover:border-slate-300 hover:text-slate-900" type="button" on:click={logout}>Sign out</button>
+      </div>
+    </header>
+
+    <main class="min-w-0 flex-1 p-4 lg:p-6">
+      <slot />
+    </main>
+  </div>
+</div>
+
+<style>
+  .tab-button { display: flex; width: 100%; align-items: center; gap: 0.6rem; border-left: 3px solid transparent; border-radius: 0.5rem; padding: 0.55rem 0.85rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: #64748b; transition: background 0.1s, color 0.1s; }
+  .tab-button:hover { background: #f8fafc; color: #0f172a; }
+  .active-tab { border-left-color: #2563eb; background: #eff6ff; color: #2563eb; }
+  .tab-icon { display: flex; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; align-items: center; justify-content: center; }
+  .collapsed-sidebar { width: 4.25rem !important; }
+  .collapsed-sidebar .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; }
+  .collapsed-sidebar .tab-label, .collapsed-sidebar .sidebar-section-label, .collapsed-sidebar .sidebar-brand { display: none; }
+  .collapsed-sidebar .tab-button { justify-content: center; padding-left: 0; padding-right: 0; }
+  .collapsed-sidebar .collapse-button { display: grid; }
+</style>

web/src/DashboardPage.svelte

@@ -0,0 +1,109 @@
+<script>
+  import Stat from './Stat.svelte';
+
+  export let today;
+  export let activeCalorieTarget;
+  export let targetPercent;
+  export let macroTotal;
+  export let produceToday;
+  export let todayEntries = [];
+  export let todayActivities = [];
+  export let activityToday;
+  export let weekAverage;
+  export let selectPage;
+</script>
+
+<section class="space-y-4">
+  <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+    <article class="sm:col-span-2 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-5 text-white shadow-sm">
+      <div class="text-xs font-semibold uppercase tracking-widest text-blue-200">Today</div>
+      <div id="todayCalories" class="mt-1 text-4xl font-black tracking-tight">{today.calories} kcal</div>
+      {#if activeCalorieTarget}
+        <div class="mt-2 h-2 overflow-hidden rounded-full bg-white/20"><div class="h-full rounded-full bg-white" style="width:{targetPercent}%"></div></div>
+        <div class="mt-1 text-xs font-semibold text-blue-100">{Math.max(0, activeCalorieTarget - today.calories)} kcal left of {activeCalorieTarget}</div>
+      {/if}
+      <div id="todayMacroText" class="mt-2 text-sm font-medium text-blue-100">P {today.protein}g &nbsp;·&nbsp; C {today.carbs}g &nbsp;·&nbsp; F {today.fat}g</div>
+      <div id="todayProduceText" class="text-sm text-blue-200">Fruit {today.fruit.toFixed(1)} &nbsp;·&nbsp; Veg {today.vegetables.toFixed(1)}</div>
+    </article>
+    <Stat label="Meals today" value={today.meals} note={today.meals === 1 ? 'meal logged' : 'meals logged'} />
+    <Stat label="7-day average" value={`${weekAverage} kcal`} note="Calories per day" />
+    <Stat label="Activity today" value={`${Math.round(activityToday.calories)} kcal`} note={`${activityToday.steps} steps`} />
+  </div>
+
+  <div class="grid gap-4 lg:grid-cols-2">
+    <section class="card">
+      <h3 class="card-title">Macros today</h3>
+      <div class="space-y-3 p-4">
+        {#each [['Protein', today.protein, 'bg-blue-500'], ['Carbs', today.carbs, 'bg-amber-400'], ['Fat', today.fat, 'bg-violet-500']] as [label, val, cls]}
+          <div>
+            <div class="mb-1.5 flex justify-between text-sm">
+              <span class="font-semibold text-slate-700">{label}</span>
+              <span class="text-slate-500">{val}g &nbsp;·&nbsp; {Math.round(val / macroTotal * 100)}%</span>
+            </div>
+            <div class="h-2.5 overflow-hidden rounded-full bg-slate-100">
+              <div class="h-full rounded-full transition-all {cls}" style="width:{Math.round(val / macroTotal * 100)}%"></div>
+            </div>
+          </div>
+        {/each}
+        <div class="border-t border-slate-100 pt-2 text-xs text-slate-400">{today.calories} kcal total &nbsp;·&nbsp; produce {produceToday.toFixed(1)} / 5</div>
+      </div>
+    </section>
+
+    <section class="card">
+      <h3 class="card-title">Today's meals</h3>
+      <div class="divide-y divide-slate-100">
+        {#each todayEntries as entry}
+          <div class="flex items-center justify-between px-4 py-3">
+            <div class="min-w-0">
+              <div class="truncate text-sm font-semibold text-slate-800">{entry.mealName || entry.description}</div>
+              <div class="text-xs text-slate-400">{entry.mealType} · {entry.time}</div>
+            </div>
+            <div class="ml-3 shrink-0 text-sm font-bold text-slate-600">{entry.calories} kcal</div>
+          </div>
+        {:else}
+          <div class="px-4 py-8 text-center text-sm text-slate-400">No meals logged today</div>
+        {/each}
+      </div>
+      {#if todayEntries.length}
+        <div class="border-t border-slate-100 px-4 py-2">
+          <button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>+ Log another meal</button>
+        </div>
+      {:else}
+        <div class="border-t border-slate-100 px-4 py-2">
+          <button class="text-xs font-semibold text-blue-600 hover:text-blue-700" type="button" on:click={() => selectPage('log')}>Log your first meal today</button>
+        </div>
+      {/if}
+    </section>
+
+    <section class="card lg:col-span-2">
+      <h3 class="card-title">Synced activity</h3>
+      <div class="divide-y divide-slate-100">
+        {#each todayActivities.slice(0, 5) as activity}
+          <div class="flex items-center justify-between px-4 py-3">
+            <div class="min-w-0">
+              <div class="truncate text-sm font-semibold text-slate-800">{activity.title || activity.type || 'Activity'}</div>
+              <div class="text-xs text-slate-400">{activity.sourceName || activity.source || 'External'} · {String(activity.startAt || '').slice(11, 16) || 'All day'}</div>
+            </div>
+            <div class="ml-3 shrink-0 text-right text-sm font-bold text-slate-600">
+              {Math.round(Number(activity.calories || 0))} kcal
+              {#if activity.steps}<div class="text-xs font-medium text-slate-400">{activity.steps} steps</div>{/if}
+            </div>
+          </div>
+        {:else}
+          <div class="grid gap-4 p-4 md:grid-cols-[1fr_1.1fr] md:items-center">
+            <div class="rounded-2xl bg-blue-50 p-4 text-left">
+              <div class="text-xs font-black uppercase tracking-widest text-blue-700">Connect Garmin</div>
+              <h4 class="mt-1 text-lg font-black text-slate-950">Use the Android app to sync your watch.</h4>
+              <p class="mt-2 text-sm leading-6 text-slate-600">The web dashboard shows synced activity, but Garmin pairing runs through Garmin Connect and Android Health Connect.</p>
+            </div>
+            <ol class="grid gap-2 text-sm leading-6 text-slate-600">
+              <li><strong class="text-slate-900">1.</strong> Sync your watch in Garmin Connect on Android.</li>
+              <li><strong class="text-slate-900">2.</strong> In Garmin Connect, enable sharing to Health Connect.</li>
+              <li><strong class="text-slate-900">3.</strong> Open Calorie AI on Android and tap Settings -> Sync Health Connect.</li>
+            </ol>
+          </div>
+        {/each}
+      </div>
+    </section>
+  </div>
+</section>

web/src/MealForm.svelte

@@ -15,6 +15,7 @@
   export let estimateDraft;
   export let chooseImage;
   export let saveMeal;
+  export let saveManualMeal;
   export let saveMealEdits;
   export let cancelEdit;
 </script>
@@ -43,8 +44,11 @@
       </div>
     </div>
     {#if selectedImageDataUrl}<img id="preview" class="mx-4 mb-4 max-h-80 w-[calc(100%-2rem)] rounded-2xl object-cover" src={selectedImageDataUrl} alt="Selected meal preview">{/if}
-    {#if editingEntryId}
+    <div class="grid gap-3 border-t border-slate-200 p-4 md:grid-cols-4">
-      <div class="grid gap-3 border-t border-slate-200 p-4 md:grid-cols-4">
+        <div class="md:col-span-4">
+          <h3 class="text-sm font-black uppercase tracking-wide text-slate-500">Nutrition estimate</h3>
+          <p class="mt-1 text-sm text-slate-500">AI fills these automatically, or you can enter calories and save manually.</p>
+        </div>
         <Field className="md:col-span-2" label="Meal name"><input class="input" bind:value={estimateDraft.mealName}></Field>
         <Field label="Calories"><input class="input" type="number" min="0" bind:value={estimateDraft.calories}></Field>
         <Field label="Protein (g)"><input class="input" type="number" min="0" bind:value={estimateDraft.proteinGrams}></Field>
@@ -54,10 +58,10 @@
         <Field label="Vegetable servings"><input class="input" type="number" min="0" step="0.1" bind:value={estimateDraft.vegetableServings}></Field>
         <Field className="md:col-span-2" label="Food groups"><input class="input" bind:value={estimateDraft.foodGroups}></Field>
         <Field className="md:col-span-2" label="Notes"><input class="input" bind:value={estimateDraft.notes}></Field>
-      </div>
+    </div>
-    {/if}
     <div class="flex flex-col gap-3 border-t border-slate-200 p-4 md:flex-row md:items-center">
       <button class="btn-primary" type="submit" disabled={savingMeal}>{savingMeal ? 'Saving...' : editingEntryId ? 'Analyze again' : 'Analyze and save'}</button>
+      <button class="btn-secondary" type="button" on:click={saveManualMeal} disabled={savingMeal}>Save manually</button>
       {#if editingEntryId}<button class="btn-secondary" type="button" on:click={saveMealEdits}>Save edits</button><button class="btn-secondary" type="button" on:click={cancelEdit}>Cancel</button>{/if}
       {#if status}<p id="status" class:text-red-600={statusError} class="text-sm font-semibold text-green-700">{status}</p>{/if}
     </div>

web/src/PlansPage.svelte

@@ -14,8 +14,6 @@
   export let selectPlan;
   export let deletePlan;
 
-  $: selectedPlan = plans.find(plan => plan.id === selectedPlanId) || plans[0];
-  $: caloriePlan = calculateCaloriePlan(settings);
   let faqOpen = null;
 
   const sexOptions = ['Female', 'Male'];
@@ -28,35 +26,55 @@
 
   const faqs = [
     {
-      q: 'How does the AI build my plan?',
+      q: 'What changes when I generate a new plan?',
-      a: 'It reads your height, weight, target, activity level, and pace, then looks at your most recent logged meals to understand your actual eating patterns. The result is a calorie range, protein target, and practical habits tailored to you.',
+      a: 'A new saved version is created. Your older versions stay in Plan history, so you can switch back later.',
     },
     {
-      q: 'How often should I update my plan?',
+      q: 'What should I write in the update box?',
-      a: 'Update it whenever something changes — a new weigh-in, a shift in activity, or after a few weeks of logging. Use the fine-tune box to tell the AI what changed and it will revise the plan without starting from scratch.',
+      a: 'Use short real-world notes: hunger, weight trend, steps, workouts, missed meals, cravings, sleep, schedule changes, or anything that made the plan hard to follow.',
-    },
-    {
-      q: 'Is this medical or clinical advice?',
-      a: 'No. This is an AI-generated nutrition estimate based on self-reported data. It is not a substitute for advice from a registered dietitian or doctor. If you have a medical condition, are pregnant, or have a history of disordered eating, consult a qualified health professional first.',
     },
     {
       q: 'Are my fine-tune notes stored?',
-      a: 'No. Notes you add in the fine-tune box are sent to the AI to update the plan and then discarded. Only the resulting plan text is saved.',
+      a: 'No. Notes are sent to the AI to create the next plan version, then discarded. Only the resulting plan text is saved.',
     },
     {
-      q: 'Can I go back to an older plan?',
+      q: 'Is this medical advice?',
-      a: 'Yes. Every version is kept in Plan history. Click any entry there to make it the active plan and it will appear in the Current plan panel.',
+      a: 'No. It is AI-generated guidance based on your inputs and logs. If you have a medical condition, are pregnant, or have a history of disordered eating, use a clinician or dietitian.',
     },
   ];
 
   const knownHeadings = new Set([
-    'plan', 'personalized weight-loss plan', 'your details', 'daily calorie range',
+    'plan', 'personalized weight-loss plan', 'your details', 'daily calorie target',
-    'protein target', 'healthy habits', 'weekly review steps', 'safety notes',
+    'daily calorie range', 'maintenance calories', 'protein target', 'meal logging strategy',
-    'getting started', 'targets', 'habits',
+    'activity adjustment rules', 'challenge-specific tactics', 'weekly review steps',
+    'safety notes', 'healthy habits', 'getting started', 'targets', 'habits',
   ]);
 
+  $: selectedPlan = plans.find(plan => plan.id === selectedPlanId) || plans[0];
+  $: caloriePlan = calculateCaloriePlan(settings);
+  $: targetCalories = Number(settings.calorieTarget) || caloriePlan?.goalCalories || 0;
+  $: profileMissing = [
+    ['sex', settings.sex],
+    ['age', settings.age],
+    ['height', settings.heightCm],
+    ['current weight', settings.weightKg],
+  ].filter(([, value]) => !value).map(([label]) => label);
+  $: profileReady = profileMissing.length === 0;
+  $: planSections = sections(selectedPlan?.content);
+  $: summaryCards = [
+    { label: 'Daily target', value: targetCalories ? `${targetCalories} kcal` : 'Add profile', note: settings.goal || 'Goal not set' },
+    { label: 'Maintenance', value: caloriePlan ? `${caloriePlan.maintenanceCalories} kcal` : 'Unknown', note: caloriePlan ? `BMR ${caloriePlan.bmr} kcal` : 'Needs basics' },
+    { label: 'Pace', value: settings.pace || 'Not set', note: settings.activityLevel ? `${settings.activityLevel} activity` : 'Activity not set' },
+  ];
+
   function cleanLine(line) {
-    return line.replace(/^#{1,6}\s*/, '').replace(/^[-*]\s+/, '').replace(/\*\*/g, '').replace(/^---+$/, '').trim();
+    return line
+      .replace(/^#{1,6}\s*/, '')
+      .replace(/^[-*]\s+/, '')
+      .replace(/^\d+\.\s+/, '')
+      .replace(/\*\*/g, '')
+      .replace(/^---+$/, '')
+      .trim();
   }
 
   function isHeading(line) {
@@ -74,124 +92,213 @@
     for (const line of lines) {
       if (isHeading(line)) {
         if (current.items.length) output.push(current);
-        current = { title: line.replace(/^\d+\.\s+/, '').replace(/:$/, ''), items: [] };
+        current = { title: line.replace(/:$/, ''), items: [] };
       } else {
         current.items.push(line);
       }
     }
-    output.push(current);
+    if (current.items.length) output.push(current);
-    return output.filter(section => section.items.length || section.title !== 'Plan');
+    return output;
+  }
+
+  function formatDate(value) {
+    if (!value) return 'Unknown date';
+    return new Date(value).toLocaleString([], { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
   }
 </script>
 
-<section class="space-y-4">
+<section class="space-y-5">
-  <p class="text-sm text-slate-500">Your plan is built from your body stats, goal, habits, challenges, and recent meals.</p>
+  <section class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-950 text-white shadow-sm">
-
+    <div class="grid gap-6 p-5 lg:grid-cols-[1fr_420px] lg:p-7">
-  <div class="grid gap-4 xl:grid-cols-[0.8fr_1.2fr]">
+      <div>
-    <section class="card">
+        <div class="text-xs font-black uppercase tracking-[0.28em] text-blue-200">Personal plan</div>
-      <h3 class="card-title">Profile</h3>
+        <h2 class="mt-3 max-w-3xl text-3xl font-black tracking-tight sm:text-4xl">Build a plan you can actually follow this week.</h2>
-      <div class="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-1">
+        <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-300">Set your basics, add the behavior details that usually make dieting hard, then keep each generated version as a clean document.</p>
-        <Field label="Sex"><select class="input" bind:value={settings.sex}><option value="">Select</option>{#each sexOptions as option}<option>{option}</option>{/each}</select></Field>
+        <div class="mt-5 flex flex-wrap gap-2 text-xs font-bold">
-        <Field label="Age"><input class="input" type="number" min="16" max="100" bind:value={settings.age}></Field>
+          <span class="rounded-full bg-white/10 px-3 py-1 text-white">{plans.length || 0} saved version{plans.length === 1 ? '' : 's'}</span>
-        <Field label="Height (cm)"><input class="input" type="number" min="80" bind:value={settings.heightCm}></Field>
+          <span class="rounded-full bg-white/10 px-3 py-1 text-white">{profileReady ? 'Ready to generate' : `Missing ${profileMissing.join(', ')}`}</span>
-        <Field label="Current weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.weightKg}></Field>
+          {#if selectedPlan}<span class="rounded-full bg-blue-500 px-3 py-1 text-white">Active v{selectedPlan.version || 1}</span>{/if}
-        <Field label="Target weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.targetWeightKg}></Field>
+        </div>
-        <Field label="Main goal"><select class="input" bind:value={settings.goal}>{#each goalOptions as option}<option>{option}</option>{/each}</select></Field>
-        <Field label="Activity"><select class="input" bind:value={settings.activityLevel}><option>Low</option><option>Moderate</option><option>High</option></select></Field>
-        <Field label="Pace"><select class="input" bind:value={settings.pace}><option>Gentle</option><option>Steady</option><option>Aggressive</option></select></Field>
-        <Field label="Daily kcal goal"><input class="input" type="number" min="0" bind:value={settings.calorieTarget} placeholder={caloriePlan ? `${caloriePlan.goalCalories}` : 'Calculated after profile'}></Field>
-        {#if caloriePlan}
-          <div class="rounded-xl border border-blue-100 bg-blue-50 p-3 text-sm text-blue-950 md:col-span-2 xl:col-span-1">
-            <div class="font-black">Calculated target</div>
-            <div>{planSummary(settings)}</div>
-            <div class="mt-1 text-xs text-blue-700">Maintenance: {caloriePlan.maintenanceCalories} kcal/day · BMR: {caloriePlan.bmr} kcal/day</div>
-          </div>
-        {:else}
-          <p class="text-xs text-amber-600 font-medium">Fill in sex, age, height, and current weight to calculate a plan.</p>
-        {/if}
-        <button class="btn-primary" type="button" on:click={generatePlan} disabled={planLoading || !caloriePlan}>{planLoading ? 'Generating...' : 'Generate new plan'}</button>
-        {#if planStatus}<p class:text-red-600={planError} class="text-sm font-semibold text-green-700">{planStatus}</p>{/if}
       </div>
-    </section>
 
-    <section class="card">
+      <div class="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
-      <h3 class="card-title">Personalization</h3>
+        {#each summaryCards as item}
-      <div class="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-1">
+          <article class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
-        <Field label="Why this matters"><select class="input" bind:value={settings.motivation}><option value="">Select</option>{#each motivationOptions as option}<option>{option}</option>{/each}</select></Field>
+            <div class="text-[0.68rem] font-black uppercase tracking-widest text-blue-100">{item.label}</div>
-        <Field label="Biggest challenge"><select class="input" bind:value={settings.challenge}><option value="">Select</option>{#each challengeOptions as option}<option>{option}</option>{/each}</select></Field>
+            <div class="mt-1 text-2xl font-black text-white">{item.value}</div>
-        <Field label="Tracking style"><select class="input" bind:value={settings.trackingStyle}><option value="">Select</option>{#each trackingOptions as option}<option>{option}</option>{/each}</select></Field>
+            <div class="mt-1 text-xs text-slate-300">{item.note}</div>
-        <Field label="Calorie-counting experience"><select class="input" bind:value={settings.calorieCountingExperience}><option value="">Select</option>{#each calorieExperienceOptions as option}<option>{option}</option>{/each}</select></Field>
+          </article>
-        <Field label="Fasting interest"><select class="input" bind:value={settings.fastingInterest}><option value="">Select</option>{#each fastingOptions as option}<option>{option}</option>{/each}</select></Field>
+        {/each}
       </div>
-    </section>
-
-    <section class="card xl:col-span-2">
-      <h3 class="card-title">Current plan</h3>
-      <div class="grid gap-4 p-4">
-        {#if selectedPlan}
-          <div class="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
-            <div>
-              <strong>{selectedPlan.title}</strong>
-              <div class="text-xs text-slate-500">Version {selectedPlan.version || 1} · {new Date(selectedPlan.createdAt).toLocaleString()}</div>
-            </div>
-            <button class="rounded-md bg-red-50 px-3 py-1.5 text-xs font-bold text-red-600 hover:bg-red-100" type="button" on:click={() => deletePlan(selectedPlan.id)}>Delete</button>
-          </div>
-          <div class="grid gap-3">
-            {#each sections(selectedPlan.content) as section}
-              <article class="rounded-xl border border-slate-200 bg-slate-50 p-4">
-                <h4 class="border-b border-slate-200 pb-2 text-base font-black text-slate-950">{section.title}</h4>
-                <ul class="mt-3 grid gap-2 text-sm leading-6 text-slate-700">
-                  {#each section.items as item}<li>{item}</li>{/each}
-                </ul>
-              </article>
-            {/each}
-          </div>
-          <div class="border-t border-slate-200 pt-4">
-            <Field label="Fine-tune with meals, activities, or progress notes">
-              <textarea class="input min-h-28" bind:value={tuneNote} placeholder="Example: walked 7,000 steps daily this week, felt hungry at night, lost 0.3 kg"></textarea>
-            </Field>
-            <p class="mt-1 text-xs text-slate-400">These notes are sent to the AI to update your plan and are not stored afterwards.</p>
-            <button class="btn-primary mt-3" type="button" on:click={() => tunePlan(selectedPlan.id)} disabled={planLoading || !tuneNote?.trim()}>{planLoading ? 'Updating...' : 'Update plan with AI'}</button>
-          </div>
-        {:else}
-          <div class="empty-state">No plans yet. Fill in your profile and click Generate.</div>
-        {/if}
-      </div>
-    </section>
-  </div>
-
-  {#if plans.length > 1}
-  <section class="card">
-    <h3 class="card-title">Plan history</h3>
-    <div class="grid gap-2 p-4 md:grid-cols-2 xl:grid-cols-3">
-      {#each plans as plan}
-        <button class="rounded-xl border px-3 py-2 text-left text-sm hover:border-blue-300 hover:bg-blue-50" class:border-blue-500={plan.id === selectedPlanId} type="button" on:click={() => selectPlan(plan.id)}>
-          <strong>{plan.title}</strong>
-          <div class="text-xs text-slate-500">Version {plan.version || 1} · {new Date(plan.createdAt).toLocaleString()}</div>
-        </button>
-      {/each}
     </div>
   </section>
-  {/if}
 
-  <section class="card">
+  <div class="grid gap-5 xl:grid-cols-[370px_minmax(0,1fr)]">
-    <h3 class="card-title">Frequently asked questions</h3>
+    <aside class="space-y-5">
-    <div class="divide-y divide-slate-100">
+      <section class="card">
-      {#each faqs as faq, i}
+        <div class="border-b border-slate-200 bg-white p-4">
-        <div>
+          <div class="flex items-center justify-between gap-3">
-          <button
+            <h3 class="text-sm font-black text-slate-950">1. Body target</h3>
-            class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold text-slate-800 hover:bg-slate-50"
+            <span class="rounded-full px-2.5 py-1 text-xs font-black {profileReady ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700'}">{profileReady ? 'Complete' : 'Needs basics'}</span>
-            type="button"
+          </div>
-            on:click={() => faqOpen = faqOpen === i ? null : i}
+          <p class="mt-1 text-xs leading-5 text-slate-500">These numbers calculate the baseline. Save or generate to persist changes.</p>
-          >
+        </div>
-            <span>{faq.q}</span>
+        <div class="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-1">
-            <svg class="h-4 w-4 flex-none text-slate-400 transition-transform {faqOpen === i ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
+          <Field label="Sex"><select class="input" bind:value={settings.sex}><option value="">Select</option>{#each sexOptions as option}<option>{option}</option>{/each}</select></Field>
-          </button>
+          <Field label="Age"><input class="input" type="number" min="16" max="100" bind:value={settings.age}></Field>
-          {#if faqOpen === i}
+          <Field label="Height (cm)"><input class="input" type="number" min="80" bind:value={settings.heightCm}></Field>
-            <p class="px-4 pb-4 text-sm leading-6 text-slate-600">{faq.a}</p>
+          <Field label="Current weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.weightKg}></Field>
+          <Field label="Target weight (kg)"><input class="input" type="number" min="20" step="0.1" bind:value={settings.targetWeightKg}></Field>
+          <Field label="Main goal"><select class="input" bind:value={settings.goal}>{#each goalOptions as option}<option>{option}</option>{/each}</select></Field>
+          <Field label="Activity"><select class="input" bind:value={settings.activityLevel}><option>Low</option><option>Moderate</option><option>High</option></select></Field>
+          <Field label="Pace"><select class="input" bind:value={settings.pace}><option>Gentle</option><option>Steady</option><option>Aggressive</option></select></Field>
+          <Field label="Daily kcal goal"><input class="input" type="number" min="0" bind:value={settings.calorieTarget} placeholder={caloriePlan ? `${caloriePlan.goalCalories}` : 'Calculated after profile'}></Field>
+          {#if caloriePlan}
+            <div class="rounded-2xl border border-blue-100 bg-blue-50 p-3 text-sm text-blue-950 sm:col-span-2 xl:col-span-1">
+              <div class="font-black">Calculated target</div>
+              <div>{planSummary(settings)}</div>
+              <div class="mt-1 text-xs text-blue-700">Maintenance {caloriePlan.maintenanceCalories} kcal/day · BMR {caloriePlan.bmr} kcal/day</div>
+            </div>
+          {:else}
+            <p class="text-xs font-medium text-amber-600 sm:col-span-2 xl:col-span-1">Fill in sex, age, height, and current weight before generating.</p>
           {/if}
         </div>
-      {/each}
+      </section>
+
+      <section class="card">
+        <div class="border-b border-slate-200 bg-white p-4">
+          <h3 class="text-sm font-black text-slate-950">2. Personal strategy</h3>
+          <p class="mt-1 text-xs leading-5 text-slate-500">This keeps the plan from reading like generic diet advice.</p>
+        </div>
+        <div class="grid gap-3 p-4">
+          <Field label="Why this matters"><select class="input" bind:value={settings.motivation}><option value="">Select</option>{#each motivationOptions as option}<option>{option}</option>{/each}</select></Field>
+          <Field label="Biggest challenge"><select class="input" bind:value={settings.challenge}><option value="">Select</option>{#each challengeOptions as option}<option>{option}</option>{/each}</select></Field>
+          <Field label="Tracking style"><select class="input" bind:value={settings.trackingStyle}><option value="">Select</option>{#each trackingOptions as option}<option>{option}</option>{/each}</select></Field>
+          <Field label="Calorie-counting experience"><select class="input" bind:value={settings.calorieCountingExperience}><option value="">Select</option>{#each calorieExperienceOptions as option}<option>{option}</option>{/each}</select></Field>
+          <Field label="Fasting interest"><select class="input" bind:value={settings.fastingInterest}><option value="">Select</option>{#each fastingOptions as option}<option>{option}</option>{/each}</select></Field>
+        </div>
+      </section>
+
+      <section class="card">
+        <div class="border-b border-slate-200 bg-white p-4">
+          <h3 class="text-sm font-black text-slate-950">3. Generate</h3>
+          <p class="mt-1 text-xs leading-5 text-slate-500">Creates a new version and keeps the older one.</p>
+        </div>
+        <div class="space-y-3 p-4">
+          <button class="btn-primary w-full" type="button" on:click={generatePlan} disabled={planLoading || !caloriePlan}>{planLoading ? 'Generating...' : 'Generate new plan'}</button>
+          {#if planStatus}<p class:text-red-600={planError} class="rounded-xl bg-slate-50 p-3 text-sm font-semibold text-green-700">{planStatus}</p>{/if}
+        </div>
+      </section>
+
+      <section class="card">
+        <div class="border-b border-slate-200 bg-white p-4">
+          <h3 class="text-sm font-black text-slate-950">Plan history</h3>
+          <p class="mt-1 text-xs leading-5 text-slate-500">Switch versions without deleting the current one.</p>
+        </div>
+        <div class="grid gap-2 p-4">
+          {#each plans as plan}
+            <button class="rounded-2xl border px-3 py-3 text-left text-sm hover:border-blue-300 hover:bg-blue-50" class:border-blue-500={plan.id === selectedPlanId} class:bg-blue-50={plan.id === selectedPlanId} type="button" on:click={() => selectPlan(plan.id)}>
+              <div class="flex items-center justify-between gap-3">
+                <strong class="text-slate-900">{plan.title}</strong>
+                {#if plan.id === selectedPlanId}<span class="rounded-full bg-blue-600 px-2 py-0.5 text-[0.65rem] font-black uppercase tracking-wider text-white">Active</span>{/if}
+              </div>
+              <div class="mt-1 text-xs text-slate-500">Version {plan.version || 1} · {formatDate(plan.createdAt)}</div>
+            </button>
+          {:else}
+            <div class="rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-500">No versions yet.</div>
+          {/each}
+        </div>
+      </section>
+    </aside>
+
+    <div class="space-y-5">
+      {#if selectedPlan}
+        <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
+          <div class="border-b border-slate-200 bg-gradient-to-r from-slate-50 to-blue-50 p-5">
+            <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
+              <div>
+                <div class="text-xs font-black uppercase tracking-[0.22em] text-blue-700">Current plan</div>
+                <h3 class="mt-1 text-2xl font-black tracking-tight text-slate-950">{selectedPlan.title}</h3>
+                <p class="mt-1 text-sm text-slate-500">Version {selectedPlan.version || 1} · saved {formatDate(selectedPlan.createdAt)}</p>
+              </div>
+              <button class="rounded-xl bg-red-50 px-4 py-2 text-sm font-black text-red-600 hover:bg-red-100" type="button" on:click={() => deletePlan(selectedPlan.id)}>Delete plan</button>
+            </div>
+            <div class="mt-4 grid gap-3 md:grid-cols-3">
+              {#each summaryCards as item}
+                <div class="rounded-2xl border border-white bg-white/80 p-3 shadow-sm">
+                  <div class="text-[0.68rem] font-black uppercase tracking-widest text-slate-400">{item.label}</div>
+                  <div class="mt-1 text-lg font-black text-slate-950">{item.value}</div>
+                  <div class="text-xs text-slate-500">{item.note}</div>
+                </div>
+              {/each}
+            </div>
+          </div>
+
+          <div class="grid gap-4 p-4 lg:p-5">
+            {#each planSections as section, index}
+              <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm lg:p-5">
+                <div class="flex items-center gap-3 border-b border-slate-100 pb-3">
+                  <span class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-blue-600 text-xs font-black text-white">{index + 1}</span>
+                  <h4 class="text-base font-black text-slate-950">{section.title}</h4>
+                </div>
+                <ul class="mt-4 grid gap-3 text-sm leading-6 text-slate-700">
+                  {#each section.items as item}
+                    <li class="flex gap-3">
+                      <span class="mt-2 h-2 w-2 shrink-0 rounded-full bg-blue-500"></span>
+                      <span>{item}</span>
+                    </li>
+                  {/each}
+                </ul>
+              </article>
+            {:else}
+              <pre class="whitespace-pre-wrap rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-700">{selectedPlan.content}</pre>
+            {/each}
+          </div>
+        </section>
+
+        <section class="card">
+          <div class="border-b border-slate-200 bg-white p-4">
+            <h3 class="text-sm font-black text-slate-950">Adjust this plan</h3>
+            <p class="mt-1 text-xs leading-5 text-slate-500">Tell the AI what happened since the last version. The note is not saved, only the new plan is.</p>
+          </div>
+          <div class="p-4">
+            <Field label="Fine-tune with meals, activities, or progress notes">
+              <textarea class="input min-h-32" bind:value={tuneNote} placeholder="Example: walked 7,000 steps daily, felt hungry at night, lost 0.3 kg, struggled with breakfast"></textarea>
+            </Field>
+            <div class="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center">
+              <button class="btn-primary" type="button" on:click={() => tunePlan(selectedPlan.id)} disabled={planLoading || !tuneNote?.trim()}>{planLoading ? 'Updating...' : 'Update plan with AI'}</button>
+              <p class="text-xs leading-5 text-slate-400">This keeps the current version in history and creates a new active version.</p>
+            </div>
+          </div>
+        </section>
+      {:else}
+        <section class="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center shadow-sm">
+          <div class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-blue-50 text-xl font-black text-blue-600">1</div>
+          <h3 class="mt-4 text-xl font-black text-slate-950">No plan yet</h3>
+          <p class="mx-auto mt-2 max-w-lg text-sm leading-6 text-slate-500">Fill in the body target and strategy sections, then generate your first saved plan.</p>
+        </section>
+      {/if}
+
+      <section class="card">
+        <h3 class="card-title">Plan questions</h3>
+        <div class="divide-y divide-slate-100">
+          {#each faqs as faq, i}
+            <div>
+              <button
+                class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold text-slate-800 hover:bg-slate-50"
+                type="button"
+                on:click={() => faqOpen = faqOpen === i ? null : i}
+              >
+                <span>{faq.q}</span>
+                <svg class="h-4 w-4 flex-none text-slate-400 transition-transform {faqOpen === i ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
+              </button>
+              {#if faqOpen === i}
+                <p class="px-4 pb-4 text-sm leading-6 text-slate-600">{faq.a}</p>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </section>
     </div>
-  </section>
+  </div>
 </section>

web/src/SettingsPage.svelte

@@ -8,10 +8,14 @@
   export let modelStatus;
   export let modelError;
   export let modelSearching;
+  export let modelActionId;
   export let accountEmail;
   export let accountVerified;
   export let accountStatus;
   export let accountError;
+  export let healthConnectStatus;
+  export let healthConnectError;
+  export let healthConnectSyncing;
   export let passwordStatus;
   export let passwordError;
   export let resetPasswordValue;
@@ -25,6 +29,7 @@
   export let removeModel;
   export let saveAccountEmail;
   export let sendVerificationEmail;
+  export let syncHealthConnect;
   export let changePassword;
   export let resetPassword;
 </script>
@@ -65,7 +70,7 @@
           <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
             <div class="mb-2 text-xs font-bold uppercase tracking-wide text-slate-500">Saved models</div>
             <div class="max-h-40 overflow-y-auto pr-1">
-              {#each models as model}<div class="mb-2 flex items-center gap-2 rounded-lg bg-white px-3 py-2 text-sm shadow-sm"><span class="min-w-0 flex-1 truncate"><strong>{model.name}</strong> <span class="text-slate-400">{model.id}</span></span><button class="rounded-md bg-red-50 px-2 py-1 text-xs font-bold text-red-600 hover:bg-red-100" type="button" on:click={() => removeModel(model.id)}>Remove</button></div>{/each}
+              {#each models as model}<div class="mb-2 grid gap-2 rounded-lg bg-white px-3 py-2 text-sm shadow-sm sm:flex sm:items-center"><span class="min-w-0 flex-1 truncate"><strong>{model.name}</strong> <span class="text-slate-400">{model.id}</span></span><button class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-100 disabled:opacity-60" type="button" on:click={() => removeModel(model.id)} disabled={modelActionId === model.id}>{modelActionId === model.id ? 'Removing...' : 'Remove'}</button></div>{/each}
             </div>
           </div>
         </div>
@@ -73,19 +78,28 @@
           <label class="mb-2 block text-sm font-bold text-slate-700" for="modelSearch">Search provider models</label>
           <div class="flex flex-col gap-2 sm:flex-row"><input id="modelSearch" class="input" bind:value={modelSearch} placeholder="Search current models, e.g. claude, gemini, gpt" on:keydown={(event) => event.key === 'Enter' && searchModels()}><button class="btn-primary sm:w-36" type="button" on:click={searchModels} disabled={modelSearching}>{modelSearching ? 'Searching...' : 'Search'}</button></div>
           <div class="mt-3 max-h-72 overflow-y-auto rounded-xl border border-slate-200 bg-white p-2">
-            {#each discoveredModels as model}<div class="mb-2 flex items-center gap-2 rounded-lg border border-slate-100 px-3 py-2 text-sm"><button class="rounded-md bg-blue-600 px-2.5 py-1 text-xs font-black text-white hover:bg-blue-700" type="button" on:click={() => addModel(model)}>+</button><span class="min-w-0 flex-1 truncate"><strong>{model.name}</strong> <span class="text-slate-400">{model.id}</span></span></div>{/each}
+            {#each discoveredModels as model}<div class="mb-2 grid gap-2 rounded-lg border border-slate-100 px-3 py-2 text-sm sm:flex sm:items-center"><span class="min-w-0 flex-1 truncate"><strong>{model.name}</strong> <span class="text-slate-400">{model.id}</span></span><button class="rounded-lg bg-blue-600 px-3 py-2 text-xs font-black text-white hover:bg-blue-700 disabled:opacity-60 sm:order-first" type="button" on:click={() => addModel(model)} disabled={modelActionId === model.id}>{modelActionId === model.id ? 'Adding...' : 'Add'}</button></div>{/each}
           </div>
         </div>
       </div>
     </section>
 
     <section class="card xl:col-span-2">
-      <h3 class="card-title">Wearables and gym machines</h3>
+      <div class="border-b border-slate-200 bg-gradient-to-r from-blue-50 to-slate-50 p-4">
-      <div class="grid gap-3 p-4 text-sm leading-6 text-slate-600 md:grid-cols-3">
+        <div class="text-xs font-black uppercase tracking-[0.24em] text-blue-700">Garmin and Health Connect</div>
-        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><strong class="block text-slate-900">Garmin</strong>Sync Garmin Connect to Android Health Connect, then tap Sync Health Connect in the Android app.</div>
+        <h3 class="mt-1 text-xl font-black text-slate-950">Connect Garmin from the Android app</h3>
-        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><strong class="block text-slate-900">Gym machines</strong>Use the machine or gym app to write workouts to Health Connect. Calorie AI imports the workout sessions and daily active calories.</div>
+        <p class="mt-1 text-sm leading-6 text-slate-600">The web app cannot pair directly with a Garmin watch. Garmin writes to Android Health Connect, then Calorie AI imports that activity.</p>
-        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3"><strong class="block text-slate-900">Planning</strong>Synced active calories and steps are saved on the server and included when generating or updating plans.</div>
       </div>
+      <div class="grid gap-3 p-4 text-sm leading-6 text-slate-600 lg:grid-cols-3">
+        <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><strong class="block text-slate-900">1. Garmin Connect</strong>Pair the watch and confirm it syncs in the Garmin Connect Android app.</div>
+        <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><strong class="block text-slate-900">2. Health Connect</strong>In Garmin Connect, enable sharing to Android Health Connect. Garmin sends steps, calories, and workouts after each device sync.</div>
+        <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><strong class="block text-slate-900">3. Calorie AI Android</strong>Open Calorie AI on Android, go to Settings, and tap Sync Health Connect. The web dashboard updates after the server receives the sync.</div>
+      </div>
+      <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-4 sm:flex-row sm:items-center">
+        <button class="btn-primary sm:w-52" type="button" on:click={syncHealthConnect} disabled={healthConnectSyncing}>{healthConnectSyncing ? 'Syncing...' : 'Sync Health Connect'}</button>
+        <p id="healthConnectStatus" class:text-red-600={healthConnectError} class="text-sm font-semibold text-green-700">{healthConnectStatus}</p>
+      </div>
+      <div class="border-t border-slate-100 bg-slate-50 px-4 py-3 text-xs leading-5 text-slate-500">Direct Garmin web login is not available because Garmin Health API requires partner approval and API credentials.</div>
     </section>
   </div>
 </section>

web/src/appConfig.js

@@ -0,0 +1,37 @@
+export const pages = [
+  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', group: 'Tracker' },
+  { id: 'log', label: 'Log meal', icon: 'plus', group: 'Tracker' },
+  { id: 'analytics', label: 'Analytics', icon: 'analytics', group: 'Tracker' },
+  { id: 'diary', label: 'Diary', icon: 'diary', group: 'Tracker' },
+  { id: 'trash', label: 'Trash', icon: 'trash', group: 'Tracker' },
+  { id: 'plans', label: 'Plans', icon: 'plans', group: 'Tracker' },
+  { id: 'settings', label: 'Settings', icon: 'settings', group: 'Admin' },
+];
+
+export const mealTypes = ['Breakfast', 'Lunch', 'Dinner', 'Snack', 'Other'];
+
+export const fallbackModels = [
+  { id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
+  { id: 'claude-sonnet-4.6', name: 'Claude Sonnet 4.6' },
+  { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash' },
+  { id: 'gpt-4o-mini', name: 'GPT-4o mini' },
+];
+
+export const defaultSettings = {
+  visionModel: fallbackModels[0].id,
+  taskModel: fallbackModels[0].id,
+  sex: '',
+  age: '',
+  heightCm: '',
+  weightKg: '',
+  targetWeightKg: '',
+  goal: 'Lose weight',
+  calorieTarget: '',
+  activityLevel: 'Moderate',
+  pace: 'Steady',
+  motivation: '',
+  challenge: '',
+  trackingStyle: '',
+  calorieCountingExperience: '',
+  fastingInterest: '',
+};

web/tests/app.spec.js

@@ -6,15 +6,17 @@ const png = Buffer.from(
 );
 
 async function mockModels(page) {
+  let models = [
+    { id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
+  ];
+
   await page.route('**/api/models', async (route) => {
     await route.fulfill({
       status: 200,
       contentType: 'application/json',
       body: JSON.stringify({
         defaultModel: 'claude-haiku-4.5',
-        models: [
+        models,
-          { id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
-        ],
       }),
     });
   });
@@ -35,19 +37,28 @@ async function mockModels(page) {
 
   await page.route('**/api/models/add', async (route) => {
     const body = route.request().postDataJSON();
+    models = [...models.filter(model => model.id !== body.id), { id: body.id, name: body.name || body.id }];
     await route.fulfill({
       status: 200,
       contentType: 'application/json',
       body: JSON.stringify({
         ok: true,
         defaultModel: 'claude-haiku-4.5',
-        models: [
+        models,
-          { id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' },
-          { id: body.id, name: body.name || body.id },
-        ],
       }),
     });
   });
+
+  await page.route('**/api/models/remove', async (route) => {
+    const body = route.request().postDataJSON();
+    models = models.filter(model => model.id !== body.id);
+    if (!models.length) models = [{ id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5' }];
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ ok: true, defaultModel: models[0].id, models }),
+    });
+  });
 }
 
 async function mockPlans(page) {
@@ -254,11 +265,14 @@ test.describe('authenticated app', () => {
     await page.locator('#modelSearch').fill('gemini');
     await page.getByRole('button', { name: 'Search' }).click();
     await expect(page.getByText('Gemini 2.5 Flash')).toBeVisible();
-    await page.getByRole('button', { name: '+' }).last().click();
+    await page.getByRole('button', { name: 'Add' }).last().click();
+    await expect(page.locator('#modelStatus')).toContainText('Added Gemini 2.5 Flash.');
     await page.locator('#visionModel').selectOption('gemini-2.5-flash');
     await page.locator('#taskModel').selectOption('gemini-2.5-flash');
     await page.getByRole('button', { name: 'Save selected models' }).click();
     await expect(page.locator('#modelStatus')).toContainText('Models saved.');
+    await page.getByRole('button', { name: 'Remove' }).last().click();
+    await expect(page.locator('#modelStatus')).toContainText('Model removed.');
 
     await page.getByRole('button', { name: 'Log meal' }).click();
     await page.locator('#mealDate').fill('2026-05-18');