fix

frontend/src/App.vue

@@ -1,30 +1,61 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useAuthStore } from './stores/auth'
 import Button from 'primevue/button'
 import Avatar from 'primevue/avatar'
 
 const auth = useAuthStore()
 const isAuthenticated = computed(() => auth.isAuthenticated)
+const mobileMenuOpen = ref(false)
+
+onMounted(async () => {
+  if (auth.isAuthenticated && !auth.rider) {
+    await auth.fetchRider()
+  }
+})
 </script>
 
 <template>
-  <div class="min-h-screen bg-surface-950 text-surface-0">
-    <nav v-if="isAuthenticated" class="flex items-center justify-between px-8 h-14 bg-surface-900 border-b border-surface-700">
+  <div class="min-h-screen bg-surface-50 text-surface-900">
+    <nav v-if="isAuthenticated" class="flex items-center justify-between px-4 md:px-8 h-14 bg-white border-b border-surface-200 shadow-sm">
       <RouterLink to="/" class="text-xl font-bold text-primary">VeloBrain</RouterLink>
-      <div class="flex items-center gap-6">
-        <RouterLink to="/" class="text-surface-400 hover:text-surface-0 text-sm transition-colors" active-class="!text-surface-0">Dashboard</RouterLink>
-        <RouterLink to="/activities" class="text-surface-400 hover:text-surface-0 text-sm transition-colors" active-class="!text-surface-0">Activities</RouterLink>
-        <RouterLink to="/settings" class="text-surface-400 hover:text-surface-0 text-sm transition-colors" active-class="!text-surface-0">Settings</RouterLink>
+
+      <!-- Desktop nav -->
+      <div class="hidden md:flex items-center gap-6">
+        <RouterLink to="/" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Dashboard</RouterLink>
+        <RouterLink to="/activities" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Activities</RouterLink>
+        <RouterLink to="/coach" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Coach</RouterLink>
+        <RouterLink to="/settings" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Settings</RouterLink>
         <div class="flex items-center gap-3 ml-4">
+          <span v-if="auth.rider" class="text-surface-600 text-sm">{{ auth.rider.name }}</span>
           <Avatar v-if="auth.rider?.avatar_url" :image="auth.rider.avatar_url" shape="circle" size="small" />
           <Avatar v-else :label="auth.rider?.name?.charAt(0) ?? '?'" shape="circle" size="small" />
           <Button icon="pi pi-sign-out" text rounded severity="secondary" size="small" @click="auth.logout()" />
         </div>
       </div>
+
+      <!-- Mobile hamburger -->
+      <Button icon="pi pi-bars" text rounded severity="secondary" size="small" class="md:hidden" @click="mobileMenuOpen = !mobileMenuOpen" />
     </nav>
-    <main class="max-w-[1200px] mx-auto p-8">
+
+    <!-- Mobile menu dropdown -->
+    <div v-if="isAuthenticated && mobileMenuOpen" class="md:hidden bg-white border-b border-surface-200 shadow-sm px-4 py-3 flex flex-col gap-3">
+      <RouterLink to="/" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Dashboard</RouterLink>
+      <RouterLink to="/activities" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Activities</RouterLink>
+      <RouterLink to="/coach" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Coach</RouterLink>
+      <RouterLink to="/settings" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Settings</RouterLink>
+      <div class="flex items-center justify-between pt-2 border-t border-surface-100">
+        <div class="flex items-center gap-2">
+          <Avatar v-if="auth.rider?.avatar_url" :image="auth.rider.avatar_url" shape="circle" size="small" />
+          <Avatar v-else :label="auth.rider?.name?.charAt(0) ?? '?'" shape="circle" size="small" />
+          <span v-if="auth.rider" class="text-surface-600 text-sm">{{ auth.rider.name }}</span>
+        </div>
+        <Button icon="pi pi-sign-out" text rounded severity="secondary" size="small" @click="auth.logout()" />
+      </div>
+    </div>
+
+    <main class="max-w-[1200px] mx-auto p-4 md:p-8">
       <RouterView />
     </main>
   </div>

