fix(frontend): include DOM types in Vite config

feat(frontend): move advanced race filters below hero
Merge pull request 'fix(frontend): simplify race calendar overview' (#47 ) from fix/collapse-start-filters into main
2026-08-13 00:08:16 +03:00 · 2026-08-12 23:46:20 +03:00 · 2026-07-13 21:14:10 +00:00 · 2026-07-14 00:13:38 +03:00 · 2026-07-13 17:48:41 +00:00 · 2026-07-13 20:47:55 +03:00
26 changed files with 990 additions and 324 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,18 +7,20 @@

 ## В работе

-### Backend 1.5.0
+### Backend 1.6.0

 #### Added

 - Управление паролем и сессиями: проверка текущего пароля, список активных сессий, отзыв выбранной или всех остальных сессий.
+- Фильтрация стартов по статусу, периоду и дистанции; backfill и обновление автоматически получаемых обложек.

-### Frontend 0.8.0
+### Frontend 0.9.0

 #### Added

 - Экран «Аккаунт»: подтверждённый email, смена пароля и управление другими активными сессиями.
 - На дашборде появились фильтруемые «Последние старты» с пагинацией и переходом в старт, ссылки из карточек рекордов и интерактивный график прогресса.
+- Поиск, фильтры, сортировка и экспорт истории; график прогресса переведён на AG Charts.

 ## Backend

--- a/Dockerfile.backend
+++ b/Dockerfile.backend
@@ -19,4 +19,4 @@ COPY backend/migrations ./migrations
 COPY import ./import
 EXPOSE 3000
 ENV PORT=3000
-CMD ["node", "dist/index.js"]
+CMD ["sh", "-c", "node dist/migrate.js && node dist/index.js"]
--- a/backend/migrations/007_cover_image_source.sql
+++ b/backend/migrations/007_cover_image_source.sql
@@ -0,0 +1,2 @@
+ALTER TABLE races
+  ADD COLUMN IF NOT EXISTS cover_image_manual BOOLEAN NOT NULL DEFAULT TRUE;
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "calendar-run-backend",
-  "version": "1.5.2",
+  "version": "1.6.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "calendar-run-backend",
-      "version": "1.5.2",
+      "version": "1.6.0",
      "dependencies": {
        "argon2": "^0.44.0",
        "cookie-parser": "^1.4.7",
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "calendar-run-backend",
-  "version": "1.5.2",
+  "version": "1.6.0",
  "private": true,
  "scripts": {
    "build": "tsc",
@@ -8,6 +8,7 @@
    "start": "node dist/index.js",
    "db:migrate": "ts-node src/migrate.ts",
    "seed": "ts-node src/seed.ts",
+    "backfill:covers": "ts-node src/backfillRaceCovers.ts",
    "test": "tsx --import ./test/setup.ts --test test/app.test.ts"
  },
  "dependencies": {
--- a/backend/src/backfillRaceCovers.ts
+++ b/backend/src/backfillRaceCovers.ts
@@ -0,0 +1,55 @@
+import { pool } from "./db";
+import { extractRaceCoverImage } from "./raceCoverImage";
+
+type Candidate = { id: string; official_url: string };
+
+export type CoverBackfillStats = {
+  candidates: number;
+  restored: number;
+  skipped: number;
+};
+
+export async function backfillRaceCovers(): Promise<CoverBackfillStats> {
+  const { rows } = await pool.query<Candidate>(
+    `SELECT id, official_url
+       FROM races
+      WHERE cover_image_url IS NULL
+        AND official_url IS NOT NULL
+        AND BTRIM(official_url) <> ''
+      ORDER BY race_date ASC, id ASC`,
+  );
+  const stats: CoverBackfillStats = { candidates: rows.length, restored: 0, skipped: 0 };
+
+  // ponytail: sequential network calls keep memory and outbound load bounded; parallelize per batch if volume requires it.
+  for (const row of rows) {
+    const coverImageUrl = await extractRaceCoverImage(row.official_url);
+    if (!coverImageUrl) {
+      stats.skipped += 1;
+      continue;
+    }
+
+    const result = await pool.query(
+      `UPDATE races
+          SET cover_image_url = $1, cover_image_manual = FALSE, updated_at = NOW()
+        WHERE id = $2 AND cover_image_url IS NULL`,
+      [coverImageUrl, row.id],
+    );
+    if (result.rowCount === 1) {
+      stats.restored += 1;
+    } else {
+      stats.skipped += 1;
+    }
+  }
+
+  return stats;
+}
+
+if (require.main === module) {
+  backfillRaceCovers()
+    .then((stats) => console.log(JSON.stringify(stats)))
+    .catch((error: unknown) => {
+      console.error("[backfill:covers] FAILED:", error instanceof Error ? error.message : error);
+      process.exitCode = 1;
+    })
+    .finally(() => pool.end());
+}
--- a/backend/src/mappers/race.ts
+++ b/backend/src/mappers/race.ts
@@ -12,6 +12,7 @@ export interface RaceRow {
  status: string | null;
  official_url: string | null;
  cover_image_url: string | null;
+  cover_image_manual: boolean;
  start_time: string | null;
  cluster_schedule: string | null;
  bib_pickup: string | null;
--- a/backend/src/routes/auth.ts
+++ b/backend/src/routes/auth.ts
@@ -20,7 +20,7 @@ import { clearSessionCookie, requireAuth, setSessionCookie } from "../authMiddle
 import { isValidPassword, normalizeEmail } from "../security";
 import { verifyTurnstileToken } from "../turnstile";

-const router = Router();
+const router: Router = Router();

 const genericOk = { ok: true };
 const genericAuthError = { error: "invalid_credentials", details: ["Invalid email or password"] };
--- a/backend/src/routes/health.ts
+++ b/backend/src/routes/health.ts
@@ -2,7 +2,7 @@ import { Router, Request, Response } from "express";
 import { checkDbConnection } from "../db";
 import { getBackendVersion } from "../version";

-const router = Router();
+const router: Router = Router();

 router.get("/health", (_req: Request, res: Response) => {
  res.json({ status: "ok", version: getBackendVersion() });
--- a/backend/src/routes/races.ts
+++ b/backend/src/routes/races.ts
@@ -5,7 +5,7 @@ import { rowToDto, bodyToColumns, RaceRow } from "../mappers/race";
 import { extractRaceCoverImage } from "../raceCoverImage";
 import { requireAuth } from "../authMiddleware";

-const router = Router();
+const router: Router = Router();
 router.use(requireAuth);

 type ValidationErrorBody = {
@@ -136,12 +136,77 @@ function parseOptionalIntegerQuery(
  return { value: parsed };
 }

+function parseOptionalNumberQuery(
+  value: unknown,
+  fieldName: string,
+  min?: number,
+  max?: number,
+): { value?: number; error?: string } {
+  if (value == null) {
+    return {};
+  }
+  if (typeof value !== "string" || value.trim() === "") {
+    return { error: `${fieldName} must be a number` };
+  }
+
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return { error: `${fieldName} must be a number` };
+  }
+  if (min != null && parsed < min) {
+    return { error: `${fieldName} must be between ${min} and ${max}` };
+  }
+  if (max != null && parsed > max) {
+    return { error: `${fieldName} must be between ${min} and ${max}` };
+  }
+
+  return { value: parsed };
+}
+
+function parseOptionalDateQuery(value: unknown, fieldName: string): { value?: string; error?: string } {
+  if (value == null) {
+    return {};
+  }
+  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return { error: `${fieldName} must be YYYY-MM-DD` };
+  }
+  const parsed = new Date(`${value}T00:00:00.000Z`);
+  if (Number.isNaN(parsed.valueOf()) || parsed.toISOString().slice(0, 10) !== value) {
+    return { error: `${fieldName} must be a valid calendar date` };
+  }
+  return { value };
+}
+
 /* ─── GET /races ──────────────────────────────────────────── */

 router.get("/races", async (req: Request, res: Response) => {
  const yearResult = parseOptionalIntegerQuery(req.query.year, "year");
  const monthResult = parseOptionalIntegerQuery(req.query.month, "month", 1, 12);
-  const details = [yearResult.error, monthResult.error].filter(Boolean) as string[];
+  const statusResult = req.query.status == null
+    ? {}
+    : typeof req.query.status === "string" && ["planned", "registered", "completed"].includes(req.query.status)
+      ? { value: req.query.status }
+      : { error: "status must be planned, registered or completed" };
+  const dateFromResult = parseOptionalDateQuery(req.query.dateFrom, "dateFrom");
+  const dateToResult = parseOptionalDateQuery(req.query.dateTo, "dateTo");
+  const distanceMinResult = parseOptionalNumberQuery(req.query.distanceMin, "distanceMin", 0.001, 999.999);
+  const distanceMaxResult = parseOptionalNumberQuery(req.query.distanceMax, "distanceMax", 0.001, 999.999);
+  const details = [
+    yearResult.error,
+    monthResult.error,
+    statusResult.error,
+    dateFromResult.error,
+    dateToResult.error,
+    distanceMinResult.error,
+    distanceMaxResult.error,
+  ].filter(Boolean) as string[];
+
+  if (dateFromResult.value && dateToResult.value && dateFromResult.value > dateToResult.value) {
+    details.push("dateFrom must not be after dateTo");
+  }
+  if (distanceMinResult.value != null && distanceMaxResult.value != null && distanceMinResult.value > distanceMaxResult.value) {
+    details.push("distanceMin must not be greater than distanceMax");
+  }

  if (details.length > 0) {
    validationError(res, details);
@@ -164,6 +229,26 @@ router.get("/races", async (req: Request, res: Response) => {
      conditions.push(`EXTRACT(MONTH FROM race_date) = $${idx++}`);
      params.push(monthResult.value);
    }
+    if (statusResult.value != null) {
+      conditions.push(`status = $${idx++}`);
+      params.push(statusResult.value);
+    }
+    if (dateFromResult.value != null) {
+      conditions.push(`race_date >= $${idx++}`);
+      params.push(dateFromResult.value);
+    }
+    if (dateToResult.value != null) {
+      conditions.push(`race_date <= $${idx++}`);
+      params.push(dateToResult.value);
+    }
+    if (distanceMinResult.value != null) {
+      conditions.push(`distance_km >= $${idx++}`);
+      params.push(distanceMinResult.value);
+    }
+    if (distanceMaxResult.value != null) {
+      conditions.push(`distance_km <= $${idx++}`);
+      params.push(distanceMaxResult.value);
+    }

    const where = conditions.length ? `WHERE ${conditions.join(" AND ")}` : "";
    const sql = `SELECT * FROM races ${where} ORDER BY race_date ASC`;
@@ -220,6 +305,8 @@ router.post("/races", async (req: Request, res: Response) => {
  const { columns, values } = bodyToColumns(payload as Record<string, unknown>);
  columns.unshift("owner_user_id");
  values.unshift(req.auth!.user.id);
+  columns.push("cover_image_manual");
+  values.push(hasManualCover);
  const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
  const sql = `INSERT INTO races (${columns.join(", ")}) VALUES (${placeholders}) RETURNING *`;

@@ -251,15 +338,43 @@ router.patch("/races/:id", async (req: Request, res: Response) => {
    validationError(res, schemaDetails(parsed.error));
    return;
  }
-  const { columns, values } = bodyToColumns(parsed.data as Record<string, unknown>);
-
-  const sets = columns.map((col, i) => `${col} = $${i + 1}`);
-  sets.push(`updated_at = NOW()`);
-  values.push(id);
-  values.push(req.auth!.user.id);
-  const sql = `UPDATE races SET ${sets.join(", ")} WHERE id = $${values.length - 1} AND owner_user_id = $${values.length} RETURNING *`;
-
  try {
+    const currentResult = await pool.query<Pick<RaceRow, "official_url" | "cover_image_url" | "cover_image_manual">>(
+      "SELECT official_url, cover_image_url, cover_image_manual FROM races WHERE id = $1 AND owner_user_id = $2",
+      [id, req.auth!.user.id],
+    );
+    if (currentResult.rows.length === 0) {
+      res.status(404).json({ error: "not_found", details: ["Race not found"] });
+      return;
+    }
+
+    const payload = { ...parsed.data };
+    const officialUrlChanged = Object.prototype.hasOwnProperty.call(payload, "officialUrl");
+    const current = currentResult.rows[0]!;
+    const hasCoverField = Object.prototype.hasOwnProperty.call(payload, "coverImageUrl");
+    const sameAsExistingCover = typeof payload.coverImageUrl === "string" && payload.coverImageUrl === current.cover_image_url;
+    const manualCoverChanged = typeof payload.coverImageUrl === "string" && payload.coverImageUrl.trim() !== "" && !sameAsExistingCover;
+    let coverImageManual = current.cover_image_manual;
+    if (hasCoverField && !sameAsExistingCover) {
+      coverImageManual = manualCoverChanged;
+    }
+    const officialUrl = payload.officialUrl === undefined ? current.official_url : payload.officialUrl;
+    if (officialUrlChanged && !current.cover_image_manual && !manualCoverChanged && typeof officialUrl === "string" && officialUrl.trim() !== "") {
+      payload.coverImageUrl = await extractRaceCoverImage(officialUrl);
+      coverImageManual = false;
+    }
+
+    const { columns, values } = bodyToColumns(payload as Record<string, unknown>);
+    if (hasCoverField || officialUrlChanged) {
+      columns.push("cover_image_manual");
+      values.push(coverImageManual);
+    }
+    const sets = columns.map((col, i) => `${col} = $${i + 1}`);
+    sets.push(`updated_at = NOW()`);
+    values.push(id);
+    values.push(req.auth!.user.id);
+    const sql = `UPDATE races SET ${sets.join(", ")} WHERE id = $${values.length - 1} AND owner_user_id = $${values.length} RETURNING *`;
+
    const { rows } = await pool.query<RaceRow>(sql, values);
    if (rows.length === 0) {
      res.status(404).json({ error: "not_found", details: ["Race not found"] });
--- a/backend/test/app.test.ts
+++ b/backend/test/app.test.ts
@@ -4,6 +4,7 @@ import path from "node:path";
 import { after, test } from "node:test";
 import request from "supertest";
 import { buildHelmetOptions, createApp } from "../src/app";
+import { backfillRaceCovers } from "../src/backfillRaceCovers";
 import {
  cleanupExpiredAuthRows,
  createResetToken,
@@ -161,6 +162,29 @@ test("GET /api/races accepts year and month", async () => {
  assert.ok(Array.isArray(res.body));
 });

+test("GET /api/races filters by status, date and distance", async () => {
+  const { agent, csrfToken } = await authAgent();
+  await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
+    slug: "2026-05-01-filter-planned", date: "2026-05-01", title: "Planned 5", distanceKm: 5, status: "planned",
+  }).expect(201);
+  await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
+    slug: "2026-06-01-filter-completed", date: "2026-06-01", title: "Completed 10", distanceKm: 10, status: "completed",
+  }).expect(201);
+  await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
+    slug: "2026-07-01-filter-completed", date: "2026-07-01", title: "Completed 21", distanceKm: 21.1, status: "completed",
+  }).expect(201);
+
+  const res = await agent.get("/api/races?status=completed&dateFrom=2026-06-01&dateTo=2026-06-30&distanceMax=10").expect(200);
+  assert.deepEqual(res.body.map((race: { title: string }) => race.title), ["Completed 10"]);
+});
+
+test("GET /api/races rejects inverted filter ranges", async () => {
+  const { agent } = await authAgent();
+  const res = await agent.get("/api/races?dateFrom=2026-07-01&dateTo=2026-06-01").expect(400);
+  assert.equal(res.body.error, "validation_error");
+  assert.ok(res.body.details.some((detail: string) => detail.includes("dateFrom")));
+});
+
 test("GET /api/races/:id rejects a non-UUID id", async () => {
  const { agent } = await authAgent();
  const res = await agent.get("/api/races/does-not-exist").expect(400);
@@ -460,6 +484,39 @@ test("POST /api/races stores manual coverImageUrl", async () => {
  assert.equal(res.body.coverImageUrl, coverImageUrl);
 });

+test("PATCH /api/races refreshes an automatic cover but preserves a manual cover", async () => {
+  const originalFetch = globalThis.fetch;
+  let imageName = "first.jpg";
+  globalThis.fetch = async () => new Response(`<meta property="og:image" content="/${imageName}">`, {
+    status: 200,
+    headers: { "content-type": "text/html" },
+  });
+
+  try {
+    const { agent, csrfToken } = await authAgent();
+    const created = await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
+      slug: "2026-06-06-auto-refresh", date: "2026-06-06", title: "Auto Refresh", distanceKm: 10, officialUrl: "https://example.com/first",
+    }).expect(201);
+    imageName = "second.jpg";
+    const refreshed = await agent.patch(`/api/races/${created.body.id}`).set("X-CSRF-Token", csrfToken).send({
+      officialUrl: "https://example.com/second",
+    }).expect(200);
+    assert.equal(refreshed.body.coverImageUrl, "https://example.com/second.jpg");
+
+    const manual = await agent.patch(`/api/races/${created.body.id}`).set("X-CSRF-Token", csrfToken).send({
+      officialUrl: "https://example.com/third", coverImageUrl: "https://example.com/manual.jpg",
+    }).expect(200);
+    imageName = "fourth.jpg";
+    const preserved = await agent.patch(`/api/races/${created.body.id}`).set("X-CSRF-Token", csrfToken).send({
+      officialUrl: "https://example.com/fourth",
+    }).expect(200);
+    assert.equal(manual.body.coverImageUrl, "https://example.com/manual.jpg");
+    assert.equal(preserved.body.coverImageUrl, "https://example.com/manual.jpg");
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
 test("POST /api/races rejects unknown and malformed fields", async () => {
  const { agent, csrfToken } = await authAgent();
  const res = await agent
@@ -526,6 +583,58 @@ test("POST /api/races auto extracts coverImageUrl from officialUrl", async () =>
  }
 });

+test("PATCH /api/races auto extracts a missing cover when officialUrl changes", async () => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () => new Response("", { status: 404 });
+
+  try {
+    const { agent, csrfToken } = await authAgent();
+    const created = await agent
+      .post("/api/races")
+      .set("X-CSRF-Token", csrfToken)
+      .send({ slug: "2026-06-04-patch-cover", date: "2026-06-04", title: "Patch Cover", distanceKm: 10 })
+      .expect(201);
+
+    globalThis.fetch = async () => new Response('<meta property="og:image" content="/patched.jpg">', {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+    const updated = await agent
+      .patch(`/api/races/${created.body.id}`)
+      .set("X-CSRF-Token", csrfToken)
+      .send({ officialUrl: "https://example.com/patched" })
+      .expect(200);
+
+    assert.equal(updated.body.coverImageUrl, "https://example.com/patched.jpg");
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("cover backfill restores only races without a cover", async () => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () => new Response('<meta property="og:image" content="/backfill.jpg">', {
+    status: 200,
+    headers: { "content-type": "text/html" },
+  });
+
+  try {
+    const { agent, csrfToken } = await authAgent();
+    await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
+      slug: "2026-06-05-backfill", date: "2026-06-05", title: "Backfill", distanceKm: 10,
+    }).expect(201);
+    await pool.query("UPDATE races SET official_url = $1 WHERE slug = $2", ["https://example.com/backfill", "2026-06-05-backfill"]);
+
+    const stats = await backfillRaceCovers();
+    assert.ok(stats.candidates >= 1);
+    assert.ok(stats.restored >= 1);
+    const result = await pool.query<{ cover_image_url: string }>("SELECT cover_image_url FROM races WHERE slug = $1", ["2026-06-05-backfill"]);
+    assert.equal(result.rows[0]?.cover_image_url, "https://example.com/backfill.jpg");
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
 test("POST /api/races succeeds when cover extraction fails", async () => {
  const originalFetch = globalThis.fetch;
  globalThis.fetch = async () => {
--- a/docs/backend-api-for-frontend.md
+++ b/docs/backend-api-for-frontend.md
@@ -85,8 +85,10 @@ Liveness без проверки БД:
 ### `GET /api/races`

 Возвращает только забеги текущего пользователя, отсортированные по дате. Опциональные
-query-параметры: `year` (целое число) и `month` (1–12); без результатов возвращается
-`[]`.
+query-параметры: `year` (целое число), `month` (1–12), `status` (`planned`,
+`registered` или `completed`), `dateFrom`/`dateTo` (`YYYY-MM-DD`) и
+`distanceMin`/`distanceMax` (километры, от `0.001` до `999.999`). Диапазоны не
+могут быть перевёрнуты; без результатов возвращается `[]`.

 ### `GET /api/races/:id`

@@ -124,6 +126,13 @@ query-параметры: `year` (целое число) и `month` (1–12); б

 Удаляет забег. Успех: `204` без тела.

+При изменении `officialUrl` backend best-effort получает обложку, если у старта
+ещё нет обложки. Ручная `coverImageUrl` не перезаписывается.
+
+Одноразовое восстановление обложек существующих стартов запускается командой
+`npm run backfill:covers`. Команда идемпотентна и печатает только агрегированную
+статистику.
+
 ## Модель `Race`

 | Поле | Тип | POST | PATCH | Ограничение |
--- a/docs/product-backlog.md
+++ b/docs/product-backlog.md
@@ -6,8 +6,8 @@

 | Контур | Версия | Уже работает |
 |---|---:|---|
-| Backend | `1.5.0` | Express + PostgreSQL, миграции и seed, строгий CRUD личных стартов, cookie-сессии, CSRF, подтверждение email, Turnstile, SMTP, смена пароля и управление сессиями, SSRF-защита обложек, `/health`, `/ready`, `/meta`, CI с PostgreSQL. |
-| Frontend | `0.8.0` | Защищённые маршруты и auth-экраны, экран аккаунта, нативные поля даты/старта, удобный ввод результатов, дашборд с последними стартами и интерактивным графиком, версия FE/BE в футере. |
+| Backend | `1.6.0` | Express + PostgreSQL, миграции и seed, строгий CRUD личных стартов, фильтры истории, cookie-сессии, CSRF, подтверждение email, Turnstile, SMTP, смена пароля и управление сессиями, SSRF-защита и восстановление обложек, `/health`, `/ready`, `/meta`, CI с PostgreSQL. |
+| Frontend | `0.9.0` | Защищённые маршруты и auth-экраны, экран аккаунта, поиск/фильтры/экспорт истории, нативные поля даты/старта, удобный ввод результатов, дашборд с последними стартами и графиком AG Charts, версия FE/BE в футере. |

 ## Правила версионирования и выпуска

@@ -21,9 +21,9 @@
 | Очередь | BE | FE | Цель | Условие выпуска |
 |---|---:|---:|---|---|
 | P0 | `1.4.2` | `0.7.1` | Исправить риски текущего релиза и привести контракт в соответствие коду. | Нет невалидных записей, SSRF-защита, критические сценарии проверяются на PostgreSQL. |
-| P1 | `1.5.0` | `0.8.0` | Дать пользователю контроль над аккаунтом и данными, улучшить работу с историей стартов. | Управление сессиями и экспорт доступны, фильтры не ломают существующий список. |
-| P2 | `1.6.0` | `0.9.0` | Подготовка к старту: чек-листы, напоминания и календарная интеграция. | Напоминание отправляется не более одного раза, подписка/токен отзываемы. |
-| P3 | `1.7.0` | `1.0.0` | Сделать персональный календарь эксплуатационно готовым. | Восстановление из backup проверено, есть E2E критического пути и аудит доступности. |
+| P1 | `1.6.0` | `0.9.0` | Дать пользователю контроль над аккаунтом и данными, улучшить работу с историей стартов. | Управление сессиями и экспорт доступны, фильтры не ломают существующий список. |
+| P2 | `1.7.0` | `1.0.0` | Подготовка к старту: чек-листы, напоминания и календарная интеграция. | Напоминание отправляется не более одного раза, подписка/токен отзываемы. |
+| P3 | `1.8.0` | `1.1.0` | Сделать персональный календарь эксплуатационно готовым. | Восстановление из backup проверено, есть E2E критического пути и аудит доступности. |

 `2.0.0` не планируется заранее: его поводом может быть только подтверждённая потребность в совместном доступе, командах или публичных стартах — это изменит модель владельцев и доступа.

@@ -51,30 +51,33 @@
 | FE-071-05 | P0 | Завершать подтверждение email понятным экраном успеха | После успешной ссылки `/verify-email?token=…` заголовок явно сообщает, что email подтверждён; ввод email, инструкция и кнопка повторной отправки не показываются. Форма повторной отправки остаётся только для недействительной/отсутствующей ссылки. |
 | FE-071-06 | P0 | Упростить ввод результата забега | Время вводится отдельными цифровыми полями «часы», «минуты», «секунды» без ручного ввода `:`. Часы — целое число ≥ 0, минуты и секунды — от 0 до 59; пустые минуты/секунды автоматически нормализуются в `0`. Итоговое время не показывает незаполненные старшие части: без часов — `MM:SS`, без часов и минут — `SS`. Место вводится числами «место» и «всего участников» (второе необязательно), проверяется, что место ≥ 1 и не больше общего числа; в текущий `finishPlace` без изменения API сохраняется `место/всего` либо только место. Старые значения `finishPlace` не теряются до редактирования результата. |

-## P1 — BE 1.5.0 / FE 0.8.0
+## P1 — BE 1.6.0 / FE 0.9.0

-### Backend 1.5.0
+### Backend 1.6.0

 | ID | Приоритет | Задача | Результат / критерий приёмки |
 |---|---|---|---|
 | BE-150-01 | Готово | Управление паролем и сессиями | Выполнено в `1.5.0`: авторизованный пользователь меняет пароль после проверки текущего; все другие сессии отзываются. Есть список активных сессий с отзывом выбранной и «выйти везде». Токены и пароли в ответах/логах не появляются. |
 | BE-150-02 | P1 | Удаление аккаунта и данных | Явно подтверждённый запрос удаляет аккаунт, его сессии и личные старты транзакционно; повторный запрос идемпотентен. Перед реализацией согласовать необходимость периода восстановления. |
-| BE-150-03 | P1 | Обратносуместимая фильтрация стартов | Добавить документированные фильтры `status`, диапазон дат и диапазон дистанции, не меняя текущий ответ-массив `GET /races`. Валидация параметров и покрытие индексами — по фактическому query plan. |
+| BE-150-03 | Готово | Обратносуместимая фильтрация стартов | Добавлены документированные фильтры `status`, диапазон дат и диапазон дистанции без изменения ответа-массива `GET /races`, с валидацией параметров. |
+| BE-150-04 | Готово | Восстановить обложки существующих стартов | Добавлен идемпотентный backfill и обновление обложки при изменении официальной страницы. SSRF-защищённая логика переиспользуется; ручные URL не перезаписываются, результат содержит агрегированную статистику. |

-### Frontend 0.8.0
+### Frontend 0.9.0

 | ID | Приоритет | Задача | Результат / критерий приёмки |
 |---|---|---|---|
 | FE-080-01 | Готово | Экран «Аккаунт» | Выполнено в `0.8.0`: пользователь видит подтверждённый email, меняет пароль и видит/отзывает другие сессии. Удаление аккаунта остаётся отдельной задачей BE-150-02. |
-| FE-080-02 | P1 | Поиск, фильтры и сортировка истории | Фильтры по статусу, периоду и дистанции синхронизированы с URL; поиск по названию работает без новой зависимости. Годы в селекторе строятся из данных, а не ограничены окном «-2/+4». |
-| FE-080-03 | P1 | Выгрузка личных данных | Из текущей отфильтрованной выборки пользователь скачивает CSV и одноразовый `.ics` в браузере. Сервер не нужен: данные уже принадлежат пользователю и загружены в UI. |
+| FE-080-02 | Готово | Поиск, фильтры и сортировка истории | Фильтры по статусу, периоду и дистанции, поиск по названию и сортировка синхронизированы с URL. Годы в селекторе строятся из данных. |
+| FE-080-03 | Готово | Выгрузка личных данных | Из текущей отфильтрованной выборки пользователь скачивает CSV и одноразовый `.ics` в браузере; сервер не нужен. |
 | FE-080-04 | Готово | Сделать на дашборде список последних стартов | Выполнено в `0.8.0`: «Последние старты» показывают до 5 завершённых стартов с клиентской пагинацией, фильтрами по дистанции и году и доступным переходом в старт. |
 | FE-080-05 | Готово | Связать рекорды по дистанциям со стартами | Выполнено в `0.8.0`: карточка рекорда с найденным стартом ведёт на `/races/:id` и использует существующую анимацию связанных карточек. |
 | FE-080-06 | Готово | Сделать график прогресса информативным и интерактивным | Выполнено в `0.8.0`: график имеет подписанные оси, компактные подписи, tooltip по наведению/фокусу и доступный переход в старт. |
+| FE-080-07 | Готово | Вернуть управление официальной страницей старта | Поле «Официальная страница старта» доступно для любого старта, включая прошедший; для прошедших скрываются только неактуальные поля расписания. |
+| FE-080-08 | Готово | Перевести график прогресса на AG Charts | Самописный SVG заменён на AG Charts; сохранены данные, оси, tooltip, клавиатурная доступность, переход по точке, адаптивность и пустое состояние. |

-## P2 — BE 1.6.0 / FE 0.9.0
+## P2 — BE 1.7.0 / FE 1.0.0

-### Backend 1.6.0
+### Backend 1.7.0

 | ID | Приоритет | Задача | Результат / критерий приёмки |
 |---|---|---|---|
@@ -82,17 +85,18 @@
 | BE-160-02 | P1 | Надёжные email-напоминания | Настройки пользователя и очередь напоминаний хранятся в БД; отправка идемпотентна, ошибки ретраятся ограниченно и логируются без PII. Расписание запуска — внешний cron/worker, а не `setInterval` в каждом web-инстансе. |
 | BE-160-03 | P2 | Подписка на персональный iCalendar | Выдать отдельный отзывной секретный URL только для read-only календаря пользователя. Нужны лимитирование, отсутствие email/заметок в ICS и отзыв/ротация токена. |

-### Frontend 0.9.0
+### Frontend 1.0.0

 | ID | Приоритет | Задача | Результат / критерий приёмки |
 |---|---|---|---|
 | FE-090-01 | P1 | Чек-лист в карточке старта | Пользователь добавляет, завершает и переставляет задачи подготовки; на дашборде видит ближайшие незавершённые пункты. Пустое состояние объясняет, что делать. |
 | FE-090-02 | P1 | Настройки напоминаний | Опт-ин по email и выбор сроков до старта; понятно отображаются часовой пояс и факт отключения рассылки. |
 | FE-090-03 | P2 | Управление iCalendar-подпиской | Экран показывает URL только по явному действию, даёт скопировать, отозвать и выпустить новый. Одноразовый экспорт из `0.8.0` остаётся доступным без подписки. |
+| FE-090-04 | P2 | Исправить полную TypeScript-проверку frontend | `tsc -b` проходит без ошибки `Cannot find name 'Worker'` в типах Vite; конфигурации browser/node остаются корректно разделены, проверка исходников не ослабляется. |

-## P3 — BE 1.7.0 / FE 1.0.0
+## P3 — BE 1.8.0 / FE 1.1.0

-### Backend 1.7.0
+### Backend 1.8.0

 | ID | Приоритет | Задача | Результат / критерий приёмки |
 |---|---|---|---|
@@ -100,7 +104,7 @@
 | BE-170-02 | P0 | Наблюдаемость без утечки данных | Структурированные логи с request ID, готовность БД, счётчики ошибок и alert на недоступность. Email, пароли, токены, cookie и текст заметок не логируются. |
 | BE-170-03 | P1 | Машиночитаемый API-контракт | OpenAPI-спецификация синхронизирована с маршрутам и используется в CI для проверки ключевых ответов. Это предотвращает повторное расхождение документации и реализации. |

-### Frontend 1.0.0
+### Frontend 1.1.0

 | ID | Приоритет | Задача | Результат / критерий приёмки |
 |---|---|---|---|
@@ -130,3 +134,14 @@
 2. `BE-142-01` и `BE-142-02`: зафиксировать настоящий контракт и закрыть trust boundary.
 3. `BE-142-03`: убрать SSRF-риск до любого расширения автозагрузки обложек.
 4. `FE-071-01`–`FE-071-06`: устранить неверную аналитику и ошибки критических форм, включая понятное завершение подтверждения email и ввод результата.
+
+## Выполненный спринт
+
+**Цель:** пользователь быстро находит старты, восстанавливает данные истории, выгружает результат и видит прогресс в поддерживаемой chart-визуализации.
+
+1. `BE-150-04` + `FE-080-07`: восстановление обложек существующих стартов и управление официальной страницей, включая прошедшие старты. Ручные обложки не перезаписываются; используется существующая SSRF-защищённая логика.
+2. `BE-150-03` + `FE-080-02`: фильтры по статусу, периоду и дистанции, поиск по названию, сортировка и синхронизация с URL. Обновить API-документацию и контрактные тесты.
+3. `FE-080-03`: экспорт текущей отфильтрованной выборки в CSV и одноразовый `.ics` без нового backend и зависимостей.
+4. `FE-080-08`: заменить самописный SVG-график прогресса на AG Charts. Сохранить текущие данные и метрики, подписи осей, tooltip, клавиатурную доступность, переход по точке в старт, адаптивность и пустое состояние. Не менять API и не добавлять новую обёртку поверх `PaceTrendChart`.
+
+`BE-150-02` в спринт не брать до решения: удаление аккаунта сразу или с 30-дневным восстановлением.
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,13 +1,15 @@
 {
  "name": "calendar-run-frontend",
-  "version": "0.8.2",
+  "version": "0.9.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "calendar-run-frontend",
-      "version": "0.8.2",
+      "version": "0.9.3",
      "dependencies": {
+        "ag-charts-community": "^14.0.0",
+        "ag-charts-react": "^14.0.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-router-dom": "^6.30.1"
@@ -1221,6 +1223,50 @@
        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
      }
    },
+    "node_modules/ag-charts-community": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-14.0.0.tgz",
+      "integrity": "sha512-u/O7T/EGxj8s6cZjbYU1CaRObnjMzdfXZVido9uXbeAwBkT4rxXF6OWSq1SkkSrZD1+pwusHn3cbul4Ly3yzPA==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-core": "14.0.0",
+        "ag-charts-locale": "14.0.0",
+        "ag-charts-types": "14.0.0"
+      }
+    },
+    "node_modules/ag-charts-core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-core/-/ag-charts-core-14.0.0.tgz",
+      "integrity": "sha512-xcFSQ0Ces8JvH5RpKoZIjrFzdvju91gIXODj33Byg6ShwkixrHyLaCf17addfSsqerSSdMkw0iiceD9afU83UQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "14.0.0"
+      }
+    },
+    "node_modules/ag-charts-locale": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-14.0.0.tgz",
+      "integrity": "sha512-14mGnsQgG7VzdQwt7Jq2MFPGPtO8y6jAECN4nae7t3fJAPq162mmrgDaqpwHdAZxKPkMNte98DUQ8ULrtSbUpQ==",
+      "license": "MIT"
+    },
+    "node_modules/ag-charts-react": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-react/-/ag-charts-react-14.0.0.tgz",
+      "integrity": "sha512-PTwfdmyFbePzaKHuGWfB2o8KNXO5wR5fOCyUCRqdUNnCEK8cBPwlDsfe28CRsevQSLPZqTNpW2y5qJhHC4q6EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-community": "14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/ag-charts-types": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-14.0.0.tgz",
+      "integrity": "sha512-89X4J/OeOTzTp505126JayGEn3k6QUKz3UHSR0/ggoVZYzVqtMN13k/B136S1+YBwgnzyJ/NARnnIRTPWsWG9g==",
+      "license": "MIT"
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.15",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.15.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
  "name": "calendar-run-frontend",
  "private": true,
-  "version": "0.8.2",
+  "version": "0.9.3",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -9,6 +9,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "ag-charts-community": "^14.0.0",
+    "ag-charts-react": "^14.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.30.1"
--- a/frontend/src/api/races.ts
+++ b/frontend/src/api/races.ts
@@ -47,24 +47,25 @@ function normalizeRace(input: unknown): Race {
    });
  }

+  const validRace = race as Race;
  return {
-    id: race.id,
-    slug: race.slug,
-    date: race.date,
-    title: race.title,
-    distanceKm: race.distanceKm,
-    status: race.status,
-    officialUrl: race.officialUrl,
-    coverImageUrl: race.coverImageUrl ?? null,
-    startTime: race.startTime,
-    clusterSchedule: race.clusterSchedule,
-    bibPickup: race.bibPickup,
-    bibNumber: race.bibNumber,
-    finishTime: race.finishTime,
-    finishPlace: race.finishPlace,
-    notes: race.notes,
-    createdAt: race.createdAt,
-    updatedAt: race.updatedAt,
+    id: validRace.id,
+    slug: validRace.slug,
+    date: validRace.date,
+    title: validRace.title,
+    distanceKm: validRace.distanceKm,
+    status: validRace.status,
+    officialUrl: validRace.officialUrl,
+    coverImageUrl: validRace.coverImageUrl ?? null,
+    startTime: validRace.startTime,
+    clusterSchedule: validRace.clusterSchedule,
+    bibPickup: validRace.bibPickup,
+    bibNumber: validRace.bibNumber,
+    finishTime: validRace.finishTime,
+    finishPlace: validRace.finishPlace,
+    notes: validRace.notes,
+    createdAt: validRace.createdAt,
+    updatedAt: validRace.updatedAt,
  };
 }

@@ -80,6 +81,21 @@ function buildRacesQuery(query?: RacesQuery): string {
  if (typeof query.month === "number") {
    params.set("month", String(query.month));
  }
+  if (query.status) {
+    params.set("status", query.status);
+  }
+  if (query.dateFrom) {
+    params.set("dateFrom", query.dateFrom);
+  }
+  if (query.dateTo) {
+    params.set("dateTo", query.dateTo);
+  }
+  if (typeof query.distanceMin === "number") {
+    params.set("distanceMin", String(query.distanceMin));
+  }
+  if (typeof query.distanceMax === "number") {
+    params.set("distanceMax", String(query.distanceMax));
+  }

  const serialized = params.toString();
  return serialized ? `?${serialized}` : "";
--- a/frontend/src/api/types.ts
+++ b/frontend/src/api/types.ts
@@ -23,6 +23,11 @@ export interface Race {
 export interface RacesQuery {
  year?: number;
  month?: number;
+  status?: RaceStatus;
+  dateFrom?: string;
+  dateTo?: string;
+  distanceMin?: number;
+  distanceMax?: number;
 }

 export interface CreateRacePayload {
--- a/frontend/src/components/PaceTrendChart.tsx
+++ b/frontend/src/components/PaceTrendChart.tsx
@@ -1,4 +1,6 @@
-import { useState } from "react";
+import { AgCharts } from "ag-charts-react";
+import type { AgChartOptions } from "ag-charts-community";
+import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import type { Race } from "../api";
 import { formatRaceDate, getPaceLabel, isCloseDistance, parseFinishTimeToSeconds, parseRaceDate } from "../lib";
@@ -8,6 +10,14 @@ type PaceTrendChartProps = {
  distanceKm: number;
 };

+type PaceDatum = {
+  id: string;
+  date: string;
+  dateLabel: string;
+  minutes: number;
+  race: Race;
+};
+
 function formatAxisTime(minutes: number): string {
  const totalSeconds = Math.round(minutes * 60);
  const hours = Math.floor(totalSeconds / 3600);
@@ -19,89 +29,86 @@ function formatShortDate(date: string): string {
  return parseRaceDate(date).toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit" });
 }

+function cssToken(name: string, fallback: string): string {
+  if (typeof window === "undefined") {
+    return fallback;
+  }
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
 /** Линейный график: время финиша по завершённым стартам выбранной дистанции. */
 export function PaceTrendChart({ races, distanceKm }: PaceTrendChartProps): JSX.Element {
  const navigate = useNavigate();
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const series = races
-    .filter((race) => race.status === "completed" && isCloseDistance(race.distanceKm, distanceKm) && parseFinishTimeToSeconds(race.finishTime) != null)
-    .sort((a, b) => parseRaceDate(a.date).getTime() - parseRaceDate(b.date).getTime())
-    .map((race) => ({ race, minutes: parseFinishTimeToSeconds(race.finishTime)! / 60 }));
+  const series = useMemo<PaceDatum[]>(
+    () => races
+      .filter((race) => race.status === "completed" && isCloseDistance(race.distanceKm, distanceKm) && parseFinishTimeToSeconds(race.finishTime) != null)
+      .sort((a, b) => parseRaceDate(a.date).getTime() - parseRaceDate(b.date).getTime())
+      .map((race) => ({
+        id: race.id,
+        date: race.date,
+        dateLabel: formatShortDate(race.date),
+        minutes: parseFinishTimeToSeconds(race.finishTime)! / 60,
+        race,
+      })),
+    [distanceKm, races],
+  );
+
+  const options = useMemo<AgChartOptions<PaceDatum>>(() => ({
+    data: series,
+    autoSize: true,
+    minHeight: 280,
+    padding: { top: 16, right: 20, bottom: 16, left: 16 },
+    background: { fill: "transparent" },
+    animation: { enabled: false },
+    keyboard: { enabled: true, tabIndex: 0, initialFocus: "data-start" },
+    axes: {
+      x: { type: "category", position: "bottom", title: { text: "Дата старта" } },
+      y: {
+        type: "number",
+        position: "left",
+        title: { text: "Время" },
+        label: { formatter: ({ value }) => formatAxisTime(Number(value)) },
+      },
+    },
+    series: [{
+      type: "line",
+      xKey: "dateLabel",
+      xName: "Дата старта",
+      yKey: "minutes",
+      yName: "Время",
+      stroke: cssToken("--color-accent", "#1168d8"),
+      strokeWidth: 3,
+      marker: {
+        enabled: true,
+        size: 8,
+        fill: cssToken("--color-surface", "#ffffff"),
+        stroke: cssToken("--color-accent", "#1168d8"),
+        strokeWidth: 2,
+      },
+      tooltip: {
+        renderer: ({ datum }) => ({
+          title: datum.race.title,
+          data: [
+            { label: "Дата", value: formatRaceDate(datum.date) },
+            { label: "Время", value: datum.race.finishTime ?? "—" },
+            { label: "Темп", value: getPaceLabel(datum.race.finishTime, datum.race.distanceKm) ?? "—" },
+          ],
+        }),
+      },
+    }],
+    listeners: {
+      seriesNodeClick: ({ datum }) => navigate(`/races/${datum.race.id}`),
+    },
+  }), [navigate, series]);

  if (series.length < 2) {
    return <p className="pace-chart__empty">Нужно минимум два завершённых старта с временем на выбранной дистанции.</p>;
  }

-  const values = series.map((item) => item.minutes);
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const range = max - min || 1;
-  const w = 100;
-  const h = 58;
-  const margin = { top: 6, right: 4, bottom: 14, left: 17 };
-  const innerW = w - margin.left - margin.right;
-  const innerH = h - margin.top - margin.bottom;
-  const pointAt = (item: (typeof series)[number], index: number) => ({
-    x: margin.left + (index / (series.length - 1)) * innerW,
-    y: margin.top + ((max - item.minutes) / range) * innerH,
-  });
-  const points = series.map(pointAt);
-  const line = points.map(({ x, y }) => `${x},${y}`).join(" ");
-  const yTicks = [max, (max + min) / 2, min];
-  const labelStep = Math.max(1, Math.ceil(series.length / 6));
-  const active = series.find((item) => item.race.id === activeId) ?? null;
-
  return (
-    <div className="pace-chart">
-      <svg className="pace-chart__svg" viewBox={`0 0 ${w} ${h}`} role="group" aria-label="Динамика времени на дистанции. Нажмите точку, чтобы открыть старт.">
-        <text className="pace-chart__axis-title" x="2" y={h / 2} transform={`rotate(-90 2 ${h / 2})`}>Время</text>
-        {yTicks.map((tick) => {
-          const y = margin.top + ((max - tick) / range) * innerH;
-          return (
-            <g key={tick}>
-              <line className="pace-chart__grid-line" x1={margin.left} y1={y} x2={w - margin.right} y2={y} />
-              <text className="pace-chart__axis-label" x={margin.left - 2} y={y + 1} textAnchor="end">{formatAxisTime(tick)}</text>
-            </g>
-          );
-        })}
-        <line className="pace-chart__axis" x1={margin.left} y1={margin.top} x2={margin.left} y2={h - margin.bottom} />
-        <line className="pace-chart__axis" x1={margin.left} y1={h - margin.bottom} x2={w - margin.right} y2={h - margin.bottom} />
-        <polyline className="pace-chart__line" fill="none" points={line} />
-        {series.map((item, index) => {
-          const point = points[index]!;
-          const isLabeled = index % labelStep === 0 || index === series.length - 1;
-          return (
-            <g
-              key={item.race.id}
-              className="pace-chart__point"
-              tabIndex={0}
-              role="button"
-              aria-label={`Открыть ${item.race.title}: ${item.race.finishTime}, ${getPaceLabel(item.race.finishTime, item.race.distanceKm)}`}
-              onMouseEnter={() => setActiveId(item.race.id)}
-              onMouseLeave={() => setActiveId(null)}
-              onFocus={() => setActiveId(item.race.id)}
-              onBlur={() => setActiveId(null)}
-              onClick={() => navigate(`/races/${item.race.id}`)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  event.preventDefault();
-                  navigate(`/races/${item.race.id}`);
-                }
-              }}
-            >
-              <circle className={index === series.length - 1 ? "pace-chart__dot pace-chart__dot--last" : "pace-chart__dot"} cx={point.x} cy={point.y} r="1.05" />
-              {isLabeled ? <text className="pace-chart__point-label" x={point.x} y={h - margin.bottom + 5} textAnchor="middle">{formatShortDate(item.race.date)}</text> : null}
-            </g>
-          );
-        })}
-        <text className="pace-chart__axis-title" x={w / 2} y={h - 1} textAnchor="middle">Дата старта</text>
-      </svg>
-      {active ? (
-        <div className="pace-chart__tooltip" role="status">
-          <strong>{active.race.title}</strong>
-          <span>{formatRaceDate(active.race.date)} · {active.race.finishTime} · {getPaceLabel(active.race.finishTime, active.race.distanceKm)}</span>
-        </div>
-      ) : <p className="pace-chart__hint">Наведите на точку или выберите её клавиатурой.</p>}
+    <div className="pace-chart" role="group" aria-label="Динамика времени на дистанции. Выберите точку, чтобы открыть старт.">
+      <AgCharts options={options} />
+      <p className="pace-chart__hint">Наведите на точку или выберите её клавиатурой.</p>
    </div>
  );
 }
--- a/frontend/src/lib/index.ts
+++ b/frontend/src/lib/index.ts
@@ -19,3 +19,4 @@ export {
 export { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "./calendarUtils";
 export { getRaceVisual } from "./raceVisuals";
 export type { RaceVisualVariant } from "./raceVisuals";
+export { downloadTextFile, racesToCsv, racesToIcs } from "./raceExport";
--- a/frontend/src/lib/raceExport.ts
+++ b/frontend/src/lib/raceExport.ts
@@ -0,0 +1,60 @@
+import type { Race } from "../api";
+
+function escapeCsvCell(value: string | number | null): string {
+  const text = value == null ? "" : String(value);
+  return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+
+function escapeIcsText(value: string): string {
+  return value.replace(/[\\;,\n]/g, (character) => ({ "\\": "\\\\", ";": "\\;", ",": "\\,", "\n": "\\n" })[character]!);
+}
+
+function toIcsDate(date: string): string {
+  return date.slice(0, 10).replace(/-/g, "");
+}
+
+function addOneDay(date: string): string {
+  const next = new Date(`${date.slice(0, 10)}T00:00:00Z`);
+  next.setUTCDate(next.getUTCDate() + 1);
+  return next.toISOString().slice(0, 10);
+}
+
+export function racesToCsv(races: Race[]): string {
+  const headers = ["Дата", "Название", "Дистанция (км)", "Статус", "Время", "Место", "Официальная страница"];
+  const rows = races.map((race) => [
+    race.date,
+    race.title,
+    race.distanceKm,
+    race.status,
+    race.finishTime,
+    race.finishPlace,
+    race.officialUrl,
+  ]);
+  return `\uFEFF${[headers, ...rows].map((row) => row.map(escapeCsvCell).join(",")).join("\r\n")}\r\n`;
+}
+
+export function racesToIcs(races: Race[]): string {
+  const events = races.map((race) => {
+    const start = race.date.slice(0, 10);
+    const end = addOneDay(start);
+    return [
+      "BEGIN:VEVENT",
+      `UID:${race.id}@calendar-run`,
+      `DTSTART;VALUE=DATE:${toIcsDate(start)}`,
+      `DTEND;VALUE=DATE:${toIcsDate(end)}`,
+      `SUMMARY:${escapeIcsText(race.title)}`,
+      `DESCRIPTION:${escapeIcsText(`${race.distanceKm} км${race.officialUrl ? `\n${race.officialUrl}` : ""}`)}`,
+      "END:VEVENT",
+    ].join("\r\n");
+  });
+  return ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Calendar Run//Races//RU", ...events, "END:VCALENDAR", ""].join("\r\n");
+}
+
+export function downloadTextFile(filename: string, content: string, type: string): void {
+  const url = URL.createObjectURL(new Blob([content], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { AllCommunityModule, ModuleRegistry } from "ag-charts-community";
 import { RouterProvider } from "react-router-dom";
 import { AuthProvider } from "./app/auth/AuthContext";
 import { appRouter } from "./app/router";
 import "./styles/tokens.css";
 import "./styles/global.css";

+ModuleRegistry.registerModules([AllCommunityModule]);
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <AuthProvider>
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -192,7 +192,6 @@ export function DashboardPage(): JSX.Element {
      >
        <div className="dashboard-hero__content">
          <p className="dashboard-hero__eyebrow">Календарь сезона</p>
-          <h1 className="dashboard-hero__title">Беговой штаб</h1>
          <p className="dashboard-hero__text">
            Планируйте старты, держите фокус на ближайшей гонке и сравнивайте прогресс по дистанциям.
          </p>
--- a/frontend/src/pages/RaceFormPage.tsx
+++ b/frontend/src/pages/RaceFormPage.tsx
@@ -412,19 +412,17 @@ export function RaceFormPage(): JSX.Element {
        <fieldset className="race-form__group">
          <legend className="race-form__legend">Организация</legend>

-          {hideOrgScheduleFields ? null : (
-            <label className="race-form__field">
-              <span className="race-form__label">Сайт организатора</span>
-              <input
-                className="race-form__input"
-                type="url"
-                name="officialUrl"
-                value={form.officialUrl}
-                onChange={handleChange}
-                placeholder="https://…"
-              />
-            </label>
-          )}
+          <label className="race-form__field">
+            <span className="race-form__label">Сайт организатора</span>
+            <input
+              className="race-form__input"
+              type="url"
+              name="officialUrl"
+              value={form.officialUrl}
+              onChange={handleChange}
+              placeholder="https://…"
+            />
+          </label>

          <label className="race-form__field">
            <span className="race-form__label">URL обложки</span>
--- a/frontend/src/pages/RacesPage.tsx
+++ b/frontend/src/pages/RacesPage.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
-import type { Race, RacesQuery } from "../api";
+import { Link, useSearchParams } from "react-router-dom";
+import type { Race, RaceStatus, RacesQuery } from "../api";
 import { ApiError, getRaces } from "../api";
 import { RacesCalendar } from "../components/RacesCalendar";
 import {
@@ -10,8 +10,9 @@ import {
  getRaceStatusClassName,
  getRaceStatusLabel,
  parseRaceDate,
-  sortByDateAsc,
-  sortByDateDesc,
+  downloadTextFile,
+  racesToCsv,
+  racesToIcs,
 } from "../lib";

 const MONTH_OPTIONS: { value: string; label: string }[] = [
@@ -34,16 +35,12 @@ const VIEW_STORAGE_KEY = "races-view-mode";

 type ViewMode = "list" | "calendar";
 type RaceListTab = "upcoming" | "completed";
+type RaceSort = "dateAsc" | "dateDesc" | "titleAsc" | "distanceAsc";

-function yearSelectOptions(): number[] {
+function yearSelectOptions(races: Race[], selectedYear = ""): number[] {
  const current = new Date().getFullYear();
-  const start = current - 2;
-  const end = current + 4;
-  const years: number[] = [];
-  for (let y = start; y <= end; y += 1) {
-    years.push(y);
-  }
-  return years;
+  const selected = Number(selectedYear);
+  return [...new Set([current, ...races.map((race) => parseRaceDate(race.date).getFullYear()), ...(Number.isInteger(selected) ? [selected] : [])])].sort((a, b) => a - b);
 }

 function getErrorMessage(error: unknown): string {
@@ -133,13 +130,24 @@ function RaceList(props: { title: string; races: Race[]; variant: RaceListTab })
 }

 export function RacesPage(): JSX.Element {
+  const [searchParams, setSearchParams] = useSearchParams();
  const [races, setRaces] = useState<Race[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [yearFilter, setYearFilter] = useState<string>("");
-  const [monthFilter, setMonthFilter] = useState<string>("");
-  const [viewMode, setViewMode] = useState<ViewMode>(() => readInitialViewMode());
+  const [yearFilter, setYearFilter] = useState<string>(() => searchParams.get("year") ?? "");
+  const [monthFilter, setMonthFilter] = useState<string>(() => searchParams.get("month") ?? "");
+  const [statusFilter, setStatusFilter] = useState<RaceStatus | "">(() => (searchParams.get("status") as RaceStatus | null) ?? "");
+  const [dateFrom, setDateFrom] = useState<string>(() => searchParams.get("dateFrom") ?? "");
+  const [dateTo, setDateTo] = useState<string>(() => searchParams.get("dateTo") ?? "");
+  const [distanceMin, setDistanceMin] = useState<string>(() => searchParams.get("distanceMin") ?? "");
+  const [distanceMax, setDistanceMax] = useState<string>(() => searchParams.get("distanceMax") ?? "");
+  const [searchQuery, setSearchQuery] = useState<string>(() => searchParams.get("q") ?? "");
+  const [sortOrder, setSortOrder] = useState<RaceSort>(() => (searchParams.get("sort") as RaceSort | null) ?? "dateAsc");
+  const [viewMode, setViewMode] = useState<ViewMode>(() => searchParams.get("view") === "calendar" ? "calendar" : readInitialViewMode());
  const [activeListTab, setActiveListTab] = useState<RaceListTab>("upcoming");
+  const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState<boolean>(() =>
+    ["dateFrom", "dateTo", "distanceMin", "distanceMax", "sort"].some((key) => searchParams.has(key)),
+  );

  const setViewModePersist = useCallback((mode: ViewMode) => {
    setViewMode(mode);
@@ -160,28 +168,45 @@ export function RacesPage(): JSX.Element {
  }, [setViewModePersist]);

  const listQuery = useMemo((): RacesQuery | undefined => {
+    const q: RacesQuery = {};
    if (viewMode === "calendar") {
      const y = yearFilter !== "" ? parseInt(yearFilter, 10) : new Date().getFullYear();
-      if (!Number.isNaN(y)) {
-        return { year: y };
-      }
-      return undefined;
-    }
-    const q: RacesQuery = {};
-    if (yearFilter !== "") {
-      const y = parseInt(yearFilter, 10);
      if (!Number.isNaN(y)) {
        q.year = y;
      }
-    }
-    if (monthFilter !== "") {
-      const m = parseInt(monthFilter, 10);
-      if (!Number.isNaN(m)) {
-        q.month = m;
+    } else {
+      if (yearFilter !== "") {
+        const y = parseInt(yearFilter, 10);
+        if (!Number.isNaN(y)) {
+          q.year = y;
+        }
+      }
+      if (monthFilter !== "") {
+        const m = parseInt(monthFilter, 10);
+        if (!Number.isNaN(m)) {
+          q.month = m;
+        }
      }
    }
+    if (statusFilter) {
+      q.status = statusFilter;
+    }
+    if (dateFrom) {
+      q.dateFrom = dateFrom;
+    }
+    if (dateTo) {
+      q.dateTo = dateTo;
+    }
+    const min = Number(distanceMin);
+    const max = Number(distanceMax);
+    if (distanceMin && Number.isFinite(min)) {
+      q.distanceMin = min;
+    }
+    if (distanceMax && Number.isFinite(max)) {
+      q.distanceMax = max;
+    }
    return Object.keys(q).length > 0 ? q : undefined;
-  }, [viewMode, yearFilter, monthFilter]);
+  }, [dateFrom, dateTo, distanceMax, distanceMin, monthFilter, statusFilter, viewMode, yearFilter]);

  const displayYear = useMemo(() => {
    if (yearFilter !== "") {
@@ -223,12 +248,38 @@ export function RacesPage(): JSX.Element {
    };
  }, [listQuery]);

+  useEffect(() => {
+    const next = new URLSearchParams();
+    if (viewMode === "calendar") next.set("view", viewMode);
+    if (yearFilter) next.set("year", yearFilter);
+    if (monthFilter) next.set("month", monthFilter);
+    if (statusFilter) next.set("status", statusFilter);
+    if (dateFrom) next.set("dateFrom", dateFrom);
+    if (dateTo) next.set("dateTo", dateTo);
+    if (distanceMin) next.set("distanceMin", distanceMin);
+    if (distanceMax) next.set("distanceMax", distanceMax);
+    if (searchQuery) next.set("q", searchQuery);
+    if (sortOrder !== "dateAsc") next.set("sort", sortOrder);
+    setSearchParams(next, { replace: true });
+  }, [dateFrom, dateTo, distanceMax, distanceMin, monthFilter, searchQuery, setSearchParams, sortOrder, statusFilter, viewMode, yearFilter]);
+
+  const filteredRaces = useMemo(() => {
+    const needle = searchQuery.trim().toLocaleLowerCase("ru-RU");
+    const result = races.filter((race) => !needle || race.title.toLocaleLowerCase("ru-RU").includes(needle));
+    return result.sort((left, right) => {
+      if (sortOrder === "titleAsc") return left.title.localeCompare(right.title, "ru");
+      if (sortOrder === "distanceAsc") return left.distanceKm - right.distanceKm || left.title.localeCompare(right.title, "ru");
+      const direction = sortOrder === "dateDesc" ? -1 : 1;
+      return direction * (parseRaceDate(left.date).getTime() - parseRaceDate(right.date).getTime());
+    });
+  }, [races, searchQuery, sortOrder]);
+
  const { upcoming, completed } = useMemo(
    () => ({
-      upcoming: sortByDateAsc(races.filter((race) => race.status !== "completed")),
-      completed: sortByDateDesc(races.filter((race) => race.status === "completed")),
+      upcoming: filteredRaces.filter((race) => race.status !== "completed"),
+      completed: filteredRaces.filter((race) => race.status === "completed"),
    }),
-    [races],
+    [filteredRaces],
  );
  const statusMessage = useMemo(() => {
    if (errorMessage && !isLoading) {
@@ -249,6 +300,13 @@ export function RacesPage(): JSX.Element {
  ]
    .filter(Boolean)
    .join(" ");
+  const activeAdvancedFilterCount = [
+    dateFrom,
+    dateTo,
+    distanceMin,
+    distanceMax,
+    sortOrder !== "dateAsc" ? sortOrder : "",
+  ].filter(Boolean).length;

  if (errorMessage && races.length === 0 && !isLoading) {
    return (
@@ -261,7 +319,7 @@ export function RacesPage(): JSX.Element {

  return (
    <section className="page page--races">
-      <section className="races-hero" aria-label="Календарь стартов">
+      <section className={`races-hero${isAdvancedFiltersOpen ? " races-hero--filters-open" : ""}`} aria-label="Календарь стартов">
        <div className="races-hero__content">
          <p className="races-hero__eyebrow">Сезонная афиша</p>
          <h1 className="page__title">Календарь стартов</h1>
@@ -283,45 +341,155 @@ export function RacesPage(): JSX.Element {
            </button>
          </div>
        </div>
-        <div className="races-hero__filters">
-          <div className="races-filter" role="search" aria-label="Фильтр по дате">
-            <label className="races-filter__field">
-              <span className="races-filter__label">Год</span>
-              <select
-                className="races-filter__select"
-                value={viewMode === "list" ? yearFilter : yearFilter || String(displayYear)}
-                onChange={(event) => {
-                  setYearFilter(event.target.value);
-                }}
+        {!isAdvancedFiltersOpen ? (
+          <div className="races-hero__filters">
+            <div className="races-filter" role="search" aria-label="Основные фильтры">
+              <div className="races-filter__primary">
+                <label className="races-filter__field">
+                  <span className="races-filter__label">Год</span>
+                  <select
+                    className="races-filter__select"
+                    value={viewMode === "list" ? yearFilter : yearFilter || String(displayYear)}
+                    onChange={(event) => {
+                      setYearFilter(event.target.value);
+                    }}
+                  >
+                    {viewMode === "list" ? <option value="">Все года</option> : null}
+                    {yearSelectOptions(races, yearFilter).map((y) => (
+                      <option key={y} value={String(y)}>
+                        {y}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label className="races-filter__field">
+                  <span className="races-filter__label">Месяц</span>
+                  <select
+                    className="races-filter__select"
+                    value={monthFilter}
+                    onChange={(event) => {
+                      setMonthFilter(event.target.value);
+                    }}
+                  >
+                    {MONTH_OPTIONS.map((opt) => (
+                      <option key={opt.value || "all"} value={opt.value}>
+                        {opt.label}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label className="races-filter__field">
+                  <span className="races-filter__label">Статус</span>
+                  <select className="races-filter__select" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as RaceStatus | "")}>
+                    <option value="">Все статусы</option>
+                    <option value="planned">Планирую</option>
+                    <option value="registered">Зарегистрирован</option>
+                    <option value="completed">Пробежал</option>
+                  </select>
+                </label>
+                <label className="races-filter__field">
+                  <span className="races-filter__label">Название</span>
+                  <input className="races-filter__input" type="search" value={searchQuery} onChange={(event) => setSearchQuery(event.target.value)} placeholder="Название старта" />
+                </label>
+              </div>
+              <button
+                type="button"
+                className="races-filter__advanced-summary"
+                aria-expanded={false}
+                onClick={() => setIsAdvancedFiltersOpen(true)}
              >
-                {viewMode === "list" ? <option value="">Все года</option> : null}
-                {yearSelectOptions().map((y) => (
-                  <option key={y} value={String(y)}>
-                    {y}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <label className="races-filter__field">
-              <span className="races-filter__label">Месяц</span>
-              <select
-                className="races-filter__select"
-                value={monthFilter}
-                onChange={(event) => {
-                  setMonthFilter(event.target.value);
-                }}
-              >
-                {MONTH_OPTIONS.map((opt) => (
-                  <option key={opt.value || "all"} value={opt.value}>
-                    {opt.label}
-                  </option>
-                ))}
-              </select>
-            </label>
+                <span>Дополнительные фильтры{activeAdvancedFilterCount > 0 ? ` · ${activeAdvancedFilterCount} активн.` : ""}</span>
+              </button>
+            </div>
          </div>
-        </div>
+        ) : null}
      </section>

+      {isAdvancedFiltersOpen ? (
+        <section className="races-filter-panel" aria-label="Расширенные фильтры стартов">
+          <div className="races-filter-panel__header">
+            <div>
+              <p className="races-filter-panel__eyebrow">Расширенный поиск</p>
+              <h2 className="races-filter-panel__title">Фильтры стартов</h2>
+            </div>
+            <button type="button" className="btn btn--secondary races-filter-panel__close" aria-expanded={true} onClick={() => setIsAdvancedFiltersOpen(false)}>
+              Свернуть фильтры
+            </button>
+          </div>
+          <div className="races-filter races-filter--panel" role="search" aria-label="Все фильтры стартов">
+            <div className="races-filter__panel-fields">
+              <label className="races-filter__field">
+                <span className="races-filter__label">Год</span>
+                <select
+                  className="races-filter__select"
+                  value={viewMode === "list" ? yearFilter : yearFilter || String(displayYear)}
+                  onChange={(event) => setYearFilter(event.target.value)}
+                >
+                  {viewMode === "list" ? <option value="">Все года</option> : null}
+                  {yearSelectOptions(races, yearFilter).map((y) => (
+                    <option key={y} value={String(y)}>
+                      {y}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Месяц</span>
+                <select className="races-filter__select" value={monthFilter} onChange={(event) => setMonthFilter(event.target.value)}>
+                  {MONTH_OPTIONS.map((opt) => (
+                    <option key={opt.value || "all"} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Статус</span>
+                <select className="races-filter__select" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as RaceStatus | "")}>
+                  <option value="">Все статусы</option>
+                  <option value="planned">Планирую</option>
+                  <option value="registered">Зарегистрирован</option>
+                  <option value="completed">Пробежал</option>
+                </select>
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Название</span>
+                <input className="races-filter__input" type="search" value={searchQuery} onChange={(event) => setSearchQuery(event.target.value)} placeholder="Название старта" />
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Дата от</span>
+                <input className="races-filter__input" type="date" value={dateFrom} onChange={(event) => setDateFrom(event.target.value)} />
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Дата до</span>
+                <input className="races-filter__input" type="date" value={dateTo} onChange={(event) => setDateTo(event.target.value)} />
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Дистанция от, км</span>
+                <input className="races-filter__input" type="number" min="0.001" step="0.001" value={distanceMin} onChange={(event) => setDistanceMin(event.target.value)} />
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Дистанция до, км</span>
+                <input className="races-filter__input" type="number" min="0.001" step="0.001" value={distanceMax} onChange={(event) => setDistanceMax(event.target.value)} />
+              </label>
+              <label className="races-filter__field">
+                <span className="races-filter__label">Сортировка</span>
+                <select className="races-filter__select" value={sortOrder} onChange={(event) => setSortOrder(event.target.value as RaceSort)}>
+                  <option value="dateAsc">Дата: сначала ранние</option>
+                  <option value="dateDesc">Дата: сначала поздние</option>
+                  <option value="titleAsc">Название: А–Я</option>
+                  <option value="distanceAsc">Дистанция: по возрастанию</option>
+                </select>
+              </label>
+            </div>
+            <div className="races-filter__actions">
+              <button type="button" className="btn btn--secondary" disabled={filteredRaces.length === 0} onClick={() => downloadTextFile("calendar-run.csv", racesToCsv(filteredRaces), "text/csv;charset=utf-8")}>Скачать CSV</button>
+              <button type="button" className="btn btn--secondary" disabled={filteredRaces.length === 0} onClick={() => downloadTextFile("calendar-run.ics", racesToIcs(filteredRaces), "text/calendar;charset=utf-8")}>Скачать календарь</button>
+            </div>
+          </div>
+        </section>
+      ) : null}
+
      <div className="races-status" aria-live="polite">
        <p
          className={statusClassName}
@@ -367,7 +535,7 @@ export function RacesPage(): JSX.Element {
          <RacesCalendar
            displayYear={displayYear}
            monthFilter={monthFilter}
-            races={races}
+            races={filteredRaces}
            onMonthFilterChange={setMonthFilter}
          />
        </div>
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -542,7 +542,8 @@ a {
  color: var(--color-text-muted);
 }

-.races-filter__select {
+.races-filter__select,
+.races-filter__input {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
@@ -551,6 +552,13 @@ a {
  color: var(--color-text);
 }

+.races-filter__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+
 .pace-chart {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
@@ -559,73 +567,9 @@ a {
  background: #fcfdff;
 }

-.pace-chart__svg {
-  display: block;
-  width: 100%;
-  max-width: 560px;
-  height: auto;
-}
-
-.pace-chart__line {
-  stroke: var(--color-accent);
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-}
-
-.pace-chart__axis {
-  stroke: rgba(14, 31, 45, 0.42);
-  stroke-width: 0.75;
-  vector-effect: non-scaling-stroke;
-}
-
-.pace-chart__axis-label,
-.pace-chart__axis-title,
-.pace-chart__point-label {
-  fill: var(--color-text-muted);
-  font-size: 2.5px;
-}
-
-.pace-chart__axis-title {
-  font-size: 2.8px;
-  font-weight: 700;
-}
-
-.pace-chart__point-label {
-  font-size: 2.25px;
-}
-
-.pace-chart__point {
-  cursor: pointer;
-  outline: none;
-}
-
-.pace-chart__point:focus-visible .pace-chart__dot,
-.pace-chart__point:hover .pace-chart__dot {
-  stroke-width: 2;
-}
-
-.pace-chart__tooltip,
 .pace-chart__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-caption);
-}
-
-.pace-chart__tooltip {
-  display: grid;
-  gap: var(--space-1);
-  padding: var(--space-3);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.78);
-  color: var(--color-text);
-}
-
-.pace-chart__hint {
-  color: var(--color-text-muted);
-}
-
-.pace-chart__caption {
-  margin: var(--space-3) 0 0;
-  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
 }

@@ -1590,49 +1534,6 @@ body {
    #ffffff;
 }

-.pace-chart__svg {
-  max-width: 100%;
-}
-
-.pace-chart__grid-line {
-  stroke: rgba(14, 31, 45, 0.12);
-  stroke-width: 0.8;
-  vector-effect: non-scaling-stroke;
-}
-
-.pace-chart__line {
-  stroke-width: 2.2;
-}
-
-.pace-chart__dot {
-  fill: #ffffff;
-  stroke: var(--color-accent);
-  stroke-width: 1;
-  vector-effect: non-scaling-stroke;
-}
-
-.pace-chart__dot--last {
-  fill: var(--color-lime);
-  stroke: var(--color-bg-deep);
-}
-
-.pace-chart__stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-}
-
-.pace-chart__caption {
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.72);
-  color: var(--color-text);
-}
-
-.pace-chart__caption--best {
-  color: #0e5d3d;
-}
-
 .races-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
@@ -1663,10 +1564,131 @@ body {
  backdrop-filter: blur(14px);
 }

+.races-hero--filters-open {
+  grid-template-columns: 1fr;
+  min-height: 15rem;
+}
+
+.races-hero--filters-open .races-hero__content {
+  max-width: 42rem;
+}
+
 .races-hero__filters .races-filter {
+  display: block;
  margin-top: 0;
 }

+.races-filter__primary,
+.races-filter__advanced-fields {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.races-filter__primary {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.races-filter__primary .races-filter__field,
+.races-filter__advanced-fields .races-filter__field,
+.races-filter__panel-fields .races-filter__field {
+  min-width: 0;
+}
+
+.races-filter__advanced-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: var(--space-5);
+  padding-top: var(--space-4);
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  gap: var(--space-3);
+  color: #ffffff;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  background: transparent;
+}
+
+.races-filter__advanced-summary::after {
+  content: "+";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.42);
+  border-radius: 50%;
+  font-size: 1.15rem;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.races-filter__advanced[open] .races-filter__advanced-summary::after {
+  content: "−";
+}
+
+.races-filter__advanced-summary:focus-visible {
+  outline: 2px solid var(--color-lime);
+  outline-offset: var(--space-1);
+}
+
+.races-filter-panel {
+  display: grid;
+  gap: var(--space-5);
+  margin-top: var(--space-5);
+  padding: var(--space-6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-card);
+}
+
+.races-filter-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5);
+}
+
+.races-filter-panel__eyebrow {
+  margin: 0 0 var(--space-1);
+  color: var(--color-accent);
+  font-size: var(--font-size-caption);
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.races-filter-panel__title {
+  margin: 0;
+  color: var(--color-bg-deep);
+  font-size: var(--font-size-h2);
+}
+
+.races-filter-panel .races-filter {
+  display: block;
+  margin-top: 0;
+}
+
+.races-filter__panel-fields {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.races-filter-panel .races-filter__select,
+.races-filter-panel .races-filter__input {
+  width: 100%;
+}
+
 .races-hero__filters .races-filter__label {
  color: rgba(255, 255, 255, 0.78);
 }
@@ -1676,6 +1698,15 @@ body {
  background: rgba(255, 255, 255, 0.94);
 }

+.races-hero__filters .races-filter__input {
+  border-color: rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.races-filter-panel .races-filter__label {
+  color: var(--color-text-muted);
+}
+
 .races-view-toggle {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(7, 25, 39, 0.28);
@@ -2104,6 +2135,10 @@ body {
    background-position: 62% center;
  }

+  .races-filter__panel-fields {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
  .race-details-header {
    flex-direction: column;
  }
@@ -2136,6 +2171,19 @@ body {
    border-radius: var(--radius-md);
  }

+  .races-filter-panel {
+    padding: var(--space-5);
+  }
+
+  .races-filter-panel__header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .races-filter-panel__close {
+    width: 100%;
+  }
+
  .dashboard-hero__title {
    font-size: 3rem;
  }
@@ -2153,6 +2201,10 @@ body {
  .races-cal__year {
    grid-template-columns: 1fr;
  }
+
+  .races-filter__panel-fields {
+    grid-template-columns: 1fr;
+  }
 }

@media (prefers-reduced-motion: reduce) {
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -2,7 +2,7 @@
  "compilerOptions": {
    "composite": true,
    "target": "ES2020",
-    "lib": ["ES2020"],
+    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true,
Author	SHA1	Message	Date
admin	47f90c5389	fix(frontend): include DOM types in Vite config	2026-08-13 00:08:16 +03:00
admin	1b8235fa6e	feat(frontend): move advanced race filters below hero	2026-08-12 23:46:20 +03:00
admin	b9b98d2164	Merge pull request 'fix(frontend): simplify race calendar overview' (#47 ) from fix/collapse-start-filters into main Reviewed-on: admin/runners-calendar#47	2026-07-13 21:14:10 +00:00
Vakanaut	4e6b283aa0	fix(frontend): simplify race calendar overview	2026-07-14 00:13:38 +03:00
admin	b4caf731eb	Merge pull request 'fix(frontend): register AG Charts modules' (#46 ) from fix/register-ag-charts-modules into main Reviewed-on: admin/runners-calendar#46	2026-07-13 17:48:41 +00:00
Vakanaut	821f9167ca	fix(frontend): register AG Charts modules	2026-07-13 20:47:55 +03:00
admin	e882e8ded6	Merge pull request 'feat: complete race history sprint' (#45 ) from feature/race-history-covers-and-charts into main Reviewed-on: admin/runners-calendar#45	2026-07-13 17:25:05 +00:00
Vakanaut	a8b87fc6b1	feat: complete race history sprint	2026-07-13 08:31:12 +03:00
admin	46998a1a67	Merge pull request 'docs: plan race cover restoration' (#44 ) from fix/restore-race-covers into main Reviewed-on: admin/runners-calendar#44	2026-07-12 15:34:12 +00:00
Vakanaut	2d1390ae63	docs: plan race cover restoration	2026-07-12 18:33:14 +03:00
admin	f6ad7b924a	Merge pull request 'fix: run migrations before starting backend' (#43 ) from fix/auto-run-migrations into main Reviewed-on: admin/runners-calendar#43	2026-07-12 14:08:00 +00:00
Vakanaut	e68df524ef	fix: run migrations before starting backend	2026-07-12 17:07:32 +03:00
admin	ea7b8aff7a	Merge pull request 'feature/profile-usernames' (#42 ) from feature/profile-usernames into main Reviewed-on: admin/runners-calendar#42	2026-07-12 14:01:49 +00:00