diff --git a/docs/TZ.md b/docs/TZ.md
index 81d2717..dddc4ee 100644
--- a/docs/TZ.md
+++ b/docs/TZ.md
@@ -4,7 +4,7 @@
 
 | | |
 |---|---|
-| Версия ТЗ | 0.9 |
+| Версия ТЗ | 0.10 |
 | Дата | 2026-09-20 |
 | Статус | На обсуждении |
 
@@ -185,6 +185,14 @@
 - **Связка с «3 вариантами»** (3.9): закрытие задачи из режима помечается
   (`earned_via`) и празднуется меткой «выбрал и сделал» + счётчик-ачивкой;
   XP при этом не меняется.
+- **Страница «Статистика»**: закрываемость за выбранный **день / неделю / месяц**
+  (период листается стрелками назад/вперёд). Метрики — закрытые задачи, XP,
+  созданные задачи, часы работы, «дни с результатом» — каждая со сравнением
+  с **предыдущим аналогичным периодом** (дельта и проценты). Анимированный
+  график закрытых задач по бакетам периода (часы / дни недели / дни месяца).
+  Данные считаются из `xp_events` и дат задач, без новых эндпоинтов.
+- **Справка «О саде»**: кнопка на странице сада открывает модалку с объяснением
+  механик (XP, уровни, растения и редкости, ачивки, принцип «только позитив»).
 
 ## 4. Нефункциональные требования
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 577f3a4..1161449 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -15,6 +15,7 @@
 const navItems = computed(() => [
   { id: 'home', label: t('nav.home'), icon: 'ph-house', to: '/' },
   { id: 'garden', label: t('nav.garden'), icon: 'ph-leaf', to: '/garden' },
+  { id: 'stats', label: t('nav.stats'), icon: 'ph-chart-bar', to: '/stats' },
   { id: 'list', label: t('nav.list'), icon: 'ph-list-bullets', to: '/list' },
   { id: 'projects', label: t('nav.projects'), icon: 'ph-folders', to: '/projects' },
   { id: 'options', label: t('nav.options'), icon: 'ph-shuffle', to: '/options' },
diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts
index ce9312b..9eedcc0 100644
--- a/frontend/src/locales/en.ts
+++ b/frontend/src/locales/en.ts
@@ -38,6 +38,7 @@
     stack: 'Inbox stack',
     list: 'Task list',
     garden: 'Garden',
+    stats: 'Statistics',
     projects: 'Projects',
     options: '3 options',
     settings: 'Settings',
@@ -48,6 +49,16 @@
     xpTotal: '{n} XP',
     plants: 'plants: {n}',
     levelProgress: 'To next level: {xp} / {span} XP',
+    aboutOpen: 'How it works',
+    aboutTitle: 'How the garden works',
+    about: [
+      'Every completed task leaves a plant on the bed — the garden only grows and never shrinks.',
+      'Completing a task earns XP: base 10 + a priority bonus (up to 15) + a size bonus from the time estimate (up to 15). Bigger and more urgent work is worth more.',
+      'Earned XP raises your level — from Sprout to Garden Legend. Levels never drop: XP does not expire and is not taken away, even if a task is deleted.',
+      'Sometimes a task yields a rare plant — the chance grows with the task weight. Epic plants only come from the biggest completions.',
+      'Achievements mark milestones: tasks completed, levels, different projects, hours of work, strict deadlines. Each has steps I, II, III with always-visible progress.',
+      'A task completed from the “3 options” mode earns the “chose and did” mark. Nothing expires, no streaks or penalties — only pleasant rewards.',
+    ],
     lastPlant: 'Latest sprout: {title} — {date}',
     history: 'History: tasks completed by month',
     emptyTitle: 'The garden is empty',
@@ -91,6 +102,27 @@
     epicPlant: 'A legendary plant in your garden!',
     chosen: 'chose and did',
   },
+  stats: {
+    title: 'Statistics',
+    modeDay: 'Day',
+    modeWeek: 'Week',
+    modeMonth: 'Month',
+    today: 'Today, {date}',
+    prevPeriod: 'Previous period',
+    nextPeriod: 'Next period',
+    ofDays: 'of {n} days',
+    totalVs: 'Completed this period: {n} · previous period: {m}',
+    chartTitle: 'Completed tasks',
+    emptyTitle: 'No data yet',
+    emptyText: 'Complete a couple of tasks — dynamics with comparisons will appear here.',
+    metric: {
+      closed: 'Tasks completed',
+      xp: 'XP earned',
+      created: 'Tasks created',
+      hours: 'Hours worked',
+      activeDays: 'Productive days',
+    },
+  },
   home: {
     title: 'Home',
     stackCount: 'in stack: {n}',
diff --git a/frontend/src/locales/ru.ts b/frontend/src/locales/ru.ts
index 790a7e4..a32d919 100644
--- a/frontend/src/locales/ru.ts
+++ b/frontend/src/locales/ru.ts
@@ -39,6 +39,7 @@
     stack: 'Стек входящих',
     list: 'Список задач',
     garden: 'Сад',
+    stats: 'Статистика',
     projects: 'Проекты',
     options: '3 варианта',
     settings: 'Настройки',
@@ -49,6 +50,16 @@
     xpTotal: '{n} XP',
     plants: 'растений: {n}',
     levelProgress: 'До уровня: {xp} / {span} XP',
+    aboutOpen: 'Как это работает',
+    aboutTitle: 'Как устроен сад',
+    about: [
+      'Каждая закрытая задача оставляет на грядке растение — сад только растёт и никогда не уменьшается.',
+      'За закрытие начисляется XP: база 10 + бонус за приоритет задачи (до 15) + бонус за объём работы по оценке времени (до 15). Крупные и срочные дела ценнее.',
+      'Накопленный XP повышает уровень — от «Ростка» до «Легенды сада». Уровень не падает: XP не сгорает и не отнимается, даже если задачу удалить.',
+      'Иногда задача приносит редкое растение — шанс тем выше, чем «весомее» задача. Эпические растения достаются только крупным закрытиям.',
+      'Достижения отмечают вехи: закрытые задачи, уровни, разные проекты, часы работы, строгие дедлайны. У каждой ступени I, II, III — прогресс виден всегда.',
+      'Задача, закрытая из режима «3 вариантов», отмечается меткой «выбрал и сделал». Ничего не сгорает, серий и наказаний нет — только приятные награды.',
+    ],
     lastPlant: 'Последний росток: {title} — {date}',
     history: 'История: закрытых задач по месяцам',
     emptyTitle: 'Сад пока пуст',
@@ -92,6 +103,27 @@
     epicPlant: 'Легендарное растение в саду!',
     chosen: 'выбрал и сделал',
   },
+  stats: {
+    title: 'Статистика',
+    modeDay: 'День',
+    modeWeek: 'Неделя',
+    modeMonth: 'Месяц',
+    today: 'Сегодня, {date}',
+    prevPeriod: 'Предыдущий период',
+    nextPeriod: 'Следующий период',
+    ofDays: 'из {n} дн.',
+    totalVs: 'За период закрыто: {n} · в предыдущий раз: {m}',
+    chartTitle: 'Закрытые задачи',
+    emptyTitle: 'Пока нет данных',
+    emptyText: 'Закройте пару задач — и здесь появится динамика со сравнением.',
+    metric: {
+      closed: 'Закрыто задач',
+      xp: 'XP получено',
+      created: 'Создано задач',
+      hours: 'Часы работы',
+      activeDays: 'Дни с результатом',
+    },
+  },
   home: {
     title: 'Главное',
     stackCount: 'в стеке: {n}',
diff --git a/frontend/src/locales/uk.ts b/frontend/src/locales/uk.ts
index 5cd0062..47b2ac1 100644
--- a/frontend/src/locales/uk.ts
+++ b/frontend/src/locales/uk.ts
@@ -38,6 +38,7 @@
     stack: 'Вхідний стек',
     list: 'Список задач',
     garden: 'Сад',
+    stats: 'Статистика',
     projects: 'Проєкти',
     options: '3 варіанти',
     settings: 'Налаштування',
@@ -48,6 +49,16 @@
     xpTotal: '{n} XP',
     plants: 'рослин: {n}',
     levelProgress: 'До наступного рівня: {xp} / {span} XP',
+    aboutOpen: 'Як це працює',
+    aboutTitle: 'Як влаштований сад',
+    about: [
+      'Кожне виконане завдання залишає на грядці рослину — сад лише зростає і ніколи не зменшується.',
+      'За виконання нараховується XP: база 10 + бонус за пріоритет (до 15) + бонус за обсяг за оцінкою часу (до 15). Великі й термінові справи цінніші.',
+      'Накопичений XP підвищує рівень — від «Паростка» до «Легенди саду». Рівень не падає: XP не згорає і не віднімається, навіть якщо завдання видалити.',
+      'Іноді завдання приносить рідкісну рослину — шанс тим вищий, що «важче» завдання. Епічні рослини дістаються лише великим завершенням.',
+      'Досягнення відзначають віхи: виконані завдання, рівні, різні проєкти, години роботи, строгі дедлайни. У кожного ступені I, II, III — прогрес видно завжди.',
+      'Завдання, виконане з режиму «3 варіанти», відзначається меткою «обрав і зробив». Нічого не згорає, серій і покарань немає — лише приємні нагороди.',
+    ],
     lastPlant: 'Останній паросток: {title} — {date}',
     history: 'Історія: виконаних завдань за місяцями',
     emptyTitle: 'Сад поки порожній',
@@ -91,6 +102,27 @@
     epicPlant: 'Легендарна рослина в саду!',
     chosen: 'обрав і зробив',
   },
+  stats: {
+    title: 'Статистика',
+    modeDay: 'День',
+    modeWeek: 'Тиждень',
+    modeMonth: 'Місяць',
+    today: 'Сьогодні, {date}',
+    prevPeriod: 'Попередній період',
+    nextPeriod: 'Наступний період',
+    ofDays: 'з {n} дн.',
+    totalVs: 'За період виконано: {n} · минулого разу: {m}',
+    chartTitle: 'Виконані завдання',
+    emptyTitle: 'Поки немає даних',
+    emptyText: 'Закрийте пару завдань — і тут з’явиться динаміка з порівнянням.',
+    metric: {
+      closed: 'Виконано завдань',
+      xp: 'XP отримано',
+      created: 'Створено завдань',
+      hours: 'Години роботи',
+      activeDays: 'Дні з результатом',
+    },
+  },
   home: {
     title: 'Головне',
     stackCount: 'у стеці: {n}',
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f97bd44..677aac5 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -10,6 +10,7 @@
 import { setPageTitle } from './taskui'
 import ListView from './views/ListView.vue'
 import GardenView from './views/GardenView.vue'
+import StatsView from './views/StatsView.vue'
 import OptionsView from './views/OptionsView.vue'
 import ProjectView from './views/ProjectView.vue'
 import ProjectsView from './views/ProjectsView.vue'
@@ -25,6 +26,7 @@
     { path: '/stack', redirect: '/' },
     { path: '/list', component: ListView, meta: { title: 'nav.list' } },
     { path: '/garden', component: GardenView, meta: { title: 'nav.garden' } },
+    { path: '/stats', component: StatsView, meta: { title: 'nav.stats' } },
     { path: '/projects', component: ProjectsView, meta: { title: 'nav.projects' } },
     // название проекта/задачи в тайтл подставляет вид после загрузки данных
     { path: '/projects/:id', component: ProjectView, meta: { title: 'nav.projects' } },
diff --git a/frontend/src/views/GardenView.vue b/frontend/src/views/GardenView.vue
index 2320505..614ecf8 100644
--- a/frontend/src/views/GardenView.vue
+++ b/frontend/src/views/GardenView.vue
@@ -10,7 +10,7 @@
 // сад никогда не уменьшается, стриков нет, уровень не падает.
 // Редкость растения и признак «из 3 вариантов» приходят из событий XP.
 
-const { t, locale } = useI18n()
+const { t, locale, tm } = useI18n()
 
 const tasks = ref<Task[]>([])
 const events = ref<XpEvent[]>([])
@@ -18,6 +18,15 @@
 const error = ref('')
 const loading = ref(false)
 
+// Справка «как это работает»: модалка с абзацами из локали
+const aboutOpen = ref(false)
+const aboutParagraphs = computed(() => {
+  const messages = tm('garden.about')
+  return Array.isArray(messages)
+    ? (messages as unknown[]).filter((p): p is string => typeof p === 'string')
+    : []
+})
+
 // Растение детерминировано по id задачи — при каждом визите то же самое
 const PLANTS = ['ph-flower', 'ph-flower-lotus', 'ph-tree-evergreen', 'ph-tree', 'ph-leaf', 'ph-cactus']
 
@@ -184,8 +193,18 @@
             {{ t('garden.plants', { n: doneTasks.length }) }}
           </GnBadge>
         </template>
+        <template #actions>
+          <GnIconButton icon="ph-question" :label="t('garden.aboutOpen')" :title="t('garden.aboutOpen')" @click="aboutOpen = true" />
+        </template>
       </GnPageHeader>
 
+      <!-- Справка: что происходит в саду и как это работает -->
+      <GnModal :open="aboutOpen" :title="t('garden.aboutTitle')" @update:open="aboutOpen = $event">
+        <div class="about-body">
+          <p v-for="(p, i) in aboutParagraphs" :key="i">{{ p }}</p>
+        </div>
+      </GnModal>
+
       <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>
 
       <!-- Прогресс уровня: XP только растёт, уровень не падает -->
@@ -244,7 +263,11 @@
         icon="ph-flower-lotus"
         :title="t('garden.emptyTitle')"
         :text="t('garden.emptyText')"
-      />
+      >
+        <GnButton variant="secondary" icon="ph-question" @click="aboutOpen = true">
+          {{ t('garden.aboutOpen') }}
+        </GnButton>
+      </GnEmptyState>
 
       <!-- Ачивки с тирами: прогресс к следующей ступени виден всегда -->
       <div class="achievements-title">
@@ -276,6 +299,14 @@
 .level-progress {
   margin-bottom: 1rem;
 }
+/* справка о саде */
+.about-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  font-size: 0.95em;
+  line-height: 1.5;
+}
 /* последний росток */
 .last-plant {
   display: flex;
diff --git a/frontend/src/views/StatsView.vue b/frontend/src/views/StatsView.vue
new file mode 100644
index 0000000..b33125c
--- /dev/null
+++ b/frontend/src/views/StatsView.vue
@@ -0,0 +1,460 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { api, type Task, type XpEvent } from '../api'
+
+defineOptions({ name: 'StatsView' })
+
+// Статистика (ТЗ 3.13): закрываемость за выбранный день/неделю/месяц с
+// анимированным графиком и сравнением с предыдущим аналогичным периодом.
+// Только позитив: сравнение — просто факт, без «провалов» и наказаний.
+
+const { t, locale } = useI18n()
+
+const events = ref<XpEvent[]>([])
+const tasks = ref<Task[]>([])
+const error = ref('')
+const loading = ref(false)
+const loaded = ref(false)
+
+type Period = 'day' | 'week' | 'month'
+const period = ref<Period>('day')
+// 0 — текущий период, −1 — предыдущий, −2 … (листание стрелками)
+const offset = ref(0)
+
+function setMode(id: string | number) {
+  period.value = id as Period
+  offset.value = 0
+}
+
+const modeItems = computed(() => [
+  { id: 'day', label: t('stats.modeDay') },
+  { id: 'week', label: t('stats.modeWeek') },
+  { id: 'month', label: t('stats.modeMonth') },
+])
+
+// --- Границы периодов (локальное время, неделя с понедельника — ISO) ---
+
+function startOfDay(d: Date): Date {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+function startOfWeek(d: Date): Date {
+  const x = startOfDay(d)
+  const shift = (x.getDay() + 6) % 7 // пн=0
+  x.setDate(x.getDate() - shift)
+  return x
+}
+
+function startOfMonth(d: Date): Date {
+  const x = startOfDay(d)
+  x.setDate(1)
+  return x
+}
+
+const bounds = computed(() => {
+  const now = new Date()
+  if (period.value === 'day') {
+    const start = startOfDay(now)
+    start.setDate(start.getDate() + offset.value)
+    return { start, end: new Date(start.getTime() + 24 * 3600e3) }
+  }
+  if (period.value === 'week') {
+    const start = startOfWeek(now)
+    start.setDate(start.getDate() + offset.value * 7)
+    return { start, end: new Date(start.getTime() + 7 * 24 * 3600_000) }
+  }
+  const start = startOfMonth(now)
+  start.setMonth(start.getMonth() + offset.value)
+  const end = startOfMonth(start)
+  end.setMonth(end.getMonth() + 1)
+  return { start, end }
+})
+
+const prevBounds = computed(() => {
+  const { start, end } = bounds.value
+  const span = end.getTime() - start.getTime()
+  return { start: new Date(start.getTime() - span), end: start }
+})
+
+// --- Бакеты графика: день → 24 часа, неделя → 7 дней, месяц → дни месяца ---
+
+interface Bucket {
+  label: string
+  tooltip: string
+  start: Date
+  end: Date
+  count: number
+}
+
+const buckets = computed<Bucket[]>(() => {
+  const { start, end } = bounds.value
+  const fmtDay = new Intl.DateTimeFormat(locale.value, { weekday: 'short', day: 'numeric' })
+  const fmtFull = new Intl.DateTimeFormat(locale.value, {
+    day: 'numeric',
+    month: 'long',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+  const out: Bucket[] = []
+  const inRange = (e: XpEvent, from: Date, to: Date) =>
+    new Date(e.created_at) >= from && new Date(e.created_at) < to
+  if (period.value === 'day') {
+    for (let h = 0; h < 24; h++) {
+      const from = new Date(start.getTime() + h * 3600_000)
+      const to = new Date(from.getTime() + 3600_000)
+      out.push({
+        label: String(h).padStart(2, '0') + ':00',
+        tooltip: fmtFull.format(from),
+        start: from,
+        end: to,
+        count: events.value.filter((e) => inRange(e, from, to)).length,
+      })
+    }
+    return out
+  }
+  let cursor = new Date(start.getTime())
+  while (cursor < end) {
+    const from = new Date(cursor.getTime())
+    const to = new Date(from.getTime() + 24 * 3600_000)
+    out.push({
+      label: period.value === 'week' ? fmtDay.format(from) : String(from.getDate()),
+      tooltip: fmtFull.format(from),
+      start: from,
+      end: to,
+      count: events.value.filter((e) => inRange(e, from, to)).length,
+    })
+    cursor = to
+  }
+  return out
+})
+
+const bucketMax = computed(() => Math.max(1, ...buckets.value.map((b) => b.count)))
+
+// --- Метрики: значение за период + сравнение с предыдущим аналогичным ---
+
+interface Metric {
+  key: string
+  icon: string
+  value: string
+  delta: string
+  negative: boolean
+  meta: string
+}
+
+function fmtDelta(cur: number, prev: number): { delta: string; negative: boolean } {
+  const diff = cur - prev
+  if (cur === 0 && prev === 0) return { delta: '—', negative: false }
+  if (prev === 0) return { delta: `+${cur}`, negative: false }
+  const pct = Math.round((diff / prev) * 100)
+  const sign = diff >= 0 ? '+' : ''
+  return { delta: `${sign}${diff} · ${sign}${pct}%`, negative: diff < 0 }
+}
+
+const inRangeEvents = (from: Date, to: Date) =>
+  events.value.filter((e) => new Date(e.created_at) >= from && new Date(e.created_at) < to)
+
+const inRangeCreated = (from: Date, to: Date) =>
+  tasks.value.filter((task) => new Date(task.created_at) >= from && new Date(task.created_at) < to)
+
+// Часы закрытых задач периода (факт, иначе оценка) — по событиям через task_id
+function rangeMinutes(from: Date, to: Date, byId: Map<number, Task>): number {
+  return inRangeEvents(from, to).reduce((sum, e) => {
+    const task = e.task_id !== null ? byId.get(e.task_id) : undefined
+    return sum + (task?.actual_minutes ?? task?.estimated_minutes ?? 0)
+  }, 0)
+}
+
+const metrics = computed<Metric[]>(() => {
+  const { start, end } = bounds.value
+  const pb = prevBounds.value
+  const byId = new Map(tasks.value.map((task) => [task.id, task]))
+  const closed = inRangeEvents(start, end)
+  const prevClosed = inRangeEvents(pb.start, pb.end)
+  const created = inRangeCreated(start, end)
+  const prevCreated = inRangeCreated(pb.start, pb.end)
+  const fmtH = (minutes: number) =>
+    t('taskui.time.h', { h: Math.round(minutes / 60) })
+  // Дни с результатом: дни периода, где закрыта хотя бы одна задача
+  const dayKey = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`
+  const daysInPeriod =
+    period.value === 'day'
+      ? 1
+      : period.value === 'week'
+        ? 7
+        : Math.round((end.getTime() - start.getTime()) / (24 * 3600_000))
+  const activeDays = new Set(closed.map((e) => dayKey(new Date(e.created_at)))).size
+  const prevActive = new Set(prevClosed.map((e) => dayKey(new Date(e.created_at)))).size
+
+  const defs = [
+    {
+      key: 'closed',
+      icon: 'ph-check-circle',
+      cur: closed.length,
+      prev: prevClosed.length,
+      value: String(closed.length),
+      meta: '',
+    },
+    {
+      key: 'xp',
+      icon: 'ph-lightning',
+      cur: closed.reduce((s, e) => s + e.amount, 0),
+      prev: prevClosed.reduce((s, e) => s + e.amount, 0),
+      value: String(closed.reduce((s, e) => s + e.amount, 0)),
+      meta: '',
+    },
+    {
+      key: 'created',
+      icon: 'ph-plus-circle',
+      cur: created.length,
+      prev: prevCreated.length,
+      value: String(created.length),
+      meta: '',
+    },
+    {
+      key: 'hours',
+      icon: 'ph-clock',
+      cur: rangeMinutes(start, end, byId),
+      prev: rangeMinutes(pb.start, pb.end, byId),
+      value: fmtH(rangeMinutes(start, end, byId)),
+      meta: '',
+    },
+    {
+      key: 'activeDays',
+      icon: 'ph-sun',
+      cur: activeDays,
+      prev: prevActive,
+      value: `${activeDays}`,
+      meta: t('stats.ofDays', { n: daysInPeriod }),
+    },
+  ]
+  return defs.map((d) => {
+    const { delta, negative } = fmtDelta(d.cur, d.prev)
+    return { key: d.key, icon: d.icon, value: d.value, delta, negative, meta: d.meta }
+  })
+})
+
+// --- Подпись периода ---
+
+const periodLabel = computed(() => {
+  const { start, end } = bounds.value
+  const fmtDayMonth = new Intl.DateTimeFormat(locale.value, { day: 'numeric', month: 'long' })
+  const fmtMonthYear = new Intl.DateTimeFormat(locale.value, { month: 'long', year: 'numeric' })
+  if (period.value === 'day') {
+    const isToday = offset.value === 0
+    const label = fmtDayMonth.format(start)
+    return isToday ? t('stats.today', { date: label }) : label
+  }
+  if (period.value === 'week') {
+    const last = new Date(end.getTime() - 24 * 3600_000)
+    const a = fmtDayMonth.format(start)
+    const b = fmtDayMonth.format(last)
+    return a === b ? a : `${a} – ${b}`
+  }
+  return fmtMonthYear.format(start).replace(/^./, (c) => c.toUpperCase())
+})
+
+const totalLabel = computed(() => {
+  const cur = inRangeEvents(bounds.value.start, bounds.value.end).length
+  const prev = inRangeEvents(prevBounds.value.start, prevBounds.value.end).length
+  return t('stats.totalVs', { n: cur, m: prev })
+})
+
+// Пусто, если за оба периода вообще нет событий и задач
+const isEmpty = computed(() => {
+  const { start, end } = bounds.value
+  const pb = prevBounds.value
+  return (
+    inRangeEvents(start, end).length +
+      inRangeEvents(pb.start, pb.end).length +
+      inRangeCreated(start, end).length +
+      inRangeCreated(pb.start, pb.end).length ===
+    0
+  )
+})
+
+function step(delta: number) {
+  offset.value += delta
+}
+
+async function load() {
+  loading.value = true
+  error.value = ''
+  try {
+    const [eventList, taskList] = await Promise.all([api.getXpEvents(), api.listTasks()])
+    events.value = eventList
+    tasks.value = taskList
+    loaded.value = true
+  } catch (e) {
+    error.value = String(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <section>
+    <GnSkeleton v-if="!loaded" type="block" stack :count="2" class="page-skeleton" />
+
+    <template v-else>
+      <GnPageHeader kicker="GNexus Tasks" :title="t('stats.title')">
+        <template #meta>
+          <GnBadge variant="neutral"><i class="ph ph-chart-bar" aria-hidden="true" />
+            {{ periodLabel }}
+          </GnBadge>
+        </template>
+      </GnPageHeader>
+
+      <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>
+
+      <!-- Переключатель периода + листание назад/вперёд -->
+      <div class="stats-toolbar">
+        <div class="nav-arrows">
+          <GnIconButton icon="ph-caret-left" :label="t('stats.prevPeriod')" @click="step(-1)" />
+          <GnIconButton icon="ph-caret-right" :label="t('stats.nextPeriod')" @click="step(1)" :disabled="offset >= 0" />
+        </div>
+        <span class="period-label">{{ periodLabel }}</span>
+        <GnTabs
+          :model-value="period"
+          :items="modeItems"
+          compact
+          class="mode-tabs"
+          @update:model-value="setMode"
+        />
+      </div>
+
+      <GnEmptyState
+        v-if="isEmpty"
+        icon="ph-chart-bar"
+        :title="t('stats.emptyTitle')"
+        :text="t('stats.emptyText')"
+      />
+      <template v-else>
+        <!-- Метрики: каждая со сравнением с предыдущим аналогичным периодом -->
+        <div class="metrics-grid">
+          <GnMetricCard
+            v-for="m in metrics"
+            :key="m.key"
+            :label="t(`stats.metric.${m.key}`)"
+            :value="m.value"
+            :icon="m.icon"
+            :delta="m.delta"
+            :negative="m.negative"
+            :meta="m.meta"
+          />
+        </div>
+
+        <!-- Анимированный график: закрытые задачи по бакетам периода -->
+        <div class="chart-title">
+          <i class="ph ph-chart-bar" aria-hidden="true" />
+          <span>{{ t('stats.chartTitle') }}</span>
+        </div>
+        <div :key="`${period}-${offset}`" class="chart">
+          <div v-for="(b, i) in buckets" :key="i" class="chart-col">
+            <div
+              class="chart-bar"
+              :style="{ height: `${Math.max(3, (b.count / bucketMax) * 110)}px`, animationDelay: `${i * 18}ms` }"
+              :title="`${b.tooltip} — ${b.count}`"
+            />
+            <span class="chart-label">{{ b.label }}</span>
+          </div>
+        </div>
+        <p class="chart-total">{{ totalLabel }}</p>
+      </template>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.page-skeleton {
+  margin-bottom: 1rem;
+}
+/* переключатель периода + стрелки */
+.stats-toolbar {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+}
+.nav-arrows {
+  display: flex;
+  gap: 0.35rem;
+}
+.period-label {
+  font-weight: 600;
+  min-width: 12ch;
+}
+.mode-tabs {
+  margin-left: auto;
+}
+/* метрики */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+/* график */
+.chart-title {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  margin: 0 0 0.5rem;
+  font-weight: 600;
+  font-size: 1.05rem;
+}
+.chart-title > i {
+  color: var(--accent, #7aa2f7);
+}
+.chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.3rem;
+  padding: 0.75rem 0.5rem 0.25rem;
+  border: 1px solid var(--border, #2a2f45);
+  border-radius: 10px;
+  overflow-x: auto;
+}
+.chart-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 26px;
+  flex: 1 1 auto;
+}
+/* анимация «волной»: scaleY от нуля, задержка — inline по индексу колонки */
+.chart-bar {
+  width: 100%;
+  max-width: 30px;
+  border-radius: 4px 4px 0 0;
+  background: var(--accent, #7aa2f7);
+  opacity: 0.85;
+  transform-origin: bottom;
+  animation: stats-grow 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
+}
+@keyframes stats-grow {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+.chart-label {
+  font-size: 0.68em;
+  color: var(--text-muted, #888);
+  white-space: nowrap;
+}
+.chart-total {
+  margin: 0.5rem 0 0;
+  font-size: 0.88em;
+  color: var(--text-muted, #888);
+}
+</style>
\ No newline at end of file