frontend/src/composables/useApi.ts

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const api = axios.create({
-  baseURL: '/api',
+  baseURL: import.meta.env.VITE_API_URL,
 })
 
 api.interceptors.request.use((config) => {

frontend/src/router.ts

@@ -26,6 +26,12 @@ const routes = [
     component: () => import('./views/ActivityDetailView.vue'),
     meta: { requiresAuth: true },
   },
+  {
+    path: '/coach',
+    name: 'coach',
+    component: () => import('./views/CoachView.vue'),
+    meta: { requiresAuth: true },
+  },
   {
     path: '/settings',
     name: 'settings',

frontend/src/stores/activities.ts

@@ -1,32 +1,89 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useApi } from '../composables/useApi'
-import type { Activity } from '../types/models'
+import type { Activity, DataPoint, ZonesResponse, PowerCurveResponse, FitnessEntry, DiaryEntry, WeeklyStats, PersonalRecord } from '../types/models'
 
 export const useActivitiesStore = defineStore('activities', () => {
   const { api } = useApi()
   const activities = ref<Activity[]>([])
   const total = ref(0)
+  const loading = ref(false)
 
-  async function fetchActivities(riderId: string, limit = 20, offset = 0) {
-    const { data } = await api.get('/activities', {
-      params: { rider_id: riderId, limit, offset },
-    })
-    activities.value = data.items
-    total.value = data.total
+  async function fetchActivities(limit = 20, offset = 0) {
+    loading.value = true
+    try {
+      const { data } = await api.get('/activities', { params: { limit, offset } })
+      activities.value = data.items
+      total.value = data.total
+    } finally {
+      loading.value = false
+    }
   }
 
-  async function uploadFit(riderId: string, file: File) {
+  async function fetchActivity(id: string): Promise<Activity> {
+    const { data } = await api.get<Activity>(`/activities/${id}`)
+    return data
+  }
+
+  async function fetchStream(id: string): Promise<DataPoint[]> {
+    const { data } = await api.get<DataPoint[]>(`/activities/${id}/stream`)
+    return data
+  }
+
+  async function fetchZones(id: string): Promise<ZonesResponse> {
+    const { data } = await api.get<ZonesResponse>(`/activities/${id}/zones`)
+    return data
+  }
+
+  async function fetchPowerCurve(id: string): Promise<PowerCurveResponse> {
+    const { data } = await api.get<PowerCurveResponse>(`/activities/${id}/power-curve`)
+    return data
+  }
+
+  async function uploadFit(file: File): Promise<Activity> {
     const form = new FormData()
     form.append('file', file)
-    const { data } = await api.post<Activity>(
-      `/activities/upload?rider_id=${riderId}`,
-      form,
-    )
+    const { data } = await api.post<Activity>('/activities/upload', form)
     activities.value.unshift(data)
     total.value++
     return data
   }
 
-  return { activities, total, fetchActivities, uploadFit }
+  async function fetchAiSummary(id: string): Promise<string> {
+    const { data } = await api.post<{ summary: string }>(`/activities/${id}/ai-summary`)
+    return data.summary
+  }
+
+  async function fetchFitness(days = 90): Promise<FitnessEntry[]> {
+    const { data } = await api.get<FitnessEntry[]>('/rider/fitness', { params: { days } })
+    return data
+  }
+
+  async function deleteActivity(id: string): Promise<void> {
+    await api.delete(`/activities/${id}`)
+    activities.value = activities.value.filter(a => a.id !== id)
+    total.value--
+  }
+
+  async function fetchDiary(id: string): Promise<DiaryEntry> {
+    const { data } = await api.get<DiaryEntry>(`/activities/${id}/diary`)
+    return data
+  }
+
+  async function updateDiary(id: string, diary: Partial<DiaryEntry>): Promise<DiaryEntry> {
+    const { data } = await api.put<DiaryEntry>(`/activities/${id}/diary`, diary)
+    return data
+  }
+
+  async function fetchPersonalRecords(): Promise<PersonalRecord[]> {
+    const { data } = await api.get<PersonalRecord[]>('/rider/personal-records')
+    return data
+  }
+
+  async function fetchWeeklyStats(weeks = 8): Promise<WeeklyStats[]> {
+    const { data } = await api.get<WeeklyStats[]>('/rider/weekly-stats', { params: { weeks } })
+    return data
+  }
+
+  return { activities, total, loading, fetchActivities, fetchActivity, fetchStream, fetchZones, fetchPowerCurve, uploadFit, fetchAiSummary, fetchFitness, deleteActivity, fetchDiary, updateDiary, fetchWeeklyStats, fetchPersonalRecords }
 })

frontend/src/stores/auth.ts

@@ -29,6 +29,23 @@ export const useAuthStore = defineStore('auth', () => {
     router.push({ name: 'login' })
   }
 
+  async function fetchRider() {
+    if (!token.value) return
+    try {
+      const { data } = await api.get<Rider>('/rider/profile')
+      rider.value = data
+    } catch {
+      // Token invalid — logout
+      logout()
+    }
+  }
+
+  async function updateRider(updates: Partial<Rider>) {
+    const { data } = await api.put<Rider>('/rider/profile', updates)
+    rider.value = data
+    return data
+  }
+
   async function loginWithTelegram(data: TelegramLoginData) {
     const { data: response } = await api.post<AuthResponse>('/auth/telegram-login', data)
     setAuth(response)
@@ -41,5 +58,5 @@ export const useAuthStore = defineStore('auth', () => {
     router.push({ name: 'dashboard' })
   }
 
-  return { token, rider, isAuthenticated, loginWithTelegram, loginWithWebApp, logout }
+  return { token, rider, isAuthenticated, fetchRider, updateRider, loginWithTelegram, loginWithWebApp, logout }
 })

frontend/src/stores/coaching.ts

@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { useApi } from '../composables/useApi'
+import type { CoachingChat, ChatListItem, TrainingPlan, ComplianceWeek, TodayWorkout } from '../types/models'
+
+export const useCoachingStore = defineStore('coaching', () => {
+  const { api } = useApi()
+  const currentChat = ref<CoachingChat | null>(null)
+  const activePlan = ref<TrainingPlan | null>(null)
+  const todayWorkout = ref<TodayWorkout | null>(null)
+  const loading = ref(false)
+  const sending = ref(false)
+
+  async function startOnboarding(): Promise<CoachingChat> {
+    loading.value = true
+    try {
+      const { data } = await api.post<CoachingChat>('/coaching/onboarding/start')
+      currentChat.value = data
+      return data
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function getOnboardingStatus(): Promise<{ onboarding_completed: boolean; coaching_profile: Record<string, unknown> | null }> {
+    const { data } = await api.get('/coaching/onboarding/status')
+    return data
+  }
+
+  async function sendMessage(chatId: string, message: string): Promise<CoachingChat> {
+    sending.value = true
+    try {
+      const { data } = await api.post<CoachingChat & { response: string }>(`/coaching/chat/${chatId}/message`, { message })
+      currentChat.value = data
+      return data
+    } finally {
+      sending.value = false
+    }
+  }
+
+  async function createChat(): Promise<CoachingChat> {
+    const { data } = await api.post<CoachingChat>('/coaching/chat/new')
+    currentChat.value = data
+    return data
+  }
+
+  async function getChat(chatId: string): Promise<CoachingChat> {
+    const { data } = await api.get<CoachingChat>(`/coaching/chat/${chatId}`)
+    currentChat.value = data
+    return data
+  }
+
+  async function listChats(): Promise<ChatListItem[]> {
+    const { data } = await api.get<ChatListItem[]>('/coaching/chats')
+    return data
+  }
+
+  async function generatePlan(): Promise<TrainingPlan> {
+    loading.value = true
+    try {
+      const { data } = await api.post<TrainingPlan>('/coaching/plan/generate')
+      activePlan.value = data
+      return data
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchActivePlan(): Promise<TrainingPlan | null> {
+    const { data } = await api.get<TrainingPlan | null>('/coaching/plan/active')
+    activePlan.value = data
+    return data
+  }
+
+  async function fetchCompliance(planId: string): Promise<ComplianceWeek[]> {
+    const { data } = await api.get<ComplianceWeek[]>(`/coaching/plan/${planId}/compliance`)
+    return data
+  }
+
+  async function fetchTodayWorkout(): Promise<TodayWorkout | null> {
+    const { data } = await api.get<TodayWorkout | null>('/coaching/today')
+    todayWorkout.value = data
+    return data
+  }
+
+  async function startPlanAdjustment(): Promise<CoachingChat & { response: string }> {
+    loading.value = true
+    try {
+      const { data } = await api.post<CoachingChat & { response: string }>('/coaching/plan/adjust')
+      currentChat.value = data
+      return data
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    currentChat, activePlan, todayWorkout, loading, sending,
+    startOnboarding, getOnboardingStatus, sendMessage, createChat, getChat, listChats,
+    generatePlan, fetchActivePlan, fetchCompliance, fetchTodayWorkout, startPlanAdjustment,
+  }
+})

frontend/src/style.css

@@ -1,3 +1,31 @@
 @import "tailwindcss";
 @plugin "tailwindcss-primeui";
 @import "primeicons/primeicons.css";
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.p-card {
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.p-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.p-datatable .p-datatable-thead > tr > th {
+  background: #f9fafb;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+#route-map {
+  z-index: 0;
+}

frontend/src/types/models.ts

@@ -10,6 +10,8 @@ export interface Rider {
   zones_config: Record<string, unknown> | null
   goals: string | null
   experience_level: string | null
+  coaching_profile: Record<string, unknown> | null
+  onboarding_completed: boolean
 }
 
 export interface ActivityMetrics {
@@ -23,6 +25,17 @@ export interface ActivityMetrics {
   max_hr: number | null
   avg_cadence: number | null
   avg_speed: number | null
+  calories: number | null
+}
+
+export interface Interval {
+  id: string
+  start_ts: string
+  end_ts: string
+  interval_type: string
+  avg_power: number | null
+  avg_hr: number | null
+  duration: number | null
 }
 
 export interface Activity {
@@ -35,6 +48,7 @@ export interface Activity {
   distance: number | null
   elevation_gain: number | null
   metrics: ActivityMetrics | null
+  intervals: Interval[]
 }
 
 export interface DataPoint {
@@ -48,3 +62,140 @@ export interface DataPoint {
   altitude: number | null
   temperature: number | null
 }
+
+export interface ZoneItem {
+  zone: number
+  name: string
+  seconds: number
+  percentage: number
+}
+
+export interface PowerZoneItem extends ZoneItem {
+  min_watts: number
+  max_watts: number | null
+}
+
+export interface HrZoneItem extends ZoneItem {
+  min_bpm: number
+  max_bpm: number | null
+}
+
+export interface ZonesResponse {
+  power_zones: PowerZoneItem[]
+  hr_zones: HrZoneItem[]
+}
+
+export interface PowerCurveResponse {
+  curve: Record<number, number>
+}
+
+export interface DiaryEntry {
+  rider_notes: string | null
+  mood: string | null
+  rpe: number | null
+  sleep_hours: number | null
+}
+
+export interface WeeklyStats {
+  week: string
+  rides: number
+  duration: number
+  distance: number
+  tss: number
+}
+
+export interface PersonalRecord {
+  duration: number
+  power: number
+  activity_id: string
+  activity_name: string
+  date: string
+}
+
+export interface FitnessEntry {
+  date: string
+  ctl: number
+  atl: number
+  tsb: number
+  ramp_rate: number | null
+}
+
+export interface ChatMessage {
+  role: 'user' | 'model'
+  text: string
+  timestamp?: string
+}
+
+export interface CoachingChat {
+  chat_id: string
+  chat_type: string
+  status: string
+  messages: ChatMessage[]
+  onboarding_completed?: boolean
+}
+
+export interface ChatListItem {
+  id: string
+  chat_type: string
+  status: string
+  message_count: number
+  created_at: string | null
+  updated_at: string | null
+  last_message: string | null
+}
+
+export interface TrainingPlanWeekDay {
+  day: string
+  workout_type: string
+  title: string
+  description: string
+  duration_minutes: number
+  target_tss: number
+  target_if: number
+}
+
+export interface TrainingPlanWeek {
+  week_number: number
+  focus: string
+  target_tss: number
+  target_hours: number
+  days: TrainingPlanWeekDay[]
+}
+
+export interface TrainingPlan {
+  id: string
+  goal: string
+  start_date: string
+  end_date: string
+  phase: string | null
+  description: string | null
+  status: string
+  weeks: TrainingPlanWeek[]
+}
+
+export interface ComplianceWeek {
+  week_number: number
+  focus: string
+  planned_tss: number
+  actual_tss: number
+  planned_hours: number
+  actual_hours: number
+  planned_rides: number
+  actual_rides: number
+  adherence_pct: number
+  status: string
+}
+
+export interface TodayWorkout {
+  plan_id: string
+  plan_goal: string
+  week_number: number
+  week_focus: string
+  day: string
+  workout_type: string
+  title: string
+  description: string
+  duration_minutes: number
+  target_tss: number
+  target_if: number
+}

frontend/src/views/ActivitiesView.vue

@@ -1,18 +1,135 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useActivitiesStore } from '../stores/activities'
+import { useRouter } from 'vue-router'
 import Card from 'primevue/card'
 import Button from 'primevue/button'
+import FileUpload from 'primevue/fileupload'
+import Tag from 'primevue/tag'
+import ProgressSpinner from 'primevue/progressspinner'
+
+const store = useActivitiesStore()
+const router = useRouter()
+const uploading = ref(false)
+const uploadError = ref('')
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+function formatDistance(meters: number | null): string {
+  if (!meters) return '—'
+  return `${(meters / 1000).toFixed(1)} km`
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-GB', {
+    day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+  })
+}
+
+async function onUpload(event: any) {
+  const file = event.files?.[0]
+  if (!file) return
+
+  uploading.value = true
+  uploadError.value = ''
+  try {
+    const activity = await store.uploadFit(file)
+    router.push({ name: 'activity-detail', params: { id: activity.id } })
+  } catch (e: any) {
+    uploadError.value = e.response?.data?.detail || 'Upload failed'
+  } finally {
+    uploading.value = false
+  }
+}
+
+onMounted(() => {
+  store.fetchActivities()
+})
 </script>
 
 <template>
   <div>
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-semibold">Activities</h1>
-      <Button label="Upload .FIT" icon="pi pi-upload" />
+      <FileUpload
+        mode="basic"
+        accept=".fit"
+        :auto="true"
+        choose-label="Upload .FIT"
+        choose-icon="pi pi-upload"
+        :custom-upload="true"
+        @uploader="onUpload"
+      />
+    </div>
+
+    <div v-if="uploading" class="flex items-center gap-3 mb-4">
+      <ProgressSpinner style="width: 24px; height: 24px" />
+      <span class="text-surface-500 text-sm">Processing .FIT file...</span>
+    </div>
+
+    <p v-if="uploadError" class="text-red-500 text-sm mb-4">{{ uploadError }}</p>
+
+    <div v-if="store.loading && !uploading" class="flex justify-center py-12">
+      <ProgressSpinner style="width: 40px; height: 40px" />
+    </div>
+
+    <div v-else-if="store.activities.length === 0" class="text-surface-500 py-12 text-center">
+      No activities yet. Upload your first .FIT file!
+    </div>
+
+    <div v-else class="flex flex-col gap-3">
+      <Card
+        v-for="a in store.activities"
+        :key="a.id"
+        class="cursor-pointer hover:border-primary transition-colors"
+        @click="router.push({ name: 'activity-detail', params: { id: a.id } })"
+      >
+        <template #content>
+          <div class="flex items-center justify-between flex-wrap gap-4">
+            <div class="flex items-center gap-4">
+              <div>
+                <p class="font-semibold">{{ a.name || 'Ride' }}</p>
+                <p class="text-surface-500 text-sm">{{ formatDate(a.date) }}</p>
+              </div>
+              <Tag :value="a.activity_type" severity="info" class="text-xs" />
+            </div>
+            <div class="flex items-center gap-6 text-sm">
+              <div class="text-center">
+                <p class="text-surface-500 text-xs">Duration</p>
+                <p class="font-semibold">{{ formatDuration(a.duration) }}</p>
+              </div>
+              <div class="text-center">
+                <p class="text-surface-500 text-xs">Distance</p>
+                <p class="font-semibold">{{ formatDistance(a.distance) }}</p>
+              </div>
+              <div v-if="a.elevation_gain" class="text-center">
+                <p class="text-surface-500 text-xs">Elevation</p>
+                <p class="font-semibold">{{ a.elevation_gain }}m</p>
+              </div>
+              <div v-if="a.metrics?.avg_power" class="text-center">
+                <p class="text-surface-500 text-xs">Avg Power</p>
+                <p class="font-semibold">{{ a.metrics.avg_power }}W</p>
+              </div>
+              <div v-if="a.metrics?.normalized_power" class="text-center">
+                <p class="text-surface-500 text-xs">NP</p>
+                <p class="font-semibold">{{ a.metrics.normalized_power }}W</p>
+              </div>
+              <div v-if="a.metrics?.tss" class="text-center">
+                <p class="text-surface-500 text-xs">TSS</p>
+                <p class="font-semibold">{{ a.metrics.tss }}</p>
+              </div>
+              <div v-if="a.metrics?.avg_hr" class="text-center">
+                <p class="text-surface-500 text-xs">Avg HR</p>
+                <p class="font-semibold">{{ a.metrics.avg_hr }}</p>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Card>
     </div>
-    <Card>
-      <template #content>
-        <p class="text-surface-400">Activity list with filters — coming soon</p>
-      </template>
-    </Card>
   </div>
 </template>

frontend/src/views/ActivityDetailView.vue

@@ -1,39 +1,514 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { onMounted, ref, computed, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useActivitiesStore } from '../stores/activities'
+import type { Activity, DataPoint, ZonesResponse, PowerCurveResponse, DiaryEntry } from '../types/models'
 import Card from 'primevue/card'
+import Tag from 'primevue/tag'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Button from 'primevue/button'
+import Textarea from 'primevue/textarea'
+import Select from 'primevue/select'
+import InputNumber from 'primevue/inputnumber'
+import ProgressSpinner from 'primevue/progressspinner'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart } from 'echarts/charts'
+import {
+  TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, MarkLineComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+
+use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, MarkLineComponent])
 
 const route = useRoute()
+const router = useRouter()
+const store = useActivitiesStore()
+
+const activity = ref<Activity | null>(null)
+const stream = ref<DataPoint[]>([])
+const zones = ref<ZonesResponse | null>(null)
+const powerCurve = ref<PowerCurveResponse | null>(null)
+const loading = ref(true)
+const aiSummary = ref('')
+const aiLoading = ref(false)
+
+// Diary
+const diary = ref<DiaryEntry>({ rider_notes: null, mood: null, rpe: null, sleep_hours: null })
+const diarySaving = ref(false)
+const diarySaved = ref(false)
+
+const moods = [
+  { label: 'Great', value: 'great' },
+  { label: 'Good', value: 'good' },
+  { label: 'OK', value: 'ok' },
+  { label: 'Tired', value: 'tired' },
+  { label: 'Bad', value: 'bad' },
+]
+
+const hasGps = computed(() => stream.value.some(dp => dp.latitude && dp.longitude))
+const hasAltitude = computed(() => stream.value.some(dp => dp.altitude != null))
+const hasSpeed = computed(() => stream.value.some(dp => dp.speed != null && dp.speed > 0))
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  return h > 0 ? `${h}h ${m}m` : `${m}m ${s}s`
+}
+
+function formatDistance(meters: number | null): string {
+  if (!meters) return '—'
+  return `${(meters / 1000).toFixed(1)} km`
+}
+
+function buildStreamChart() {
+  const times = stream.value.map(dp => new Date(dp.timestamp).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }))
+  const powers = stream.value.map(dp => dp.power)
+  const hrs = stream.value.map(dp => dp.heart_rate)
+  const cadences = stream.value.map(dp => dp.cadence)
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['Power', 'HR', 'Cadence'], top: 0, textStyle: { color: '#6b7280' } },
+    grid: { left: 50, right: 30, top: 45, bottom: 60 },
+    dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20, bottom: 10 }],
+    xAxis: { type: 'category', data: times, axisLabel: { color: '#666', fontSize: 10 }, show: false },
+    yAxis: [
+      { type: 'value', name: 'Watts', nameTextStyle: { color: '#6b7280' }, axisLabel: { color: '#6b7280' }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
+      { type: 'value', name: 'bpm', nameTextStyle: { color: '#6b7280' }, axisLabel: { color: '#6b7280' }, splitLine: { show: false } },
+    ],
+    series: [
+      { name: 'Power', type: 'line', data: powers, showSymbol: false, lineStyle: { width: 1 }, itemStyle: { color: '#3b82f6' }, areaStyle: { color: 'rgba(59,130,246,0.08)' } },
+      { name: 'HR', type: 'line', yAxisIndex: 1, data: hrs, showSymbol: false, lineStyle: { width: 1 }, itemStyle: { color: '#ef4444' } },
+      { name: 'Cadence', type: 'line', yAxisIndex: 1, data: cadences, showSymbol: false, lineStyle: { width: 1, type: 'dashed' }, itemStyle: { color: '#10b981' } },
+    ],
+  }
+}
+
+function buildElevationChart() {
+  const distances: number[] = []
+  let totalDist = 0
+  for (let i = 0; i < stream.value.length; i++) {
+    if (i > 0 && stream.value[i].speed != null) {
+      totalDist += (stream.value[i].speed || 0)
+    }
+    distances.push(totalDist / 1000)
+  }
+
+  const altitudes = stream.value.map(dp => dp.altitude)
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis', formatter: (p: any) => `${p[0].name} km: ${p[0].value?.toFixed(0) ?? '—'}m` },
+    grid: { left: 50, right: 20, top: 10, bottom: 25 },
+    xAxis: {
+      type: 'category',
+      data: distances.map(d => d.toFixed(1)),
+      axisLabel: { color: '#6b7280', fontSize: 10, formatter: (v: string) => `${v}` },
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value', name: 'm',
+      nameTextStyle: { color: '#6b7280' },
+      axisLabel: { color: '#6b7280' },
+      splitLine: { lineStyle: { color: '#e5e7eb' } },
+    },
+    series: [{
+      type: 'line',
+      data: altitudes,
+      showSymbol: false,
+      lineStyle: { width: 1.5, color: '#8b5cf6' },
+      areaStyle: {
+        color: {
+          type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(139,92,246,0.25)' },
+            { offset: 1, color: 'rgba(139,92,246,0.02)' },
+          ],
+        },
+      },
+    }],
+  }
+}
+
+function buildSpeedChart() {
+  const times = stream.value.map(dp => new Date(dp.timestamp).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }))
+  const speeds = stream.value.map(dp => dp.speed != null ? +(dp.speed * 3.6).toFixed(1) : null)
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis', formatter: (p: any) => `${p[0].value?.toFixed(1) ?? '—'} km/h` },
+    grid: { left: 50, right: 20, top: 10, bottom: 50 },
+    dataZoom: [{ type: 'inside' }, { type: 'slider', height: 20, bottom: 10 }],
+    xAxis: { type: 'category', data: times, show: false },
+    yAxis: {
+      type: 'value', name: 'km/h',
+      nameTextStyle: { color: '#6b7280' },
+      axisLabel: { color: '#6b7280' },
+      splitLine: { lineStyle: { color: '#e5e7eb' } },
+    },
+    series: [{
+      type: 'line',
+      data: speeds,
+      showSymbol: false,
+      lineStyle: { width: 1, color: '#f59e0b' },
+      areaStyle: { color: 'rgba(245,158,11,0.08)' },
+    }],
+  }
+}
+
+function buildZonesChart() {
+  if (!zones.value?.power_zones?.length) return null
+  const z = zones.value.power_zones
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    grid: { left: 110, right: 30, top: 10, bottom: 10 },
+    xAxis: { type: 'value', axisLabel: { color: '#6b7280', formatter: (v: number) => `${v}%` }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
+    yAxis: { type: 'category', data: z.map(i => `Z${i.zone} ${i.name}`).reverse(), axisLabel: { color: '#6b7280', fontSize: 11 } },
+    series: [{
+      type: 'bar',
+      data: z.map(i => i.percentage).reverse(),
+      itemStyle: {
+        color: (params: any) => {
+          const colors = ['#22c55e', '#3b82f6', '#a855f7', '#f59e0b', '#ef4444', '#dc2626', '#991b1b']
+          return colors[z.length - 1 - params.dataIndex] || '#666'
+        },
+      },
+    }],
+  }
+}
+
+function buildHrZonesChart() {
+  if (!zones.value?.hr_zones?.length) return null
+  const z = zones.value.hr_zones
+  const hrColors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#dc2626']
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis' },
+    grid: { left: 110, right: 30, top: 10, bottom: 10 },
+    xAxis: { type: 'value', axisLabel: { color: '#6b7280', formatter: (v: number) => `${v}%` }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
+    yAxis: { type: 'category', data: z.map(i => `Z${i.zone} ${i.name}`).reverse(), axisLabel: { color: '#6b7280', fontSize: 11 } },
+    series: [{
+      type: 'bar',
+      data: z.map(i => i.percentage).reverse(),
+      itemStyle: {
+        color: (params: any) => hrColors[z.length - 1 - params.dataIndex] || '#666',
+      },
+    }],
+  }
+}
+
+function buildPowerCurveChart() {
+  if (!powerCurve.value?.curve) return null
+  const entries = Object.entries(powerCurve.value.curve)
+    .map(([dur, pow]) => [Number(dur), pow] as [number, number])
+    .sort((a, b) => a[0] - b[0])
+
+  const labels = entries.map(([d]) => {
+    if (d < 60) return `${d}s`
+    if (d < 3600) return `${d / 60}m`
+    return `${d / 3600}h`
+  })
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'axis', formatter: (p: any) => `${p[0].name}: ${p[0].value}W` },
+    grid: { left: 50, right: 30, top: 10, bottom: 30 },
+    xAxis: { type: 'category', data: labels, axisLabel: { color: '#6b7280' } },
+    yAxis: { type: 'value', name: 'W', nameTextStyle: { color: '#6b7280' }, axisLabel: { color: '#6b7280' }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
+    series: [{
+      type: 'line',
+      data: entries.map(([, p]) => p),
+      showSymbol: true,
+      symbolSize: 6,
+      areaStyle: { color: 'rgba(168,85,247,0.12)' },
+      itemStyle: { color: '#a855f7' },
+      lineStyle: { width: 2 },
+    }],
+  }
+}
+
+function initMap() {
+  const gpsPoints = stream.value.filter(dp => dp.latitude && dp.longitude)
+  if (gpsPoints.length < 2) return
+
+  const map = L.map('route-map')
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; OpenStreetMap',
+    maxZoom: 18,
+  }).addTo(map)
+
+  const coords: L.LatLngExpression[] = gpsPoints.map(dp => [dp.latitude!, dp.longitude!])
+  const polyline = L.polyline(coords, { color: '#3b82f6', weight: 3, opacity: 0.8 }).addTo(map)
+
+  L.circleMarker(coords[0] as L.LatLngExpression, { radius: 6, color: '#22c55e', fillColor: '#22c55e', fillOpacity: 1 }).addTo(map)
+  L.circleMarker(coords[coords.length - 1] as L.LatLngExpression, { radius: 6, color: '#ef4444', fillColor: '#ef4444', fillOpacity: 1 }).addTo(map)
+
+  map.fitBounds(polyline.getBounds(), { padding: [20, 20] })
+}
+
+async function loadAiSummary() {
+  if (!activity.value || aiSummary.value) return
+  aiLoading.value = true
+  try {
+    aiSummary.value = await store.fetchAiSummary(activity.value.id)
+  } catch {
+    aiSummary.value = 'Failed to generate summary. Check your Gemini API key.'
+  } finally {
+    aiLoading.value = false
+  }
+}
+
+async function saveDiary() {
+  if (!activity.value) return
+  diarySaving.value = true
+  diarySaved.value = false
+  try {
+    diary.value = await store.updateDiary(activity.value.id, diary.value)
+    diarySaved.value = true
+    setTimeout(() => { diarySaved.value = false }, 2000)
+  } finally {
+    diarySaving.value = false
+  }
+}
+
+async function handleDelete() {
+  if (!activity.value) return
+  if (!confirm('Delete this activity? This cannot be undone.')) return
+  await store.deleteActivity(activity.value.id)
+  router.push({ name: 'activities' })
+}
+
+onMounted(async () => {
+  const id = route.params.id as string
+  try {
+    const [act, str, zn, pc, di] = await Promise.all([
+      store.fetchActivity(id),
+      store.fetchStream(id),
+      store.fetchZones(id),
+      store.fetchPowerCurve(id),
+      store.fetchDiary(id),
+    ])
+    activity.value = act
+    stream.value = str
+    zones.value = zn
+    powerCurve.value = pc
+    diary.value = di
+  } finally {
+    loading.value = false
+  }
+
+  // Init map after loading=false triggers DOM render of #route-map
+  if (stream.value.some(dp => dp.latitude && dp.longitude)) {
+    await nextTick()
+    initMap()
+  }
+})
 </script>
 
 <template>
   <div>
