diff --git a/docs/superpowers/plans/2026-05-21-ux-extensions.md b/docs/superpowers/plans/2026-05-21-ux-extensions.md
new file mode 100644
index 0000000..8958cfc
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-21-ux-extensions.md
@@ -0,0 +1,2669 @@
+# UX Extensions Implementation Plan (Sub-project C)
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Ship a rich lesson-detail page, global ⌘K search, a redesigned stats page (heatmap + per-lesson progress + reviews-due), and admin polish (inline tree filter + drag-and-drop reordering).
+
+**Architecture:** Three new backend endpoints (`/api/search`, `/api/stats/lessons-progress`, `/api/stats/due`) plus one new session helper (`POST /api/sessions/due`). The frontend gains a `SearchPalette` (⌘K modal), a new `LessonDetail` page that replaces the current `AdminLesson`, a rewritten `Stats` page with three composable widgets, and a `LessonTree` extended with client-side filter + `@dnd-kit/sortable` drag-and-drop. Routes `/admin` → `/lessons` and `/admin/lessons/:id` → `/lessons/:id` with `<Navigate>` redirects for backwards compatibility.
+
+**Tech Stack:** Express + Drizzle (SQLite `LIKE %q%`), Zod, React + Zustand, `@dnd-kit/core` + `@dnd-kit/sortable`, Vitest + supertest, Playwright + Mailpit.
+
+**Spec:** `docs/superpowers/specs/2026-05-21-ux-extensions-design.md`
+
+**Pre-implementation:** No schema changes. Reuses sub-projects A (auth) and B (ownership/sharing). Permission check via `canReadLesson` from `services/permissions.ts`.
+
+---
+
+## File Structure
+
+```
+flashcard/
+├── packages/
+│   ├── backend/src/
+│   │   ├── services/
+│   │   │   ├── search.ts                       NEW
+│   │   │   ├── search.test.ts                  NEW
+│   │   │   ├── stats.ts                        MODIFIED (+ getLessonsProgress, getDueOverview)
+│   │   │   ├── stats.test.ts                   MODIFIED
+│   │   │   └── sessions.ts                     MODIFIED (+ startDueSession)
+│   │   ├── routes/
+│   │   │   ├── search.ts                       NEW
+│   │   │   ├── stats.ts                        MODIFIED
+│   │   │   └── sessions.ts                     MODIFIED
+│   │   ├── tests/
+│   │   │   └── ux.integration.test.ts          NEW
+│   │   └── app.ts                              MODIFIED (mount search router)
+│   └── frontend/src/
+│       ├── api/
+│       │   ├── search.ts                       NEW
+│       │   ├── stats.ts                        MODIFIED (+ lessonsProgress, due)
+│       │   └── sessions.ts                     MODIFIED (+ startDue)
+│       ├── components/
+│       │   ├── SearchPalette.tsx               NEW
+│       │   ├── Heatmap.tsx                     NEW
+│       │   ├── LessonProgressList.tsx          NEW
+│       │   ├── DueOverviewCard.tsx             NEW
+│       │   ├── LessonStatsPanel.tsx            NEW
+│       │   ├── SublessonList.tsx               NEW
+│       │   ├── RecentSessionsList.tsx          NEW
+│       │   ├── LessonTree.tsx                  MODIFIED (filter + dnd)
+│       │   └── Layout.tsx                      MODIFIED (search trigger + ⌘K listener)
+│       ├── pages/
+│       │   ├── Lessons.tsx                     NEW (replaces Admin.tsx)
+│       │   ├── LessonDetail.tsx                NEW (replaces AdminLesson.tsx)
+│       │   └── Stats.tsx                       REWRITTEN
+│       └── router.tsx                          MODIFIED (route restructure + redirects)
+└── e2e/
+    └── ux.spec.ts                              NEW (search + detail + stats smoke)
+```
+
+---
+
+## Task 1: Backend — Search service (TDD)
+
+**Files:**
+- Create: `packages/backend/src/services/search.ts`
+- Create: `packages/backend/src/services/search.test.ts`
+
+- [ ] **Step 1: Write failing tests**
+
+```ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import { makeTestDb, createUserDirect, createLessonOwnedBy } from '../tests/dbHelper.js';
+import { createCard } from './cards.js';
+import { searchAll } from './search.js';
+
+let env: ReturnType<typeof makeTestDb>;
+beforeEach(() => { env = makeTestDb(); });
+
+describe('search', () => {
+  it('returns empty for short queries', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const r = await searchAll(env.db, u.id, '', 30);
+    expect(r.lessons).toHaveLength(0);
+    expect(r.cards).toHaveLength(0);
+  });
+
+  it('finds own lessons by name', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com', displayName: 'Me' });
+    await createLessonOwnedBy(env.db, u.id, { name: 'Spaans basis' });
+    const r = await searchAll(env.db, u.id, 'spaans', 30);
+    expect(r.lessons).toHaveLength(1);
+    expect(r.lessons[0]!.location).toBe('library');
+  });
+
+  it('hides private lessons of other users', async () => {
+    const o = await createUserDirect(env.db, { email: 'o@example.com' });
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    await createLessonOwnedBy(env.db, o.id, { name: 'Geheim', visibility: 'private' });
+    const r = await searchAll(env.db, u.id, 'geheim', 30);
+    expect(r.lessons).toHaveLength(0);
+  });
+
+  it('marks shared lessons from others as marketplace', async () => {
+    const o = await createUserDirect(env.db, { email: 'o@example.com', displayName: 'Owner' });
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    await createLessonOwnedBy(env.db, o.id, { name: 'Public', visibility: 'shared' });
+    const r = await searchAll(env.db, u.id, 'public', 30);
+    expect(r.lessons).toHaveLength(1);
+    expect(r.lessons[0]!.location).toBe('marketplace');
+    expect(r.lessons[0]!.ownerDisplayName).toBe('Owner');
+  });
+
+  it('finds cards in readable lessons only', async () => {
+    const o = await createUserDirect(env.db, { email: 'o@example.com' });
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const own = await createLessonOwnedBy(env.db, u.id, { name: 'Mine' });
+    const other = await createLessonOwnedBy(env.db, o.id, { name: 'Hers', visibility: 'private' });
+    await createCard(env.db, u.id, own.id, { question: 'hola', answer: 'hello' });
+    await createCard(env.db, o.id, other.id, { question: 'hola', answer: 'hello' });
+    const r = await searchAll(env.db, u.id, 'hola', 30);
+    expect(r.cards).toHaveLength(1);
+    expect(r.cards[0]!.lessonId).toBe(own.id);
+  });
+
+  it('search is case-insensitive', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    await createLessonOwnedBy(env.db, u.id, { name: 'Frans' });
+    const r = await searchAll(env.db, u.id, 'FRA', 30);
+    expect(r.lessons).toHaveLength(1);
+  });
+
+  it('respects limit on each group', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    for (let i = 0; i < 5; i++) {
+      await createLessonOwnedBy(env.db, u.id, { name: `lesson${i}` });
+    }
+    const r = await searchAll(env.db, u.id, 'lesson', 2);
+    expect(r.lessons).toHaveLength(2);
+  });
+});
+```
+
+- [ ] **Step 2: Run — fail**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+npm -w @flashcard/backend test -- search
+```
+
+Expected: module `./search.js` not found.
+
+- [ ] **Step 3: Implement `services/search.ts`**
+
+```ts
+import { and, eq, inArray, like, ne, or, sql } from 'drizzle-orm';
+import type { Db } from '../db/client.js';
+import { cards, lessons, lessonSubscriptions, users } from '../db/schema.js';
+
+export interface SearchLessonResult {
+  id: number;
+  name: string;
+  ownerDisplayName: string;
+  location: 'library' | 'marketplace';
+  totalCards: number;
+  isCurated: boolean;
+}
+
+export interface SearchCardResult {
+  id: number;
+  lessonId: number;
+  lessonName: string;
+  question: string;
+  snippet: string;
+}
+
+export interface SearchResult {
+  lessons: SearchLessonResult[];
+  cards: SearchCardResult[];
+}
+
+const MIN_QUERY_LEN = 2;
+const SNIPPET_LEN = 80;
+
+function snippet(text: string, term: string): string {
+  const lower = text.toLowerCase();
+  const idx = lower.indexOf(term.toLowerCase());
+  if (idx < 0) return text.slice(0, SNIPPET_LEN);
+  const start = Math.max(0, idx - 20);
+  const end = Math.min(text.length, start + SNIPPET_LEN);
+  return (start > 0 ? '…' : '') + text.slice(start, end) + (end < text.length ? '…' : '');
+}
+
+export async function searchAll(
+  db: Db, userId: number, q: string, limit: number
+): Promise<SearchResult> {
+  const term = q.trim();
+  if (term.length < MIN_QUERY_LEN) return { lessons: [], cards: [] };
+
+  const pattern = `%${term.toLowerCase()}%`;
+
+  // Library lessons: owned + subscribed-or-descendant + curated-or-descendant
+  const ownerLessons = db.select().from(lessons).where(eq(lessons.ownerId, userId)).all();
+  const subRoots = db.select({
+    id: lessons.id, parentId: lessons.parentId, name: lessons.name,
+    description: lessons.description, position: lessons.position,
+    bidirectional: lessons.bidirectional, ownerId: lessons.ownerId,
+    visibility: lessons.visibility, isCurated: lessons.isCurated,
+    sourceLessonId: lessons.sourceLessonId, createdAt: lessons.createdAt, updatedAt: lessons.updatedAt,
+  }).from(lessons)
+    .innerJoin(lessonSubscriptions, eq(lessonSubscriptions.lessonId, lessons.id))
+    .where(eq(lessonSubscriptions.userId, userId))
+    .all();
+
+  // Gather readable lesson IDs (owned + descendants of subRoots + descendants of curated)
+  const allLessons = db.select().from(lessons).all();
+  const byId = new Map(allLessons.map((l) => [l.id, l]));
+  const byParent = new Map<number | null, typeof allLessons>();
+  for (const l of allLessons) {
+    const k = l.parentId ?? null;
+    if (!byParent.has(k)) byParent.set(k, []);
+    byParent.get(k)!.push(l);
+  }
+  const readableIds = new Set<number>();
+  for (const l of ownerLessons) readableIds.add(l.id);
+  const stack: number[] = [];
+  for (const sr of subRoots) stack.push(sr.id);
+  for (const l of allLessons) if (l.visibility === 'shared' && l.isCurated) stack.push(l.id);
+  while (stack.length) {
+    const cur = stack.pop()!;
+    if (readableIds.has(cur)) continue;
+    readableIds.add(cur);
+    for (const c of byParent.get(cur) ?? []) stack.push(c.id);
+  }
+
+  // Matching library lessons (readable + name/desc match)
+  const libraryMatches = allLessons.filter((l) =>
+    readableIds.has(l.id) && (
+      l.name.toLowerCase().includes(term.toLowerCase())
+      || (l.description ?? '').toLowerCase().includes(term.toLowerCase())
+    )
+  );
+
+  // Marketplace matches: visibility=shared AND ownerId != userId AND parent not shared (root) AND match
+  const sharedIds = new Set(allLessons.filter((l) => l.visibility === 'shared').map((l) => l.id));
+  const marketplaceMatches = allLessons.filter((l) =>
+    l.visibility === 'shared'
+    && l.ownerId !== userId
+    && !readableIds.has(l.id)  // hide what's already in library
+    && (l.parentId === null || !sharedIds.has(l.parentId))
+    && (
+      l.name.toLowerCase().includes(term.toLowerCase())
+      || (l.description ?? '').toLowerCase().includes(term.toLowerCase())
+    )
+  );
+
+  // Owner display names (single batch)
+  const ownerIds = Array.from(new Set([...libraryMatches, ...marketplaceMatches]
+    .map((l) => l.ownerId).filter((id): id is number => id !== null && id !== undefined)));
+  const ownerRows = ownerIds.length === 0 ? [] :
+    db.select({ id: users.id, displayName: users.displayName }).from(users)
+      .where(inArray(users.id, ownerIds)).all();
+  const ownerMap = new Map(ownerRows.map((u) => [u.id, u.displayName]));
+
+  // Card counts (cheap: count cards.lessonId in batch over relevant lesson trees)
+  // For simplicity in this v1 search, count direct cards only (not subtree).
+  // Subtree counts are available on detail pages.
+  const matchingLessonIds = [...libraryMatches, ...marketplaceMatches].map((l) => l.id);
+  const cardCounts = matchingLessonIds.length === 0 ? [] :
+    db.select({ lessonId: cards.lessonId, c: sql<number>`count(*)`.as('c') }).from(cards)
+      .where(inArray(cards.lessonId, matchingLessonIds))
+      .groupBy(cards.lessonId).all();
+  const cardCountByLesson = new Map(cardCounts.map((r) => [r.lessonId, Number(r.c)]));
+
+  const lessonResults: SearchLessonResult[] = [
+    ...libraryMatches.map((l): SearchLessonResult => ({
+      id: l.id, name: l.name,
+      ownerDisplayName: ownerMap.get(l.ownerId ?? -1) ?? '—',
+      location: 'library',
+      totalCards: cardCountByLesson.get(l.id) ?? 0,
+      isCurated: l.isCurated,
+    })),
+    ...marketplaceMatches.map((l): SearchLessonResult => ({
+      id: l.id, name: l.name,
+      ownerDisplayName: ownerMap.get(l.ownerId ?? -1) ?? '—',
+      location: 'marketplace',
+      totalCards: cardCountByLesson.get(l.id) ?? 0,
+      isCurated: l.isCurated,
+    })),
+  ];
+  lessonResults.sort((a, b) =>
+    a.location === b.location ? a.name.localeCompare(b.name) : a.location === 'library' ? -1 : 1
+  );
+
+  // Cards: only in readable lessons (no marketplace)
+  const readableIdsArr = Array.from(readableIds);
+  const cardMatches = readableIdsArr.length === 0 ? [] :
+    db.select({
+      id: cards.id, lessonId: cards.lessonId, question: cards.question,
+      answer: cards.answer, hint: cards.hint, lessonName: lessons.name,
+    }).from(cards)
+      .innerJoin(lessons, eq(lessons.id, cards.lessonId))
+      .where(and(
+        inArray(cards.lessonId, readableIdsArr),
+        or(
+          like(sql`lower(${cards.question})`, pattern),
+          like(sql`lower(${cards.answer})`, pattern),
+          like(sql`lower(${cards.hint})`, pattern),
+        )!
+      ))
+      .all();
+
+  const cardResults: SearchCardResult[] = cardMatches.map((c) => {
+    const matched = c.question.toLowerCase().includes(term.toLowerCase())
+      ? c.question
+      : c.answer.toLowerCase().includes(term.toLowerCase())
+      ? c.answer
+      : (c.hint ?? c.question);
+    return {
+      id: c.id, lessonId: c.lessonId, lessonName: c.lessonName,
+      question: c.question, snippet: snippet(matched, term),
+    };
+  });
+  cardResults.sort((a, b) => a.lessonName.localeCompare(b.lessonName) || a.question.localeCompare(b.question));
+
+  return {
+    lessons: lessonResults.slice(0, limit),
+    cards: cardResults.slice(0, limit),
+  };
+}
+```
+
+- [ ] **Step 4: Run — pass**
+
+```bash
+npm -w @flashcard/backend test -- search
+```
+
+Expected: 7 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/backend/src/services/search.ts packages/backend/src/services/search.test.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(search): global search service with library/marketplace + cards"
+```
+
+---
+
+## Task 2: Backend — Search route + integration test
+
+**Files:**
+- Create: `packages/backend/src/routes/search.ts`
+- Modify: `packages/backend/src/app.ts` (mount router)
+
+- [ ] **Step 1: Create `routes/search.ts`**
+
+```ts
+import { Router } from 'express';
+import type { Db } from '../db/client.js';
+import { searchAll } from '../services/search.js';
+
+export function searchRouter(db: Db): Router {
+  const r = Router();
+
+  r.get('/', async (req, res, next) => {
+    try {
+      const q = typeof req.query.q === 'string' ? req.query.q : '';
+      const limit = Math.min(100, Math.max(1, Number(req.query.limit ?? 30)));
+      res.json(await searchAll(db, req.user!.id, q, limit));
+    } catch (e) { next(e); }
+  });
+
+  return r;
+}
+```
+
+- [ ] **Step 2: Mount in `app.ts`**
+
+Read `packages/backend/src/app.ts`. Add the import near the top with the other route imports:
+
+```ts
+import { searchRouter } from './routes/search.js';
+```
+
+After the `app.use('/api/marketplace', ...)` line, add:
+
+```ts
+app.use('/api/search', requireAuth, searchRouter(db));
+```
+
+(No verifyCsrf needed — GET only.)
+
+- [ ] **Step 3: Typecheck**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+npm -w @flashcard/backend run typecheck
+```
+
+Must pass.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add packages/backend/src/routes/search.ts packages/backend/src/app.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(search): /api/search route"
+```
+
+---
+
+## Task 3: Backend — Stats `lessons-progress` + `due` services (TDD)
+
+**Files:**
+- Modify: `packages/backend/src/services/stats.ts`
+- Modify: `packages/backend/src/services/stats.test.ts`
+
+- [ ] **Step 1: Write failing tests** (append to `stats.test.ts`)
+
+```ts
+import { getLessonsProgress, getDueOverview } from './stats.js';
+import { cardProgress } from '../db/schema.js';
+
+describe('lessonsProgress', () => {
+  it('returns root lessons of the user with mastered + total counts', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const root = await createLesson(env.db, u.id, { name: 'Root' });
+    const child = await createLesson(env.db, u.id, { name: 'Child', parentId: root.id });
+    const c1 = await createCard(env.db, u.id, root.id, { question: 'q1', answer: 'a' });
+    const c2 = await createCard(env.db, u.id, child.id, { question: 'q2', answer: 'a' });
+
+    // Make c1 mastered (box 4) by inserting progress directly
+    env.db.insert(cardProgress).values({
+      cardId: c1.id, direction: 'forward', userId: u.id, box: 4, nextDueAt: 0,
+    }).run();
+
+    const r = await getLessonsProgress(env.db, u.id);
+    expect(r.rows).toHaveLength(1);
+    expect(r.rows[0]!.lessonId).toBe(root.id);
+    expect(r.rows[0]!.totalCards).toBe(2);
+    expect(r.rows[0]!.masteredCards).toBe(1);
+  });
+
+  it('excludes subscribed roots (only owned)', async () => {
+    const o = await createUserDirect(env.db, { email: 'o@example.com' });
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    await createLesson(env.db, u.id, { name: 'Own' });
+    await createLessonOwnedBy(env.db, o.id, { name: 'Theirs', visibility: 'shared' });
+    const r = await getLessonsProgress(env.db, u.id);
+    expect(r.rows.map((x) => x.name)).toEqual(['Own']);
+  });
+});
+
+describe('dueOverview', () => {
+  it('counts cards into overdue/today/tomorrow/thisWeek buckets', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const l = await createLesson(env.db, u.id, { name: 'L' });
+    const c1 = await createCard(env.db, u.id, l.id, { question: 'q1', answer: 'a' });
+    const c2 = await createCard(env.db, u.id, l.id, { question: 'q2', answer: 'a' });
+    const c3 = await createCard(env.db, u.id, l.id, { question: 'q3', answer: 'a' });
+
+    const now = Math.floor(Date.now() / 1000);
+    const day = 24 * 60 * 60;
+    // c1 overdue, c2 today (+1hr), c3 tomorrow
+    env.db.insert(cardProgress).values([
+      { cardId: c1.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: now - 100 },
+      { cardId: c2.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: now + 3600 },
+      { cardId: c3.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: now + day + 3600 },
+    ]).run();
+
+    const r = await getDueOverview(env.db, u.id);
+    expect(r.overdue).toBe(1);
+    expect(r.today).toBeGreaterThanOrEqual(1);
+    expect(r.thisWeek).toBeGreaterThanOrEqual(3);
+  });
+
+  it('ignores progress on cards user cannot read', async () => {
+    const o = await createUserDirect(env.db, { email: 'o@example.com' });
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const l = await createLessonOwnedBy(env.db, o.id, { name: 'Theirs', visibility: 'private' });
+    const card = await createCard(env.db, o.id, l.id, { question: 'q', answer: 'a' });
+    env.db.insert(cardProgress).values({
+      cardId: card.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: 0,
+    }).run();
+    const r = await getDueOverview(env.db, u.id);
+    expect(r.overdue).toBe(0);
+  });
+});
+```
+
+Make sure `createLesson` is imported at the top of the test file (`from './lessons.js'`). If not yet there from existing imports, add it.
+
+- [ ] **Step 2: Run — fail**
+
+```bash
+npm -w @flashcard/backend test -- stats
+```
+
+Expected: `getLessonsProgress`/`getDueOverview` not exported.
+
+- [ ] **Step 3: Implement in `services/stats.ts`**
+
+Append at the end of `services/stats.ts`:
+
+```ts
+export interface LessonsProgressRow {
+  lessonId: number;
+  name: string;
+  totalCards: number;
+  masteredCards: number;
+  scorePct: number;
+  lastSessionAt: number | null;
+}
+export interface LessonsProgressResult { rows: LessonsProgressRow[]; }
+
+export async function getLessonsProgress(db: Db, userId: number): Promise<LessonsProgressResult> {
+  // Owner roots only (lessons where ownerId = userId AND parentId IS NULL OR parent not owned by user)
+  const ownLessons = db.select().from(lessons).where(eq(lessons.ownerId, userId)).all();
+  const ownIds = new Set(ownLessons.map((l) => l.id));
+  const roots = ownLessons.filter((l) => l.parentId === null || !ownIds.has(l.parentId));
+
+  const rows: LessonsProgressRow[] = [];
+  for (const root of roots) {
+    const ids = await getDescendantLessonIds(db, root.id);
+    const cardRows = db.select({ id: cards.id }).from(cards).where(inArray(cards.lessonId, ids)).all();
+    const cardIds = cardRows.map((c) => c.id);
+    let totalCards = cardIds.length;
+    let masteredCards = 0;
+    let scoreSum = 0;
+    let scoreCount = 0;
+    if (cardIds.length > 0) {
+      const prog = db.select().from(cardProgress).where(and(
+        inArray(cardProgress.cardId, cardIds),
+        eq(cardProgress.userId, userId),
+      )).all();
+      const byCard = new Map<number, typeof prog[number][]>();
+      for (const p of prog) {
+        if (!byCard.has(p.cardId)) byCard.set(p.cardId, []);
+        byCard.get(p.cardId)!.push(p);
+      }
+      for (const id of cardIds) {
+        const ps = byCard.get(id) ?? [];
+        if (ps.some((p) => p.box >= 4)) masteredCards += 1;
+        const total = ps.reduce((s, p) => s + p.correctCount + p.incorrectCount, 0);
+        const correct = ps.reduce((s, p) => s + p.correctCount, 0);
+        if (total >= 3) { scoreSum += correct / total; scoreCount += 1; }
+      }
+    }
+    const scorePct = scoreCount === 0 ? 0 : Math.round((scoreSum / scoreCount) * 100);
+
+    const lastSess = db.select({ startedAt: sessions.startedAt }).from(sessions)
+      .where(and(
+        inArray(sessions.lessonId, ids),
+        eq(sessions.userId, userId),
+        eq(sessions.status, 'completed'),
+      ))
+      .orderBy(desc(sessions.startedAt)).limit(1).get();
+
+    rows.push({
+      lessonId: root.id,
+      name: root.name,
+      totalCards,
+      masteredCards,
+      scorePct,
+      lastSessionAt: lastSess?.startedAt ?? null,
+    });
+  }
+
+  rows.sort((a, b) => b.scorePct - a.scorePct || a.name.localeCompare(b.name));
+  return { rows };
+}
+
+export interface DueOverview {
+  overdue: number;
+  today: number;
+  tomorrow: number;
+  thisWeek: number;
+}
+
+export async function getDueOverview(db: Db, userId: number): Promise<DueOverview> {
+  // Only count progress on cards in lessons the user can read.
+  // For simplicity and correctness, we restrict to cards in user-owned lessons.
+  // (Progress rows for other users' cards may exist if user practiced subscribed/curated content;
+  // those rows have user_id = userId but the card's lesson is not owned. We still want to count
+  // them if user still has read access.)
+  // Strategy: take all card_progress rows for this user, then filter to those whose card's lesson
+  // is still readable. Cheaper here than a recursive ancestor walk per row: gather readable lesson
+  // IDs once, then filter in JS.
+
+  const ownerLessons = db.select({ id: lessons.id }).from(lessons).where(eq(lessons.ownerId, userId)).all();
+  const subRoots = db.select({ id: lessonSubscriptions.lessonId }).from(lessonSubscriptions)
+    .where(eq(lessonSubscriptions.userId, userId)).all();
+  const curatedRoots = db.select({ id: lessons.id }).from(lessons)
+    .where(and(eq(lessons.visibility, 'shared'), eq(lessons.isCurated, true))).all();
+
+  const allLessons = db.select({ id: lessons.id, parentId: lessons.parentId }).from(lessons).all();
+  const byParent = new Map<number | null, typeof allLessons>();
+  for (const l of allLessons) {
+    const k = l.parentId ?? null;
+    if (!byParent.has(k)) byParent.set(k, []);
+    byParent.get(k)!.push(l);
+  }
+  const readableIds = new Set<number>();
+  for (const l of ownerLessons) readableIds.add(l.id);
+  const stack: number[] = [];
+  for (const sr of subRoots) stack.push(sr.id);
+  for (const cr of curatedRoots) stack.push(cr.id);
+  while (stack.length) {
+    const cur = stack.pop()!;
+    if (readableIds.has(cur)) continue;
+    readableIds.add(cur);
+    for (const c of byParent.get(cur) ?? []) stack.push(c.id);
+  }
+
+  if (readableIds.size === 0) return { overdue: 0, today: 0, tomorrow: 0, thisWeek: 0 };
+
+  const cardRows = db.select({ id: cards.id }).from(cards)
+    .where(inArray(cards.lessonId, Array.from(readableIds))).all();
+  const cardIds = cardRows.map((r) => r.id);
+  if (cardIds.length === 0) return { overdue: 0, today: 0, tomorrow: 0, thisWeek: 0 };
+
+  const progress = db.select({ nextDueAt: cardProgress.nextDueAt }).from(cardProgress)
+    .where(and(eq(cardProgress.userId, userId), inArray(cardProgress.cardId, cardIds)))
+    .all();
+
+  const now = Math.floor(Date.now() / 1000);
+  const dayInSec = 24 * 60 * 60;
+  const endOfToday = now + dayInSec;
+  const endOfTomorrow = now + 2 * dayInSec;
+  const endOfWeek = now + 7 * dayInSec;
+
+  let overdue = 0, today = 0, tomorrow = 0, thisWeek = 0;
+  for (const p of progress) {
+    if (p.nextDueAt < now) { overdue += 1; thisWeek += 1; continue; }
+    if (p.nextDueAt < endOfToday) { today += 1; thisWeek += 1; continue; }
+    if (p.nextDueAt < endOfTomorrow) { tomorrow += 1; thisWeek += 1; continue; }
+    if (p.nextDueAt < endOfWeek) { thisWeek += 1; }
+  }
+  return { overdue, today, tomorrow, thisWeek };
+}
+```
+
+The imports needed at the top of `stats.ts` are `cards`, `cardProgress`, `lessons`, `lessonSubscriptions`, `sessions` from `../db/schema.js`, plus `and`, `eq`, `inArray`, `desc` from `drizzle-orm`. Verify they're already present; add any that are missing.
+
+- [ ] **Step 4: Run — pass**
+
+```bash
+npm -w @flashcard/backend test -- stats
+```
+
+Expected: previous stats tests + 4 new tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/backend/src/services/stats.ts packages/backend/src/services/stats.test.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(stats): lessons-progress and due-overview services"
+```
+
+---
+
+## Task 4: Backend — Sessions `startDueSession` + route (TDD)
+
+**Files:**
+- Modify: `packages/backend/src/services/sessions.ts`
+- Modify: `packages/backend/src/services/sessions.test.ts`
+- Modify: `packages/backend/src/routes/sessions.ts`
+
+- [ ] **Step 1: Append test in `sessions.test.ts`**
+
+```ts
+import { startDueSession } from './sessions.js';
+
+describe('startDueSession', () => {
+  it('builds a session over all due cards of readable lessons', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const l = await createLesson(env.db, u.id, { name: 'L' });
+    const c1 = await createCard(env.db, u.id, l.id, { question: 'q1', answer: 'a' });
+    const c2 = await createCard(env.db, u.id, l.id, { question: 'q2', answer: 'a' });
+    const c3 = await createCard(env.db, u.id, l.id, { question: 'q3', answer: 'a' });
+
+    const now = Math.floor(Date.now() / 1000);
+    env.db.insert(cardProgress).values([
+      { cardId: c1.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: 0 },        // due
+      { cardId: c2.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: now - 1 },  // due
+      { cardId: c3.id, direction: 'forward', userId: u.id, box: 1, nextDueAt: now + 86400 }, // not due
+    ]).run();
+
+    const s = await startDueSession(env.db, u.id);
+    expect(s.queue).toHaveLength(2);
+    expect(s.queue.map((q) => q.cardId).sort()).toEqual([c1.id, c2.id].sort());
+  });
+
+  it('returns empty queue when nothing is due', async () => {
+    const u = await createUserDirect(env.db, { email: 'u@example.com' });
+    const s = await startDueSession(env.db, u.id);
+    expect(s.queue).toHaveLength(0);
+  });
+});
+```
+
+Add to existing imports in `sessions.test.ts`: `cardProgress` from schema if not present.
+
+- [ ] **Step 2: Run — fail**
+
+```bash
+npm -w @flashcard/backend test -- sessions
+```
+
+Expected: `startDueSession` not exported.
+
+- [ ] **Step 3: Append to `services/sessions.ts`**
+
+```ts
+export async function startDueSession(db: Db, userId: number): Promise<StartedSession> {
+  // Find all due card_progress rows for this user where the card's lesson is readable.
+  const now = nowSec();
+
+  // Same readable-lessons gathering pattern as getDueOverview.
+  const ownerLessons = db.select({ id: lessons.id }).from(lessons).where(eq(lessons.ownerId, userId)).all();
+  const subRoots = db.select({ id: lessonSubscriptions.lessonId }).from(lessonSubscriptions)
+    .where(eq(lessonSubscriptions.userId, userId)).all();
+  const curatedRoots = db.select({ id: lessons.id }).from(lessons)
+    .where(and(eq(lessons.visibility, 'shared'), eq(lessons.isCurated, true))).all();
+
+  const allLessons = db.select({ id: lessons.id, parentId: lessons.parentId }).from(lessons).all();
+  const byParent = new Map<number | null, typeof allLessons>();
+  for (const l of allLessons) {
+    const k = l.parentId ?? null;
+    if (!byParent.has(k)) byParent.set(k, []);
+    byParent.get(k)!.push(l);
+  }
+  const readableIds = new Set<number>();
+  for (const l of ownerLessons) readableIds.add(l.id);
+  const stack: number[] = [];
+  for (const r of subRoots) stack.push(r.id);
+  for (const r of curatedRoots) stack.push(r.id);
+  while (stack.length) {
+    const cur = stack.pop()!;
+    if (readableIds.has(cur)) continue;
+    readableIds.add(cur);
+    for (const c of byParent.get(cur) ?? []) stack.push(c.id);
+  }
+
+  if (readableIds.size === 0) {
+    return await createEmptyDueSession(db, userId);
+  }
+
+  const cardRows = db.select({ id: cards.id, lessonId: cards.lessonId }).from(cards)
+    .where(inArray(cards.lessonId, Array.from(readableIds))).all();
+  const cardIds = cardRows.map((r) => r.id);
+  if (cardIds.length === 0) {
+    return await createEmptyDueSession(db, userId);
+  }
+
+  const due = db.select({ cardId: cardProgress.cardId, direction: cardProgress.direction, box: cardProgress.box })
+    .from(cardProgress)
+    .where(and(
+      eq(cardProgress.userId, userId),
+      inArray(cardProgress.cardId, cardIds),
+      sql`${cardProgress.nextDueAt} <= ${now}`,
+    ))
+    .all();
+
+  // Sort by box ascending (lower box first), then shuffle within box
+  due.sort((a, b) => a.box - b.box);
+  const queue: QueueItem[] = due.map((d) => ({ cardId: d.cardId, direction: d.direction }));
+
+  // Persist a virtual session; pick the first card's lesson as the session lesson for stats joining.
+  // If no cards: choose the user's first owned lesson; else fall back to any readable lesson.
+  const sessionLessonId = cardRows[0]?.lessonId ?? ownerLessons[0]?.id ?? Array.from(readableIds)[0]!;
+  const [row] = db.insert(sessions).values({
+    lessonId: sessionLessonId,
+    userId,
+    queueSnapshot: JSON.stringify({ remaining: queue, index: 0 }),
+  }).returning().all();
+  return { session: rowToSession(row!), queue };
+}
+
+async function createEmptyDueSession(db: Db, userId: number): Promise<StartedSession> {
+  const anyLesson = db.select({ id: lessons.id }).from(lessons).where(eq(lessons.ownerId, userId)).get()
+    ?? db.select({ id: lessons.id }).from(lessons).get();
+  if (!anyLesson) {
+    throw new ApiError(409, 'NO_LESSONS', 'No lessons exist for this user yet');
+  }
+  const [row] = db.insert(sessions).values({
+    lessonId: anyLesson.id,
+    userId,
+    queueSnapshot: JSON.stringify({ remaining: [], index: 0 }),
+  }).returning().all();
+  return { session: rowToSession(row!), queue: [] };
+}
+```
+
+Make sure `lessonSubscriptions` is imported at the top of `sessions.ts` (alongside the other schema imports). Add the import if missing.
+
+- [ ] **Step 4: Run — pass**
+
+```bash
+npm -w @flashcard/backend test -- sessions
+```
+
+Expected: 2 new tests pass + existing.
+
+- [ ] **Step 5: Add route in `routes/sessions.ts`**
+
+In the existing `sessionsRouter` (`packages/backend/src/routes/sessions.ts`), after the `r.post('/', ...)` handler, add:
+
+```ts
+import { startDueSession } from '../services/sessions.js';
+
+r.post('/due', async (req, res, next) => {
+  try {
+    res.status(201).json(await startDueSession(db, req.user!.id));
+  } catch (e) { next(e); }
+});
+```
+
+(The `startDueSession` import goes alongside the existing import group at the top.)
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add packages/backend/src/services/sessions.ts packages/backend/src/services/sessions.test.ts packages/backend/src/routes/sessions.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(sessions): startDueSession + POST /api/sessions/due"
+```
+
+---
+
+## Task 5: Backend — Stats routes (`lessons-progress`, `due`) + heatmap default
+
+**Files:**
+- Modify: `packages/backend/src/routes/stats.ts`
+
+- [ ] **Step 1: Update `routes/stats.ts`**
+
+Replace contents with:
+
+```ts
+import { Router } from 'express';
+import type { Db } from '../db/client.js';
+import {
+  getCardStats, getHeatmap, getLessonStats, getOverview,
+  getLessonsProgress, getDueOverview,
+} from '../services/stats.js';
+
+export function statsRouter(db: Db): Router {
+  const r = Router();
+
+  r.get('/overview', async (req, res, next) => {
+    try { res.json(await getOverview(db, req.user!.id)); } catch (e) { next(e); }
+  });
+  r.get('/lessons-progress', async (req, res, next) => {
+    try { res.json(await getLessonsProgress(db, req.user!.id)); } catch (e) { next(e); }
+  });
+  r.get('/due', async (req, res, next) => {
+    try { res.json(await getDueOverview(db, req.user!.id)); } catch (e) { next(e); }
+  });
+  r.get('/lessons/:id', async (req, res, next) => {
+    try { res.json(await getLessonStats(db, req.user!.id, Number(req.params.id))); } catch (e) { next(e); }
+  });
+  r.get('/cards/:id', async (req, res, next) => {
+    try { res.json(await getCardStats(db, req.user!.id, Number(req.params.id))); } catch (e) { next(e); }
+  });
+  r.get('/heatmap', async (req, res, next) => {
+    try {
+      const weeks = Math.min(52, Math.max(1, Number(req.query.weeks ?? 52)));
+      res.json(await getHeatmap(db, req.user!.id, weeks));
+    } catch (e) { next(e); }
+  });
+
+  return r;
+}
+```
+
+Note: heatmap default changed from 12 to 52, and clamp upper bound unchanged.
+
+- [ ] **Step 2: Run all backend tests**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+NODE_ENV=test npm -w @flashcard/backend test 2>&1 | tail -6
+```
+
+Expected: all pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add packages/backend/src/routes/stats.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(stats): /lessons-progress and /due routes + heatmap default 52 weeks"
+```
+
+---
+
+## Task 6: UX integration tests (backend)
+
+**Files:**
+- Create: `packages/backend/src/tests/ux.integration.test.ts`
+
+- [ ] **Step 1: Write integration tests**
+
+```ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import { createApp } from '../app.js';
+import { makeTestDb, createUserDirect } from './dbHelper.js';
+import { hashPassword } from '../services/auth/passwords.js';
+import { setMailerForTests, type Mailer } from '../services/auth/email.js';
+
+class StubMailer implements Mailer { async send() {} }
+
+async function login(app: ReturnType<typeof createApp>, email: string, password = 'secretpass') {
+  const r = await request(app).post('/api/auth/login').send({ email, password });
+  if (r.status !== 200) throw new Error(`login failed: ${r.status}`);
+  const cookies = r.headers['set-cookie'] as unknown as string[];
+  const csrf = cookies.find((c) => c.startsWith('flashcard_csrf='))!.split(';')[0]!.split('=')[1]!;
+  return { cookies, csrf };
+}
+
+async function makeUser(env: ReturnType<typeof makeTestDb>, email: string, role: 'user'|'sysadmin' = 'user') {
+  return createUserDirect(env.db, {
+    email, role, isActive: true,
+    passwordHash: await hashPassword('secretpass'),
+    emailVerifiedAt: Math.floor(Date.now() / 1000),
+  });
+}
+
+let env: ReturnType<typeof makeTestDb>;
+let app: ReturnType<typeof createApp>;
+beforeEach(async () => {
+  env = makeTestDb();
+  setMailerForTests(new StubMailer());
+  app = createApp(env.db);
+});
+
+describe('UX integration', () => {
+  it('GET /api/search filters by visibility', async () => {
+    await makeUser(env, 'a@example.com');
+    await makeUser(env, 'b@example.com');
+    const aAuth = await login(app, 'a@example.com');
+    const lA = (await request(app).post('/api/lessons').set('Cookie', aAuth.cookies).set('x-csrf-token', aAuth.csrf)
+      .send({ name: 'Spaans private' })).body;
+    const lShared = (await request(app).post('/api/lessons').set('Cookie', aAuth.cookies).set('x-csrf-token', aAuth.csrf)
+      .send({ name: 'Spaans public' })).body;
+    await request(app).patch(`/api/lessons/${lShared.id}/visibility`).set('Cookie', aAuth.cookies).set('x-csrf-token', aAuth.csrf)
+      .send({ visibility: 'shared' });
+
+    const bAuth = await login(app, 'b@example.com');
+    const r = await request(app).get('/api/search?q=spaans').set('Cookie', bAuth.cookies);
+    expect(r.status).toBe(200);
+    const names = r.body.lessons.map((l: { name: string }) => l.name);
+    expect(names).toContain('Spaans public');
+    expect(names).not.toContain('Spaans private');
+  });
+
+  it('GET /api/stats/lessons-progress returns only roots', async () => {
+    await makeUser(env, 'u@example.com');
+    const uAuth = await login(app, 'u@example.com');
+    const root = (await request(app).post('/api/lessons').set('Cookie', uAuth.cookies).set('x-csrf-token', uAuth.csrf)
+      .send({ name: 'Root' })).body;
+    await request(app).post('/api/lessons').set('Cookie', uAuth.cookies).set('x-csrf-token', uAuth.csrf)
+      .send({ name: 'Child', parentId: root.id });
+
+    const r = await request(app).get('/api/stats/lessons-progress').set('Cookie', uAuth.cookies);
+    expect(r.status).toBe(200);
+    expect(r.body.rows).toHaveLength(1);
+    expect(r.body.rows[0].name).toBe('Root');
+  });
+
+  it('GET /api/stats/due returns counts', async () => {
+    await makeUser(env, 'u@example.com');
+    const uAuth = await login(app, 'u@example.com');
+    const r = await request(app).get('/api/stats/due').set('Cookie', uAuth.cookies);
+    expect(r.status).toBe(200);
+    expect(r.body).toHaveProperty('overdue');
+    expect(r.body).toHaveProperty('today');
+    expect(r.body).toHaveProperty('tomorrow');
+    expect(r.body).toHaveProperty('thisWeek');
+  });
+
+  it('POST /api/sessions/due creates a session', async () => {
+    await makeUser(env, 'u@example.com');
+    const uAuth = await login(app, 'u@example.com');
+    const lesson = (await request(app).post('/api/lessons').set('Cookie', uAuth.cookies).set('x-csrf-token', uAuth.csrf)
+      .send({ name: 'L' })).body;
+    await request(app).post(`/api/lessons/${lesson.id}/cards`).set('Cookie', uAuth.cookies).set('x-csrf-token', uAuth.csrf)
+      .send({ question: 'q', answer: 'a' });
+    const r = await request(app).post('/api/sessions/due').set('Cookie', uAuth.cookies).set('x-csrf-token', uAuth.csrf);
+    expect(r.status).toBe(201);
+    expect(r.body.session.id).toBeGreaterThan(0);
+  });
+});
+```
+
+- [ ] **Step 2: Run + commit**
+
+```bash
+NODE_ENV=test npm -w @flashcard/backend test 2>&1 | tail -10
+git add packages/backend/src/tests/ux.integration.test.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "test(ux): integration coverage for search + stats + due session"
+```
+
+Expected: all backend tests pass with 4 new integration tests added.
+
+---
+
+## Task 7: Frontend — API clients (search, stats extensions, sessions/due)
+
+**Files:**
+- Create: `packages/frontend/src/api/search.ts`
+- Modify: `packages/frontend/src/api/stats.ts`
+- Modify: `packages/frontend/src/api/sessions.ts`
+
+- [ ] **Step 1: Create `api/search.ts`**
+
+```ts
+import { api } from './client.js';
+
+export interface SearchLessonResult {
+  id: number;
+  name: string;
+  ownerDisplayName: string;
+  location: 'library' | 'marketplace';
+  totalCards: number;
+  isCurated: boolean;
+}
+
+export interface SearchCardResult {
+  id: number;
+  lessonId: number;
+  lessonName: string;
+  question: string;
+  snippet: string;
+}
+
+export interface SearchResult {
+  lessons: SearchLessonResult[];
+  cards: SearchCardResult[];
+}
+
+export const searchApi = {
+  search: (q: string, limit = 30) =>
+    api.get<SearchResult>(`/search?q=${encodeURIComponent(q)}&limit=${limit}`),
+};
+```
+
+- [ ] **Step 2: Extend `api/stats.ts`**
+
+Read the current file and APPEND inside the `statsApi` const:
+
+```ts
+lessonsProgress: () => api.get<{ rows: Array<{
+  lessonId: number; name: string; totalCards: number; masteredCards: number;
+  scorePct: number; lastSessionAt: number | null;
+}> }>(`/stats/lessons-progress`),
+due: () => api.get<{ overdue: number; today: number; tomorrow: number; thisWeek: number }>(`/stats/due`),
+```
+
+- [ ] **Step 3: Extend `api/sessions.ts`**
+
+Append inside the `sessionsApi` const:
+
+```ts
+startDue: () => api.post<{ session: import('@flashcard/shared').SessionRow; queue: import('@flashcard/shared').QueueItem[] }>(`/sessions/due`),
+```
+
+- [ ] **Step 4: Typecheck + commit**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/api/
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): API clients for search + stats extensions + due session"
+```
+
+---
+
+## Task 8: Frontend — Heatmap component
+
+**Files:**
+- Create: `packages/frontend/src/components/Heatmap.tsx`
+
+- [ ] **Step 1: Create the component**
+
+```tsx
+import { useMemo } from 'react';
+
+interface HeatmapPoint { day: string; sessions: number; attempts: number; }
+
+export function Heatmap({ points }: { points: HeatmapPoint[] }) {
+  // Build a 53-week × 7-day grid ending today, aligned to Sundays.
+  const grid = useMemo(() => {
+    const map = new Map<string, HeatmapPoint>();
+    for (const p of points) map.set(p.day, p);
+    const today = new Date();
+    today.setUTCHours(0, 0, 0, 0);
+    // Find the most recent Saturday (end of the grid).
+    const lastSat = new Date(today);
+    while (lastSat.getUTCDay() !== 6) lastSat.setUTCDate(lastSat.getUTCDate() + 1);
+
+    const weeks: { date: Date; data?: HeatmapPoint }[][] = [];
+    const cursor = new Date(lastSat);
+    cursor.setUTCDate(cursor.getUTCDate() - 53 * 7 + 1);
+    for (let w = 0; w < 53; w++) {
+      const col: { date: Date; data?: HeatmapPoint }[] = [];
+      for (let d = 0; d < 7; d++) {
+        const key = `${cursor.getUTCFullYear()}-${cursor.getUTCMonth()}-${cursor.getUTCDate()}`;
+        col.push({ date: new Date(cursor), data: map.get(key) });
+        cursor.setUTCDate(cursor.getUTCDate() + 1);
+      }
+      weeks.push(col);
+    }
+    return weeks;
+  }, [points]);
+
+  function colorFor(attempts: number): string {
+    if (attempts === 0) return 'bg-slate-100 dark:bg-slate-800';
+    if (attempts < 5) return 'bg-success-200 dark:bg-success-400/30';
+    if (attempts < 15) return 'bg-success-400 dark:bg-success-400/60';
+    if (attempts < 50) return 'bg-success-500 dark:bg-success-500/80';
+    return 'bg-success-700 dark:bg-success-500';
+  }
+
+  const monthLabels = useMemo(() => {
+    const labels: { col: number; text: string }[] = [];
+    let lastMonth = -1;
+    grid.forEach((col, i) => {
+      const m = col[0]!.date.getUTCMonth();
+      if (m !== lastMonth) {
+        labels.push({ col: i, text: ['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'][m]! });
+        lastMonth = m;
+      }
+    });
+    return labels;
+  }, [grid]);
+
+  const todayKey = (() => {
+    const t = new Date();
+    return `${t.getUTCFullYear()}-${t.getUTCMonth()}-${t.getUTCDate()}`;
+  })();
+
+  return (
+    <div className="overflow-x-auto">
+      <div className="inline-block">
+        <div className="ml-8 flex text-xs text-slate-500" style={{ height: 16 }}>
+          {monthLabels.map((m, i) => {
+            const left = m.col * 16;
+            return <span key={i} className="absolute" style={{ marginLeft: left }}>{m.text}</span>;
+          })}
+        </div>
+        <div className="flex gap-1">
+          <div className="flex flex-col gap-1 pt-1">
+            {['Ma', '', 'Wo', '', 'Vr', '', ''].map((label, i) => (
+              <span key={i} className="h-3 text-[10px] leading-3 text-slate-500">{label}</span>
+            ))}
+          </div>
+          <div className="flex gap-1">
+            {grid.map((col, i) => (
+              <div key={i} className="flex flex-col gap-1">
+                {col.map((cell, j) => {
+                  const key = `${cell.date.getUTCFullYear()}-${cell.date.getUTCMonth()}-${cell.date.getUTCDate()}`;
+                  const isToday = key === todayKey;
+                  const a = cell.data?.attempts ?? 0;
+                  return (
+                    <div
+                      key={j}
+                      title={`${cell.date.toISOString().slice(0, 10)} — ${a} pogingen, ${cell.data?.sessions ?? 0} sessies`}
+                      className={`h-3 w-3 rounded-sm ${colorFor(a)} ${isToday ? 'ring-1 ring-brand-600' : ''}`}
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Typecheck + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/components/Heatmap.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): 12-month heatmap component"
+```
+
+---
+
+## Task 9: Frontend — LessonProgressList component
+
+**Files:**
+- Create: `packages/frontend/src/components/LessonProgressList.tsx`
+
+- [ ] **Step 1: Create**
+
+```tsx
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export interface LessonProgressRow {
+  lessonId: number;
+  name: string;
+  totalCards: number;
+  masteredCards: number;
+  scorePct: number;
+  lastSessionAt: number | null;
+}
+
+type SortKey = 'name' | 'score' | 'last';
+
+function relativeTime(unixSec: number | null): string {
+  if (!unixSec) return 'nooit';
+  const diff = Math.floor(Date.now() / 1000) - unixSec;
+  if (diff < 60) return 'zojuist';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m geleden`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}u geleden`;
+  if (diff < 7 * 86400) return `${Math.floor(diff / 86400)}d geleden`;
+  return `${Math.floor(diff / 86400)}d geleden`;
+}
+
+export function LessonProgressList({ rows }: { rows: LessonProgressRow[] }) {
+  const [sortBy, setSortBy] = useState<SortKey>('score');
+
+  const sorted = useMemo(() => {
+    const copy = [...rows];
+    copy.sort((a, b) => {
+      if (sortBy === 'name') return a.name.localeCompare(b.name);
+      if (sortBy === 'last') return (b.lastSessionAt ?? 0) - (a.lastSessionAt ?? 0);
+      return b.scorePct - a.scorePct;
+    });
+    return copy;
+  }, [rows, sortBy]);
+
+  if (rows.length === 0) {
+    return <p className="text-sm text-slate-500">Nog geen lessen.</p>;
+  }
+
+  return (
+    <div>
+      <div className="mb-2 flex gap-1 text-xs">
+        <span className="text-slate-500">Sorteer:</span>
+        {(['score', 'name', 'last'] as SortKey[]).map((k) => (
+          <button
+            key={k}
+            onClick={() => setSortBy(k)}
+            className={`rounded-full px-2 py-0.5 ${
+              sortBy === k
+                ? 'bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-200'
+                : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800'
+            }`}
+          >
+            {k === 'score' ? 'score' : k === 'name' ? 'naam' : 'laatst'}
+          </button>
+        ))}
+      </div>
+      <ul className="surface divide-y divide-brand-100/60 dark:divide-slate-800">
+        {sorted.map((r) => {
+          const masteredFrac = r.totalCards === 0 ? 0 : r.masteredCards / r.totalCards;
+          return (
+            <li key={r.lessonId} className="flex items-center gap-3 p-3 text-sm">
+              <Link to={`/lessons/${r.lessonId}`} className="flex-1 truncate font-medium">
+                {r.name}
+              </Link>
+              <div className="h-2 w-24 overflow-hidden rounded-full bg-brand-100 dark:bg-slate-800">
+                <div className="h-full bg-success-500" style={{ width: `${Math.round(masteredFrac * 100)}%` }} />
+              </div>
+              <span className="w-12 text-right text-xs text-slate-500">{r.masteredCards}/{r.totalCards}</span>
+              <span className="w-12 text-right text-xs font-semibold text-brand-700 dark:text-brand-200">{r.scorePct}%</span>
+              <span className="w-20 text-right text-xs text-slate-500">{relativeTime(r.lastSessionAt)}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Typecheck + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/components/LessonProgressList.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): lesson progress list with sorting"
+```
+
+---
+
+## Task 10: Frontend — DueOverviewCard component
+
+**Files:**
+- Create: `packages/frontend/src/components/DueOverviewCard.tsx`
+
+- [ ] **Step 1: Create**
+
+```tsx
+import { useNavigate } from 'react-router-dom';
+import { sessionsApi } from '../api/sessions.js';
+import { useSession } from '../stores/sessionStore.js';
+
+export interface DueOverview { overdue: number; today: number; tomorrow: number; thisWeek: number; }
+
+export function DueOverviewCard({ data }: { data: DueOverview }) {
+  const navigate = useNavigate();
+  const total = data.overdue + data.today;
+  async function startReview() {
+    const r = await sessionsApi.startDue();
+    useSession.setState({ session: r.session, current: r.queue[0] ?? null, done: r.queue.length === 0, showAnswer: false, shownAt: Date.now() });
+    navigate(`/practice/${r.session.lessonId}`);
+  }
+
+  return (
+    <div className="surface space-y-4 p-5">
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <Badge tone="danger" label="Overdue" value={data.overdue} />
+        <Badge tone="brand" label="Vandaag" value={data.today} />
+        <Badge tone="success" label="Morgen" value={data.tomorrow} />
+        <Badge tone="muted" label="Deze week" value={data.thisWeek} />
+      </div>
+      <button
+        className="btn-primary w-full py-3"
+        onClick={startReview}
+        disabled={total === 0}
+      >
+        {total === 0
+          ? 'Niets te reviewen — alles up-to-date 🎉'
+          : `Start review (${total} ${total === 1 ? 'kaart' : 'kaarten'})`}
+      </button>
+    </div>
+  );
+}
+
+function Badge({ tone, label, value }: { tone: 'danger'|'brand'|'success'|'muted'; label: string; value: number }) {
+  const cls =
+    tone === 'danger' ? 'bg-danger-50 text-danger-700 dark:bg-danger-400/15 dark:text-danger-400'
+    : tone === 'brand' ? 'bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-200'
+    : tone === 'success' ? 'bg-success-50 text-success-700 dark:bg-success-700/15 dark:text-success-400'
+    : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300';
+  return (
+    <div className={`rounded-2xl p-3 ${cls}`}>
+      <div className="text-[10px] font-semibold uppercase tracking-wider opacity-80">{label}</div>
+      <div className="mt-1 font-display text-2xl font-bold">{value}</div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Typecheck + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/components/DueOverviewCard.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): due-overview card with start-review CTA"
+```
+
+---
+
+## Task 11: Frontend — Rewrite Stats page
+
+**Files:**
+- Modify: `packages/frontend/src/pages/Stats.tsx`
+
+- [ ] **Step 1: Replace contents**
+
+```tsx
+import { useEffect, useState } from 'react';
+import { statsApi } from '../api/stats.js';
+import { Heatmap } from '../components/Heatmap.js';
+import { LessonProgressList, type LessonProgressRow } from '../components/LessonProgressList.js';
+import { DueOverviewCard, type DueOverview } from '../components/DueOverviewCard.js';
+
+export function StatsPage() {
+  const [heatmap, setHeatmap] = useState<{ day: string; sessions: number; attempts: number }[]>([]);
+  const [progress, setProgress] = useState<LessonProgressRow[]>([]);
+  const [due, setDue] = useState<DueOverview | null>(null);
+
+  useEffect(() => {
+    statsApi.heatmap(52).then(setHeatmap).catch(() => {});
+    statsApi.lessonsProgress().then((r) => setProgress(r.rows)).catch(() => {});
+    statsApi.due().then(setDue).catch(() => {});
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <header>
+        <h1 className="font-display text-3xl font-bold">Statistieken</h1>
+        <p className="text-sm text-slate-500">Houd zicht op je voortgang en wat er te oefenen valt.</p>
+      </header>
+
+      {due && (
+        <section>
+          <h2 className="mb-3 font-display text-xl font-bold">⏰ Te reviewen</h2>
+          <DueOverviewCard data={due} />
+        </section>
+      )}
+
+      <section>
+        <h2 className="mb-3 font-display text-xl font-bold">📊 Voortgang per les</h2>
+        <LessonProgressList rows={progress} />
+      </section>
+
+      <section>
+        <h2 className="mb-3 font-display text-xl font-bold">🔥 Activiteit</h2>
+        <div className="surface p-4">
+          <Heatmap points={heatmap} />
+          <div className="mt-3 flex items-center gap-2 text-xs text-slate-500">
+            <span>minder</span>
+            <span className="h-3 w-3 rounded-sm bg-slate-100 dark:bg-slate-800" />
+            <span className="h-3 w-3 rounded-sm bg-success-200" />
+            <span className="h-3 w-3 rounded-sm bg-success-400" />
+            <span className="h-3 w-3 rounded-sm bg-success-500" />
+            <span className="h-3 w-3 rounded-sm bg-success-700" />
+            <span>meer</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Build + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+npm -w @flashcard/frontend run build 2>&1 | tail -3
+git add packages/frontend/src/pages/Stats.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): rewritten stats page with heatmap + progress + due"
+```
+
+---
+
+## Task 12: Frontend — LessonStatsPanel + SublessonList + RecentSessionsList
+
+**Files:**
+- Create: `packages/frontend/src/components/LessonStatsPanel.tsx`
+- Create: `packages/frontend/src/components/SublessonList.tsx`
+- Create: `packages/frontend/src/components/RecentSessionsList.tsx`
+
+- [ ] **Step 1: Create `LessonStatsPanel.tsx`**
+
+```tsx
+import type { LessonStats } from '../api/stats.js';
+
+function relativeTime(unixSec: number | null): string {
+  if (!unixSec) return 'nooit';
+  const diff = Math.floor(Date.now() / 1000) - unixSec;
+  if (diff < 3600) return `${Math.max(1, Math.floor(diff / 60))}m geleden`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}u geleden`;
+  return `${Math.floor(diff / 86400)}d geleden`;
+}
+
+export function LessonStatsPanel({ stats, lastSessionAt }: { stats: LessonStats; lastSessionAt?: number | null }) {
+  const masteredFrac = stats.totalCards === 0 ? 0 : stats.mastered / stats.totalCards;
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+      <Card label="Kaarten" value={String(stats.totalCards)} />
+      <Card label="Beheerst" value={`${stats.mastered}/${stats.totalCards}`} sub={`${Math.round(masteredFrac * 100)}%`} />
+      <Card label="Score" value={`${Math.round(stats.score * 100)}%`} />
+      <Card label="Laatst geoefend" value={relativeTime(lastSessionAt ?? null)} />
+    </div>
+  );
+}
+
+function Card({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <div className="surface p-4">
+      <div className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">{label}</div>
+      <div className="mt-1 font-display text-2xl font-bold">{value}</div>
+      {sub && <div className="text-xs text-slate-500">{sub}</div>}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create `SublessonList.tsx`**
+
+```tsx
+import { Link } from 'react-router-dom';
+import type { LessonTreeNode } from '@flashcard/shared';
+
+export function SublessonList({ children, parentId }: { children: LessonTreeNode[]; parentId: number }) {
+  if (children.length === 0) return null;
+  return (
+    <div>
+      <h2 className="mb-3 font-display text-xl font-bold">Sublessen</h2>
+      <ul className="grid gap-2 sm:grid-cols-2">
+        {children.map((c) => (
+          <li key={c.id} className="surface flex items-center justify-between p-3">
+            <Link to={`/lessons/${c.id}`} className="flex-1 truncate font-medium">{c.name}</Link>
+            <span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
+              {c.cardCount}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: Create `RecentSessionsList.tsx`**
+
+```tsx
+import type { LessonStats } from '../api/stats.js';
+
+function relativeTime(unixSec: number): string {
+  const diff = Math.floor(Date.now() / 1000) - unixSec;
+  if (diff < 3600) return `${Math.max(1, Math.floor(diff / 60))}m geleden`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}u geleden`;
+  return `${Math.floor(diff / 86400)}d geleden`;
+}
+
+function fmtDuration(s: number): string {
+  if (s < 60) return `${s}s`;
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
+// Minimal recent session row coming from the existing stats overview endpoint (reused inline).
+export interface RecentSessionRow {
+  id: number;
+  startedAt: number;
+  durationSeconds: number | null;
+  cardsShown: number;
+  cardsCorrect: number;
+}
+
+export function RecentSessionsList({ rows }: { rows: RecentSessionRow[] }) {
+  if (rows.length === 0) {
+    return <p className="text-sm text-slate-500">Nog geen sessies op deze les.</p>;
+  }
+  return (
+    <ul className="surface divide-y divide-brand-100/60 dark:divide-slate-800">
+      {rows.map((s) => {
+        const pct = s.cardsShown > 0 ? Math.round((s.cardsCorrect / s.cardsShown) * 100) : 0;
+        return (
+          <li key={s.id} className="flex items-center justify-between p-3 text-sm">
+            <span className="text-slate-600 dark:text-slate-300">{relativeTime(s.startedAt)}</span>
+            <span className="flex items-center gap-3 text-xs">
+              <span className="rounded-full bg-brand-100 px-2 py-0.5 font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">{pct}%</span>
+              <span className="text-slate-500">{s.cardsCorrect}/{s.cardsShown} · {fmtDuration(s.durationSeconds ?? 0)}</span>
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+```
+
+- [ ] **Step 4: Typecheck + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/components/LessonStatsPanel.tsx packages/frontend/src/components/SublessonList.tsx packages/frontend/src/components/RecentSessionsList.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): lesson stats panel + sublesson list + recent sessions list"
+```
+
+---
+
+## Task 13: Frontend — LessonDetail page (replaces AdminLesson)
+
+**Files:**
+- Create: `packages/frontend/src/pages/LessonDetail.tsx`
+
+- [ ] **Step 1: Create `LessonDetail.tsx`**
+
+```tsx
+import { useEffect, useMemo, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import type { Card, LessonTreeNode } from '@flashcard/shared';
+import { cardsApi } from '../api/cards.js';
+import { lessonsApi } from '../api/lessons.js';
+import { adminLessonsApi } from '../api/admin-lessons.js';
+import { statsApi, type LessonStats } from '../api/stats.js';
+import { sessionsApi } from '../api/sessions.js';
+import { useAuth } from '../stores/authStore.js';
+import { useLessons } from '../stores/lessonsStore.js';
+import { CardTable } from '../components/CardTable.js';
+import { ImportDialog } from '../components/ImportDialog.js';
+import { LessonStatsPanel } from '../components/LessonStatsPanel.js';
+import { SublessonList } from '../components/SublessonList.js';
+import { RecentSessionsList, type RecentSessionRow } from '../components/RecentSessionsList.js';
+import { ApiClientError } from '../api/client.js';
+
+function findNode(tree: LessonTreeNode[], id: number, path: LessonTreeNode[] = []): { node: LessonTreeNode | null; path: LessonTreeNode[] } {
+  for (const n of tree) {
+    if (n.id === id) return { node: n, path: [...path, n] };
+    const found = findNode(n.children, id, [...path, n]);
+    if (found.node) return found;
+  }
+  return { node: null, path: [] };
+}
+
+const PREVIEW_LIMIT = 30;
+
+export function LessonDetailPage() {
+  const { id } = useParams();
+  const lessonId = Number(id);
+  const user = useAuth((s) => s.user);
+  const { tree, refresh: refreshTree } = useLessons();
+  const navigate = useNavigate();
+
+  const [cards, setCards] = useState<Card[]>([]);
+  const [stats, setStats] = useState<LessonStats | null>(null);
+  const [recent, setRecent] = useState<RecentSessionRow[]>([]);
+  const [showImport, setShowImport] = useState(false);
+  const [showAllCards, setShowAllCards] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const { node, path } = useMemo(() => findNode(tree, lessonId), [tree, lessonId]);
+  const isOwner = node?.ownerId === user?.id;
+  const visibility = node?.visibility ?? 'private';
+  const isCurated = node?.isCurated ?? false;
+
+  async function refresh() {
+    try { setCards(await cardsApi.list(lessonId)); }
+    catch (e) { if (e instanceof ApiClientError && e.status === 403) setCards([]); else throw e; }
+    statsApi.lesson(lessonId).then(setStats).catch(() => {});
+    statsApi.overview().then((ov) => {
+      setRecent(ov.recentSessions.filter((s) => s.lessonId === lessonId).slice(0, 5));
+    }).catch(() => {});
+  }
+
+  useEffect(() => { refresh(); refreshTree(); }, [lessonId]);
+
+  async function toggleVisibility() {
+    setBusy(true);
+    try {
+      const next = visibility === 'shared' ? 'private' : 'shared';
+      await lessonsApi.setVisibility(lessonId, next);
+      await refreshTree();
+    } finally { setBusy(false); }
+  }
+  async function toggleCurated() {
+    if (!user || user.role !== 'sysadmin') return;
+    setBusy(true);
+    try { await adminLessonsApi.setCurated(lessonId, !isCurated); await refreshTree(); }
+    finally { setBusy(false); }
+  }
+  async function deleteLesson() {
+    if (!confirm('Verwijder les en alle sublessen + kaarten?')) return;
+    setBusy(true);
+    try { await lessonsApi.remove(lessonId); navigate('/lessons'); }
+    finally { setBusy(false); }
+  }
+  async function forkThis() {
+    setBusy(true);
+    try { const f = await lessonsApi.fork(lessonId); await refreshTree(); navigate(`/lessons/${f.id}`); }
+    finally { setBusy(false); }
+  }
+  async function unsubscribeThis() {
+    setBusy(true);
+    try { await lessonsApi.unsubscribe(lessonId); await refreshTree(); navigate('/lessons'); }
+    finally { setBusy(false); }
+  }
+
+  const visibilityBadge =
+    isCurated ? '⭐ Curated' : visibility === 'shared' ? '🌍 Gedeeld' : '🔒 Privé';
+
+  const visibleCards = showAllCards ? cards : cards.slice(0, PREVIEW_LIMIT);
+
+  return (
+    <div className="space-y-8">
+      {/* Breadcrumb */}
+      <nav className="text-sm text-slate-500">
+        <Link to="/lessons" className="hover:text-brand-700">Lessen</Link>
+        {path.slice(0, -1).map((p) => (
+          <span key={p.id}>
+            <span className="mx-1">/</span>
+            <Link to={`/lessons/${p.id}`} className="hover:text-brand-700">{p.name}</Link>
+          </span>
+        ))}
+        {node && (
+          <>
+            <span className="mx-1">/</span>
+            <span className="font-semibold text-slate-700 dark:text-slate-200">{node.name}</span>
+          </>
+        )}
+      </nav>
+
+      {/* Header */}
+      <header className="surface flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="flex items-center gap-2 font-display text-3xl font-bold">
+            {node?.name ?? '…'}
+            <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+              {visibilityBadge}
+            </span>
+            {!isOwner && node && (
+              <span className="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">📥 Geabonneerd</span>
+            )}
+          </h1>
+          {node?.description && <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">{node.description}</p>}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Link to={`/practice/${lessonId}/setup`} className="btn-success text-base">Start oefenen →</Link>
+          {isOwner ? (
+            <>
+              <button className="btn-ghost" onClick={toggleVisibility} disabled={busy}>
+                {visibility === 'shared' ? '🔒 Maak privé' : '🌍 Deel publiek'}
+              </button>
+              {user?.role === 'sysadmin' && visibility === 'shared' && (
+                <button className="btn-ghost" onClick={toggleCurated} disabled={busy}>
+                  {isCurated ? '☆ Verwijder curated' : '⭐ Markeer als curated'}
+                </button>
+              )}
+              <button className="btn-ghost" onClick={() => setShowImport(true)}>📥 Importeer</button>
+              <a className="btn-ghost" href={cardsApi.exportUrl(lessonId, false)}>📤 Exporteer</a>
+              <button className="btn-ghost text-danger-700" onClick={deleteLesson} disabled={busy}>🗑 Verwijder</button>
+            </>
+          ) : (
+            <>
+              <button className="btn-ghost" onClick={forkThis} disabled={busy}>🍴 Fork</button>
+              <button className="btn-ghost" onClick={unsubscribeThis} disabled={busy}>Abonnement opzeggen</button>
+            </>
+          )}
+        </div>
+      </header>
+
+      {/* Stats summary */}
+      {stats && <LessonStatsPanel stats={stats} lastSessionAt={recent[0]?.startedAt ?? null} />}
+
+      {/* Sublessons */}
+      {node && <SublessonList children={node.children} parentId={lessonId} />}
+
+      {/* Cards */}
+      <section>
+        <h2 className="mb-3 font-display text-xl font-bold">Kaarten</h2>
+        {cards.length === 0 ? (
+          <div className="surface p-6 text-center text-sm text-slate-500">
+            {isOwner ? 'Nog geen kaarten — voeg er hieronder een toe.' : 'Deze les heeft nog geen kaarten.'}
+          </div>
+        ) : (
+          <div className="surface overflow-hidden p-1">
+            <CardTable lessonId={lessonId} cards={visibleCards} onChange={refresh} readOnly={!isOwner} />
+            {cards.length > PREVIEW_LIMIT && !showAllCards && (
+              <div className="p-3 text-center">
+                <button className="btn-ghost" onClick={() => setShowAllCards(true)}>
+                  Toon alle {cards.length} kaarten
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+
+      {/* Recent sessions */}
+      <section>
+        <h2 className="mb-3 font-display text-xl font-bold">Recente sessies</h2>
+        <RecentSessionsList rows={recent} />
+      </section>
+
+      {showImport && <ImportDialog lessonId={lessonId} onClose={() => setShowImport(false)} onDone={refresh} />}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Build + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+npm -w @flashcard/frontend run build 2>&1 | tail -3
+git add packages/frontend/src/pages/LessonDetail.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): rich lesson detail page"
+```
+
+---
+
+## Task 14: Frontend — Install dnd-kit + LessonTree filter + drag-drop
+
+**Files:**
+- Modify: `packages/frontend/package.json` (deps)
+- Modify: `packages/frontend/src/components/LessonTree.tsx`
+
+- [ ] **Step 1: Install dnd-kit**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+npm i -w @flashcard/frontend @dnd-kit/core @dnd-kit/sortable
+```
+
+- [ ] **Step 2: Replace `LessonTree.tsx`**
+
+```tsx
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import type { LessonTreeNode } from '@flashcard/shared';
+import { lessonsApi } from '../api/lessons.js';
+import { useLessons } from '../stores/lessonsStore.js';
+import { useAuth } from '../stores/authStore.js';
+import {
+  DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+function filterTree(nodes: LessonTreeNode[], q: string): LessonTreeNode[] {
+  if (!q.trim()) return nodes;
+  const term = q.trim().toLowerCase();
+  function visit(n: LessonTreeNode): LessonTreeNode | null {
+    const matches = n.name.toLowerCase().includes(term);
+    const kids = n.children.map(visit).filter((x): x is LessonTreeNode => x !== null);
+    if (matches || kids.length > 0) return { ...n, children: kids };
+    return null;
+  }
+  return nodes.map(visit).filter((x): x is LessonTreeNode => x !== null);
+}
+
+export function LessonTree({ nodes, filter = '' }: { nodes: LessonTreeNode[]; filter?: string }) {
+  const filtered = useMemo(() => filterTree(nodes, filter), [nodes, filter]);
+  const refresh = useLessons((s) => s.refresh);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  async function handleDragEnd(e: DragEndEvent) {
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    // Find the active node's siblings to compute new position.
+    const allOwned = collectOwnedFlat(filtered);
+    const movedId = Number(active.id);
+    const overId = Number(over.id);
+    const overNode = allOwned.find((x) => x.id === overId);
+    if (!overNode) return;
+    // We support only intra-parent reorder via sortable here.
+    const movedNode = allOwned.find((x) => x.id === movedId);
+    if (!movedNode || movedNode.parentId !== overNode.parentId) return;
+    const siblings = allOwned.filter((x) => x.parentId === movedNode.parentId);
+    const oldIdx = siblings.findIndex((x) => x.id === movedId);
+    const newIdx = siblings.findIndex((x) => x.id === overId);
+    if (oldIdx === newIdx) return;
+    try {
+      await lessonsApi.move(movedId, { parentId: movedNode.parentId, position: newIdx });
+      await refresh();
+    } catch {/* ignore */}
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <ul className="space-y-1">
+        {filtered.map((n) => <TreeRow key={n.id} n={n} depth={0} />)}
+      </ul>
+    </DndContext>
+  );
+}
+
+function collectOwnedFlat(nodes: LessonTreeNode[]): LessonTreeNode[] {
+  const out: LessonTreeNode[] = [];
+  function walk(arr: LessonTreeNode[]) {
+    for (const n of arr) { out.push(n); walk(n.children); }
+  }
+  walk(nodes);
+  return out;
+}
+
+function TreeRow({ n, depth }: { n: LessonTreeNode; depth: number }) {
+  const refresh = useLessons((s) => s.refresh);
+  const currentUserId = useAuth((s) => s.user?.id);
+  const isOwner = n.ownerId === currentUserId;
+  const [addingTo, setAddingTo] = useState<number | null>(null);
+  const [name, setName] = useState('');
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: n.id, disabled: !isOwner,
+  });
+  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 };
+
+  async function addChild() {
+    if (!name.trim()) return;
+    await lessonsApi.create({ name: name.trim(), parentId: n.id });
+    setName(''); setAddingTo(null); await refresh();
+  }
+  async function rename() {
+    const next = prompt('Nieuwe naam', n.name);
+    if (next && next.trim() && next !== n.name) {
+      await lessonsApi.update(n.id, { name: next.trim() });
+      await refresh();
+    }
+  }
+  async function remove() {
+    if (!confirm('Verwijder les en alle sublessen + kaarten?')) return;
+    await lessonsApi.remove(n.id);
+    await refresh();
+  }
+
+  const visibilityBadge =
+    n.isCurated ? '⭐ Curated' : n.visibility === 'shared' ? '🌍 Gedeeld' : '🔒 Privé';
+
+  return (
+    <li style={{ paddingLeft: depth * 20 }} ref={setNodeRef}>
+      <div
+        style={style}
+        className="group flex items-center gap-2 rounded-2xl px-3 py-2 transition hover:bg-brand-50/70 dark:hover:bg-slate-800/60"
+      >
+        {isOwner && (
+          <span
+            {...attributes} {...listeners}
+            className="cursor-grab text-slate-400 hover:text-slate-700 active:cursor-grabbing"
+            title="Sleep om te herordenen"
+            aria-label="Drag handle"
+          >⋮⋮</span>
+        )}
+        <span className={`h-2 w-2 rounded-full ${depth === 0 ? 'bg-brand-500' : 'bg-brand-300'}`} />
+        <Link to={`/lessons/${n.id}`} className="flex-1 truncate font-medium text-slate-800 dark:text-slate-100">
+          {n.name}
+          <span className="ml-2 rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
+            {n.cardCount}
+          </span>
+          <span className="ml-2 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+            {visibilityBadge}
+          </span>
+          {!isOwner && (
+            <span className="ml-1 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
+              📥 Geabonneerd
+            </span>
+          )}
+        </Link>
+        {isOwner && (
+          <div className="flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
+            <button className="rounded-lg px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-100 dark:text-brand-200 dark:hover:bg-brand-900/40" onClick={() => setAddingTo(n.id)}>+ subles</button>
+            <button className="rounded-lg px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800" onClick={rename}>rename</button>
+            <button className="rounded-lg px-2 py-1 text-xs font-medium text-danger-600 hover:bg-danger-50 dark:hover:bg-danger-400/10" onClick={remove}>delete</button>
+          </div>
+        )}
+      </div>
+      {addingTo === n.id && (
+        <div className="ml-6 mt-1 flex gap-2">
+          <input
+            autoFocus className="input-field flex-1" value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') addChild(); if (e.key === 'Escape') { setAddingTo(null); setName(''); } }}
+            placeholder="Naam van subles"
+          />
+          <button className="btn-primary px-3" onClick={addChild}>Toevoegen</button>
+          <button className="btn-ghost px-3" onClick={() => { setAddingTo(null); setName(''); }}>Annuleren</button>
+        </div>
+      )}
+      {n.children.length > 0 && (
+        <ul className="space-y-1">
+          {n.children.map((c) => <TreeRow key={c.id} n={c} depth={depth + 1} />)}
+        </ul>
+      )}
+    </li>
+  );
+}
+```
+
+- [ ] **Step 3: Typecheck + build + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+npm -w @flashcard/frontend run build 2>&1 | tail -3
+git add packages/frontend/package.json package-lock.json packages/frontend/src/components/LessonTree.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): lesson tree with filter + dnd-kit drag reorder"
+```
+
+---
+
+## Task 15: Frontend — Lessons page (replaces Admin.tsx)
+
+**Files:**
+- Create: `packages/frontend/src/pages/Lessons.tsx`
+
+- [ ] **Step 1: Create**
+
+```tsx
+import { useEffect, useState } from 'react';
+import { lessonsApi } from '../api/lessons.js';
+import { useLessons } from '../stores/lessonsStore.js';
+import { LessonTree } from '../components/LessonTree.js';
+
+export function LessonsPage() {
+  const { tree, refresh, loading } = useLessons();
+  const [newRoot, setNewRoot] = useState('');
+  const [filter, setFilter] = useState('');
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  async function addRoot() {
+    if (!newRoot.trim()) return;
+    await lessonsApi.create({ name: newRoot.trim(), parentId: null });
+    setNewRoot('');
+    await refresh();
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <header>
+        <h1 className="font-display text-3xl font-bold">Lessen</h1>
+        <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">
+          Maak een hiërarchie van lessen en sublessen. Sleep aan ⋮⋮ om te herordenen. Klik op een les voor details.
+        </p>
+      </header>
+
+      <div className="surface flex flex-col gap-2 p-4 sm:flex-row">
+        <input
+          className="input-field"
+          placeholder="Nieuwe wortel-les…"
+          value={newRoot}
+          onChange={(e) => setNewRoot(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && addRoot()}
+        />
+        <button className="btn-primary shrink-0" onClick={addRoot} disabled={!newRoot.trim()}>
+          + Toevoegen
+        </button>
+      </div>
+
+      <div className="surface space-y-3 p-4">
+        <input
+          className="input-field"
+          placeholder="Filter lessen op naam…"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+        {loading ? (
+          <p className="text-sm text-slate-500">Laden…</p>
+        ) : tree.length === 0 ? (
+          <div className="py-8 text-center text-sm text-slate-500">
+            Nog geen lessen. Voeg er hierboven een toe.
+          </div>
+        ) : (
+          <LessonTree nodes={tree} filter={filter} />
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Typecheck + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/pages/Lessons.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): lessons page with filter (replaces Admin.tsx)"
+```
+
+---
+
+## Task 16: Frontend — SearchPalette component
+
+**Files:**
+- Create: `packages/frontend/src/components/SearchPalette.tsx`
+
+- [ ] **Step 1: Create**
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { searchApi, type SearchResult } from '../api/search.js';
+
+export function SearchPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [q, setQ] = useState('');
+  const [result, setResult] = useState<SearchResult>({ lessons: [], cards: [] });
+  const [busy, setBusy] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (open) {
+      setQ(''); setResult({ lessons: [], cards: [] }); setActiveIdx(0);
+      setTimeout(() => inputRef.current?.focus(), 10);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (!q.trim() || q.trim().length < 2) {
+      setResult({ lessons: [], cards: [] });
+      return;
+    }
+    setBusy(true);
+    const t = setTimeout(async () => {
+      try {
+        const r = await searchApi.search(q.trim());
+        setResult(r);
+        setActiveIdx(0);
+      } finally { setBusy(false); }
+    }, 200);
+    return () => clearTimeout(t);
+  }, [q]);
+
+  const flat = [
+    ...result.lessons.map((l) => ({ kind: 'lesson' as const, item: l })),
+    ...result.cards.map((c) => ({ kind: 'card' as const, item: c })),
+  ];
+
+  function selectAt(i: number) {
+    const it = flat[i];
+    if (!it) return;
+    if (it.kind === 'lesson') navigate(`/lessons/${it.item.id}`);
+    else navigate(`/lessons/${it.item.lessonId}#card-${it.item.id}`);
+    onClose();
+  }
+
+  function onInputKey(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIdx((i) => Math.min(flat.length - 1, i + 1)); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIdx((i) => Math.max(0, i - 1)); }
+    if (e.key === 'Enter') { e.preventDefault(); selectAt(activeIdx); }
+  }
+
+  if (!open) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/40 p-4 pt-24 backdrop-blur-sm"
+        onClick={onClose}
+      >
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: -8 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95 }}
+          transition={{ type: 'spring', stiffness: 240, damping: 22 }}
+          className="w-full max-w-2xl overflow-hidden rounded-3xl border border-white/60 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900/95"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-2 border-b border-brand-100 px-4 py-3 dark:border-slate-800">
+            <span className="text-slate-400">🔎</span>
+            <input
+              ref={inputRef}
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              onKeyDown={onInputKey}
+              className="flex-1 bg-transparent text-base outline-none"
+              placeholder="Zoek lessen en kaarten…"
+            />
+            {busy && <span className="text-xs text-slate-400">…</span>}
+            <kbd className="rounded-md border border-slate-300 px-1.5 py-0.5 text-[10px] text-slate-500 dark:border-slate-700">Esc</kbd>
+          </div>
+          <div className="max-h-[60vh] overflow-y-auto">
+            {q.trim().length < 2 && (
+              <div className="p-8 text-center text-sm text-slate-500">Begin met typen om te zoeken (min. 2 tekens)</div>
+            )}
+            {q.trim().length >= 2 && flat.length === 0 && !busy && (
+              <div className="p-8 text-center text-sm text-slate-500">Geen resultaten</div>
+            )}
+            {result.lessons.length > 0 && <Group title="Lessen — Jouw bibliotheek" tone="brand">
+              {result.lessons.filter((l) => l.location === 'library').map((l) => (
+                <Row
+                  key={`l-${l.id}`}
+                  active={flat.findIndex((f) => f.kind === 'lesson' && f.item.id === l.id) === activeIdx}
+                  onClick={() => selectAt(flat.findIndex((f) => f.kind === 'lesson' && f.item.id === l.id))}
+                >
+                  <div className="font-medium">{l.name}</div>
+                  <div className="text-xs text-slate-500">door {l.ownerDisplayName} · {l.totalCards} kaarten</div>
+                </Row>
+              ))}
+              {result.lessons.filter((l) => l.location === 'marketplace').length > 0 && (
+                <div className="my-1 border-t border-brand-100 dark:border-slate-800" />
+              )}
+              {result.lessons.filter((l) => l.location === 'marketplace').map((l) => (
+                <Row
+                  key={`m-${l.id}`}
+                  active={flat.findIndex((f) => f.kind === 'lesson' && f.item.id === l.id) === activeIdx}
+                  onClick={() => selectAt(flat.findIndex((f) => f.kind === 'lesson' && f.item.id === l.id))}
+                >
+                  <div className="font-medium">{l.name} <span className="ml-1 text-xs text-slate-500">— marketplace</span></div>
+                  <div className="text-xs text-slate-500">door {l.ownerDisplayName} · {l.totalCards} kaarten{l.isCurated ? ' · ⭐' : ''}</div>
+                </Row>
+              ))}
+            </Group>}
+            {result.cards.length > 0 && <Group title="Kaarten" tone="success">
+              {result.cards.map((c) => (
+                <Row
+                  key={c.id}
+                  active={flat.findIndex((f) => f.kind === 'card' && f.item.id === c.id) === activeIdx}
+                  onClick={() => selectAt(flat.findIndex((f) => f.kind === 'card' && f.item.id === c.id))}
+                >
+                  <div className="font-medium">{c.question}</div>
+                  <div className="text-xs text-slate-500">{c.lessonName} — {c.snippet}</div>
+                </Row>
+              ))}
+            </Group>}
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+function Group({ title, tone, children }: { title: string; tone: 'brand' | 'success'; children: React.ReactNode }) {
+  const toneCls = tone === 'brand' ? 'text-brand-700 dark:text-brand-200' : 'text-success-700 dark:text-success-400';
+  return (
+    <div>
+      <div className={`px-4 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-wider ${toneCls}`}>{title}</div>
+      <ul className="pb-1">{children}</ul>
+    </div>
+  );
+}
+
+function Row({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <li
+      className={`cursor-pointer px-4 py-2 ${active ? 'bg-brand-50 dark:bg-brand-900/30' : 'hover:bg-brand-50/60 dark:hover:bg-slate-800/40'}`}
+      onClick={onClick}
+    >
+      {children}
+    </li>
+  );
+}
+```
+
+- [ ] **Step 2: Typecheck + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+git add packages/frontend/src/components/SearchPalette.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): ⌘K search palette modal"
+```
+
+---
+
+## Task 17: Frontend — Layout integration (⌘K + search trigger) + nav update
+
+**Files:**
+- Modify: `packages/frontend/src/components/Layout.tsx`
+
+- [ ] **Step 1: Replace Layout.tsx**
+
+```tsx
+import { useEffect, useState } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+import { useSettings } from '../stores/settingsStore.js';
+import { useAuth } from '../stores/authStore.js';
+import { UserMenu } from './UserMenu.js';
+import { SearchPalette } from './SearchPalette.js';
+
+const navItems = [
+  { to: '/', label: 'Dashboard', end: true },
+  { to: '/lessons', label: 'Lessen' },
+  { to: '/marketplace', label: 'Marketplace 🛍️' },
+  { to: '/stats', label: 'Stats' },
+];
+
+export function Layout() {
+  const { theme, toggleTheme } = useSettings();
+  const user = useAuth((s) => s.user);
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col">
+      <header className="sticky top-0 z-20 border-b border-white/40 bg-white/70 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-950/70">
+        <div className="mx-auto flex max-w-6xl items-center gap-2 px-4 py-3 sm:px-6">
+          <NavLink to="/" className="flex items-center gap-2 font-display text-lg font-bold">
+            <span className="grid h-8 w-8 place-items-center rounded-xl bg-brand-gradient text-white shadow-glow">⚡</span>
+            <span className="bg-brand-gradient bg-clip-text text-transparent">Flashcards</span>
+          </NavLink>
+          {user && (
+            <nav className="ml-4 hidden gap-1 sm:flex">
+              {navItems.map((item) => (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  end={item.end}
+                  className={({ isActive }) =>
+                    `rounded-xl px-3 py-1.5 text-sm font-medium transition ${
+                      isActive
+                        ? 'bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-200'
+                        : 'text-slate-600 hover:bg-white/70 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-900/60'
+                    }`
+                  }
+                >
+                  {item.label}
+                </NavLink>
+              ))}
+            </nav>
+          )}
+          <div className="ml-auto flex items-center gap-2">
+            {user && (
+              <button
+                onClick={() => setSearchOpen(true)}
+                className="flex items-center gap-2 rounded-xl border border-white/60 bg-white/70 px-3 py-1.5 text-xs text-slate-600 shadow-sm hover:bg-white dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300"
+                aria-label="Zoeken"
+                title="Zoek (⌘K)"
+              >
+                <span>🔎</span>
+                <span className="hidden sm:inline">Zoek…</span>
+                <kbd className="hidden rounded-md border border-slate-300 px-1.5 py-0.5 text-[10px] sm:inline dark:border-slate-700">⌘K</kbd>
+              </button>
+            )}
+            <button
+              onClick={toggleTheme}
+              className="grid h-9 w-9 place-items-center rounded-xl border border-white/60 bg-white/70 text-base shadow-sm transition hover:scale-105 dark:border-slate-800 dark:bg-slate-900/70"
+              aria-label="Toggle dark mode"
+            >
+              {theme === 'dark' ? '☀️' : '🌙'}
+            </button>
+            <UserMenu />
+          </div>
+        </div>
+        {user && (
+          <nav className="flex gap-1 overflow-x-auto px-4 pb-2 sm:hidden">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.end}
+                className={({ isActive }) =>
+                  `whitespace-nowrap rounded-full px-3 py-1 text-xs font-medium transition ${
+                    isActive ? 'bg-brand-600 text-white' : 'bg-white/60 text-slate-700 dark:bg-slate-900/60 dark:text-slate-300'
+                  }`
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
+          </nav>
+        )}
+      </header>
+      <main className="flex-1 overflow-auto">
+        <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
+          <Outlet />
+        </div>
+      </main>
+      <SearchPalette open={searchOpen} onClose={() => setSearchOpen(false)} />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Typecheck + build + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+npm -w @flashcard/frontend run build 2>&1 | tail -3
+git add packages/frontend/src/components/Layout.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): ⌘K search button + listener in layout, /lessons nav"
+```
+
+---
+
+## Task 18: Frontend — Router restructure + redirects
+
+**Files:**
+- Modify: `packages/frontend/src/router.tsx`
+
+- [ ] **Step 1: Replace contents**
+
+```tsx
+import { lazy, Suspense, type ComponentType } from 'react';
+import { createBrowserRouter, Navigate, useParams } from 'react-router-dom';
+import { Layout } from './components/Layout.js';
+import { AuthBoundary } from './components/AuthBoundary.js';
+import { RoleGuard } from './components/RoleGuard.js';
+
+function PageFallback() {
+  return (
+    <div className="flex h-full items-center justify-center p-12">
+      <div className="h-2 w-32 animate-shimmer rounded-full bg-gradient-to-r from-brand-100 via-brand-200 to-brand-100 bg-[length:1000px_100%]" />
+    </div>
+  );
+}
+
+function lazyPage<K extends string>(
+  loader: () => Promise<Record<K, ComponentType>>,
+  name: K,
+): ComponentType {
+  const Component = lazy(async () => {
+    const mod = await loader();
+    return { default: mod[name] as ComponentType };
+  });
+  return function LazyPage() {
+    return (
+      <Suspense fallback={<PageFallback />}>
+        <Component />
+      </Suspense>
+    );
+  };
+}
+
+const Dashboard = lazyPage(() => import('./pages/Dashboard.js'), 'DashboardPage');
+const Lessons = lazyPage(() => import('./pages/Lessons.js'), 'LessonsPage');
+const LessonDetail = lazyPage(() => import('./pages/LessonDetail.js'), 'LessonDetailPage');
+const PracticeSetup = lazyPage(() => import('./pages/PracticeSetup.js'), 'PracticeSetupPage');
+const Practice = lazyPage(() => import('./pages/Practice.js'), 'PracticePage');
+const PracticeDone = lazyPage(() => import('./pages/PracticeDone.js'), 'PracticeDonePage');
+const Stats = lazyPage(() => import('./pages/Stats.js'), 'StatsPage');
+const StatsLesson = lazyPage(() => import('./pages/StatsLesson.js'), 'StatsLessonPage');
+const StatsCard = lazyPage(() => import('./pages/StatsCard.js'), 'StatsCardPage');
+const Settings = lazyPage(() => import('./pages/Settings.js'), 'SettingsPage');
+const Profile = lazyPage(() => import('./pages/Profile.js'), 'ProfilePage');
+const AdminUsers = lazyPage(() => import('./pages/AdminUsers.js'), 'AdminUsersPage');
+const Marketplace = lazyPage(() => import('./pages/Marketplace.js'), 'MarketplacePage');
+
+const Login = lazyPage(() => import('./pages/auth/Login.js'), 'LoginPage');
+const Register = lazyPage(() => import('./pages/auth/Register.js'), 'RegisterPage');
+const VerifyEmail = lazyPage(() => import('./pages/auth/VerifyEmail.js'), 'VerifyEmailPage');
+const ForgotPassword = lazyPage(() => import('./pages/auth/ForgotPassword.js'), 'ForgotPasswordPage');
+const ResetPassword = lazyPage(() => import('./pages/auth/ResetPassword.js'), 'ResetPasswordPage');
+const AcceptInvite = lazyPage(() => import('./pages/auth/AcceptInvite.js'), 'AcceptInvitePage');
+
+// Redirect helpers for legacy URLs
+function AdminToLessons() { return <Navigate to="/lessons" replace />; }
+function AdminLessonRedirect() {
+  const { id } = useParams();
+  return <Navigate to={`/lessons/${id ?? ''}`} replace />;
+}
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      // Public auth routes
+      { path: 'login', element: <Login /> },
+      { path: 'register', element: <Register /> },
+      { path: 'verify-email', element: <VerifyEmail /> },
+      { path: 'forgot-password', element: <ForgotPassword /> },
+      { path: 'reset-password', element: <ResetPassword /> },
+      { path: 'accept-invite', element: <AcceptInvite /> },
+
+      // Authenticated routes
+      {
+        element: <AuthBoundary />,
+        children: [
+          { index: true, element: <Dashboard /> },
+          { path: 'lessons', element: <Lessons /> },
+          { path: 'lessons/:id', element: <LessonDetail /> },
+
+          // Legacy URL redirects
+          { path: 'admin', element: <AdminToLessons /> },
+          { path: 'admin/lessons/:id', element: <AdminLessonRedirect /> },
+
+          { path: 'practice/:lessonId/setup', element: <PracticeSetup /> },
+          { path: 'practice/:lessonId', element: <Practice /> },
+          { path: 'practice/:lessonId/done', element: <PracticeDone /> },
+          { path: 'stats', element: <Stats /> },
+          { path: 'stats/lessons/:id', element: <StatsLesson /> },
+          { path: 'stats/cards/:id', element: <StatsCard /> },
+          { path: 'settings', element: <Settings /> },
+          { path: 'profile', element: <Profile /> },
+          { path: 'marketplace', element: <Marketplace /> },
+          {
+            element: <RoleGuard role="sysadmin" />,
+            children: [
+              { path: 'admin/users', element: <AdminUsers /> },
+            ],
+          },
+          { path: '*', element: <Navigate to="/" replace /> },
+        ],
+      },
+    ],
+  },
+]);
+```
+
+This removes the old `Admin.tsx` and `AdminLesson.tsx` references. Those source files can stay on disk (referenced nowhere now) — Task 19 cleans them up.
+
+- [ ] **Step 2: Typecheck + build + commit**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+npm -w @flashcard/frontend run build 2>&1 | tail -3
+git add packages/frontend/src/router.tsx
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "feat(frontend): router restructure /admin → /lessons with redirects"
+```
+
+---
+
+## Task 19: Cleanup — remove obsolete pages
+
+**Files:**
+- Delete: `packages/frontend/src/pages/Admin.tsx`
+- Delete: `packages/frontend/src/pages/AdminLesson.tsx`
+
+- [ ] **Step 1: Confirm no imports remain**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+grep -rn "from .*pages/Admin\.js\|from .*pages/AdminLesson\.js" packages/frontend/src || echo "no imports — safe to delete"
+```
+
+Expected output: `no imports — safe to delete`.
+
+- [ ] **Step 2: Delete files**
+
+```bash
+rm packages/frontend/src/pages/Admin.tsx packages/frontend/src/pages/AdminLesson.tsx
+```
+
+- [ ] **Step 3: Verify build**
+
+```bash
+npm -w @flashcard/frontend run typecheck
+npm -w @flashcard/frontend run build 2>&1 | tail -3
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add -A packages/frontend/src/pages
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "chore(frontend): remove obsolete Admin/AdminLesson pages"
+```
+
+---
+
+## Task 20: E2E — search + detail + stats + drag-drop smoke
+
+**Files:**
+- Create: `e2e/ux.spec.ts`
+
+- [ ] **Step 1: Create the spec**
+
+```ts
+import { test, expect } from '@playwright/test';
+
+async function fetchVerifyLink(email: string): Promise<string> {
+  for (let i = 0; i < 30; i++) {
+    const res = await fetch('http://localhost:8025/api/v1/messages?limit=30');
+    const data = await res.json() as { messages: { ID: string; To: { Address: string }[] }[] };
+    const msg = data.messages.find((m) => m.To.some((t) => t.Address === email));
+    if (msg) {
+      const body = await (await fetch(`http://localhost:8025/api/v1/message/${msg.ID}`)).json() as { Text: string };
+      const m = body.Text.match(/https?:\/\/[^\s]+verify-email\?token=[^\s]+/);
+      if (m) return m[0];
+    }
+    await new Promise((r) => setTimeout(r, 250));
+  }
+  throw new Error('no verify link for ' + email);
+}
+
+async function registerVerifyLogin(page: import('@playwright/test').Page, name: string, email: string, password: string) {
+  await page.goto('/register');
+  await page.getByLabel(/Naam/).fill(name);
+  await page.getByLabel(/E-mailadres/).fill(email);
+  await page.getByLabel(/Wachtwoord/).fill(password);
+  await page.getByRole('button', { name: /Account aanmaken/ }).click();
+  await expect(page.getByText(/bevestigingsmail/i)).toBeVisible({ timeout: 10_000 });
+  const link = await fetchVerifyLink(email);
+  await page.goto(link);
+  await expect(page.getByRole('link', { name: 'Naar inloggen' })).toBeVisible({ timeout: 10_000 });
+  await page.goto('/login');
+  await page.getByLabel(/E-mailadres/).fill(email);
+  await page.getByLabel(/Wachtwoord/).fill(password);
+  await page.getByRole('button', { name: 'Inloggen' }).click();
+  await expect(page.getByRole('button', { name: 'Account menu' })).toBeVisible({ timeout: 15_000 });
+}
+
+test('search opens with ⌘K, finds a lesson, navigates to detail', async ({ page }) => {
+  const email = `search+${Date.now()}@example.com`;
+  await registerVerifyLogin(page, 'SearchUser', email, 'secretpass');
+  await page.goto('/lessons');
+  await page.getByPlaceholder(/Nieuwe wortel-les/).fill('Aardrijkskunde');
+  await page.getByRole('button', { name: /Toevoegen/ }).first().click();
+  await expect(page.getByRole('link', { name: /Aardrijkskunde/ }).first()).toBeVisible();
+
+  // Open search palette via ⌘K
+  await page.keyboard.press('Meta+K');
+  await expect(page.getByPlaceholder(/Zoek lessen en kaarten/)).toBeVisible();
+  await page.getByPlaceholder(/Zoek lessen en kaarten/).fill('aardrijk');
+  await expect(page.getByText(/Aardrijkskunde/).first()).toBeVisible({ timeout: 5_000 });
+  await page.keyboard.press('Enter');
+  await expect(page).toHaveURL(/\/lessons\/\d+/);
+  await expect(page.getByRole('heading', { name: /Aardrijkskunde/ })).toBeVisible();
+});
+
+test('lesson detail page shows stats panel and start practice', async ({ page }) => {
+  const email = `detail+${Date.now()}@example.com`;
+  await registerVerifyLogin(page, 'DetailUser', email, 'secretpass');
+  await page.goto('/lessons');
+  await page.getByPlaceholder(/Nieuwe wortel-les/).fill('Wiskunde-test');
+  await page.getByRole('button', { name: /Toevoegen/ }).first().click();
+  await page.getByRole('link', { name: /Wiskunde-test/ }).first().click();
+  await expect(page.getByRole('heading', { name: /Wiskunde-test/ })).toBeVisible();
+  await expect(page.getByText(/Kaarten/).first()).toBeVisible();
+  await expect(page.getByRole('link', { name: /Start oefenen/ })).toBeVisible();
+});
+
+test('stats page renders three sections', async ({ page }) => {
+  const email = `stats+${Date.now()}@example.com`;
+  await registerVerifyLogin(page, 'StatsUser', email, 'secretpass');
+  await page.goto('/stats');
+  await expect(page.getByRole('heading', { name: 'Statistieken' })).toBeVisible();
+  await expect(page.getByText(/Te reviewen/)).toBeVisible();
+  await expect(page.getByText(/Voortgang per les/)).toBeVisible();
+  await expect(page.getByText(/Activiteit/)).toBeVisible();
+});
+
+test('legacy /admin redirects to /lessons', async ({ page }) => {
+  const email = `legacy+${Date.now()}@example.com`;
+  await registerVerifyLogin(page, 'Legacy', email, 'secretpass');
+  await page.goto('/admin');
+  await expect(page).toHaveURL(/\/lessons$/);
+});
+```
+
+- [ ] **Step 2: Run E2E**
+
+```bash
+cd /Users/berthausmans/Documents/Development/flashcard
+docker compose up -d mailpit 2>&1 || true
+lsof -ti tcp:3000 tcp:5173 2>/dev/null | xargs kill -9 2>/dev/null
+rm -f packages/backend/data/e2e.db data/e2e.db
+sleep 2
+npm run e2e 2>&1 | tail -15
+```
+
+Expected: existing tests (auth, ownership, smoke) still pass + 4 new ux tests pass. Total: 7 e2e tests.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add e2e/ux.spec.ts
+git -c commit.gpgsign=false -c user.email=bert@hausmans.nl -c user.name="Bert Hausmans" commit -m "test(e2e): search palette + lesson detail + stats + legacy redirect"
+```
+
+---
+
+## Self-review
+
+**Spec coverage:**
+
+| Spec section | Implemented in task |
+|---|---|
+| 3.1 Les-detailpagina (`/lessons/:id`) | 12, 13 |
+| 3.2 App-brede search | 1, 2, 7, 16, 17 |
+| 3.3 Stats-overhaul (heatmap + progress + due) | 3, 5, 8, 9, 10, 11 |
+| 3.4 Admin polish (filter + drag-drop) | 14, 15 |
+| Datamodel (geen wijzigingen) | — |
+| API: search, lessons-progress, due, sessions/due, heatmap default | 1, 2, 3, 4, 5 |
+| Routes-restructure + legacy redirects | 18, 20 |
+| UI-componenten (lijst sectie 7 spec) | 8–17 |
+| Tests (unit + integration + E2E) | 1, 3, 4, 6, 20 |
+| Migratie (geen) | — |
+
+All spec requirements covered.
+
+**Placeholder scan:** geen TBDs, geen "implement later", elke step heeft volledige code.
+
+**Type consistency:** `LessonProgressRow`, `DueOverview`, `SearchResult` consistent gedefinieerd in zowel backend service als frontend api/types. `LessonStats` hergebruikt uit bestaande stats.ts.
+
+---
+
+## Execution Handoff
+
+**Plan complete and saved to `docs/superpowers/plans/2026-05-21-ux-extensions.md`. Two execution options:**
+
+**1. Subagent-Driven (recommended)** — fresh subagent per task, review between tasks, fast iteration
+
+**2. Inline Execution** — execute tasks in this session using executing-plans, batch execution with checkpoints
+
+**Which approach?**