-    <h1 class="text-2xl font-semibold mb-6">Activity Detail</h1>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <Card>
-        <template #title>Power / HR Chart</template>
+    <div v-if="loading" class="flex justify-center py-20">
+      <ProgressSpinner style="width: 50px; height: 50px" />
+    </div>
+
+    <div v-else-if="activity">
+      <!-- Header -->
+      <div class="flex items-center justify-between mb-6">
+        <div class="flex items-center gap-4">
+          <h1 class="text-2xl font-semibold">{{ activity.name || 'Ride' }}</h1>
+          <Tag :value="activity.activity_type" severity="info" />
+        </div>
+        <Button icon="pi pi-trash" severity="danger" text rounded size="small" @click="handleDelete" />
+      </div>
+
+      <!-- Key metrics -->
+      <div class="grid grid-cols-3 md:grid-cols-6 gap-2 md:gap-3 mb-6">
+        <Card>
+          <template #content>
+            <p class="text-surface-500 text-xs uppercase">Duration</p>
+            <p class="text-lg font-bold">{{ formatDuration(activity.duration) }}</p>
+          </template>
+        </Card>
+        <Card>
+          <template #content>
+            <p class="text-surface-500 text-xs uppercase">Distance</p>
+            <p class="text-lg font-bold">{{ formatDistance(activity.distance) }}</p>
+          </template>
+        </Card>
+        <Card v-if="activity.metrics?.avg_power">
+          <template #content>
+            <p class="text-surface-500 text-xs uppercase">Avg / NP</p>
+            <p class="text-lg font-bold">{{ activity.metrics.avg_power }} / {{ activity.metrics.normalized_power }}W</p>
+          </template>
+        </Card>
+        <Card v-if="activity.metrics?.tss">
+          <template #content>
+            <p class="text-surface-500 text-xs uppercase">TSS / IF</p>
+            <p class="text-lg font-bold">{{ activity.metrics.tss }} / {{ activity.metrics.intensity_factor }}</p>
+          </template>
+        </Card>
+        <Card v-if="activity.metrics?.avg_hr">
+          <template #content>
+            <p class="text-surface-500 text-xs uppercase">Avg / Max HR</p>
+            <p class="text-lg font-bold">{{ activity.metrics.avg_hr }} / {{ activity.metrics.max_hr }}</p>
+          </template>
+        </Card>
+        <Card v-if="activity.elevation_gain">
+          <template #content>
+            <p class="text-surface-500 text-xs uppercase">Elevation</p>
+            <p class="text-lg font-bold">{{ activity.elevation_gain }}m</p>
+          </template>
+        </Card>
+      </div>
+
+      <!-- AI Summary -->
+      <Card class="mb-6">
+        <template #title>
+          <div class="flex items-center gap-2">
+            <i class="pi pi-sparkles text-primary"></i>
+            AI Coach Summary
+          </div>
+        </template>
         <template #content>
-          <p class="text-surface-400">ECharts — coming soon</p>
+          <div v-if="aiSummary" v-html="aiSummary" class="text-surface-700 leading-relaxed whitespace-pre-line"></div>
+          <div v-else-if="aiLoading" class="flex items-center gap-3">
+            <ProgressSpinner style="width: 20px; height: 20px" />
+            <span class="text-surface-500 text-sm">Analyzing your ride...</span>
+          </div>
+          <div v-else>
+            <Button label="Generate AI Analysis" icon="pi pi-sparkles" severity="secondary" outlined size="small" @click="loadAiSummary" />
+          </div>
         </template>
       </Card>
-      <Card>
-        <template #title>Route Map</template>
+
+      <!-- Route Map -->
+      <Card v-if="hasGps" class="mb-6">
+        <template #title>Route</template>
         <template #content>
-          <p class="text-surface-400">Leaflet map — coming soon</p>
+          <div id="route-map" style="height: 350px; border-radius: 8px;"></div>
         </template>
       </Card>
-      <Card>
-        <template #title>Metrics</template>
+
+      <!-- Elevation Profile -->
+      <Card v-if="hasAltitude" class="mb-6">
+        <template #title>Elevation Profile</template>
         <template #content>
-          <p class="text-surface-400">NP, IF, TSS, zones — coming soon</p>
+          <VChart :option="buildElevationChart()" style="height: 200px" autoresize />
         </template>
       </Card>
-      <Card>
+
+      <!-- Speed Profile -->
+      <Card v-if="hasSpeed" class="mb-6">
+        <template #title>Speed</template>
+        <template #content>
+          <VChart :option="buildSpeedChart()" style="height: 200px" autoresize />
+        </template>
+      </Card>
+
+      <!-- Power/HR/Cadence chart -->
+      <Card v-if="stream.length > 0" class="mb-6">
+        <template #title>Power / HR / Cadence</template>
+        <template #content>
+          <VChart :option="buildStreamChart()" style="height: 300px" autoresize />
+        </template>
+      </Card>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+        <!-- Power zones -->
+        <Card v-if="zones?.power_zones?.length">
+          <template #title>Power Zones</template>
+          <template #content>
+            <VChart :option="buildZonesChart()" style="height: 250px" autoresize />
+          </template>
+        </Card>
+
+        <!-- HR zones -->
+        <Card v-if="zones?.hr_zones?.length">
+          <template #title>Heart Rate Zones</template>
+          <template #content>
+            <VChart :option="buildHrZonesChart()" style="height: 200px" autoresize />
+          </template>
+        </Card>
+
+        <!-- Power curve -->
+        <Card v-if="powerCurve?.curve && Object.keys(powerCurve.curve).length > 0">
+          <template #title>Power Curve</template>
+          <template #content>
+            <VChart :option="buildPowerCurveChart()" style="height: 250px" autoresize />
+          </template>
+        </Card>
+      </div>
+
+      <!-- Intervals table -->
+      <Card v-if="activity.intervals?.length" class="mb-6">
         <template #title>Intervals</template>
         <template #content>
-          <p class="text-surface-400">Detected intervals table — coming soon</p>
+          <DataTable :value="activity.intervals" size="small" stripedRows>
+            <Column field="interval_type" header="Type">
+              <template #body="{ data }">
+                <Tag :value="data.interval_type" :severity="data.interval_type === 'work' ? 'danger' : 'success'" />
+              </template>
+            </Column>
+            <Column header="Duration">
+              <template #body="{ data }">{{ formatDuration(data.duration || 0) }}</template>
+            </Column>
+            <Column field="avg_power" header="Avg Power">
+              <template #body="{ data }">{{ data.avg_power ? `${data.avg_power}W` : '—' }}</template>
+            </Column>
+            <Column field="avg_hr" header="Avg HR">
+              <template #body="{ data }">{{ data.avg_hr ? `${data.avg_hr}bpm` : '—' }}</template>
+            </Column>
+          </DataTable>
+        </template>
+      </Card>
+
+      <!-- Training Diary -->
+      <Card class="mb-6">
+        <template #title>
+          <div class="flex items-center gap-2">
+            <i class="pi pi-book text-primary"></i>
+            Training Diary
+          </div>
+        </template>
+        <template #content>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Mood</label>
+              <Select
+                v-model="diary.mood"
+                :options="moods"
+                option-label="label"
+                option-value="value"
+                placeholder="How did you feel?"
+                class="w-full"
+              />
+            </div>
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">RPE (1-10)</label>
+              <InputNumber v-model="diary.rpe" :min="1" :max="10" class="w-full" placeholder="Rate of Perceived Exertion" />
+            </div>
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Sleep (hours)</label>
+              <InputNumber v-model="diary.sleep_hours" :min="0" :max="24" :max-fraction-digits="1" class="w-full" placeholder="Hours slept" />
+            </div>
+          </div>
+          <div class="mb-4">
+            <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Notes</label>
+            <Textarea v-model="diary.rider_notes" rows="3" class="w-full" placeholder="How was the ride? Any observations..." />
+          </div>
+          <div class="flex items-center gap-3">
+            <Button label="Save" icon="pi pi-check" size="small" :loading="diarySaving" @click="saveDiary" />
+            <span v-if="diarySaved" class="text-green-600 text-sm">Saved!</span>
+          </div>
         </template>
       </Card>
     </div>
-    <p class="text-surface-500 text-sm mt-4">ID: {{ route.params.id }}</p>
   </div>
 </template>

frontend/src/views/CoachView.vue

@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, nextTick } from 'vue'
+import { useCoachingStore } from '../stores/coaching'
+import { useAuthStore } from '../stores/auth'
+import type { ChatMessage, TrainingPlan, ComplianceWeek, TodayWorkout } from '../types/models'
+import Card from 'primevue/card'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Tag from 'primevue/tag'
+import ProgressBar from 'primevue/progressbar'
+
+const coaching = useCoachingStore()
+const auth = useAuthStore()
+
+const activeTab = ref<'chat' | 'plan' | 'progress'>('chat')
+const messageInput = ref('')
+const messagesContainer = ref<HTMLElement | null>(null)
+const compliance = ref<ComplianceWeek[]>([])
+
+const messages = computed<ChatMessage[]>(() => coaching.currentChat?.messages || [])
+const plan = computed<TrainingPlan | null>(() => coaching.activePlan)
+const todayWorkout = computed<TodayWorkout | null>(() => coaching.todayWorkout)
+const onboardingCompleted = ref(false)
+const chatReady = ref(false)
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+    }
+  })
+}
+
+async function sendMessage() {
+  const text = messageInput.value.trim()
+  if (!text || !coaching.currentChat?.chat_id) return
+
+  messageInput.value = ''
+  await coaching.sendMessage(coaching.currentChat.chat_id, text)
+  scrollToBottom()
+
+  // Check if onboarding just completed
+  if (coaching.currentChat?.onboarding_completed && !onboardingCompleted.value) {
+    onboardingCompleted.value = true
+    await auth.fetchRider()
+  }
+}
+
+async function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    await sendMessage()
+  }
+}
+
+async function startNewChat() {
+  await coaching.createChat()
+  scrollToBottom()
+}
+
+async function handleGeneratePlan() {
+  await coaching.generatePlan()
+  if (coaching.activePlan) {
+    activeTab.value = 'plan'
+    await loadCompliance()
+  }
+}
+
+async function handleAdjustPlan() {
+  await coaching.startPlanAdjustment()
+  activeTab.value = 'chat'
+  scrollToBottom()
+}
+
+async function loadCompliance() {
+  if (plan.value?.id) {
+    try {
+      compliance.value = await coaching.fetchCompliance(plan.value.id)
+    } catch { /* no compliance data */ }
+  }
+}
+
+function workoutTypeColor(type: string): string {
+  const colors: Record<string, string> = {
+    rest: 'secondary',
+    recovery: 'secondary',
+    endurance: 'info',
+    tempo: 'warn',
+    sweetspot: 'warn',
+    threshold: 'danger',
+    vo2max: 'danger',
+    sprint: 'contrast',
+    race: 'contrast',
+  }
+  return colors[type] || 'info'
+}
+
+function workoutTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    rest: 'Отдых',
+    recovery: 'Восстановление',
+    endurance: 'Выносливость',
+    tempo: 'Темпо',
+    sweetspot: 'Sweet Spot',
+    threshold: 'Порог',
+    vo2max: 'VO2max',
+    sprint: 'Спринт',
+    race: 'Гонка',
+  }
+  return labels[type] || type
+}
+
+function dayLabel(day: string): string {
+  const labels: Record<string, string> = {
+    monday: 'Пн',
+    tuesday: 'Вт',
+    wednesday: 'Ср',
+    thursday: 'Чт',
+    friday: 'Пт',
+    saturday: 'Сб',
+    sunday: 'Вс',
+  }
+  return labels[day] || day
+}
+
+onMounted(async () => {
+  // Check onboarding status
+  try {
+    const status = await coaching.getOnboardingStatus()
+    onboardingCompleted.value = status.onboarding_completed
+
+    if (!status.onboarding_completed) {
+      // Start or resume onboarding
+      await coaching.startOnboarding()
+      chatReady.value = true
+      scrollToBottom()
+    } else {
+      // Load active plan
+      await coaching.fetchActivePlan()
+      await coaching.fetchTodayWorkout()
+
+      if (plan.value) {
+        await loadCompliance()
+      }
+
+      // Start a general chat
+      await coaching.createChat()
+      chatReady.value = true
+    }
+  } catch {
+    chatReady.value = true
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-semibold">AI Тренер</h1>
+      <div v-if="onboardingCompleted" class="flex gap-2">
+        <Button
+          :label="activeTab === 'chat' ? '' : 'Чат'"
+          icon="pi pi-comments"
+          :severity="activeTab === 'chat' ? 'primary' : 'secondary'"
+          :text="activeTab !== 'chat'"
+          size="small"
+          @click="activeTab = 'chat'"
+        />
+        <Button
+          :label="activeTab === 'plan' ? '' : 'План'"
+          icon="pi pi-calendar"
+          :severity="activeTab === 'plan' ? 'primary' : 'secondary'"
+          :text="activeTab !== 'plan'"
+          size="small"
+          @click="activeTab = 'plan'"
+        />
+        <Button
+          :label="activeTab === 'progress' ? '' : 'Прогресс'"
+          icon="pi pi-chart-bar"
+          :severity="activeTab === 'progress' ? 'primary' : 'secondary'"
+          :text="activeTab !== 'progress'"
+          size="small"
+          @click="activeTab = 'progress'"
+        />
+      </div>
+    </div>
+
+    <!-- Today's workout card -->
+    <Card v-if="todayWorkout && onboardingCompleted" class="mb-6 border-l-4 border-l-primary">
+      <template #content>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-surface-500 text-xs uppercase mb-1">Тренировка на сегодня</p>
+            <p class="text-lg font-bold">{{ todayWorkout.title }}</p>
+            <p class="text-surface-600 text-sm mt-1">{{ todayWorkout.description }}</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <Tag :value="workoutTypeLabel(todayWorkout.workout_type)" :severity="workoutTypeColor(todayWorkout.workout_type)" />
+            <div v-if="todayWorkout.duration_minutes" class="text-right">
+              <p class="text-sm text-surface-500">{{ todayWorkout.duration_minutes }} мин</p>
+              <p v-if="todayWorkout.target_tss" class="text-xs text-surface-400">TSS {{ todayWorkout.target_tss }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Card>
+
+    <!-- Onboarding banner -->
+    <Card v-if="!onboardingCompleted && chatReady" class="mb-4 bg-blue-50 border-blue-200">
+      <template #content>
+        <div class="flex items-center gap-3">
+          <i class="pi pi-info-circle text-blue-500 text-xl"></i>
+          <div>
+            <p class="font-semibold text-blue-800">Интервью с тренером</p>
+            <p class="text-blue-600 text-sm">Ответьте на несколько вопросов, чтобы AI тренер мог создать персональный план тренировок.</p>
+          </div>
+        </div>
+      </template>
+    </Card>
+
+    <!-- Chat Tab -->
+    <div v-if="activeTab === 'chat'" class="flex flex-col" style="height: calc(100vh - 300px); min-height: 400px;">
+      <!-- Chat actions -->
+      <div v-if="onboardingCompleted" class="flex gap-2 mb-3">
+        <Button label="Новый чат" icon="pi pi-plus" size="small" severity="secondary" outlined @click="startNewChat" />
+        <Button v-if="!plan" label="Сгенерировать план" icon="pi pi-bolt" size="small" severity="primary" :loading="coaching.loading" @click="handleGeneratePlan" />
+        <Button v-if="plan" label="Корректировать план" icon="pi pi-pencil" size="small" severity="warn" outlined @click="handleAdjustPlan" />
+      </div>
+
+      <!-- Messages -->
+      <div ref="messagesContainer" class="flex-1 overflow-y-auto space-y-3 p-4 bg-surface-50 rounded-xl border border-surface-200">
+        <div v-if="coaching.loading && messages.length === 0" class="flex items-center justify-center h-full text-surface-400">
+          <i class="pi pi-spin pi-spinner text-2xl mr-2"></i>
+          Загрузка...
+        </div>
+
+        <div v-for="(msg, i) in messages" :key="i" :class="['flex', msg.role === 'user' ? 'justify-end' : 'justify-start']">
+          <div
+            :class="[
+              'max-w-[80%] md:max-w-[70%] rounded-2xl px-4 py-3 text-sm leading-relaxed',
+              msg.role === 'user'
+                ? 'bg-primary text-white rounded-br-md'
+                : 'bg-white border border-surface-200 text-surface-800 rounded-bl-md shadow-sm'
+            ]"
+          >
+            <div v-if="msg.role === 'model'" class="flex items-center gap-2 mb-1">
+              <span class="text-xs font-semibold text-primary">VeloBrain</span>
+            </div>
+            <div class="whitespace-pre-wrap" v-html="formatMessage(msg.text)"></div>
+          </div>
+        </div>
+
+        <div v-if="coaching.sending" class="flex justify-start">
+          <div class="bg-white border border-surface-200 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm">
+            <div class="flex items-center gap-2 text-surface-400 text-sm">
+              <i class="pi pi-spin pi-spinner"></i>
+              Думаю...
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Input -->
+      <div class="flex gap-2 mt-3">
+        <InputText
+          v-model="messageInput"
+          :placeholder="onboardingCompleted ? 'Задайте вопрос тренеру...' : 'Ваш ответ...'"
+          class="flex-1"
+          :disabled="coaching.sending"
+          @keydown="handleKeydown"
+        />
+        <Button
+          icon="pi pi-send"
+          :disabled="!messageInput.trim() || coaching.sending"
+          @click="sendMessage"
+        />
+      </div>
+    </div>
+
+    <!-- Plan Tab -->
+    <div v-if="activeTab === 'plan'">
+      <div v-if="!plan" class="text-center py-12">
+        <i class="pi pi-calendar text-4xl text-surface-300 mb-4"></i>
+        <p class="text-surface-500 mb-4">План тренировок ещё не создан</p>
+        <Button label="Сгенерировать план" icon="pi pi-bolt" :loading="coaching.loading" @click="handleGeneratePlan" />
+      </div>
+
+      <div v-else>
+        <!-- Plan header -->
+        <Card class="mb-6">
+          <template #content>
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              <div>
+                <h2 class="text-xl font-bold">{{ plan.goal }}</h2>
+                <p class="text-surface-500 text-sm mt-1">{{ plan.description }}</p>
+                <div class="flex items-center gap-3 mt-2">
+                  <Tag :value="plan.phase || 'base'" severity="info" />
+                  <span class="text-sm text-surface-500">
+                    {{ new Date(plan.start_date).toLocaleDateString('ru-RU') }} —
+                    {{ new Date(plan.end_date).toLocaleDateString('ru-RU') }}
+                  </span>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <Button label="Корректировать" icon="pi pi-pencil" size="small" severity="warn" outlined @click="handleAdjustPlan" />
+                <Button label="Новый план" icon="pi pi-refresh" size="small" severity="secondary" outlined :loading="coaching.loading" @click="handleGeneratePlan" />
+              </div>
+            </div>
+          </template>
+        </Card>
+
+        <!-- Weeks -->
+        <div v-for="week in plan.weeks" :key="week.week_number" class="mb-6">
+          <div class="flex items-center justify-between mb-3">
+            <h3 class="font-semibold text-lg">Неделя {{ week.week_number }}</h3>
+            <div class="flex items-center gap-3 text-sm text-surface-500">
+              <span>{{ week.focus }}</span>
+              <span v-if="week.target_tss">TSS {{ week.target_tss }}</span>
+              <span v-if="week.target_hours">{{ week.target_hours }}ч</span>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+            <Card v-for="day in week.days" :key="day.day" class="!shadow-none border border-surface-200">
+              <template #content>
+                <div class="flex items-center justify-between mb-2">
+                  <span class="text-sm font-semibold text-surface-600">{{ dayLabel(day.day) }}</span>
+                  <Tag :value="workoutTypeLabel(day.workout_type)" :severity="workoutTypeColor(day.workout_type)" class="text-xs" />
+                </div>
+                <p class="font-medium text-sm">{{ day.title }}</p>
+                <p v-if="day.description" class="text-xs text-surface-500 mt-1">{{ day.description }}</p>
+                <div v-if="day.duration_minutes > 0" class="flex items-center gap-3 mt-2 text-xs text-surface-400">
+                  <span>{{ day.duration_minutes }} мин</span>
+                  <span v-if="day.target_tss">TSS {{ day.target_tss }}</span>
+                  <span v-if="day.target_if">IF {{ day.target_if }}</span>
+                </div>
+              </template>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Progress Tab -->
+    <div v-if="activeTab === 'progress'">
+      <div v-if="compliance.length === 0" class="text-center py-12">
+        <i class="pi pi-chart-bar text-4xl text-surface-300 mb-4"></i>
+        <p class="text-surface-500">Нет данных о прогрессе</p>
+      </div>
+
+      <div v-else class="space-y-4">
+        <Card v-for="week in compliance" :key="week.week_number">
+          <template #content>
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              <div class="flex-1">
+                <div class="flex items-center gap-3 mb-2">
+                  <h3 class="font-semibold">Неделя {{ week.week_number }}</h3>
+                  <Tag
+                    :value="week.status === 'upcoming' ? 'Впереди' : week.status === 'current' ? 'Текущая' : 'Завершена'"
+                    :severity="week.status === 'upcoming' ? 'secondary' : week.status === 'current' ? 'info' : 'success'"
+                    class="text-xs"
+                  />
+                  <span class="text-sm text-surface-500">{{ week.focus }}</span>
+                </div>
+
+                <div class="mb-2">
+                  <div class="flex items-center justify-between text-sm mb-1">
+                    <span class="text-surface-500">Выполнение</span>
+                    <span class="font-semibold">{{ week.adherence_pct }}%</span>
+                  </div>
+                  <ProgressBar
+                    :value="week.adherence_pct"
+                    :showValue="false"
+                    style="height: 8px"
+                    :class="week.adherence_pct >= 80 ? '' : week.adherence_pct >= 50 ? '[&_.p-progressbar-value]:!bg-amber-500' : '[&_.p-progressbar-value]:!bg-red-500'"
+                  />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-3 gap-4 text-center text-sm">
+                <div>
+                  <p class="text-surface-500 text-xs">Тренировки</p>
+                  <p class="font-semibold">{{ week.actual_rides }}/{{ week.planned_rides }}</p>
+                </div>
+                <div>
+                  <p class="text-surface-500 text-xs">TSS</p>
+                  <p class="font-semibold">{{ week.actual_tss }}/{{ week.planned_tss }}</p>
+                </div>
+                <div>
+                  <p class="text-surface-500 text-xs">Часы</p>
+                  <p class="font-semibold">{{ week.actual_hours }}/{{ week.planned_hours }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+function formatMessage(text: string): string {
+  // Strip [ONBOARDING_COMPLETE] and JSON blocks from display
+  let cleaned = text.replace(/\[ONBOARDING_COMPLETE\]/g, '')
+  cleaned = cleaned.replace(/```json[\s\S]*?```/g, '')
+  cleaned = cleaned.replace(/\[PLAN_ADJUSTED\]/g, '')
+  return cleaned.trim()
+}
+</script>

frontend/src/views/DashboardView.vue

@@ -1,27 +1,318 @@
 <script setup lang="ts">
+import { onMounted, computed, ref } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useActivitiesStore } from '../stores/activities'
+import { useCoachingStore } from '../stores/coaching'
+import type { FitnessEntry, WeeklyStats, PersonalRecord, TodayWorkout } from '../types/models'
 import Card from 'primevue/card'
+import Tag from 'primevue/tag'
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart } from 'echarts/charts'
+import {
+  TooltipComponent, LegendComponent, GridComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+
+use([CanvasRenderer, LineChart, BarChart, TooltipComponent, LegendComponent, GridComponent])
+
+const auth = useAuthStore()
+const store = useActivitiesStore()
+const coaching = useCoachingStore()
+const router = useRouter()
+
+const recentActivities = computed(() => store.activities.slice(0, 5))
+const fitness = ref<FitnessEntry[]>([])
+const weeklyStats = ref<WeeklyStats[]>([])
+const records = ref<PersonalRecord[]>([])
+const todayWorkout = ref<TodayWorkout | null>(null)
+
+function formatDurationLabel(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) return `${seconds / 60}m`
+  return `${seconds / 3600}h`
+}
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+function formatDistance(meters: number | null): string {
+  if (!meters) return '—'
+  return `${(meters / 1000).toFixed(1)} km`
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+function buildFitnessChart() {
+  if (fitness.value.length === 0) return null
+
+  const dates = fitness.value.map(e => e.date)
+  const ctlData = fitness.value.map(e => e.ctl)
+  const atlData = fitness.value.map(e => e.atl)
+  const tsbData = fitness.value.map(e => e.tsb)
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: any) => {
+        const date = params[0].name
+        return `<b>${date}</b><br/>` +
+          params.map((p: any) => `${p.marker} ${p.seriesName}: <b>${p.value.toFixed(1)}</b>`).join('<br/>')
+      },
+    },
+    legend: { data: ['Fitness (CTL)', 'Fatigue (ATL)', 'Form (TSB)'], top: 0, textStyle: { color: '#6b7280', fontSize: 11 } },
+    grid: { left: 40, right: 20, top: 40, bottom: 30 },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLabel: { color: '#6b7280', fontSize: 10, formatter: (v: string) => { const d = new Date(v); return `${d.getDate()}/${d.getMonth() + 1}` } },
+      splitLine: { show: false },
+    },
+    yAxis: { type: 'value', axisLabel: { color: '#6b7280' }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
+    series: [
+      { name: 'Fitness (CTL)', type: 'line', data: ctlData, showSymbol: false, lineStyle: { width: 2 }, itemStyle: { color: '#3b82f6' } },
+      { name: 'Fatigue (ATL)', type: 'line', data: atlData, showSymbol: false, lineStyle: { width: 2 }, itemStyle: { color: '#ef4444' } },
+      {
+        name: 'Form (TSB)', type: 'line', data: tsbData, showSymbol: false, lineStyle: { width: 2 }, itemStyle: { color: '#10b981' },
+        areaStyle: {
+          color: {
+            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(16,185,129,0.15)' },
+              { offset: 0.5, color: 'rgba(16,185,129,0)' },
+              { offset: 0.5, color: 'rgba(239,68,68,0)' },
+              { offset: 1, color: 'rgba(239,68,68,0.1)' },
+            ],
+          },
+        },
+      },
+    ],
+  }
+}
+
+function buildWeeklyChart() {
+  if (weeklyStats.value.length === 0) return null
+
+  const weeks = weeklyStats.value.map(w => {
+    const d = new Date(w.week)
+    return `${d.getDate()}/${d.getMonth() + 1}`
+  })
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: any) => {
+        const week = params[0].name
+        return `<b>Week of ${week}</b><br/>` +
+          params.map((p: any) => `${p.marker} ${p.seriesName}: <b>${p.value}</b>`).join('<br/>')
+      },
+    },
+    legend: { data: ['Distance (km)', 'TSS', 'Hours'], top: 0, textStyle: { color: '#6b7280', fontSize: 11 } },
+    grid: { left: 40, right: 40, top: 40, bottom: 30 },
+    xAxis: { type: 'category', data: weeks, axisLabel: { color: '#6b7280', fontSize: 10 } },
+    yAxis: [
+      { type: 'value', axisLabel: { color: '#6b7280' }, splitLine: { lineStyle: { color: '#e5e7eb' } } },
+      { type: 'value', axisLabel: { color: '#6b7280' }, splitLine: { show: false } },
+    ],
+    series: [
+      {
+        name: 'Distance (km)', type: 'bar', data: weeklyStats.value.map(w => w.distance),
+        itemStyle: { color: '#3b82f6', borderRadius: [4, 4, 0, 0] }, barMaxWidth: 30,
+      },
+      {
+        name: 'TSS', type: 'bar', data: weeklyStats.value.map(w => w.tss),
+        itemStyle: { color: '#a855f7', borderRadius: [4, 4, 0, 0] }, barMaxWidth: 30,
+      },
+      {
+        name: 'Hours', type: 'line', yAxisIndex: 1,
+        data: weeklyStats.value.map(w => +(w.duration / 3600).toFixed(1)),
+        showSymbol: true, symbolSize: 6, itemStyle: { color: '#10b981' }, lineStyle: { width: 2 },
+      },
+    ],
+  }
+}
+
+onMounted(async () => {
+  store.fetchActivities(5)
+  try {
+    fitness.value = await store.fetchFitness(90)
+  } catch {
+    // Fitness data may not be available yet
+  }
+  try {
+    weeklyStats.value = await store.fetchWeeklyStats(8)
+  } catch {
+    // Weekly stats may not be available yet
+  }
+  try {
+    records.value = await store.fetchPersonalRecords()
+  } catch {
+    // PR data may not be available yet
+  }
+  try {
+    todayWorkout.value = await coaching.fetchTodayWorkout()
+  } catch {
+    // No active plan
+  }
+})
 </script>
 
 <template>
   <div>
     <h1 class="text-2xl font-semibold mb-6">Dashboard</h1>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+    <!-- Rider stats cards -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-8">
       <Card>
-        <template #title>Current Form</template>
         <template #content>
-          <p class="text-surface-400">CTL / ATL / TSB — coming soon</p>
+          <p class="text-surface-500 text-xs uppercase mb-1">FTP</p>
+          <p class="text-2xl font-bold">{{ auth.rider?.ftp ?? '—' }} <span class="text-sm text-surface-500 font-normal">W</span></p>
         </template>
       </Card>
       <Card>
-        <template #title>Weekly Load</template>
         <template #content>
-          <p class="text-surface-400">Weekly TSS summary — coming soon</p>
+          <p class="text-surface-500 text-xs uppercase mb-1">Weight</p>
+          <p class="text-2xl font-bold">{{ auth.rider?.weight ?? '—' }} <span class="text-sm text-surface-500 font-normal">kg</span></p>
         </template>
       </Card>
       <Card>
-        <template #title>Recent Rides</template>
         <template #content>
-          <p class="text-surface-400">Last 5 activities — coming soon</p>
+          <p class="text-surface-500 text-xs uppercase mb-1">W/kg</p>
+          <p class="text-2xl font-bold">
+            {{ auth.rider?.ftp && auth.rider?.weight ? (auth.rider.ftp / auth.rider.weight).toFixed(2) : '—' }}
+          </p>
+        </template>
+      </Card>
+      <Card>
+        <template #content>
+          <p class="text-surface-500 text-xs uppercase mb-1">Total Rides</p>
+          <p class="text-2xl font-bold">{{ store.total }}</p>
+        </template>
+      </Card>
+    </div>
+
+    <!-- Today's Workout -->
+    <Card v-if="todayWorkout" class="mb-8 border-l-4 border-l-primary cursor-pointer hover:shadow-md transition-shadow" @click="router.push({ name: 'coach' })">
+      <template #content>
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="flex items-center gap-2 mb-1">
+              <i class="pi pi-bolt text-primary"></i>
+              <p class="text-surface-500 text-xs uppercase">Тренировка на сегодня</p>
+            </div>
+            <p class="text-lg font-bold">{{ todayWorkout.title }}</p>
+            <p v-if="todayWorkout.description" class="text-surface-500 text-sm mt-1 line-clamp-2">{{ todayWorkout.description }}</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <Tag :value="todayWorkout.workout_type" severity="info" />
+            <div v-if="todayWorkout.duration_minutes" class="text-right">
+              <p class="text-sm font-semibold">{{ todayWorkout.duration_minutes }} мин</p>
+              <p v-if="todayWorkout.target_tss" class="text-xs text-surface-400">TSS {{ todayWorkout.target_tss }}</p>
+            </div>
+            <i class="pi pi-chevron-right text-surface-300"></i>
+          </div>
+        </div>
+      </template>
+    </Card>
+
+    <!-- Personal Records -->
+    <Card v-if="records.length > 0" class="mb-8">
+      <template #title>
+        <div class="flex items-center gap-2">
+          <i class="pi pi-trophy text-amber-500"></i>
+          Personal Records
+        </div>
+      </template>
+      <template #content>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+          <div
+            v-for="pr in records"
+            :key="pr.duration"
+            class="bg-surface-50 rounded-lg p-3 text-center border border-surface-200 cursor-pointer hover:border-primary transition-colors"
+            @click="router.push({ name: 'activity-detail', params: { id: pr.activity_id } })"
+          >
+            <p class="text-surface-500 text-xs uppercase mb-1">{{ formatDurationLabel(pr.duration) }}</p>
+            <p class="text-xl font-bold">{{ pr.power }}<span class="text-sm font-normal text-surface-500">W</span></p>
+            <p v-if="auth.rider?.weight" class="text-xs text-surface-400">{{ (pr.power / auth.rider.weight).toFixed(1) }} W/kg</p>
+          </div>
+        </div>
+      </template>
+    </Card>
+
+    <!-- Fitness trend chart -->
+    <Card v-if="fitness.length > 0" class="mb-8">
+      <template #title>Fitness Trend</template>
+      <template #content>
+        <VChart :option="buildFitnessChart()" style="height: 280px" autoresize />
+        <div class="flex items-center justify-center gap-6 mt-2 text-xs text-surface-500">
+          <span>CTL: chronic training load (fitness)</span>
+          <span>ATL: acute training load (fatigue)</span>
+          <span>TSB: training stress balance (form)</span>
+        </div>
+      </template>
+    </Card>
+
+    <!-- Weekly summary -->
+    <Card v-if="weeklyStats.length > 0" class="mb-8">
+      <template #title>Weekly Summary</template>
+      <template #content>
+        <VChart :option="buildWeeklyChart()" style="height: 280px" autoresize />
+      </template>
+    </Card>
+
+    <!-- Recent rides -->
+    <h2 class="text-lg font-semibold mb-4">Recent Rides</h2>
+    <div v-if="recentActivities.length === 0" class="text-surface-500">
+      No activities yet. Upload your first .FIT file!
+    </div>
+    <div v-else class="flex flex-col gap-3">
+      <Card
+        v-for="a in recentActivities"
+        :key="a.id"
+        class="cursor-pointer hover:border-primary transition-colors"
+        @click="router.push({ name: 'activity-detail', params: { id: a.id } })"
+      >
+        <template #content>
+          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
+            <div class="flex items-center gap-3">
+              <div>
+                <p class="font-semibold">{{ a.name || 'Ride' }}</p>
+                <p class="text-surface-500 text-sm">{{ formatDate(a.date) }}</p>
+              </div>
+              <Tag :value="a.activity_type" severity="info" class="text-xs" />
+            </div>
+            <div class="flex items-center gap-4 md:gap-6 text-sm flex-wrap">
+              <div class="text-center">
+                <p class="text-surface-500 text-xs">Duration</p>
+                <p class="font-semibold">{{ formatDuration(a.duration) }}</p>
+              </div>
+              <div class="text-center">
+                <p class="text-surface-500 text-xs">Distance</p>
+                <p class="font-semibold">{{ formatDistance(a.distance) }}</p>
+              </div>
+              <div v-if="a.metrics?.avg_power" class="text-center">
+                <p class="text-surface-500 text-xs">Power</p>
+                <p class="font-semibold">{{ a.metrics.avg_power }}W</p>
+              </div>
+              <div v-if="a.metrics?.tss" class="text-center">
+                <p class="text-surface-500 text-xs">TSS</p>
+                <p class="font-semibold">{{ a.metrics.tss }}</p>
+              </div>
+              <div v-if="a.metrics?.normalized_power" class="text-center hidden md:block">
+                <p class="text-surface-500 text-xs">NP</p>
+                <p class="font-semibold">{{ a.metrics.normalized_power }}W</p>
+              </div>
+            </div>
+          </div>
         </template>
       </Card>
     </div>

frontend/src/views/LoginView.vue

@@ -61,17 +61,17 @@ onMounted(async () => {
       <template #title>
         <div class="text-center">
           <span class="text-primary text-3xl font-bold">VeloBrain</span>
-          <p class="text-surface-400 text-sm mt-2">AI-Powered Cycling Training Platform</p>
+          <p class="text-surface-500 text-sm mt-2">AI-Powered Cycling Training Platform</p>
         </div>
       </template>
       <template #content>
         <div class="flex flex-col items-center gap-4">
           <div v-if="loading" class="flex flex-col items-center gap-3">
             <ProgressSpinner style="width: 50px; height: 50px" />
-            <p class="text-surface-400 text-sm">Signing in via Telegram...</p>
+            <p class="text-surface-500 text-sm">Signing in via Telegram...</p>
           </div>
           <div v-else>
-            <p v-if="error" class="text-red-400 text-sm mb-4 text-center">{{ error }}</p>
+            <p v-if="error" class="text-red-500 text-sm mb-4 text-center">{{ error }}</p>
             <div id="telegram-login-container" class="flex justify-center"></div>
           </div>
         </div>

frontend/src/views/SettingsView.vue

@@ -1,14 +1,139 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '../stores/auth'
 import Card from 'primevue/card'
+import InputNumber from 'primevue/inputnumber'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+
+const auth = useAuthStore()
+
+const form = ref({
+  name: '',
+  ftp: null as number | null,
+  lthr: null as number | null,
+  weight: null as number | null,
+  goals: '',
+  experience_level: '',
+})
+
+const saving = ref(false)
+const success = ref(false)
+
+const experienceLevels = [
+  { label: 'Beginner', value: 'beginner' },
+  { label: 'Intermediate', value: 'intermediate' },
+  { label: 'Advanced', value: 'advanced' },
+  { label: 'Pro', value: 'pro' },
+]
+
+onMounted(() => {
+  if (auth.rider) {
+    form.value.name = auth.rider.name || ''
+    form.value.ftp = auth.rider.ftp
+    form.value.lthr = auth.rider.lthr
+    form.value.weight = auth.rider.weight
+    form.value.goals = auth.rider.goals || ''
+    form.value.experience_level = auth.rider.experience_level || ''
+  }
+})
+
+async function save() {
+  saving.value = true
+  success.value = false
+  try {
+    await auth.updateRider({
+      name: form.value.name || undefined,
+      ftp: form.value.ftp,
+      lthr: form.value.lthr,
+      weight: form.value.weight,
+      goals: form.value.goals || null,
+      experience_level: form.value.experience_level || null,
+    })
+    success.value = true
+    setTimeout(() => { success.value = false }, 3000)
+  } finally {
+    saving.value = false
+  }
+}
 </script>
 
 <template>
   <div>
     <h1 class="text-2xl font-semibold mb-6">Settings</h1>
-    <Card>
-      <template #content>
-        <p class="text-surface-400">FTP, weight, zones, goals — coming soon</p>
-      </template>
-    </Card>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <!-- Profile -->
+      <Card>
+        <template #title>Profile</template>
+        <template #content>
+          <div class="flex flex-col gap-4">
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Name</label>
+              <InputText v-model="form.name" class="w-full" />
+            </div>
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Experience Level</label>
+              <Select
+                v-model="form.experience_level"
+                :options="experienceLevels"
+                option-label="label"
+                option-value="value"
+                placeholder="Select level"
+                class="w-full"
+              />
+            </div>
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Goals</label>
+              <Textarea v-model="form.goals" rows="3" class="w-full" placeholder="e.g. Complete a century ride, improve FTP to 300W..." />
+            </div>
+          </div>
+        </template>
+      </Card>
+
+      <!-- Training Zones -->
+      <Card>
+        <template #title>Training Parameters</template>
+        <template #content>
+          <div class="flex flex-col gap-4">
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">FTP (Functional Threshold Power)</label>
+              <div class="flex items-center gap-2">
+                <InputNumber v-model="form.ftp" :min="50" :max="600" class="w-full" placeholder="e.g. 250" />
+                <span class="text-surface-500 text-sm font-medium">W</span>
+              </div>
+            </div>
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">LTHR (Lactate Threshold Heart Rate)</label>
+              <div class="flex items-center gap-2">
+                <InputNumber v-model="form.lthr" :min="100" :max="220" class="w-full" placeholder="e.g. 170" />
+                <span class="text-surface-500 text-sm font-medium">bpm</span>
+              </div>
+            </div>
+            <div>
+              <label class="text-surface-500 text-xs uppercase font-medium mb-1 block">Weight</label>
+              <div class="flex items-center gap-2">
+                <InputNumber v-model="form.weight" :min="30" :max="200" :max-fraction-digits="1" class="w-full" placeholder="e.g. 75" />
+                <span class="text-surface-500 text-sm font-medium">kg</span>
+              </div>
+            </div>
+            <div v-if="form.ftp && form.weight" class="bg-surface-50 rounded-lg p-3 border border-surface-200">
+              <p class="text-surface-500 text-xs uppercase mb-1">W/kg ratio</p>
+              <p class="text-xl font-bold text-primary">{{ (form.ftp / form.weight).toFixed(2) }} <span class="text-sm font-normal text-surface-500">W/kg</span></p>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+
+    <div class="flex items-center gap-4 mt-6">
+      <Button label="Save Changes" icon="pi pi-check" :loading="saving" @click="save" />
+      <transition enter-active-class="transition-opacity" leave-active-class="transition-opacity" enter-from-class="opacity-0" leave-to-class="opacity-0">
+        <Message v-if="success" severity="success" :closable="false" class="m-0">Settings saved successfully</Message>
+      </transition>
+    </div>
   </div>
 </template>