From 58cad6149864cb08ee08eb9d9873529e30c5f908 Mon Sep 17 00:00:00 2001
From: Ali <abenrami06@gmail.com>
Date: Wed, 27 May 2026 14:51:36 -0500
Subject: [PATCH 1/5] Redesign flashcard deck workflows

---
 app/(app)/flashcards/page.tsx              |  33 +-
 app/api/flashcards/route.ts                | 214 ++++--
 app/flashcards/flashcards-client.test.tsx  | 224 ++++++
 app/flashcards/flashcards-client.tsx       | 789 ++++++++++++++++-----
 components/note-editor/code-block-view.tsx |   2 +-
 components/note-editor/note-renderer.tsx   |  49 +-
 lib/flashcards/decks.ts                    |  71 ++
 lib/flashcards/types.ts                    |   1 +
 8 files changed, 1080 insertions(+), 303 deletions(-)
 create mode 100644 app/flashcards/flashcards-client.test.tsx
 create mode 100644 lib/flashcards/decks.ts

diff --git a/app/(app)/flashcards/page.tsx b/app/(app)/flashcards/page.tsx
index ba6d04c..bb18c6d 100644
--- a/app/(app)/flashcards/page.tsx
+++ b/app/(app)/flashcards/page.tsx
@@ -4,28 +4,7 @@ import { db } from "@/lib/db";
 import { flashcards, note } from "@/lib/db/schema";
 import { requireServerSession } from "@/lib/auth-session";
 import { FlashcardsClient } from "@/app/flashcards/flashcards-client";
-import type { FlashcardDeck, FlashcardItem } from "@/lib/flashcards/types";
-
-function normalizeCards(value: unknown): FlashcardItem[] {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-
-  return value.filter((item): item is FlashcardItem => {
-    if (!item || typeof item !== "object") {
-      return false;
-    }
-
-    const candidate = item as Partial<FlashcardItem>;
-    return (
-      typeof candidate.id === "string" &&
-      typeof candidate.front === "string" &&
-      typeof candidate.back === "string" &&
-      Array.isArray(candidate.sourceNoteTitles) &&
-      candidate.sourceNoteTitles.every((title) => typeof title === "string")
-    );
-  });
-}
+import { rowToFlashcardDeck } from "@/lib/flashcards/decks";
 
 export default async function FlashcardsPage() {
   await connection();
@@ -57,15 +36,7 @@ export default async function FlashcardsPage() {
       .orderBy(desc(flashcards.createdAt)),
   ]);
 
-  const decks: FlashcardDeck[] = deckRows.map((deck) => ({
-    id: deck.id,
-    title: deck.title,
-    sourceNoteIds: deck.sourceNoteIds,
-    cards: normalizeCards(deck.cards),
-    cardCount: deck.cardCount,
-    createdAt: deck.createdAt.toISOString(),
-    updatedAt: deck.updatedAt.toISOString(),
-  }));
+  const decks = deckRows.map(rowToFlashcardDeck);
 
   return (
     <FlashcardsClient
diff --git a/app/api/flashcards/route.ts b/app/api/flashcards/route.ts
index cf7dae0..9986506 100644
--- a/app/api/flashcards/route.ts
+++ b/app/api/flashcards/route.ts
@@ -1,55 +1,68 @@
 import { headers } from "next/headers";
 import { NextResponse } from "next/server";
 import { z } from "zod";
-import { desc, eq } from "drizzle-orm";
+import { and, desc, eq } from "drizzle-orm";
 import { auth } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { flashcards } from "@/lib/db/schema";
+import { createDraftFlashcardDeck, editableDeckSchema, rowToFlashcardDeck } from "@/lib/flashcards/decks";
 import { getFlashcardContextNotes } from "@/lib/flashcards/context";
 import { generateFlashcardDeck } from "@/lib/flashcards/gemini";
-import type { FlashcardDeck, FlashcardItem } from "@/lib/flashcards/types";
 
 export const runtime = "nodejs";
 
-const createFlashcardsSchema = z.object({
+const legacyCreateFlashcardsSchema = z.object({
   noteIds: z.array(z.string().min(1)).min(1).max(12),
   cardCount: z.number().int().min(4).max(40),
 });
 
-const flashcardItemSchema = z.object({
-  id: z.string().min(1),
-  front: z.string().min(1),
-  back: z.string().min(1),
-  sourceNoteTitles: z.array(z.string().min(1)).min(1),
+const generatePreviewSchema = legacyCreateFlashcardsSchema.extend({
+  mode: z.literal("generate"),
 });
 
-function normalizeCards(value: unknown): FlashcardItem[] {
-  const parsed = z.array(flashcardItemSchema).safeParse(value);
-  return parsed.success ? parsed.data : [];
+const saveDeckSchema = editableDeckSchema.extend({
+  mode: z.literal("save"),
+});
+
+const updateDeckSchema = editableDeckSchema.extend({
+  deckId: z.string().trim().min(1),
+});
+
+async function requireSession() {
+  return auth.api.getSession({ headers: await headers() });
 }
 
-function rowToDeck(row: {
-  id: string;
-  title: string;
-  sourceNoteIds: string[];
-  cards: unknown;
-  cardCount: number;
-  createdAt: Date;
-  updatedAt: Date;
-}): FlashcardDeck {
+async function generateDeckPreview(params: { userId: string; noteIds: string[]; cardCount: number }) {
+  const uniqueNoteIds = Array.from(new Set(params.noteIds));
+  const contextNotes = await getFlashcardContextNotes({
+    userId: params.userId,
+    noteIds: uniqueNoteIds,
+  });
+
+  if (contextNotes.length !== uniqueNoteIds.length) {
+    return { error: "One or more selected notes could not be found", status: 404 } as const;
+  }
+
+  if (contextNotes.every((note) => note.embedding.length === 0)) {
+    return { error: "Selected notes do not have stored embeddings yet", status: 400 } as const;
+  }
+
+  const generatedDeck = await generateFlashcardDeck({
+    notes: contextNotes,
+    cardCount: params.cardCount,
+  });
+
   return {
-    id: row.id,
-    title: row.title,
-    sourceNoteIds: row.sourceNoteIds,
-    cards: normalizeCards(row.cards),
-    cardCount: row.cardCount,
-    createdAt: row.createdAt.toISOString(),
-    updatedAt: row.updatedAt.toISOString(),
-  };
+    deck: createDraftFlashcardDeck({
+      title: generatedDeck.title,
+      sourceNoteIds: uniqueNoteIds,
+      cards: generatedDeck.cards,
+    }),
+  } as const;
 }
 
 export async function GET() {
-  const session = await auth.api.getSession({ headers: await headers() });
+  const session = await requireSession();
   if (!session) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
@@ -68,11 +81,11 @@ export async function GET() {
     .where(eq(flashcards.userId, session.user.id))
     .orderBy(desc(flashcards.createdAt));
 
-  return NextResponse.json({ decks: rows.map(rowToDeck) });
+  return NextResponse.json({ decks: rows.map(rowToFlashcardDeck) });
 }
 
 export async function POST(req: Request) {
-  const session = await auth.api.getSession({ headers: await headers() });
+  const session = await requireSession();
   if (!session) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
@@ -84,48 +97,129 @@ export async function POST(req: Request) {
     return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
   }
 
-  const parsed = createFlashcardsSchema.safeParse(body);
-  if (!parsed.success) {
-    return NextResponse.json({ error: "Invalid flashcard generation options" }, { status: 400 });
-  }
-
-  const uniqueNoteIds = Array.from(new Set(parsed.data.noteIds));
-  const contextNotes = await getFlashcardContextNotes({
-    userId: session.user.id,
-    noteIds: uniqueNoteIds,
-  });
-
-  if (contextNotes.length !== uniqueNoteIds.length) {
-    return NextResponse.json({ error: "One or more selected notes could not be found" }, { status: 404 });
-  }
-
-  if (contextNotes.every((note) => note.embedding.length === 0)) {
-    return NextResponse.json(
-      { error: "Selected notes do not have stored embeddings yet" },
-      { status: 400 },
-    );
-  }
+  const generateParsed = generatePreviewSchema.safeParse(body);
+  const saveParsed = saveDeckSchema.safeParse(body);
+  const legacyParsed = legacyCreateFlashcardsSchema.safeParse(body);
 
   try {
-    const generatedDeck = await generateFlashcardDeck({
-      notes: contextNotes,
-      cardCount: parsed.data.cardCount,
+    if (generateParsed.success) {
+      const result = await generateDeckPreview({
+        userId: session.user.id,
+        noteIds: generateParsed.data.noteIds,
+        cardCount: generateParsed.data.cardCount,
+      });
+
+      if ("error" in result) {
+        return NextResponse.json({ error: result.error }, { status: result.status });
+      }
+
+      return NextResponse.json({ deck: result.deck, saved: false });
+    }
+
+    if (saveParsed.success) {
+      const [created] = await db
+        .insert(flashcards)
+        .values({
+          userId: session.user.id,
+          title: saveParsed.data.title,
+          sourceNoteIds: saveParsed.data.sourceNoteIds,
+          cards: saveParsed.data.cards,
+          cardCount: saveParsed.data.cards.length,
+        })
+        .returning();
+
+      return NextResponse.json({ deck: rowToFlashcardDeck(created) }, { status: 201 });
+    }
+
+    if (!legacyParsed.success) {
+      return NextResponse.json({ error: "Invalid flashcard request" }, { status: 400 });
+    }
+
+    const result = await generateDeckPreview({
+      userId: session.user.id,
+      noteIds: legacyParsed.data.noteIds,
+      cardCount: legacyParsed.data.cardCount,
     });
 
+    if ("error" in result) {
+      return NextResponse.json({ error: result.error }, { status: result.status });
+    }
+
     const [created] = await db
       .insert(flashcards)
       .values({
         userId: session.user.id,
-        title: generatedDeck.title,
-        sourceNoteIds: uniqueNoteIds,
-        cards: generatedDeck.cards,
-        cardCount: generatedDeck.cards.length,
+        title: result.deck.title,
+        sourceNoteIds: result.deck.sourceNoteIds,
+        cards: result.deck.cards,
+        cardCount: result.deck.cards.length,
       })
       .returning();
 
-    return NextResponse.json({ deck: rowToDeck(created) }, { status: 201 });
+    return NextResponse.json({ deck: rowToFlashcardDeck(created) }, { status: 201 });
   } catch (error) {
     const message = error instanceof Error ? error.message : "Flashcard generation failed";
     return NextResponse.json({ error: message }, { status: 500 });
   }
 }
+
+export async function PATCH(req: Request) {
+  const session = await requireSession();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const parsed = updateDeckSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: "Invalid flashcard deck" }, { status: 400 });
+  }
+
+  const [updated] = await db
+    .update(flashcards)
+    .set({
+      title: parsed.data.title,
+      sourceNoteIds: parsed.data.sourceNoteIds,
+      cards: parsed.data.cards,
+      cardCount: parsed.data.cards.length,
+      updatedAt: new Date(),
+    })
+    .where(and(eq(flashcards.id, parsed.data.deckId), eq(flashcards.userId, session.user.id)))
+    .returning();
+
+  if (!updated) {
+    return NextResponse.json({ error: "Flashcard deck not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({ deck: rowToFlashcardDeck(updated) });
+}
+
+export async function DELETE(req: Request) {
+  const session = await requireSession();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const deckId = new URL(req.url).searchParams.get("deckId");
+  const parsedDeckId = z.string().trim().min(1).safeParse(deckId);
+  if (!parsedDeckId.success) {
+    return NextResponse.json({ error: "Missing flashcard deck id" }, { status: 400 });
+  }
+
+  const [deleted] = await db
+    .delete(flashcards)
+    .where(and(eq(flashcards.id, parsedDeckId.data), eq(flashcards.userId, session.user.id)))
+    .returning();
+
+  if (!deleted) {
+    return NextResponse.json({ error: "Flashcard deck not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({ deletedDeckId: deleted.id });
+}
diff --git a/app/flashcards/flashcards-client.test.tsx b/app/flashcards/flashcards-client.test.tsx
new file mode 100644
index 0000000..4e7e271
--- /dev/null
+++ b/app/flashcards/flashcards-client.test.tsx
@@ -0,0 +1,224 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { FlashcardDeck } from "@/lib/flashcards/types";
+
+vi.mock("react-markdown", () => ({
+  default: ({ children }: { children: string }) => <>{children}</>,
+}));
+
+vi.mock("rehype-katex", () => ({
+  default: () => null,
+}));
+
+vi.mock("remark-gfm", () => ({
+  default: () => null,
+}));
+
+vi.mock("remark-math", () => ({
+  default: () => null,
+}));
+
+import { FlashcardsClient } from "@/app/flashcards/flashcards-client";
+
+const notes = [
+  {
+    id: "note-1",
+    title: "Lecture One",
+    hasEmbedding: true,
+  },
+  {
+    id: "note-2",
+    title: "Draft Note",
+    hasEmbedding: false,
+  },
+];
+
+function deck(overrides: Partial<FlashcardDeck> = {}): FlashcardDeck {
+  return {
+    id: "deck-1",
+    title: "Biology deck",
+    sourceNoteIds: ["note-1"],
+    cards: [
+      {
+        id: "card-1",
+        front: "What is mitosis?",
+        back: "Cell division.",
+        sourceNoteTitles: ["Lecture One"],
+        tags: ["cells"],
+      },
+    ],
+    cardCount: 1,
+    createdAt: "2026-05-01T00:00:00.000Z",
+    updatedAt: "2026-05-02T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function jsonResponse(payload: unknown, init?: ResponseInit) {
+  return {
+    ok: init?.status ? init.status < 400 : true,
+    status: init?.status ?? 200,
+    json: async () => payload,
+  } as Response;
+}
+
+describe("FlashcardsClient", () => {
+  beforeEach(() => {
+    vi.stubGlobal("fetch", vi.fn());
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("keeps My Flashcards focused on saved deck management", () => {
+    render(<FlashcardsClient notes={notes} initialDecks={[deck()]} />);
+
+    expect(screen.getByRole("heading", { name: "My Flashcards" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Biology deck" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Review" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Edit/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Delete/ })).toBeInTheDocument();
+    expect(screen.queryByRole("checkbox", { name: /Lecture One/ })).not.toBeInTheDocument();
+  });
+
+  it("generates an editable preview before saving a new deck", async () => {
+    const user = userEvent.setup();
+    const generatedDeck = deck({
+      id: "draft-1",
+      title: "Generated deck",
+      cards: [
+        {
+          id: "generated-card",
+          front: "Generated front",
+          back: "Generated back",
+          sourceNoteTitles: ["Lecture One"],
+          tags: [],
+        },
+      ],
+    });
+    const savedDeck = deck({
+      id: "deck-2",
+      title: "Edited deck",
+      cards: [
+        {
+          id: "generated-card",
+          front: "Edited front",
+          back: "Generated back",
+          sourceNoteTitles: ["Lecture One"],
+          tags: ["core"],
+        },
+      ],
+    });
+
+    vi.mocked(fetch)
+      .mockResolvedValueOnce(jsonResponse({ deck: generatedDeck, saved: false }))
+      .mockResolvedValueOnce(jsonResponse({ deck: savedDeck }, { status: 201 }));
+
+    render(<FlashcardsClient notes={notes} initialDecks={[]} />);
+
+    await user.click(screen.getByRole("button", { name: "Create flashcards" }));
+    await user.click(screen.getByRole("checkbox", { name: /Lecture One/ }));
+    await user.clear(screen.getByLabelText("Cards"));
+    await user.type(screen.getByLabelText("Cards"), "4");
+    await user.click(screen.getByRole("button", { name: /Generate preview/ }));
+
+    expect(await screen.findByDisplayValue("Generated deck")).toBeInTheDocument();
+
+    await user.clear(screen.getByLabelText("Deck name"));
+    await user.type(screen.getByLabelText("Deck name"), "Edited deck");
+    await user.clear(screen.getByLabelText("Front"));
+    await user.type(screen.getByLabelText("Front"), "Edited front");
+    await user.type(screen.getByLabelText("Tags"), "core");
+    await user.click(screen.getByRole("button", { name: /Save deck/ }));
+
+    await screen.findByRole("heading", { name: "Edited deck" });
+
+    expect(fetch).toHaveBeenCalledTimes(2);
+    expect(JSON.parse(String(vi.mocked(fetch).mock.calls[0][1]?.body))).toMatchObject({
+      mode: "generate",
+      noteIds: ["note-1"],
+      cardCount: 4,
+    });
+    expect(JSON.parse(String(vi.mocked(fetch).mock.calls[1][1]?.body))).toMatchObject({
+      mode: "save",
+      title: "Edited deck",
+      cards: [
+        {
+          front: "Edited front",
+          back: "Generated back",
+          tags: ["core"],
+        },
+      ],
+    });
+  });
+
+  it("edits saved deck metadata and individual cards", async () => {
+    const user = userEvent.setup();
+    const updatedDeck = deck({
+      title: "Renamed deck",
+      cards: [
+        {
+          id: "card-1",
+          front: "What is mitosis?",
+          back: "Updated back",
+          sourceNoteTitles: ["Lecture One"],
+          tags: ["exam"],
+        },
+      ],
+    });
+
+    vi.mocked(fetch).mockResolvedValueOnce(jsonResponse({ deck: updatedDeck }));
+
+    render(<FlashcardsClient notes={notes} initialDecks={[deck()]} />);
+
+    await user.click(screen.getByRole("button", { name: /Edit/ }));
+    await user.clear(screen.getByLabelText("Deck name"));
+    await user.type(screen.getByLabelText("Deck name"), "Renamed deck");
+    await user.clear(screen.getByLabelText("Back"));
+    await user.type(screen.getByLabelText("Back"), "Updated back");
+    await user.clear(screen.getByLabelText("Tags"));
+    await user.type(screen.getByLabelText("Tags"), "exam");
+    await user.click(screen.getByRole("button", { name: /Save changes/ }));
+
+    await screen.findByRole("heading", { name: "Renamed deck" });
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/flashcards",
+      expect.objectContaining({
+        method: "PATCH",
+        body: expect.any(String),
+      }),
+    );
+    expect(JSON.parse(String(vi.mocked(fetch).mock.calls[0][1]?.body))).toMatchObject({
+      deckId: "deck-1",
+      title: "Renamed deck",
+      cards: [
+        {
+          back: "Updated back",
+          tags: ["exam"],
+        },
+      ],
+    });
+  });
+
+  it("deletes decks from the library after confirmation", async () => {
+    const user = userEvent.setup();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    vi.mocked(fetch).mockResolvedValueOnce(jsonResponse({ deletedDeckId: "deck-1" }));
+
+    render(<FlashcardsClient notes={notes} initialDecks={[deck()]} />);
+
+    await user.click(screen.getByRole("button", { name: /Delete/ }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("heading", { name: "Biology deck" })).not.toBeInTheDocument();
+    });
+    expect(screen.getByText("No flashcard decks")).toBeInTheDocument();
+    expect(fetch).toHaveBeenCalledWith("/api/flashcards?deckId=deck-1", { method: "DELETE" });
+  });
+});
diff --git a/app/flashcards/flashcards-client.tsx b/app/flashcards/flashcards-client.tsx
index d99c522..83495d1 100644
--- a/app/flashcards/flashcards-client.tsx
+++ b/app/flashcards/flashcards-client.tsx
@@ -3,12 +3,17 @@
 import { useMemo, useState } from "react";
 import {
   Brain,
+  Check,
   ChevronLeft,
   ChevronRight,
+  Edit3,
   Layers3,
   Loader2,
-  Play,
+  Plus,
   RotateCcw,
+  Save,
+  Trash2,
+  X,
 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
@@ -16,16 +21,11 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input, Textarea } from "@/components/ui/input";
+import { PageHeader } from "@/components/ui/page-header";
 import { cx } from "@/lib/utils";
-import type { FlashcardDeck } from "@/lib/flashcards/types";
+import type { FlashcardDeck, FlashcardItem } from "@/lib/flashcards/types";
 
 type FlashcardNoteOption = {
   id: string;
@@ -38,10 +38,11 @@ type FlashcardsClientProps = {
   initialDecks: FlashcardDeck[];
 };
 
+type FlashcardView = "library" | "create" | "review" | "edit";
+type CreateStep = "context" | "preview";
+
 async function readJsonResponse<T>(response: Response): Promise<T> {
-  const payload = (await response.json().catch(() => null)) as T & {
-    error?: string;
-  };
+  const payload = (await response.json().catch(() => null)) as T & { error?: string };
   if (!response.ok) {
     throw new Error(payload?.error || "Request failed");
   }
@@ -49,13 +50,59 @@ async function readJsonResponse<T>(response: Response): Promise<T> {
   return payload;
 }
 
-function MarkdownText({
-  markdown,
-  className,
-}: {
-  markdown: string;
-  className?: string;
-}) {
+function createLocalCardId() {
+  if (globalThis.crypto?.randomUUID) {
+    return `manual-${globalThis.crypto.randomUUID()}`;
+  }
+
+  return `manual-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function createBlankCard(): FlashcardItem {
+  return {
+    id: createLocalCardId(),
+    front: "",
+    back: "",
+    sourceNoteTitles: [],
+    tags: [],
+  };
+}
+
+function cloneDeck(deck: FlashcardDeck): FlashcardDeck {
+  return {
+    ...deck,
+    cards: deck.cards.map((card) => ({
+      ...card,
+      sourceNoteTitles: [...card.sourceNoteTitles],
+      tags: [...(card.tags ?? [])],
+    })),
+  };
+}
+
+function withCardCount(deck: FlashcardDeck): FlashcardDeck {
+  return {
+    ...deck,
+    cardCount: deck.cards.length,
+  };
+}
+
+function formatDeckDate(value: string) {
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(new Date(value));
+}
+
+function parseTags(value: string) {
+  return value
+    .split(",")
+    .map((tag) => tag.trim())
+    .filter(Boolean)
+    .slice(0, 8);
+}
+
+function MarkdownText({ markdown, className }: { markdown: string; className?: string }) {
   return (
     <div className={cx("min-w-0 space-y-2 text-foreground", className)}>
       <ReactMarkdown
@@ -63,12 +110,8 @@ function MarkdownText({
         remarkPlugins={[remarkGfm, remarkMath]}
         components={{
           p: ({ children }) => <p>{children}</p>,
-          ul: ({ children }) => (
-            <ul className="ml-5 list-disc space-y-1">{children}</ul>
-          ),
-          ol: ({ children }) => (
-            <ol className="ml-5 list-decimal space-y-1">{children}</ol>
-          ),
+          ul: ({ children }) => <ul className="ml-5 list-disc space-y-1">{children}</ul>,
+          ol: ({ children }) => <ol className="ml-5 list-decimal space-y-1">{children}</ol>,
           code: ({ children }) => (
             <code className="rounded bg-surface-elevated px-1 py-0.5 font-mono text-[0.92em]">
               {children}
@@ -82,40 +125,185 @@ function MarkdownText({
   );
 }
 
-export function FlashcardsClient({
-  notes,
-  initialDecks,
-}: FlashcardsClientProps) {
-  const embeddedNotes = useMemo(
-    () => notes.filter((note) => note.hasEmbedding),
-    [notes],
+function DeckEditor({
+  deck,
+  disabled,
+  onChange,
+}: {
+  deck: FlashcardDeck;
+  disabled?: boolean;
+  onChange: (deck: FlashcardDeck) => void;
+}) {
+  function updateTitle(title: string) {
+    onChange(withCardCount({ ...deck, title }));
+  }
+
+  function updateCard(index: number, patch: Partial<FlashcardItem>) {
+    onChange(
+      withCardCount({
+        ...deck,
+        cards: deck.cards.map((card, cardIndex) => (cardIndex === index ? { ...card, ...patch } : card)),
+      }),
+    );
+  }
+
+  function addCard() {
+    onChange(withCardCount({ ...deck, cards: [...deck.cards, createBlankCard()] }));
+  }
+
+  function removeCard(index: number) {
+    if (deck.cards.length <= 1) {
+      return;
+    }
+
+    onChange(withCardCount({ ...deck, cards: deck.cards.filter((_, cardIndex) => cardIndex !== index) }));
+  }
+
+  return (
+    <div className="space-y-5">
+      <label className="space-y-2 text-sm font-medium text-foreground">
+        Deck name
+        <Input value={deck.title} disabled={disabled} onChange={(event) => updateTitle(event.target.value)} />
+      </label>
+
+      <div className="space-y-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h2 className="text-sm font-medium text-foreground">Cards</h2>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            leadingIcon={<Plus className="size-4" />}
+            onClick={addCard}
+          >
+            Add card
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          {deck.cards.map((card, index) => (
+            <div
+              key={card.id}
+              className="space-y-4 rounded-lg border border-border bg-surface-muted p-4"
+            >
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <Badge variant="outline">Card {index + 1}</Badge>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  disabled={disabled || deck.cards.length <= 1}
+                  leadingIcon={<Trash2 className="size-4" />}
+                  onClick={() => removeCard(index)}
+                >
+                  Remove
+                </Button>
+              </div>
+
+              <div className="grid gap-4 lg:grid-cols-2">
+                <label className="space-y-2 text-sm font-medium text-foreground">
+                  Front
+                  <Textarea
+                    className="min-h-32 resize-y"
+                    value={card.front}
+                    disabled={disabled}
+                    onChange={(event) => updateCard(index, { front: event.target.value })}
+                  />
+                </label>
+                <label className="space-y-2 text-sm font-medium text-foreground">
+                  Back
+                  <Textarea
+                    className="min-h-32 resize-y"
+                    value={card.back}
+                    disabled={disabled}
+                    onChange={(event) => updateCard(index, { back: event.target.value })}
+                  />
+                </label>
+              </div>
+
+              <label className="space-y-2 text-sm font-medium text-foreground">
+                Tags
+                <Input
+                  value={(card.tags ?? []).join(", ")}
+                  disabled={disabled}
+                  onChange={(event) => updateCard(index, { tags: parseTags(event.target.value) })}
+                />
+              </label>
+
+              {card.sourceNoteTitles.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {card.sourceNoteTitles.map((title) => (
+                    <Badge key={`${card.id}-${title}`} variant="neutral">
+                      {title}
+                    </Badge>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
   );
+}
+
+export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps) {
+  const embeddedNotes = useMemo(() => notes.filter((note) => note.hasEmbedding), [notes]);
+  const [view, setView] = useState<FlashcardView>("library");
+  const [createStep, setCreateStep] = useState<CreateStep>("context");
   const [selectedNoteIds, setSelectedNoteIds] = useState<string[]>([]);
   const [cardCount, setCardCount] = useState(16);
   const [decks, setDecks] = useState<FlashcardDeck[]>(initialDecks);
   const [activeDeckId, setActiveDeckId] = useState(initialDecks[0]?.id ?? "");
   const [activeCardIndex, setActiveCardIndex] = useState(0);
   const [showBack, setShowBack] = useState(false);
+  const [draftDeck, setDraftDeck] = useState<FlashcardDeck | null>(null);
+  const [editingDeck, setEditingDeck] = useState<FlashcardDeck | null>(null);
   const [isGenerating, setIsGenerating] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [deletingDeckId, setDeletingDeckId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const activeDeck = decks.find((deck) => deck.id === activeDeckId) ?? decks[0];
   const activeCard = activeDeck?.cards[activeCardIndex];
-  const canGenerate =
-    selectedNoteIds.length > 0 && embeddedNotes.length > 0 && !isGenerating;
+  const canGenerate = selectedNoteIds.length > 0 && embeddedNotes.length > 0 && !isGenerating;
+  const canSaveDraft = Boolean(draftDeck?.title.trim() && draftDeck.cards.every((card) => card.front.trim() && card.back.trim()));
+  const canSaveEdit = Boolean(editingDeck?.title.trim() && editingDeck.cards.every((card) => card.front.trim() && card.back.trim()));
 
   function toggleNote(noteId: string) {
     setSelectedNoteIds((current) =>
-      current.includes(noteId)
-        ? current.filter((id) => id !== noteId)
-        : [...current, noteId],
+      current.includes(noteId) ? current.filter((id) => id !== noteId) : [...current, noteId],
     );
   }
 
-  function selectDeck(deckId: string) {
+  function openLibrary() {
+    setView("library");
+    setCreateStep("context");
+    setDraftDeck(null);
+    setEditingDeck(null);
+    setError(null);
+  }
+
+  function openReview(deckId: string) {
     setActiveDeckId(deckId);
     setActiveCardIndex(0);
     setShowBack(false);
+    setView("review");
+    setError(null);
+  }
+
+  function openCreate() {
+    setView("create");
+    setCreateStep("context");
+    setDraftDeck(null);
+    setError(null);
+  }
+
+  function openEdit(deck: FlashcardDeck) {
+    setEditingDeck(cloneDeck(deck));
+    setView("edit");
+    setError(null);
   }
 
   function goToCard(index: number) {
@@ -123,13 +311,11 @@ export function FlashcardsClient({
       return;
     }
 
-    setActiveCardIndex(
-      Math.min(Math.max(index, 0), activeDeck.cards.length - 1),
-    );
+    setActiveCardIndex(Math.min(Math.max(index, 0), activeDeck.cards.length - 1));
     setShowBack(false);
   }
 
-  async function createDeck() {
+  async function generatePreview() {
     setError(null);
     setIsGenerating(true);
     try {
@@ -138,179 +324,391 @@ export function FlashcardsClient({
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
+            mode: "generate",
             noteIds: selectedNoteIds,
             cardCount,
           }),
         }),
       );
 
-      setDecks((current) => [payload.deck, ...current]);
-      setActiveDeckId(payload.deck.id);
-      setActiveCardIndex(0);
-      setShowBack(false);
+      setDraftDeck(cloneDeck(payload.deck));
+      setCreateStep("preview");
     } catch (generationError) {
-      setError(
-        generationError instanceof Error
-          ? generationError.message
-          : "Flashcard generation failed",
-      );
+      setError(generationError instanceof Error ? generationError.message : "Flashcard generation failed");
     } finally {
       setIsGenerating(false);
     }
   }
 
+  async function saveDraftDeck() {
+    if (!draftDeck) {
+      return;
+    }
+
+    setError(null);
+    setIsSaving(true);
+    try {
+      const payload = await readJsonResponse<{ deck: FlashcardDeck }>(
+        await fetch("/api/flashcards", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            mode: "save",
+            title: draftDeck.title,
+            sourceNoteIds: draftDeck.sourceNoteIds,
+            cards: draftDeck.cards,
+          }),
+        }),
+      );
+
+      setDecks((current) => [payload.deck, ...current]);
+      setSelectedNoteIds([]);
+      setDraftDeck(null);
+      setCreateStep("context");
+      openReview(payload.deck.id);
+    } catch (saveError) {
+      setError(saveError instanceof Error ? saveError.message : "Flashcard deck save failed");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function saveEditedDeck() {
+    if (!editingDeck) {
+      return;
+    }
+
+    setError(null);
+    setIsSaving(true);
+    try {
+      const payload = await readJsonResponse<{ deck: FlashcardDeck }>(
+        await fetch("/api/flashcards", {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            deckId: editingDeck.id,
+            title: editingDeck.title,
+            sourceNoteIds: editingDeck.sourceNoteIds,
+            cards: editingDeck.cards,
+          }),
+        }),
+      );
+
+      setDecks((current) => current.map((deck) => (deck.id === payload.deck.id ? payload.deck : deck)));
+      setEditingDeck(null);
+      openReview(payload.deck.id);
+    } catch (saveError) {
+      setError(saveError instanceof Error ? saveError.message : "Flashcard deck update failed");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function deleteDeck(deckId: string) {
+    if (!window.confirm("Delete this flashcard deck?")) {
+      return;
+    }
+
+    setError(null);
+    setDeletingDeckId(deckId);
+    try {
+      await readJsonResponse<{ deletedDeckId: string }>(
+        await fetch(`/api/flashcards?deckId=${encodeURIComponent(deckId)}`, {
+          method: "DELETE",
+        }),
+      );
+
+      setDecks((current) => current.filter((deck) => deck.id !== deckId));
+      if (activeDeckId === deckId) {
+        setActiveDeckId("");
+        setActiveCardIndex(0);
+      }
+      openLibrary();
+    } catch (deleteError) {
+      setError(deleteError instanceof Error ? deleteError.message : "Flashcard deck delete failed");
+    } finally {
+      setDeletingDeckId(null);
+    }
+  }
+
   return (
-    <main className="flex h-full flex-col gap-4">
+    <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
+      <PageHeader
+        eyebrow="Flashcards"
+        title={view === "library" ? "My Flashcards" : "Flashcards"}
+        description="Focused deck library, generation queue, and card editor."
+      />
+
       {error ? (
-        <div className="shrink-0 rounded-lg border border-red-200 bg-danger-soft px-4 py-3 text-sm text-danger dark:border-red-950/70">
+        <div className="rounded-lg border border-red-200 bg-danger-soft px-4 py-3 text-sm text-danger dark:border-red-950/70">
           {error}
         </div>
       ) : null}
 
-      <div className="grid min-h-0 flex-1 gap-6 lg:grid-cols-[380px_minmax(0,1fr)]">
-        <Card className="flex min-h-0 flex-col overflow-hidden">
-          <CardHeader>
-            <CardTitle>Create deck</CardTitle>
-            <CardDescription>
-              Select notes with embeddings and choose how many cards to
-              generate.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="min-h-0 flex-1 space-y-6 overflow-y-auto">
-            <section className="space-y-3">
-              <div className="flex items-center justify-between gap-3">
-                <h2 className="text-sm font-medium text-foreground">Notes</h2>
-                <Badge variant="outline">
-                  {selectedNoteIds.length} selected
-                </Badge>
-              </div>
-              <div className="max-h-72 space-y-2 overflow-auto pr-1">
-                {notes.length === 0 ? (
-                  <p className="rounded-lg border border-border bg-surface-muted px-3 py-2 text-sm text-muted-foreground">
-                    Create or upload notes first.
-                  </p>
-                ) : (
-                  notes.map((note) => (
-                    <label
-                      key={note.id}
-                      className={cx(
-                        "flex cursor-pointer items-start gap-3 rounded-lg border border-border bg-surface px-3 py-3 text-sm transition",
-                        note.hasEmbedding
-                          ? "hover:border-border-strong hover:bg-surface-muted"
-                          : "cursor-not-allowed opacity-60",
-                      )}
-                    >
-                      <input
-                        type="checkbox"
-                        className="mt-1 size-4 accent-[var(--accent)]"
-                        checked={selectedNoteIds.includes(note.id)}
-                        disabled={!note.hasEmbedding || isGenerating}
-                        onChange={() => toggleNote(note.id)}
-                      />
-                      <span className="min-w-0 flex-1">
-                        <span className="block truncate font-medium text-foreground">
-                          {note.title}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                          {note.hasEmbedding
-                            ? "Embedding ready"
-                            : "No embedding stored"}
-                        </span>
-                      </span>
-                    </label>
-                  ))
-                )}
-              </div>
-            </section>
-
-            <label className="space-y-2 text-sm font-medium text-foreground">
-              Cards
-              <Input
-                type="number"
-                min={4}
-                max={40}
-                value={cardCount}
-                disabled={isGenerating}
-                onChange={(event) => setCardCount(Number(event.target.value))}
-              />
-            </label>
-
-            <Button
-              type="button"
-              className="w-full"
-              disabled={!canGenerate}
-              leadingIcon={
-                isGenerating ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <Play className="size-4" />
-                )
-              }
-              onClick={createDeck}
-            >
-              Generate deck
+      {view === "library" ? (
+        <div className="space-y-6">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="outline">{decks.length} decks</Badge>
+              <Badge variant="outline">
+                {decks.reduce((total, deck) => total + deck.cards.length, 0)} cards
+              </Badge>
+            </div>
+            <Button type="button" leadingIcon={<Plus className="size-4" />} onClick={openCreate}>
+              Create flashcards
             </Button>
+          </div>
 
-            <section className="space-y-3">
-              <h2 className="text-sm font-medium text-foreground">
-                Saved decks
-              </h2>
-              <div className="space-y-2">
-                {decks.length === 0 ? (
-                  <p className="rounded-lg border border-border bg-surface-muted px-3 py-2 text-sm text-muted-foreground">
-                    Generated decks will appear here.
+          {decks.length === 0 ? (
+            <Card className="border-dashed">
+              <CardContent className="flex min-h-80 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
+                <Brain className="size-10 text-muted-foreground" />
+                <div className="space-y-1">
+                  <h2 className="text-base font-semibold text-foreground">No flashcard decks</h2>
+                  <p className="max-w-md text-sm leading-6 text-muted-foreground">
+                    Saved decks appear here.
                   </p>
-                ) : (
-                  decks.map((deck) => (
-                    <button
-                      key={deck.id}
-                      type="button"
-                      className={cx(
-                        "flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-3 text-left text-sm transition",
-                        activeDeck?.id === deck.id
-                          ? "border-accent bg-accent-soft text-accent"
-                          : "border-border bg-surface text-foreground hover:bg-surface-muted",
-                      )}
-                      onClick={() => selectDeck(deck.id)}
-                    >
-                      <span className="min-w-0">
-                        <span className="block truncate font-medium">
-                          {deck.title}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                          {deck.cardCount} cards
-                        </span>
-                      </span>
-                      <Layers3 className="size-4 shrink-0" />
-                    </button>
-                  ))
-                )}
-              </div>
-            </section>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+              {decks.map((deck) => (
+                <Card key={deck.id}>
+                  <CardHeader>
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 space-y-2">
+                        <CardTitle className="truncate">{deck.title}</CardTitle>
+                        <CardDescription>
+                          {deck.cards.length} cards - Updated {formatDeckDate(deck.updatedAt)}
+                        </CardDescription>
+                      </div>
+                      <Layers3 className="size-5 shrink-0 text-muted-foreground" />
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="flex flex-wrap gap-2">
+                      {deck.sourceNoteIds.length > 0 ? <Badge variant="accent">Generated</Badge> : <Badge>Manual</Badge>}
+                      <Badge variant="outline">Private</Badge>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      <Button type="button" size="sm" onClick={() => openReview(deck.id)}>
+                        Review
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        leadingIcon={<Edit3 className="size-4" />}
+                        onClick={() => openEdit(deck)}
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="destructive"
+                        size="sm"
+                        disabled={deletingDeckId === deck.id}
+                        leadingIcon={
+                          deletingDeckId === deck.id ? (
+                            <Loader2 className="size-4 animate-spin" />
+                          ) : (
+                            <Trash2 className="size-4" />
+                          )
+                        }
+                        onClick={() => deleteDeck(deck.id)}
+                      >
+                        Delete
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      {view === "create" ? (
+        <Card>
+          <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-2">
+              <CardTitle>{createStep === "context" ? "Create Flashcards" : "Preview Deck"}</CardTitle>
+              <CardDescription>
+                {createStep === "context" ? "Choose note context." : "Edit before saving."}
+              </CardDescription>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Badge variant={createStep === "context" ? "accent" : "outline"}>Context</Badge>
+              <Badge variant={createStep === "preview" ? "accent" : "outline"}>Preview</Badge>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {createStep === "context" ? (
+              <>
+                <section className="space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <h2 className="text-sm font-medium text-foreground">Notes</h2>
+                    <Badge variant="outline">{selectedNoteIds.length} selected</Badge>
+                  </div>
+                  <div className="grid max-h-[28rem] gap-2 overflow-auto pr-1 md:grid-cols-2">
+                    {notes.length === 0 ? (
+                      <p className="rounded-lg border border-border bg-surface-muted px-3 py-2 text-sm text-muted-foreground">
+                        No notes yet.
+                      </p>
+                    ) : (
+                      notes.map((note) => (
+                        <label
+                          key={note.id}
+                          className={cx(
+                            "flex cursor-pointer items-start gap-3 rounded-lg border border-border bg-surface px-3 py-3 text-sm transition",
+                            note.hasEmbedding
+                              ? "hover:border-border-strong hover:bg-surface-muted"
+                              : "cursor-not-allowed opacity-60",
+                          )}
+                        >
+                          <input
+                            type="checkbox"
+                            className="mt-1 size-4 accent-[var(--accent)]"
+                            checked={selectedNoteIds.includes(note.id)}
+                            disabled={!note.hasEmbedding || isGenerating}
+                            onChange={() => toggleNote(note.id)}
+                          />
+                          <span className="min-w-0 flex-1">
+                            <span className="block truncate font-medium text-foreground">{note.title}</span>
+                            <span className="text-xs text-muted-foreground">
+                              {note.hasEmbedding ? "Embedding ready" : "No embedding"}
+                            </span>
+                          </span>
+                        </label>
+                      ))
+                    )}
+                  </div>
+                </section>
+
+                <label className="max-w-xs space-y-2 text-sm font-medium text-foreground">
+                  Cards
+                  <Input
+                    type="number"
+                    min={4}
+                    max={40}
+                    value={cardCount}
+                    disabled={isGenerating}
+                    onChange={(event) => setCardCount(Number(event.target.value))}
+                  />
+                </label>
+
+                <div className="flex flex-wrap gap-3">
+                  <Button
+                    type="button"
+                    disabled={!canGenerate}
+                    leadingIcon={
+                      isGenerating ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />
+                    }
+                    onClick={generatePreview}
+                  >
+                    Generate preview
+                  </Button>
+                  <Button type="button" variant="outline" disabled={isGenerating} onClick={openLibrary}>
+                    Cancel
+                  </Button>
+                </div>
+              </>
+            ) : null}
+
+            {createStep === "preview" && draftDeck ? (
+              <>
+                <DeckEditor deck={draftDeck} disabled={isSaving} onChange={setDraftDeck} />
+                <div className="flex flex-wrap gap-3">
+                  <Button
+                    type="button"
+                    disabled={!canSaveDraft || isSaving}
+                    leadingIcon={isSaving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    onClick={saveDraftDeck}
+                  >
+                    Save deck
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={isSaving}
+                    leadingIcon={<ChevronLeft className="size-4" />}
+                    onClick={() => setCreateStep("context")}
+                  >
+                    Back
+                  </Button>
+                  <Button type="button" variant="ghost" disabled={isSaving} onClick={openLibrary}>
+                    Cancel
+                  </Button>
+                </div>
+              </>
+            ) : null}
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {view === "edit" && editingDeck ? (
+        <Card>
+          <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-2">
+              <CardTitle>Edit Flashcards</CardTitle>
+              <CardDescription>Deck name, card fronts, backs, and tags.</CardDescription>
+            </div>
+            <Badge variant="outline">{editingDeck.cards.length} cards</Badge>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <DeckEditor deck={editingDeck} disabled={isSaving} onChange={setEditingDeck} />
+            <div className="flex flex-wrap gap-3">
+              <Button
+                type="button"
+                disabled={!canSaveEdit || isSaving}
+                leadingIcon={isSaving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
+                onClick={saveEditedDeck}
+              >
+                Save changes
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={isSaving}
+                leadingIcon={<X className="size-4" />}
+                onClick={openLibrary}
+              >
+                Cancel
+              </Button>
+            </div>
           </CardContent>
         </Card>
+      ) : null}
 
+      {view === "review" ? (
         <Card>
           <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
             <div className="space-y-2">
               <CardTitle>{activeDeck?.title ?? "Deck workspace"}</CardTitle>
               <CardDescription>
-                {activeDeck
-                  ? `${activeCardIndex + 1}/${activeDeck.cards.length} cards`
-                  : "Generate a deck to begin."}
+                {activeDeck ? `${activeCardIndex + 1}/${activeDeck.cards.length} cards` : "No deck selected."}
               </CardDescription>
             </div>
-            {activeDeck ? (
-              <Badge variant="outline">{activeDeck.cardCount} cards</Badge>
-            ) : null}
+            <div className="flex flex-wrap gap-2">
+              {activeDeck ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  leadingIcon={<Edit3 className="size-4" />}
+                  onClick={() => openEdit(activeDeck)}
+                >
+                  Edit
+                </Button>
+              ) : null}
+              <Button type="button" variant="ghost" size="sm" onClick={openLibrary}>
+                My Flashcards
+              </Button>
+            </div>
           </CardHeader>
           <CardContent>
-            {isGenerating && !activeDeck ? (
-              <div className="flex min-h-96 items-center justify-center gap-3 text-sm text-muted-foreground">
-                <Loader2 className="size-5 animate-spin" />
-                Generating flashcards with Gemini
-              </div>
-            ) : activeCard ? (
+            {activeCard ? (
               <div className="space-y-5">
                 <button
                   type="button"
@@ -318,10 +716,8 @@ export function FlashcardsClient({
                   onClick={() => setShowBack((value) => !value)}
                 >
                   <div className="flex items-center justify-between gap-3">
-                    <Badge variant="accent">
-                      {showBack ? "Back" : "Front"}
-                    </Badge>
-                    <Badge variant="outline">Tap to flip</Badge>
+                    <Badge variant="accent">{showBack ? "Back" : "Front"}</Badge>
+                    <Badge variant="outline">Flip</Badge>
                   </div>
                   <div className="mx-auto flex w-full max-w-3xl flex-1 items-center justify-center py-8">
                     <MarkdownText
@@ -330,6 +726,11 @@ export function FlashcardsClient({
                     />
                   </div>
                   <div className="flex flex-wrap gap-2">
+                    {activeCard.tags?.map((tag) => (
+                      <Badge key={`${activeCard.id}-${tag}`} variant="accent">
+                        {tag}
+                      </Badge>
+                    ))}
                     {activeCard.sourceNoteTitles.map((title) => (
                       <Badge key={title} variant="neutral">
                         {title}
@@ -358,10 +759,7 @@ export function FlashcardsClient({
                   </Button>
                   <Button
                     type="button"
-                    disabled={
-                      !activeDeck ||
-                      activeCardIndex >= activeDeck.cards.length - 1
-                    }
+                    disabled={!activeDeck || activeCardIndex >= activeDeck.cards.length - 1}
                     leadingIcon={<ChevronRight className="size-4" />}
                     onClick={() => goToCard(activeCardIndex + 1)}
                   >
@@ -373,19 +771,16 @@ export function FlashcardsClient({
               <div className="flex min-h-96 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-surface-muted px-6 text-center">
                 <Brain className="size-10 text-muted-foreground" />
                 <div className="space-y-1">
-                  <h2 className="text-base font-semibold text-foreground">
-                    No deck selected
-                  </h2>
+                  <h2 className="text-base font-semibold text-foreground">No deck selected</h2>
                   <p className="max-w-md text-sm leading-6 text-muted-foreground">
-                    Select notes with embeddings and generate a deck to review
-                    front/back flashcards.
+                    Choose a saved deck.
                   </p>
                 </div>
               </div>
             )}
           </CardContent>
         </Card>
-      </div>
+      ) : null}
     </main>
   );
 }
diff --git a/components/note-editor/code-block-view.tsx b/components/note-editor/code-block-view.tsx
index 94b2411..93d627c 100644
--- a/components/note-editor/code-block-view.tsx
+++ b/components/note-editor/code-block-view.tsx
@@ -16,7 +16,7 @@ export function CodeBlockView({ data }: CodeBlockViewProps) {
           dangerouslySetInnerHTML={{
             __html:
               data.code.trim().length > 0
-                ? highlightCode(data.code)
+                ? highlightCode(data.code).html
                 : "<span class=\"note-code-block__placeholder\">No code yet.</span>",
           }}
         />
diff --git a/components/note-editor/note-renderer.tsx b/components/note-editor/note-renderer.tsx
index 7119f3e..811b6b1 100644
--- a/components/note-editor/note-renderer.tsx
+++ b/components/note-editor/note-renderer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Children, isValidElement } from "react";
+import { isValidElement } from "react";
 import type { ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
@@ -14,24 +14,41 @@ function omitNode<T extends { node?: unknown }>(props: T): Omit<T, "node"> {
   return rest;
 }
 
-function extractCode(children: ReactNode) {
-  if (!isValidElement<{ children?: ReactNode }>(children)) {
-    return "";
+function getTextContent(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
   }
 
-  const codeChildren = children.props.children;
+  if (Array.isArray(node)) {
+    return node.map(getTextContent).join("");
+  }
 
-  if (typeof codeChildren === "string") {
-    return codeChildren.replace(/\n$/, "");
+  if (isValidElement<{ children?: ReactNode }>(node)) {
+    return getTextContent(node.props.children);
   }
 
-  if (Array.isArray(codeChildren)) {
-    return codeChildren.join("").replace(/\n$/, "");
+  if (node && typeof node === "object") {
+    if ("value" in node) {
+      const value = (node as { value?: unknown }).value;
+      return typeof value === "string" || typeof value === "number" ? String(value) : getTextContent(value as ReactNode);
+    }
+
+    if ("children" in node) {
+      return getTextContent((node as { children?: ReactNode }).children);
+    }
   }
 
   return "";
 }
 
+function extractCode(children: ReactNode) {
+  return getTextContent(children).replace(/\n$/, "");
+}
+
+function cleanMarkdownText(value: string) {
+  return value === "[object Object]" ? "" : value;
+}
+
 export function NoteRenderer({ markdown }: { markdown: string }) {
   if (markdown.trim().length === 0) {
     return (
@@ -63,22 +80,26 @@ export function NoteRenderer({ markdown }: { markdown: string }) {
             );
           },
           pre: (props) => {
-            const { children } = omitNode(props);
-            return <CodeBlockView data={{ code: extractCode(Children.only(children)) }} />;
+            const { children, node } = props;
+            const code = cleanMarkdownText(extractCode(children)) || cleanMarkdownText(getTextContent(node as ReactNode));
+            return <CodeBlockView data={{ code }} />;
           },
           code: (props) => {
-            const { children, className, ...rest } = omitNode(props);
+            const { children, className, node, ...rest } = props;
+            const codeText =
+              cleanMarkdownText(getTextContent(children)) ||
+              cleanMarkdownText(getTextContent(node as ReactNode));
             if (className) {
               return (
                 <code className={className} {...rest}>
-                  {children}
+                  {codeText}
                 </code>
               );
             }
 
             return (
               <code className="rounded bg-zinc-100 px-1 py-0.5 text-[0.9em] text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">
-                {children}
+                {codeText}
               </code>
             );
           },
diff --git a/lib/flashcards/decks.ts b/lib/flashcards/decks.ts
new file mode 100644
index 0000000..71a735c
--- /dev/null
+++ b/lib/flashcards/decks.ts
@@ -0,0 +1,71 @@
+import { z } from "zod";
+import type { FlashcardDeck, FlashcardItem } from "@/lib/flashcards/types";
+
+export const flashcardItemSchema = z.object({
+  id: z.string().trim().min(1),
+  front: z.string().trim().min(1).max(2_000),
+  back: z.string().trim().min(1).max(4_000),
+  sourceNoteTitles: z.array(z.string().trim().min(1)).max(12).default([]),
+  tags: z.array(z.string().trim().min(1).max(40)).max(8).default([]),
+});
+
+export const editableDeckSchema = z.object({
+  title: z.string().trim().min(1).max(120),
+  sourceNoteIds: z.array(z.string().trim().min(1)).max(12).default([]),
+  cards: z.array(flashcardItemSchema).min(1).max(80),
+});
+
+export type EditableFlashcardDeck = z.infer<typeof editableDeckSchema>;
+
+export type FlashcardRow = {
+  id: string;
+  title: string;
+  sourceNoteIds: string[];
+  cards: unknown;
+  cardCount: number;
+  createdAt: Date;
+  updatedAt: Date;
+};
+
+export function normalizeCards(value: unknown): FlashcardItem[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.flatMap((item) => {
+    const parsed = flashcardItemSchema.safeParse(item);
+    return parsed.success ? [parsed.data] : [];
+  });
+}
+
+export function rowToFlashcardDeck(row: FlashcardRow): FlashcardDeck {
+  const cards = normalizeCards(row.cards);
+
+  return {
+    id: row.id,
+    title: row.title,
+    sourceNoteIds: row.sourceNoteIds,
+    cards,
+    cardCount: cards.length || row.cardCount,
+    createdAt: row.createdAt.toISOString(),
+    updatedAt: row.updatedAt.toISOString(),
+  };
+}
+
+export function createDraftFlashcardDeck(params: {
+  title: string;
+  sourceNoteIds: string[];
+  cards: FlashcardItem[];
+}): FlashcardDeck {
+  const now = new Date().toISOString();
+
+  return {
+    id: `draft-${crypto.randomUUID()}`,
+    title: params.title,
+    sourceNoteIds: params.sourceNoteIds,
+    cards: params.cards,
+    cardCount: params.cards.length,
+    createdAt: now,
+    updatedAt: now,
+  };
+}
diff --git a/lib/flashcards/types.ts b/lib/flashcards/types.ts
index 5cf6686..eb04f5d 100644
--- a/lib/flashcards/types.ts
+++ b/lib/flashcards/types.ts
@@ -3,6 +3,7 @@ export type FlashcardItem = {
   front: string;
   back: string;
   sourceNoteTitles: string[];
+  tags?: string[];
 };
 
 export type FlashcardDeck = {

From 73edf4f9fe1634611bf1688476be6a7ebbedb4e3 Mon Sep 17 00:00:00 2001
From: Ali <abenrami06@gmail.com>
Date: Fri, 29 May 2026 18:00:11 -0500
Subject: [PATCH 2/5] Expand flashcards empty state

---
 app/flashcards/flashcards-client.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/flashcards/flashcards-client.tsx b/app/flashcards/flashcards-client.tsx
index 83495d1..89d6eaa 100644
--- a/app/flashcards/flashcards-client.tsx
+++ b/app/flashcards/flashcards-client.tsx
@@ -432,7 +432,7 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
   }
 
   return (
-    <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
+    <main className="mx-auto flex min-h-full w-full max-w-7xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
       <PageHeader
         eyebrow="Flashcards"
         title={view === "library" ? "My Flashcards" : "Flashcards"}
@@ -446,7 +446,7 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
       ) : null}
 
       {view === "library" ? (
-        <div className="space-y-6">
+        <div className="flex flex-1 flex-col gap-6">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div className="flex flex-wrap gap-2">
               <Badge variant="outline">{decks.length} decks</Badge>
@@ -460,8 +460,8 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
           </div>
 
           {decks.length === 0 ? (
-            <Card className="border-dashed">
-              <CardContent className="flex min-h-80 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
+            <Card className="flex min-h-[28rem] flex-1 border-dashed">
+              <CardContent className="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
                 <Brain className="size-10 text-muted-foreground" />
                 <div className="space-y-1">
                   <h2 className="text-base font-semibold text-foreground">No flashcard decks</h2>

From 000dfac20782351d8ecbf8e32203b0579828ee7d Mon Sep 17 00:00:00 2001
From: Ali <abenrami06@gmail.com>
Date: Fri, 29 May 2026 18:04:57 -0500
Subject: [PATCH 3/5] Show study menu in collapsed sidebar

---
 components/shell/app-sidebar.test.tsx |  42 +++++++++++
 components/shell/app-sidebar.tsx      | 100 ++++++++++++++++++++++++--
 2 files changed, 135 insertions(+), 7 deletions(-)
 create mode 100644 components/shell/app-sidebar.test.tsx

diff --git a/components/shell/app-sidebar.test.tsx b/components/shell/app-sidebar.test.tsx
new file mode 100644
index 0000000..cd9c7db
--- /dev/null
+++ b/components/shell/app-sidebar.test.tsx
@@ -0,0 +1,42 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AppSidebar } from "@/components/shell/app-sidebar";
+import { studyNavItems } from "@/components/shell/navigation";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+    refresh: vi.fn(),
+  }),
+}));
+
+describe("AppSidebar", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("shows every study destination from the collapsed Study button", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AppSidebar
+        pathname="/flashcards"
+        displayName="Test User"
+        behavior="manual"
+        collapsed
+        onToggleCollapsed={vi.fn()}
+        onHoverChange={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Study" }));
+
+    for (const item of studyNavItems) {
+      expect(screen.getByRole("link", { name: item.label })).toHaveAttribute(
+        "href",
+        item.href,
+      );
+    }
+  });
+});
diff --git a/components/shell/app-sidebar.tsx b/components/shell/app-sidebar.tsx
index e0b41bf..148dc66 100644
--- a/components/shell/app-sidebar.tsx
+++ b/components/shell/app-sidebar.tsx
@@ -11,6 +11,7 @@ import type { SidebarBehavior } from "./sidebar-preference";
 
 type TooltipState = { label: string; y: number } | null;
 type MenuPos = { bottom: number; left: number } | null;
+type StudyMenuPos = { top: number; left: number } | null;
 
 type AppSidebarProps = {
   pathname: string;
@@ -62,24 +63,41 @@ export function AppSidebar({
   );
   const [tooltip, setTooltip] = useState<TooltipState>(null);
   const [menuPos, setMenuPos] = useState<MenuPos>(null);
+  const [studyMenuPos, setStudyMenuPos] = useState<StudyMenuPos>(null);
+  const studyButtonRef = useRef<HTMLButtonElement>(null);
+  const studyMenuRef = useRef<HTMLDivElement>(null);
   const profileRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
 
   useEffect(() => {
-    if (!menuPos) return;
+    if (!menuPos && !studyMenuPos) return;
     function handleClick(e: MouseEvent) {
+      const target = e.target as Node;
       if (
+        menuPos &&
         menuRef.current &&
-        !menuRef.current.contains(e.target as Node) &&
+        !menuRef.current.contains(target) &&
         profileRef.current &&
-        !profileRef.current.contains(e.target as Node)
+        !profileRef.current.contains(target)
       ) {
         setMenuPos(null);
       }
+      if (
+        studyMenuPos &&
+        studyMenuRef.current &&
+        !studyMenuRef.current.contains(target) &&
+        studyButtonRef.current &&
+        !studyButtonRef.current.contains(target)
+      ) {
+        setStudyMenuPos(null);
+      }
     }
     function handleKey(e: KeyboardEvent) {
-      if (e.key === "Escape") setMenuPos(null);
+      if (e.key === "Escape") {
+        setMenuPos(null);
+        setStudyMenuPos(null);
+      }
     }
     document.addEventListener("mousedown", handleClick);
     document.addEventListener("keydown", handleKey);
@@ -87,7 +105,7 @@ export function AppSidebar({
       document.removeEventListener("mousedown", handleClick);
       document.removeEventListener("keydown", handleKey);
     };
-  }, [menuPos]);
+  }, [menuPos, studyMenuPos]);
 
   function toggleMenu() {
     if (menuPos) {
@@ -102,6 +120,27 @@ export function AppSidebar({
     });
   }
 
+  function toggleStudyMenu() {
+    if (!collapsed) {
+      setStudyMenuPos(null);
+      setStudyOpen((current) => !current);
+      return;
+    }
+
+    if (studyMenuPos) {
+      setStudyMenuPos(null);
+      return;
+    }
+
+    const rect = studyButtonRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    hideTooltip();
+    setStudyMenuPos({
+      top: Math.min(Math.max(12, rect.top), window.innerHeight - 332),
+      left: rect.right + 8,
+    });
+  }
+
   async function handleSignOut() {
     setMenuPos(null);
     await authClient.signOut();
@@ -271,9 +310,10 @@ export function AppSidebar({
 
         <div className="pt-1.5">
           <button
+            ref={studyButtonRef}
             type="button"
-            onClick={() => setStudyOpen((current) => !current)}
-            aria-expanded={studyOpen}
+            onClick={toggleStudyMenu}
+            aria-expanded={collapsed ? Boolean(studyMenuPos) : studyOpen}
             aria-label="Study"
             onMouseEnter={(e) => showTooltip(e, "Study")}
             onMouseLeave={hideTooltip}
@@ -371,6 +411,52 @@ export function AppSidebar({
         </button>
       </div>
 
+      {collapsed && studyMenuPos ? (
+        <div
+          ref={studyMenuRef}
+          style={{ top: studyMenuPos.top, left: studyMenuPos.left }}
+          className="fixed z-50 w-56 overflow-hidden rounded-xl border border-border bg-surface shadow-xl"
+        >
+          <div className="flex items-center gap-2.5 px-3.5 py-3">
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-border bg-surface-muted text-accent">
+              <NavIconGlyph name="study" />
+            </span>
+            <div className="min-w-0">
+              <p className="truncate text-[0.83rem] font-semibold text-foreground">
+                Study
+              </p>
+              <p className="truncate text-[0.7rem] text-muted-foreground">
+                Tools
+              </p>
+            </div>
+          </div>
+
+          <div className="border-t border-border" />
+
+          <div className="py-1">
+            {studyNavItems.map((item) => {
+              const active = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  aria-current={active ? "page" : undefined}
+                  onClick={() => setStudyMenuPos(null)}
+                  className={cx(
+                    "block px-3.5 py-2.5 text-[0.83rem] transition hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35",
+                    active
+                      ? "bg-accent-soft font-medium text-accent"
+                      : "text-foreground",
+                  )}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
       {menuPos ? (
         <div
           ref={menuRef}

From 39825ca2a68dcfeed06f69e0392fc846f63f9c6c Mon Sep 17 00:00:00 2001
From: Ali <abenrami06@gmail.com>
Date: Fri, 29 May 2026 19:14:46 -0500
Subject: [PATCH 4/5] fixed quizzes pading

---
 app/flashcards/flashcards-client.tsx | 266 +++++++--
 app/quizzes/quizzes-client.tsx       | 837 +++++++++++++++++++++------
 2 files changed, 885 insertions(+), 218 deletions(-)

diff --git a/app/flashcards/flashcards-client.tsx b/app/flashcards/flashcards-client.tsx
index 89d6eaa..b778dcb 100644
--- a/app/flashcards/flashcards-client.tsx
+++ b/app/flashcards/flashcards-client.tsx
@@ -21,7 +21,13 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input, Textarea } from "@/components/ui/input";
 import { PageHeader } from "@/components/ui/page-header";
 import { cx } from "@/lib/utils";
@@ -42,7 +48,9 @@ type FlashcardView = "library" | "create" | "review" | "edit";
 type CreateStep = "context" | "preview";
 
 async function readJsonResponse<T>(response: Response): Promise<T> {
-  const payload = (await response.json().catch(() => null)) as T & { error?: string };
+  const payload = (await response.json().catch(() => null)) as T & {
+    error?: string;
+  };
   if (!response.ok) {
     throw new Error(payload?.error || "Request failed");
   }
@@ -102,7 +110,13 @@ function parseTags(value: string) {
     .slice(0, 8);
 }
 
-function MarkdownText({ markdown, className }: { markdown: string; className?: string }) {
+function MarkdownText({
+  markdown,
+  className,
+}: {
+  markdown: string;
+  className?: string;
+}) {
   return (
     <div className={cx("min-w-0 space-y-2 text-foreground", className)}>
       <ReactMarkdown
@@ -110,8 +124,12 @@ function MarkdownText({ markdown, className }: { markdown: string; className?: s
         remarkPlugins={[remarkGfm, remarkMath]}
         components={{
           p: ({ children }) => <p>{children}</p>,
-          ul: ({ children }) => <ul className="ml-5 list-disc space-y-1">{children}</ul>,
-          ol: ({ children }) => <ol className="ml-5 list-decimal space-y-1">{children}</ol>,
+          ul: ({ children }) => (
+            <ul className="ml-5 list-disc space-y-1">{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="ml-5 list-decimal space-y-1">{children}</ol>
+          ),
           code: ({ children }) => (
             <code className="rounded bg-surface-elevated px-1 py-0.5 font-mono text-[0.92em]">
               {children}
@@ -142,13 +160,17 @@ function DeckEditor({
     onChange(
       withCardCount({
         ...deck,
-        cards: deck.cards.map((card, cardIndex) => (cardIndex === index ? { ...card, ...patch } : card)),
+        cards: deck.cards.map((card, cardIndex) =>
+          cardIndex === index ? { ...card, ...patch } : card,
+        ),
       }),
     );
   }
 
   function addCard() {
-    onChange(withCardCount({ ...deck, cards: [...deck.cards, createBlankCard()] }));
+    onChange(
+      withCardCount({ ...deck, cards: [...deck.cards, createBlankCard()] }),
+    );
   }
 
   function removeCard(index: number) {
@@ -156,14 +178,23 @@ function DeckEditor({
       return;
     }
 
-    onChange(withCardCount({ ...deck, cards: deck.cards.filter((_, cardIndex) => cardIndex !== index) }));
+    onChange(
+      withCardCount({
+        ...deck,
+        cards: deck.cards.filter((_, cardIndex) => cardIndex !== index),
+      }),
+    );
   }
 
   return (
     <div className="space-y-5">
       <label className="space-y-2 text-sm font-medium text-foreground">
         Deck name
-        <Input value={deck.title} disabled={disabled} onChange={(event) => updateTitle(event.target.value)} />
+        <Input
+          value={deck.title}
+          disabled={disabled}
+          onChange={(event) => updateTitle(event.target.value)}
+        />
       </label>
 
       <div className="space-y-4">
@@ -208,7 +239,9 @@ function DeckEditor({
                     className="min-h-32 resize-y"
                     value={card.front}
                     disabled={disabled}
-                    onChange={(event) => updateCard(index, { front: event.target.value })}
+                    onChange={(event) =>
+                      updateCard(index, { front: event.target.value })
+                    }
                   />
                 </label>
                 <label className="space-y-2 text-sm font-medium text-foreground">
@@ -217,7 +250,9 @@ function DeckEditor({
                     className="min-h-32 resize-y"
                     value={card.back}
                     disabled={disabled}
-                    onChange={(event) => updateCard(index, { back: event.target.value })}
+                    onChange={(event) =>
+                      updateCard(index, { back: event.target.value })
+                    }
                   />
                 </label>
               </div>
@@ -227,7 +262,9 @@ function DeckEditor({
                 <Input
                   value={(card.tags ?? []).join(", ")}
                   disabled={disabled}
-                  onChange={(event) => updateCard(index, { tags: parseTags(event.target.value) })}
+                  onChange={(event) =>
+                    updateCard(index, { tags: parseTags(event.target.value) })
+                  }
                 />
               </label>
 
@@ -248,8 +285,14 @@ function DeckEditor({
   );
 }
 
-export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps) {
-  const embeddedNotes = useMemo(() => notes.filter((note) => note.hasEmbedding), [notes]);
+export function FlashcardsClient({
+  notes,
+  initialDecks,
+}: FlashcardsClientProps) {
+  const embeddedNotes = useMemo(
+    () => notes.filter((note) => note.hasEmbedding),
+    [notes],
+  );
   const [view, setView] = useState<FlashcardView>("library");
   const [createStep, setCreateStep] = useState<CreateStep>("context");
   const [selectedNoteIds, setSelectedNoteIds] = useState<string[]>([]);
@@ -267,13 +310,22 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
 
   const activeDeck = decks.find((deck) => deck.id === activeDeckId) ?? decks[0];
   const activeCard = activeDeck?.cards[activeCardIndex];
-  const canGenerate = selectedNoteIds.length > 0 && embeddedNotes.length > 0 && !isGenerating;
-  const canSaveDraft = Boolean(draftDeck?.title.trim() && draftDeck.cards.every((card) => card.front.trim() && card.back.trim()));
-  const canSaveEdit = Boolean(editingDeck?.title.trim() && editingDeck.cards.every((card) => card.front.trim() && card.back.trim()));
+  const canGenerate =
+    selectedNoteIds.length > 0 && embeddedNotes.length > 0 && !isGenerating;
+  const canSaveDraft = Boolean(
+    draftDeck?.title.trim() &&
+    draftDeck.cards.every((card) => card.front.trim() && card.back.trim()),
+  );
+  const canSaveEdit = Boolean(
+    editingDeck?.title.trim() &&
+    editingDeck.cards.every((card) => card.front.trim() && card.back.trim()),
+  );
 
   function toggleNote(noteId: string) {
     setSelectedNoteIds((current) =>
-      current.includes(noteId) ? current.filter((id) => id !== noteId) : [...current, noteId],
+      current.includes(noteId)
+        ? current.filter((id) => id !== noteId)
+        : [...current, noteId],
     );
   }
 
@@ -311,7 +363,9 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
       return;
     }
 
-    setActiveCardIndex(Math.min(Math.max(index, 0), activeDeck.cards.length - 1));
+    setActiveCardIndex(
+      Math.min(Math.max(index, 0), activeDeck.cards.length - 1),
+    );
     setShowBack(false);
   }
 
@@ -334,7 +388,11 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
       setDraftDeck(cloneDeck(payload.deck));
       setCreateStep("preview");
     } catch (generationError) {
-      setError(generationError instanceof Error ? generationError.message : "Flashcard generation failed");
+      setError(
+        generationError instanceof Error
+          ? generationError.message
+          : "Flashcard generation failed",
+      );
     } finally {
       setIsGenerating(false);
     }
@@ -367,7 +425,11 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
       setCreateStep("context");
       openReview(payload.deck.id);
     } catch (saveError) {
-      setError(saveError instanceof Error ? saveError.message : "Flashcard deck save failed");
+      setError(
+        saveError instanceof Error
+          ? saveError.message
+          : "Flashcard deck save failed",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -394,11 +456,19 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
         }),
       );
 
-      setDecks((current) => current.map((deck) => (deck.id === payload.deck.id ? payload.deck : deck)));
+      setDecks((current) =>
+        current.map((deck) =>
+          deck.id === payload.deck.id ? payload.deck : deck,
+        ),
+      );
       setEditingDeck(null);
       openReview(payload.deck.id);
     } catch (saveError) {
-      setError(saveError instanceof Error ? saveError.message : "Flashcard deck update failed");
+      setError(
+        saveError instanceof Error
+          ? saveError.message
+          : "Flashcard deck update failed",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -425,14 +495,18 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
       }
       openLibrary();
     } catch (deleteError) {
-      setError(deleteError instanceof Error ? deleteError.message : "Flashcard deck delete failed");
+      setError(
+        deleteError instanceof Error
+          ? deleteError.message
+          : "Flashcard deck delete failed",
+      );
     } finally {
       setDeletingDeckId(null);
     }
   }
 
   return (
-    <main className="mx-auto flex min-h-full w-full max-w-7xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
+    <main className="mx-auto flex min-h-full w-full flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
       <PageHeader
         eyebrow="Flashcards"
         title={view === "library" ? "My Flashcards" : "Flashcards"}
@@ -451,10 +525,15 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
             <div className="flex flex-wrap gap-2">
               <Badge variant="outline">{decks.length} decks</Badge>
               <Badge variant="outline">
-                {decks.reduce((total, deck) => total + deck.cards.length, 0)} cards
+                {decks.reduce((total, deck) => total + deck.cards.length, 0)}{" "}
+                cards
               </Badge>
             </div>
-            <Button type="button" leadingIcon={<Plus className="size-4" />} onClick={openCreate}>
+            <Button
+              type="button"
+              leadingIcon={<Plus className="size-4" />}
+              onClick={openCreate}
+            >
               Create flashcards
             </Button>
           </div>
@@ -464,7 +543,9 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
               <CardContent className="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
                 <Brain className="size-10 text-muted-foreground" />
                 <div className="space-y-1">
-                  <h2 className="text-base font-semibold text-foreground">No flashcard decks</h2>
+                  <h2 className="text-base font-semibold text-foreground">
+                    No flashcard decks
+                  </h2>
                   <p className="max-w-md text-sm leading-6 text-muted-foreground">
                     Saved decks appear here.
                   </p>
@@ -480,7 +561,8 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                       <div className="min-w-0 space-y-2">
                         <CardTitle className="truncate">{deck.title}</CardTitle>
                         <CardDescription>
-                          {deck.cards.length} cards - Updated {formatDeckDate(deck.updatedAt)}
+                          {deck.cards.length} cards - Updated{" "}
+                          {formatDeckDate(deck.updatedAt)}
                         </CardDescription>
                       </div>
                       <Layers3 className="size-5 shrink-0 text-muted-foreground" />
@@ -488,11 +570,19 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="flex flex-wrap gap-2">
-                      {deck.sourceNoteIds.length > 0 ? <Badge variant="accent">Generated</Badge> : <Badge>Manual</Badge>}
+                      {deck.sourceNoteIds.length > 0 ? (
+                        <Badge variant="accent">Generated</Badge>
+                      ) : (
+                        <Badge>Manual</Badge>
+                      )}
                       <Badge variant="outline">Private</Badge>
                     </div>
                     <div className="flex flex-wrap gap-2">
-                      <Button type="button" size="sm" onClick={() => openReview(deck.id)}>
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={() => openReview(deck.id)}
+                      >
                         Review
                       </Button>
                       <Button
@@ -533,14 +623,24 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
         <Card>
           <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
             <div className="space-y-2">
-              <CardTitle>{createStep === "context" ? "Create Flashcards" : "Preview Deck"}</CardTitle>
+              <CardTitle>
+                {createStep === "context"
+                  ? "Create Flashcards"
+                  : "Preview Deck"}
+              </CardTitle>
               <CardDescription>
-                {createStep === "context" ? "Choose note context." : "Edit before saving."}
+                {createStep === "context"
+                  ? "Choose note context."
+                  : "Edit before saving."}
               </CardDescription>
             </div>
             <div className="flex flex-wrap gap-2">
-              <Badge variant={createStep === "context" ? "accent" : "outline"}>Context</Badge>
-              <Badge variant={createStep === "preview" ? "accent" : "outline"}>Preview</Badge>
+              <Badge variant={createStep === "context" ? "accent" : "outline"}>
+                Context
+              </Badge>
+              <Badge variant={createStep === "preview" ? "accent" : "outline"}>
+                Preview
+              </Badge>
             </div>
           </CardHeader>
           <CardContent className="space-y-6">
@@ -548,8 +648,12 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
               <>
                 <section className="space-y-3">
                   <div className="flex items-center justify-between gap-3">
-                    <h2 className="text-sm font-medium text-foreground">Notes</h2>
-                    <Badge variant="outline">{selectedNoteIds.length} selected</Badge>
+                    <h2 className="text-sm font-medium text-foreground">
+                      Notes
+                    </h2>
+                    <Badge variant="outline">
+                      {selectedNoteIds.length} selected
+                    </Badge>
                   </div>
                   <div className="grid max-h-[28rem] gap-2 overflow-auto pr-1 md:grid-cols-2">
                     {notes.length === 0 ? (
@@ -575,9 +679,13 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                             onChange={() => toggleNote(note.id)}
                           />
                           <span className="min-w-0 flex-1">
-                            <span className="block truncate font-medium text-foreground">{note.title}</span>
+                            <span className="block truncate font-medium text-foreground">
+                              {note.title}
+                            </span>
                             <span className="text-xs text-muted-foreground">
-                              {note.hasEmbedding ? "Embedding ready" : "No embedding"}
+                              {note.hasEmbedding
+                                ? "Embedding ready"
+                                : "No embedding"}
                             </span>
                           </span>
                         </label>
@@ -594,7 +702,9 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                     max={40}
                     value={cardCount}
                     disabled={isGenerating}
-                    onChange={(event) => setCardCount(Number(event.target.value))}
+                    onChange={(event) =>
+                      setCardCount(Number(event.target.value))
+                    }
                   />
                 </label>
 
@@ -603,13 +713,22 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                     type="button"
                     disabled={!canGenerate}
                     leadingIcon={
-                      isGenerating ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />
+                      isGenerating ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        <Check className="size-4" />
+                      )
                     }
                     onClick={generatePreview}
                   >
                     Generate preview
                   </Button>
-                  <Button type="button" variant="outline" disabled={isGenerating} onClick={openLibrary}>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={isGenerating}
+                    onClick={openLibrary}
+                  >
                     Cancel
                   </Button>
                 </div>
@@ -618,12 +737,22 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
 
             {createStep === "preview" && draftDeck ? (
               <>
-                <DeckEditor deck={draftDeck} disabled={isSaving} onChange={setDraftDeck} />
+                <DeckEditor
+                  deck={draftDeck}
+                  disabled={isSaving}
+                  onChange={setDraftDeck}
+                />
                 <div className="flex flex-wrap gap-3">
                   <Button
                     type="button"
                     disabled={!canSaveDraft || isSaving}
-                    leadingIcon={isSaving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    leadingIcon={
+                      isSaving ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        <Save className="size-4" />
+                      )
+                    }
                     onClick={saveDraftDeck}
                   >
                     Save deck
@@ -637,7 +766,12 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                   >
                     Back
                   </Button>
-                  <Button type="button" variant="ghost" disabled={isSaving} onClick={openLibrary}>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    disabled={isSaving}
+                    onClick={openLibrary}
+                  >
                     Cancel
                   </Button>
                 </div>
@@ -652,17 +786,29 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
           <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
             <div className="space-y-2">
               <CardTitle>Edit Flashcards</CardTitle>
-              <CardDescription>Deck name, card fronts, backs, and tags.</CardDescription>
+              <CardDescription>
+                Deck name, card fronts, backs, and tags.
+              </CardDescription>
             </div>
             <Badge variant="outline">{editingDeck.cards.length} cards</Badge>
           </CardHeader>
           <CardContent className="space-y-6">
-            <DeckEditor deck={editingDeck} disabled={isSaving} onChange={setEditingDeck} />
+            <DeckEditor
+              deck={editingDeck}
+              disabled={isSaving}
+              onChange={setEditingDeck}
+            />
             <div className="flex flex-wrap gap-3">
               <Button
                 type="button"
                 disabled={!canSaveEdit || isSaving}
-                leadingIcon={isSaving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
+                leadingIcon={
+                  isSaving ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <Save className="size-4" />
+                  )
+                }
                 onClick={saveEditedDeck}
               >
                 Save changes
@@ -687,7 +833,9 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
             <div className="space-y-2">
               <CardTitle>{activeDeck?.title ?? "Deck workspace"}</CardTitle>
               <CardDescription>
-                {activeDeck ? `${activeCardIndex + 1}/${activeDeck.cards.length} cards` : "No deck selected."}
+                {activeDeck
+                  ? `${activeCardIndex + 1}/${activeDeck.cards.length} cards`
+                  : "No deck selected."}
               </CardDescription>
             </div>
             <div className="flex flex-wrap gap-2">
@@ -702,7 +850,12 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                   Edit
                 </Button>
               ) : null}
-              <Button type="button" variant="ghost" size="sm" onClick={openLibrary}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={openLibrary}
+              >
                 My Flashcards
               </Button>
             </div>
@@ -716,7 +869,9 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                   onClick={() => setShowBack((value) => !value)}
                 >
                   <div className="flex items-center justify-between gap-3">
-                    <Badge variant="accent">{showBack ? "Back" : "Front"}</Badge>
+                    <Badge variant="accent">
+                      {showBack ? "Back" : "Front"}
+                    </Badge>
                     <Badge variant="outline">Flip</Badge>
                   </div>
                   <div className="mx-auto flex w-full max-w-3xl flex-1 items-center justify-center py-8">
@@ -759,7 +914,10 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
                   </Button>
                   <Button
                     type="button"
-                    disabled={!activeDeck || activeCardIndex >= activeDeck.cards.length - 1}
+                    disabled={
+                      !activeDeck ||
+                      activeCardIndex >= activeDeck.cards.length - 1
+                    }
                     leadingIcon={<ChevronRight className="size-4" />}
                     onClick={() => goToCard(activeCardIndex + 1)}
                   >
@@ -771,7 +929,9 @@ export function FlashcardsClient({ notes, initialDecks }: FlashcardsClientProps)
               <div className="flex min-h-96 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-surface-muted px-6 text-center">
                 <Brain className="size-10 text-muted-foreground" />
                 <div className="space-y-1">
-                  <h2 className="text-base font-semibold text-foreground">No deck selected</h2>
+                  <h2 className="text-base font-semibold text-foreground">
+                    No deck selected
+                  </h2>
                   <p className="max-w-md text-sm leading-6 text-muted-foreground">
                     Choose a saved deck.
                   </p>
diff --git a/app/quizzes/quizzes-client.tsx b/app/quizzes/quizzes-client.tsx
index 87d2dce..7a6801e 100644
--- a/app/quizzes/quizzes-client.tsx
+++ b/app/quizzes/quizzes-client.tsx
@@ -23,11 +23,31 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input, Select, Textarea } from "@/components/ui/input";
-import { createUnansweredEvaluation, gradeObjectiveAnswer, summarizeAttempt } from "@/lib/quizzes/attempts";
-import type { QuizDifficulty, QuizQuestion, QuizQuestionType } from "@/lib/quizzes/gemini";
-import type { QuizAttempt, QuizAttemptAnswer, QuizEvaluation, QuizMode, SavedQuiz } from "@/lib/quizzes/types";
+import {
+  createUnansweredEvaluation,
+  gradeObjectiveAnswer,
+  summarizeAttempt,
+} from "@/lib/quizzes/attempts";
+import type {
+  QuizDifficulty,
+  QuizQuestion,
+  QuizQuestionType,
+} from "@/lib/quizzes/gemini";
+import type {
+  QuizAttempt,
+  QuizAttemptAnswer,
+  QuizEvaluation,
+  QuizMode,
+  SavedQuiz,
+} from "@/lib/quizzes/types";
 import { cx } from "@/lib/utils";
 
 type QuizNoteOption = {
@@ -57,9 +77,21 @@ const difficultyOptions: Array<{ value: QuizDifficulty; label: string }> = [
   { value: "hard", label: "Hard" },
 ];
 
-const modeOptions: Array<{ value: QuizMode; label: string; description: string }> = [
-  { value: "practice", label: "Practice", description: "Immediate checking while taking the quiz." },
-  { value: "exam", label: "Exam", description: "Timed attempt with results after finish." },
+const modeOptions: Array<{
+  value: QuizMode;
+  label: string;
+  description: string;
+}> = [
+  {
+    value: "practice",
+    label: "Practice",
+    description: "Immediate checking while taking the quiz.",
+  },
+  {
+    value: "exam",
+    label: "Exam",
+    description: "Timed attempt with results after finish.",
+  },
 ];
 
 function formatTimer(seconds: number) {
@@ -80,7 +112,9 @@ function formatPercent(value: number) {
 }
 
 async function readJsonResponse<T>(response: Response): Promise<T> {
-  const payload = (await response.json().catch(() => null)) as T & { error?: string };
+  const payload = (await response.json().catch(() => null)) as T & {
+    error?: string;
+  };
   if (!response.ok) {
     throw new Error(payload?.error || "Request failed");
   }
@@ -88,7 +122,13 @@ async function readJsonResponse<T>(response: Response): Promise<T> {
   return payload;
 }
 
-function MarkdownText({ markdown, className }: { markdown: string; className?: string }) {
+function MarkdownText({
+  markdown,
+  className,
+}: {
+  markdown: string;
+  className?: string;
+}) {
   return (
     <div className={cx("quiz-markdown min-w-0 text-foreground", className)}>
       <ReactMarkdown
@@ -96,13 +136,26 @@ function MarkdownText({ markdown, className }: { markdown: string; className?: s
         remarkPlugins={[remarkGfm, remarkMath]}
         components={{
           p: ({ children }) => <p>{children}</p>,
-          ul: ({ children }) => <ul className="ml-5 list-disc space-y-1">{children}</ul>,
-          ol: ({ children }) => <ol className="ml-5 list-decimal space-y-1">{children}</ol>,
+          ul: ({ children }) => (
+            <ul className="ml-5 list-disc space-y-1">{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="ml-5 list-decimal space-y-1">{children}</ol>
+          ),
           li: ({ children }) => <li>{children}</li>,
-          strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
+          strong: ({ children }) => (
+            <strong className="font-semibold text-foreground">
+              {children}
+            </strong>
+          ),
           em: ({ children }) => <em className="italic">{children}</em>,
           code: ({ children, className: codeClassName }) => (
-            <code className={cx("rounded bg-surface-elevated px-1 py-0.5 font-mono text-[0.92em]", codeClassName)}>
+            <code
+              className={cx(
+                "rounded bg-surface-elevated px-1 py-0.5 font-mono text-[0.92em]",
+                codeClassName,
+              )}
+            >
               {children}
             </code>
           ),
@@ -112,7 +165,9 @@ function MarkdownText({ markdown, className }: { markdown: string; className?: s
             </pre>
           ),
           blockquote: ({ children }) => (
-            <blockquote className="border-l-4 border-border pl-3 text-muted-foreground">{children}</blockquote>
+            <blockquote className="border-l-4 border-border pl-3 text-muted-foreground">
+              {children}
+            </blockquote>
           ),
         }}
       >
@@ -122,7 +177,13 @@ function MarkdownText({ markdown, className }: { markdown: string; className?: s
   );
 }
 
-function StepPill({ active, children }: { active?: boolean; children: ReactNode }) {
+function StepPill({
+  active,
+  children,
+}: {
+  active?: boolean;
+  children: ReactNode;
+}) {
   return (
     <span
       className={cx(
@@ -156,21 +217,32 @@ function makeDraftQuestion(sourceNoteTitles: string[]): QuizQuestion {
   };
 }
 
-function getSourceTitles(questions: QuizQuestion[], notes: QuizNoteOption[], selectedNoteIds: string[]) {
+function getSourceTitles(
+  questions: QuizQuestion[],
+  notes: QuizNoteOption[],
+  selectedNoteIds: string[],
+) {
   const titles = questions.flatMap((question) => question.sourceNoteTitles);
   if (titles.length > 0) {
     return Array.from(new Set(titles));
   }
 
-  return notes.filter((note) => selectedNoteIds.includes(note.id)).map((note) => note.title);
+  return notes
+    .filter((note) => selectedNoteIds.includes(note.id))
+    .map((note) => note.title);
 }
 
-function createQuizCopy(quiz: SavedQuiz): Omit<SavedQuiz, "id" | "createdAt" | "updatedAt"> {
+function createQuizCopy(
+  quiz: SavedQuiz,
+): Omit<SavedQuiz, "id" | "createdAt" | "updatedAt"> {
   return {
     title: `${quiz.title} copy`,
     sourceNoteIds: quiz.sourceNoteIds,
     sourceNoteTitles: quiz.sourceNoteTitles,
-    questions: quiz.questions.map((question) => ({ ...question, id: crypto.randomUUID() })),
+    questions: quiz.questions.map((question) => ({
+      ...question,
+      id: crypto.randomUUID(),
+    })),
     questionCount: quiz.questionCount,
     difficulty: quiz.difficulty,
     mode: quiz.mode,
@@ -179,8 +251,15 @@ function createQuizCopy(quiz: SavedQuiz): Omit<SavedQuiz, "id" | "createdAt" | "
   };
 }
 
-export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: QuizzesClientProps) {
-  const embeddedNotes = useMemo(() => notes.filter((note) => note.hasEmbedding), [notes]);
+export function QuizzesClient({
+  notes,
+  initialQuizzes,
+  initialAttempts,
+}: QuizzesClientProps) {
+  const embeddedNotes = useMemo(
+    () => notes.filter((note) => note.hasEmbedding),
+    [notes],
+  );
   const [quizzes, setQuizzes] = useState<SavedQuiz[]>(initialQuizzes);
   const [attempts, setAttempts] = useState<QuizAttempt[]>(initialAttempts);
   const [view, setView] = useState<View>("library");
@@ -191,7 +270,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
   const [mode, setMode] = useState<QuizMode>("practice");
   const [timeMinutes, setTimeMinutes] = useState(20);
   const [questionCount, setQuestionCount] = useState(10);
-  const [questionTypes, setQuestionTypes] = useState<QuizQuestionType[]>(["multiple_choice"]);
+  const [questionTypes, setQuestionTypes] = useState<QuizQuestionType[]>([
+    "multiple_choice",
+  ]);
   const [difficulty, setDifficulty] = useState<QuizDifficulty>("medium");
   const [draftTitle, setDraftTitle] = useState("");
   const [draftQuestions, setDraftQuestions] = useState<QuizQuestion[]>([]);
@@ -211,8 +292,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
   const [deleteQuizId, setDeleteQuizId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const activeQuiz = quizzes.find((quiz) => quiz.id === activeQuizId) ?? quizzes[0] ?? null;
-  const activeAttempts = attempts.filter((attempt) => attempt.quizId === activeQuiz?.id);
+  const activeQuiz =
+    quizzes.find((quiz) => quiz.id === activeQuizId) ?? quizzes[0] ?? null;
+  const activeAttempts = attempts.filter(
+    (attempt) => attempt.quizId === activeQuiz?.id,
+  );
   const selectedAttempt =
     attempts.find((attempt) => attempt.id === selectedAttemptId) ??
     latestAttempt ??
@@ -220,13 +304,26 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
     null;
   const currentQuestion = activeQuiz?.questions[currentIndex] ?? null;
   const activeDraftQuestion = draftQuestions[draftQuestionIndex] ?? null;
-  const currentAnswer = currentQuestion ? answers[currentQuestion.id]?.answer ?? "" : "";
-  const currentEvaluation = currentQuestion ? answers[currentQuestion.id]?.evaluation : undefined;
-  const canGenerate = selectedNoteIds.length > 0 && questionTypes.length > 0 && embeddedNotes.length > 0 && !isGenerating;
+  const currentAnswer = currentQuestion
+    ? (answers[currentQuestion.id]?.answer ?? "")
+    : "";
+  const currentEvaluation = currentQuestion
+    ? answers[currentQuestion.id]?.evaluation
+    : undefined;
+  const canGenerate =
+    selectedNoteIds.length > 0 &&
+    questionTypes.length > 0 &&
+    embeddedNotes.length > 0 &&
+    !isGenerating;
   const examExpired = activeQuiz?.mode === "exam" && remainingSeconds <= 0;
 
   useEffect(() => {
-    if (view !== "take" || activeQuiz?.mode !== "exam" || remainingSeconds <= 0 || isFinishing) {
+    if (
+      view !== "take" ||
+      activeQuiz?.mode !== "exam" ||
+      remainingSeconds <= 0 ||
+      isFinishing
+    ) {
       return;
     }
 
@@ -238,7 +335,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
   }, [activeQuiz?.mode, isFinishing, remainingSeconds, view]);
 
   useEffect(() => {
-    setDraftQuestionIndex((index) => Math.min(Math.max(index, 0), Math.max(draftQuestions.length - 1, 0)));
+    setDraftQuestionIndex((index) =>
+      Math.min(Math.max(index, 0), Math.max(draftQuestions.length - 1, 0)),
+    );
   }, [draftQuestions.length]);
 
   function resetCreateForm() {
@@ -271,13 +370,17 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
 
   function toggleNote(noteId: string) {
     setSelectedNoteIds((current) =>
-      current.includes(noteId) ? current.filter((id) => id !== noteId) : [...current, noteId],
+      current.includes(noteId)
+        ? current.filter((id) => id !== noteId)
+        : [...current, noteId],
     );
   }
 
   function toggleQuestionType(type: QuizQuestionType) {
     setQuestionTypes((current) =>
-      current.includes(type) ? current.filter((item) => item !== type) : [...current, type],
+      current.includes(type)
+        ? current.filter((item) => item !== type)
+        : [...current, type],
     );
   }
 
@@ -298,13 +401,23 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
         }),
       );
 
-      const selectedTitles = notes.filter((note) => selectedNoteIds.includes(note.id)).map((note) => note.title);
+      const selectedTitles = notes
+        .filter((note) => selectedNoteIds.includes(note.id))
+        .map((note) => note.title);
       setDraftQuestions(payload.questions);
       setDraftQuestionIndex(0);
-      setDraftTitle(selectedTitles.length === 1 ? `${selectedTitles[0]} quiz` : "Generated note quiz");
+      setDraftTitle(
+        selectedTitles.length === 1
+          ? `${selectedTitles[0]} quiz`
+          : "Generated note quiz",
+      );
       setView("preview");
     } catch (generationError) {
-      setError(generationError instanceof Error ? generationError.message : "Quiz generation failed");
+      setError(
+        generationError instanceof Error
+          ? generationError.message
+          : "Quiz generation failed",
+      );
     } finally {
       setIsGenerating(false);
     }
@@ -323,7 +436,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
     );
   }
 
-  function updateDraftChoice(questionIndex: number, choiceIndex: number, value: string) {
+  function updateDraftChoice(
+    questionIndex: number,
+    choiceIndex: number,
+    value: string,
+  ) {
     setDraftQuestions((current) =>
       current.map((question, index) => {
         if (index !== questionIndex) {
@@ -349,7 +466,7 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           type,
           choices:
             type === "multiple_choice"
-              ? question.choices ?? ["", "", "", ""]
+              ? (question.choices ?? ["", "", "", ""])
               : type === "true_false"
                 ? ["True", "False"]
                 : undefined,
@@ -359,13 +476,22 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
   }
 
   function removeDraftQuestion(index: number) {
-    setDraftQuestions((current) => current.filter((_, questionIndex) => questionIndex !== index));
-    setDraftQuestionIndex((current) => Math.max(0, Math.min(current, draftQuestions.length - 2)));
+    setDraftQuestions((current) =>
+      current.filter((_, questionIndex) => questionIndex !== index),
+    );
+    setDraftQuestionIndex((current) =>
+      Math.max(0, Math.min(current, draftQuestions.length - 2)),
+    );
   }
 
   function addDraftQuestion() {
-    const selectedTitles = notes.filter((note) => selectedNoteIds.includes(note.id)).map((note) => note.title);
-    setDraftQuestions((current) => [...current, makeDraftQuestion(selectedTitles)]);
+    const selectedTitles = notes
+      .filter((note) => selectedNoteIds.includes(note.id))
+      .map((note) => note.title);
+    setDraftQuestions((current) => [
+      ...current,
+      makeDraftQuestion(selectedTitles),
+    ]);
     setDraftQuestionIndex(draftQuestions.length);
   }
 
@@ -377,34 +503,45 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
     setError(null);
     setIsSaving(true);
     try {
-      const sourceNoteTitles = getSourceTitles(draftQuestions, notes, selectedNoteIds);
+      const sourceNoteTitles = getSourceTitles(
+        draftQuestions,
+        notes,
+        selectedNoteIds,
+      );
       const payload = await readJsonResponse<{ quiz: SavedQuiz }>(
-        await fetch(editingQuizId ? `/api/quizzes/${editingQuizId}` : "/api/quizzes", {
-          method: editingQuizId ? "PATCH" : "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            title: draftTitle,
-            sourceNoteIds: selectedNoteIds,
-            sourceNoteTitles,
-            questions: draftQuestions,
-            difficulty,
-            mode,
-            questionTypes,
-            timeLimitMinutes: mode === "exam" ? timeMinutes : null,
-          }),
-        }),
+        await fetch(
+          editingQuizId ? `/api/quizzes/${editingQuizId}` : "/api/quizzes",
+          {
+            method: editingQuizId ? "PATCH" : "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              title: draftTitle,
+              sourceNoteIds: selectedNoteIds,
+              sourceNoteTitles,
+              questions: draftQuestions,
+              difficulty,
+              mode,
+              questionTypes,
+              timeLimitMinutes: mode === "exam" ? timeMinutes : null,
+            }),
+          },
+        ),
       );
 
       setQuizzes((current) =>
         editingQuizId
-          ? current.map((quiz) => (quiz.id === payload.quiz.id ? payload.quiz : quiz))
+          ? current.map((quiz) =>
+              quiz.id === payload.quiz.id ? payload.quiz : quiz,
+            )
           : [payload.quiz, ...current],
       );
       setActiveQuizId(payload.quiz.id);
       setView("library");
       setEditingQuizId(null);
     } catch (saveError) {
-      setError(saveError instanceof Error ? saveError.message : "Quiz save failed");
+      setError(
+        saveError instanceof Error ? saveError.message : "Quiz save failed",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -426,7 +563,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
       setQuizzes((current) => [payload.quiz, ...current]);
       setActiveQuizId(payload.quiz.id);
     } catch (copyError) {
-      setError(copyError instanceof Error ? copyError.message : "Quiz duplicate failed");
+      setError(
+        copyError instanceof Error
+          ? copyError.message
+          : "Quiz duplicate failed",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -458,13 +599,19 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
       );
 
       setQuizzes((current) => current.filter((quiz) => quiz.id !== quizId));
-      setAttempts((current) => current.filter((attempt) => attempt.quizId !== quizId));
+      setAttempts((current) =>
+        current.filter((attempt) => attempt.quizId !== quizId),
+      );
       setDeleteQuizId(null);
       if (activeQuizId === quizId) {
         setActiveQuizId(quizzes.find((quiz) => quiz.id !== quizId)?.id ?? "");
       }
     } catch (deleteError) {
-      setError(deleteError instanceof Error ? deleteError.message : "Quiz delete failed");
+      setError(
+        deleteError instanceof Error
+          ? deleteError.message
+          : "Quiz delete failed",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -493,7 +640,10 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
     }));
   }
 
-  async function evaluateQuestion(question: QuizQuestion, answer: string): Promise<QuizEvaluation> {
+  async function evaluateQuestion(
+    question: QuizQuestion,
+    answer: string,
+  ): Promise<QuizEvaluation> {
     const objective = gradeObjectiveAnswer(question, answer);
     if (objective) {
       return objective;
@@ -528,7 +678,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
         },
       }));
     } catch (evaluationError) {
-      setError(evaluationError instanceof Error ? evaluationError.message : "Answer evaluation failed");
+      setError(
+        evaluationError instanceof Error
+          ? evaluationError.message
+          : "Answer evaluation failed",
+      );
     } finally {
       setIsEvaluating(false);
     }
@@ -578,7 +732,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
       }
 
       const summary = summarizeAttempt(activeQuiz.questions, completedAnswers);
-      const timeSpentSeconds = startedAt ? Math.max(0, Math.round((Date.now() - startedAt) / 1000)) : null;
+      const timeSpentSeconds = startedAt
+        ? Math.max(0, Math.round((Date.now() - startedAt) / 1000))
+        : null;
       const payload = await readJsonResponse<{ attempt: QuizAttempt }>(
         await fetch(`/api/quizzes/${activeQuiz.id}/attempts`, {
           method: "POST",
@@ -591,20 +747,31 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
         }),
       );
 
-      setAnswers(Object.fromEntries(summary.answers.map((answer) => [answer.questionId, answer])));
+      setAnswers(
+        Object.fromEntries(
+          summary.answers.map((answer) => [answer.questionId, answer]),
+        ),
+      );
       setAttempts((current) => [payload.attempt, ...current]);
       setLatestAttempt(payload.attempt);
       setSelectedAttemptId(payload.attempt.id);
       setView("results");
     } catch (finishError) {
-      setError(finishError instanceof Error ? finishError.message : "Quiz finish failed");
+      setError(
+        finishError instanceof Error
+          ? finishError.message
+          : "Quiz finish failed",
+      );
     } finally {
       setIsFinishing(false);
     }
   }
 
   function renderLibrary() {
-    const totalQuestions = quizzes.reduce((sum, quiz) => sum + quiz.questionCount, 0);
+    const totalQuestions = quizzes.reduce(
+      (sum, quiz) => sum + quiz.questionCount,
+      0,
+    );
 
     return (
       <section className="flex h-full min-h-0 flex-col gap-5">
@@ -613,7 +780,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             <StatPill>{quizzes.length} quizzes</StatPill>
             <StatPill>{totalQuestions} questions</StatPill>
           </div>
-          <Button type="button" leadingIcon={<Plus className="size-4" />} onClick={openCreate}>
+          <Button
+            type="button"
+            leadingIcon={<Plus className="size-4" />}
+            onClick={openCreate}
+          >
             Create quiz
           </Button>
         </div>
@@ -622,14 +793,20 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           <div className="flex min-h-0 flex-1 items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-surface/70 p-8">
             <div className="flex max-w-sm flex-col items-center text-center">
               <FileQuestion className="mb-5 size-12 text-muted-foreground" />
-              <h2 className="text-lg font-semibold text-foreground">No saved quizzes</h2>
-              <p className="mt-2 text-sm text-muted-foreground">Saved quizzes appear here.</p>
+              <h2 className="text-lg font-semibold text-foreground">
+                No saved quizzes
+              </h2>
+              <p className="mt-2 text-sm text-muted-foreground">
+                Saved quizzes appear here.
+              </p>
             </div>
           </div>
         ) : (
           <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-y-auto pr-1 xl:grid-cols-2">
             {quizzes.map((quiz) => {
-              const quizAttempts = attempts.filter((attempt) => attempt.quizId === quiz.id);
+              const quizAttempts = attempts.filter(
+                (attempt) => attempt.quizId === quiz.id,
+              );
               const lastAttempt = quizAttempts[0];
               const isDeleting = deleteQuizId === quiz.id;
 
@@ -645,12 +822,20 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                     <div className="flex flex-wrap items-center gap-2">
                       <Badge variant="accent">{quiz.mode}</Badge>
                       <Badge variant="outline">{quiz.difficulty}</Badge>
-                      <Badge variant="outline">{quiz.questionCount} questions</Badge>
-                      {lastAttempt ? <Badge variant="neutral">{formatPercent(lastAttempt.score)} last score</Badge> : null}
+                      <Badge variant="outline">
+                        {quiz.questionCount} questions
+                      </Badge>
+                      {lastAttempt ? (
+                        <Badge variant="neutral">
+                          {formatPercent(lastAttempt.score)} last score
+                        </Badge>
+                      ) : null}
                     </div>
                     <div>
                       <CardTitle>{quiz.title}</CardTitle>
-                      <CardDescription>Updated {formatDate(quiz.updatedAt)}</CardDescription>
+                      <CardDescription>
+                        Updated {formatDate(quiz.updatedAt)}
+                      </CardDescription>
                     </div>
                   </CardHeader>
                   <CardContent className="space-y-5">
@@ -663,7 +848,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                     </div>
 
                     <div className="space-y-2">
-                      <h3 className="text-sm font-medium text-foreground">Questions</h3>
+                      <h3 className="text-sm font-medium text-foreground">
+                        Questions
+                      </h3>
                       <div className="grid gap-2">
                         {quiz.questions.slice(0, 2).map((question, index) => (
                           <button
@@ -676,10 +863,17 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                             }}
                           >
                             <span className="mb-1 flex items-center gap-2">
-                              <Badge variant="outline">Question {index + 1}</Badge>
-                              <Badge variant="neutral">{question.type.replace("_", " ")}</Badge>
+                              <Badge variant="outline">
+                                Question {index + 1}
+                              </Badge>
+                              <Badge variant="neutral">
+                                {question.type.replace("_", " ")}
+                              </Badge>
                             </span>
-                            <MarkdownText markdown={question.prompt} className="line-clamp-2 text-sm" />
+                            <MarkdownText
+                              markdown={question.prompt}
+                              className="line-clamp-2 text-sm"
+                            />
                           </button>
                         ))}
                       </div>
@@ -687,7 +881,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
 
                     {quizAttempts.length > 0 ? (
                       <div className="space-y-2">
-                        <h3 className="text-sm font-medium text-foreground">Previous results</h3>
+                        <h3 className="text-sm font-medium text-foreground">
+                          Previous results
+                        </h3>
                         <div className="grid gap-2 sm:grid-cols-2">
                           {quizAttempts.slice(0, 4).map((attempt) => (
                             <button
@@ -701,8 +897,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                                 setView("results");
                               }}
                             >
-                              <span className="truncate text-muted-foreground">{formatDate(attempt.completedAt)}</span>
-                              <Badge variant="accent">{formatPercent(attempt.score)}</Badge>
+                              <span className="truncate text-muted-foreground">
+                                {formatDate(attempt.completedAt)}
+                              </span>
+                              <Badge variant="accent">
+                                {formatPercent(attempt.score)}
+                              </Badge>
                             </button>
                           ))}
                         </div>
@@ -717,26 +917,61 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                       <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-red-200 bg-danger-soft px-3 py-3 text-sm text-danger dark:border-red-950/70">
                         <span>Delete quiz and saved attempts?</span>
                         <span className="flex flex-wrap gap-2">
-                          <Button type="button" size="sm" variant="destructive" disabled={isSaving} onClick={() => void deleteQuiz(quiz.id)}>
+                          <Button
+                            type="button"
+                            size="sm"
+                            variant="destructive"
+                            disabled={isSaving}
+                            onClick={() => void deleteQuiz(quiz.id)}
+                          >
                             Confirm delete
                           </Button>
-                          <Button type="button" size="sm" variant="outline" onClick={() => setDeleteQuizId(null)}>
+                          <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            onClick={() => setDeleteQuizId(null)}
+                          >
                             Cancel
                           </Button>
                         </span>
                       </div>
                     ) : (
                       <div className="flex flex-wrap gap-2">
-                        <Button type="button" size="sm" leadingIcon={<Play className="size-4" />} onClick={() => startTaking(quiz)}>
+                        <Button
+                          type="button"
+                          size="sm"
+                          leadingIcon={<Play className="size-4" />}
+                          onClick={() => startTaking(quiz)}
+                        >
                           Take
                         </Button>
-                        <Button type="button" size="sm" variant="outline" leadingIcon={<Pencil className="size-4" />} onClick={() => editQuiz(quiz)}>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          leadingIcon={<Pencil className="size-4" />}
+                          onClick={() => editQuiz(quiz)}
+                        >
                           Edit
                         </Button>
-                        <Button type="button" size="sm" variant="outline" leadingIcon={<Copy className="size-4" />} disabled={isSaving} onClick={() => void duplicateQuiz(quiz)}>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          leadingIcon={<Copy className="size-4" />}
+                          disabled={isSaving}
+                          onClick={() => void duplicateQuiz(quiz)}
+                        >
                           Duplicate
                         </Button>
-                        <Button type="button" size="sm" variant="destructive" leadingIcon={<Trash2 className="size-4" />} onClick={() => setDeleteQuizId(quiz.id)}>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="destructive"
+                          leadingIcon={<Trash2 className="size-4" />}
+                          onClick={() => setDeleteQuizId(quiz.id)}
+                        >
                           Delete
                         </Button>
                       </div>
@@ -757,7 +992,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
         <CardHeader className="shrink-0 gap-4 py-5 sm:flex-row sm:items-start sm:justify-between">
           <div>
             <CardTitle className="text-xl">Create Quiz</CardTitle>
-            <CardDescription>Choose note context and quiz settings.</CardDescription>
+            <CardDescription>
+              Choose note context and quiz settings.
+            </CardDescription>
           </div>
           <div className="flex shrink-0 gap-2">
             <StepPill active>Context</StepPill>
@@ -783,8 +1020,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                     key={note.id}
                     className={cx(
                       "flex min-h-20 cursor-pointer items-start gap-4 rounded-lg border border-border bg-surface px-4 py-4 text-sm transition",
-                      note.hasEmbedding ? "hover:border-border-strong hover:bg-surface-muted" : "cursor-not-allowed opacity-60",
-                      selectedNoteIds.includes(note.id) ? "border-accent bg-accent-soft/60" : "",
+                      note.hasEmbedding
+                        ? "hover:border-border-strong hover:bg-surface-muted"
+                        : "cursor-not-allowed opacity-60",
+                      selectedNoteIds.includes(note.id)
+                        ? "border-accent bg-accent-soft/60"
+                        : "",
                     )}
                   >
                     <input
@@ -795,9 +1036,13 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                       onChange={() => toggleNote(note.id)}
                     />
                     <span className="min-w-0 flex-1">
-                      <span className="block truncate font-semibold text-foreground">{note.title}</span>
+                      <span className="block truncate font-semibold text-foreground">
+                        {note.title}
+                      </span>
                       <span className="mt-1 block text-sm text-muted-foreground">
-                        {note.hasEmbedding ? "Embedding ready" : "Embedding required"}
+                        {note.hasEmbedding
+                          ? "Embedding ready"
+                          : "Embedding required"}
                       </span>
                     </span>
                   </label>
@@ -808,14 +1053,18 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
 
           <section className="grid shrink-0 gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(280px,360px)]">
             <div className="space-y-4">
-              <h2 className="text-sm font-semibold text-foreground">Question types</h2>
+              <h2 className="text-sm font-semibold text-foreground">
+                Question types
+              </h2>
               <div className="grid gap-2 md:grid-cols-3">
                 {questionTypeOptions.map((option) => (
                   <label
                     key={option.value}
                     className={cx(
                       "flex cursor-pointer items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2 text-sm transition hover:bg-surface-muted",
-                      questionTypes.includes(option.value) ? "border-accent bg-accent-soft/60 text-accent" : "",
+                      questionTypes.includes(option.value)
+                        ? "border-accent bg-accent-soft/60 text-accent"
+                        : "",
                     )}
                   >
                     <input
@@ -834,7 +1083,7 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                     key={option.value}
                     type="button"
                     className={cx(
-                    "rounded-lg border px-3 py-2 text-left text-sm transition",
+                      "rounded-lg border px-3 py-2 text-left text-sm transition",
                       mode === option.value
                         ? "border-accent bg-accent-soft text-accent"
                         : "border-border bg-surface hover:bg-surface-muted",
@@ -842,7 +1091,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                     onClick={() => setMode(option.value)}
                   >
                     <span className="block font-semibold">{option.label}</span>
-                    <span className="mt-1 block text-muted-foreground">{option.description}</span>
+                    <span className="mt-1 block text-muted-foreground">
+                      {option.description}
+                    </span>
                   </button>
                 ))}
               </div>
@@ -851,7 +1102,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
               <label className="space-y-2 text-sm font-medium text-foreground">
                 Difficulty
-                <Select value={difficulty} onChange={(event) => setDifficulty(event.target.value as QuizDifficulty)}>
+                <Select
+                  value={difficulty}
+                  onChange={(event) =>
+                    setDifficulty(event.target.value as QuizDifficulty)
+                  }
+                >
                   {difficultyOptions.map((option) => (
                     <option key={option.value} value={option.value}>
                       {option.label}
@@ -861,11 +1117,28 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
               </label>
               <label className="space-y-2 text-sm font-medium text-foreground">
                 Questions
-                <Input min={1} max={25} type="number" value={questionCount} onChange={(event) => setQuestionCount(Number(event.target.value))} />
+                <Input
+                  min={1}
+                  max={25}
+                  type="number"
+                  value={questionCount}
+                  onChange={(event) =>
+                    setQuestionCount(Number(event.target.value))
+                  }
+                />
               </label>
               <label className="space-y-2 text-sm font-medium text-foreground">
                 Time limit
-                <Input min={1} max={240} type="number" disabled={mode !== "exam"} value={timeMinutes} onChange={(event) => setTimeMinutes(Number(event.target.value))} />
+                <Input
+                  min={1}
+                  max={240}
+                  type="number"
+                  disabled={mode !== "exam"}
+                  value={timeMinutes}
+                  onChange={(event) =>
+                    setTimeMinutes(Number(event.target.value))
+                  }
+                />
               </label>
             </div>
           </section>
@@ -874,12 +1147,22 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             <Button
               type="button"
               disabled={!canGenerate}
-              leadingIcon={isGenerating ? <Loader2 className="size-4 animate-spin" /> : <CheckCircle2 className="size-4" />}
+              leadingIcon={
+                isGenerating ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <CheckCircle2 className="size-4" />
+                )
+              }
               onClick={() => void generatePreview()}
             >
               Generate preview
             </Button>
-            <Button type="button" variant="outline" onClick={() => openLibrary()}>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => openLibrary()}
+            >
               Cancel
             </Button>
           </div>
@@ -905,11 +1188,17 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           <section className="grid shrink-0 gap-3 lg:grid-cols-[minmax(260px,1fr)_160px_160px_140px]">
             <label className="space-y-1.5 text-sm font-medium text-foreground">
               Quiz name
-              <Input value={draftTitle} onChange={(event) => setDraftTitle(event.target.value)} />
+              <Input
+                value={draftTitle}
+                onChange={(event) => setDraftTitle(event.target.value)}
+              />
             </label>
             <label className="space-y-1.5 text-sm font-medium text-foreground">
               Mode
-              <Select value={mode} onChange={(event) => setMode(event.target.value as QuizMode)}>
+              <Select
+                value={mode}
+                onChange={(event) => setMode(event.target.value as QuizMode)}
+              >
                 {modeOptions.map((option) => (
                   <option key={option.value} value={option.value}>
                     {option.label}
@@ -919,7 +1208,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             </label>
             <label className="space-y-1.5 text-sm font-medium text-foreground">
               Difficulty
-              <Select value={difficulty} onChange={(event) => setDifficulty(event.target.value as QuizDifficulty)}>
+              <Select
+                value={difficulty}
+                onChange={(event) =>
+                  setDifficulty(event.target.value as QuizDifficulty)
+                }
+              >
                 {difficultyOptions.map((option) => (
                   <option key={option.value} value={option.value}>
                     {option.label}
@@ -929,14 +1223,23 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             </label>
             <label className="space-y-1.5 text-sm font-medium text-foreground">
               Time
-              <Input min={1} max={240} type="number" disabled={mode !== "exam"} value={timeMinutes} onChange={(event) => setTimeMinutes(Number(event.target.value))} />
+              <Input
+                min={1}
+                max={240}
+                type="number"
+                disabled={mode !== "exam"}
+                value={timeMinutes}
+                onChange={(event) => setTimeMinutes(Number(event.target.value))}
+              />
             </label>
           </section>
 
           <section className="grid min-h-0 flex-1 gap-4 lg:grid-cols-[260px_minmax(0,1fr)]">
             <aside className="flex min-h-0 flex-col rounded-[var(--radius-xl)] border border-border bg-surface-muted/60">
               <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border p-3">
-                <h2 className="text-sm font-semibold text-foreground">Questions</h2>
+                <h2 className="text-sm font-semibold text-foreground">
+                  Questions
+                </h2>
                 <Button
                   type="button"
                   size="sm"
@@ -952,8 +1255,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                 {draftQuestions.length === 0 ? (
                   <div className="rounded-lg border border-dashed border-border px-3 py-6 text-center">
                     <FileQuestion className="mx-auto mb-2 size-7 text-muted-foreground" />
-                    <p className="text-sm font-medium text-foreground">No questions</p>
-                    <p className="mt-1 text-xs text-muted-foreground">Add or generate from context.</p>
+                    <p className="text-sm font-medium text-foreground">
+                      No questions
+                    </p>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Add or generate from context.
+                    </p>
                   </div>
                 ) : (
                   draftQuestions.map((question, index) => (
@@ -968,7 +1275,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                       )}
                       onClick={() => setDraftQuestionIndex(index)}
                     >
-                      <span className="block font-semibold">Question {index + 1}</span>
+                      <span className="block font-semibold">
+                        Question {index + 1}
+                      </span>
                       <span className="mt-1 block truncate text-xs text-muted-foreground">
                         {question.prompt || question.type.replace("_", " ")}
                       </span>
@@ -981,8 +1290,16 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             {activeDraftQuestion ? (
               <div className="flex min-h-0 flex-col rounded-[var(--radius-xl)] border border-border bg-surface-muted/60 p-4">
                 <div className="mb-3 flex shrink-0 flex-wrap items-center justify-between gap-3">
-                  <Badge variant="outline">Question {draftQuestionIndex + 1}</Badge>
-                  <Button type="button" size="sm" variant="ghost" leadingIcon={<Trash2 className="size-4" />} onClick={() => removeDraftQuestion(draftQuestionIndex)}>
+                  <Badge variant="outline">
+                    Question {draftQuestionIndex + 1}
+                  </Badge>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    leadingIcon={<Trash2 className="size-4" />}
+                    onClick={() => removeDraftQuestion(draftQuestionIndex)}
+                  >
                     Remove
                   </Button>
                 </div>
@@ -995,7 +1312,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                         rows={7}
                         value={activeDraftQuestion.prompt}
                         className="min-h-0 flex-1 resize-none"
-                        onChange={(event) => updateDraftQuestion(draftQuestionIndex, { prompt: event.target.value })}
+                        onChange={(event) =>
+                          updateDraftQuestion(draftQuestionIndex, {
+                            prompt: event.target.value,
+                          })
+                        }
                       />
                     </label>
                     <div className="grid shrink-0 gap-3 md:grid-cols-[180px_minmax(0,1fr)]">
@@ -1003,7 +1324,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                         Type
                         <Select
                           value={activeDraftQuestion.type}
-                          onChange={(event) => updateDraftQuestionType(draftQuestionIndex, event.target.value as QuizQuestionType)}
+                          onChange={(event) =>
+                            updateDraftQuestionType(
+                              draftQuestionIndex,
+                              event.target.value as QuizQuestionType,
+                            )
+                          }
                         >
                           {questionTypeOptions.map((option) => (
                             <option key={option.value} value={option.value}>
@@ -1015,7 +1341,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                       <label className="space-y-1.5 text-sm font-medium text-foreground">
                         Source metadata
                         <Input
-                          value={activeDraftQuestion.sourceNoteTitles.join(", ")}
+                          value={activeDraftQuestion.sourceNoteTitles.join(
+                            ", ",
+                          )}
                           onChange={(event) =>
                             updateDraftQuestion(draftQuestionIndex, {
                               sourceNoteTitles: event.target.value
@@ -1036,7 +1364,11 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                         rows={7}
                         value={activeDraftQuestion.correctAnswer}
                         className="min-h-0 flex-1 resize-none"
-                        onChange={(event) => updateDraftQuestion(draftQuestionIndex, { correctAnswer: event.target.value })}
+                        onChange={(event) =>
+                          updateDraftQuestion(draftQuestionIndex, {
+                            correctAnswer: event.target.value,
+                          })
+                        }
                       />
                     </label>
                     <label className="flex min-h-0 flex-1 flex-col gap-1.5 text-sm font-medium text-foreground">
@@ -1045,18 +1377,35 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                         rows={3}
                         value={activeDraftQuestion.explanation}
                         className="min-h-0 flex-1 resize-none"
-                        onChange={(event) => updateDraftQuestion(draftQuestionIndex, { explanation: event.target.value })}
+                        onChange={(event) =>
+                          updateDraftQuestion(draftQuestionIndex, {
+                            explanation: event.target.value,
+                          })
+                        }
                       />
                     </label>
                   </div>
                 </div>
 
-                {activeDraftQuestion.type === "multiple_choice" && activeDraftQuestion.choices?.length ? (
+                {activeDraftQuestion.type === "multiple_choice" &&
+                activeDraftQuestion.choices?.length ? (
                   <div className="mt-3 grid shrink-0 gap-2 md:grid-cols-4">
                     {activeDraftQuestion.choices.map((choice, choiceIndex) => (
-                      <label key={`${activeDraftQuestion.id}-${choiceIndex}`} className="space-y-1.5 text-sm font-medium text-foreground">
+                      <label
+                        key={`${activeDraftQuestion.id}-${choiceIndex}`}
+                        className="space-y-1.5 text-sm font-medium text-foreground"
+                      >
                         Choice {choiceIndex + 1}
-                        <Input value={choice} onChange={(event) => updateDraftChoice(draftQuestionIndex, choiceIndex, event.target.value)} />
+                        <Input
+                          value={choice}
+                          onChange={(event) =>
+                            updateDraftChoice(
+                              draftQuestionIndex,
+                              choiceIndex,
+                              event.target.value,
+                            )
+                          }
+                        />
                       </label>
                     ))}
                   </div>
@@ -1066,8 +1415,12 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
               <div className="flex min-h-0 items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-surface-muted">
                 <div className="text-center">
                   <FileQuestion className="mx-auto mb-3 size-8 text-muted-foreground" />
-                  <p className="font-semibold text-foreground">No questions in preview</p>
-                  <p className="mt-1 text-sm text-muted-foreground">Add a question or go back to generate from context.</p>
+                  <p className="font-semibold text-foreground">
+                    No questions in preview
+                  </p>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    Add a question or go back to generate from context.
+                  </p>
                 </div>
               </div>
             )}
@@ -1076,16 +1429,32 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           <div className="flex shrink-0 flex-wrap gap-2">
             <Button
               type="button"
-              disabled={draftQuestions.length === 0 || !draftTitle.trim() || isSaving}
-              leadingIcon={isSaving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
+              disabled={
+                draftQuestions.length === 0 || !draftTitle.trim() || isSaving
+              }
+              leadingIcon={
+                isSaving ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Save className="size-4" />
+                )
+              }
               onClick={() => void saveDraftQuiz()}
             >
               Save quiz
             </Button>
-            <Button type="button" variant="outline" onClick={() => setView(editingQuizId ? "library" : "create")}>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setView(editingQuizId ? "library" : "create")}
+            >
               Back
             </Button>
-            <Button type="button" variant="ghost" onClick={() => openLibrary(activeQuizId)}>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => openLibrary(activeQuizId)}
+            >
               Cancel
             </Button>
           </div>
@@ -1128,28 +1497,38 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           <div className="h-2 shrink-0 rounded-full bg-surface-muted">
             <div
               className="h-2 rounded-full bg-accent transition-all"
-              style={{ width: `${((currentIndex + 1) / activeQuiz.questions.length) * 100}%` }}
+              style={{
+                width: `${((currentIndex + 1) / activeQuiz.questions.length) * 100}%`,
+              }}
             />
           </div>
           <div className="min-h-0 shrink overflow-y-auto rounded-lg border border-border bg-surface-muted p-4">
             <div className="flex flex-wrap gap-2">
-              <Badge variant="outline">{currentQuestion.type.replace("_", " ")}</Badge>
+              <Badge variant="outline">
+                {currentQuestion.type.replace("_", " ")}
+              </Badge>
               {currentQuestion.sourceNoteTitles.map((title) => (
                 <Badge key={title} variant="neutral">
                   {title}
                 </Badge>
               ))}
             </div>
-            <MarkdownText markdown={currentQuestion.prompt} className="space-y-3 text-xl font-semibold leading-8" />
+            <MarkdownText
+              markdown={currentQuestion.prompt}
+              className="space-y-3 text-xl font-semibold leading-8"
+            />
           </div>
-          {currentQuestion.type === "multiple_choice" || currentQuestion.type === "true_false" ? (
+          {currentQuestion.type === "multiple_choice" ||
+          currentQuestion.type === "true_false" ? (
             <div className="grid shrink-0 gap-2">
               {(currentQuestion.choices ?? []).map((choice) => (
                 <label
                   key={choice}
                   className={cx(
                     "flex cursor-pointer items-center gap-3 rounded-lg border border-border px-3 py-3 text-sm transition hover:bg-surface-muted",
-                    currentAnswer === choice ? "border-accent bg-accent-soft text-accent" : "text-foreground",
+                    currentAnswer === choice
+                      ? "border-accent bg-accent-soft text-accent"
+                      : "text-foreground",
                   )}
                 >
                   <input
@@ -1157,7 +1536,9 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
                     name={currentQuestion.id}
                     className="size-4 accent-[var(--accent)]"
                     checked={currentAnswer === choice}
-                    disabled={Boolean(currentEvaluation) || examExpired || isFinishing}
+                    disabled={
+                      Boolean(currentEvaluation) || examExpired || isFinishing
+                    }
                     onChange={() => updateAnswer(currentQuestion.id, choice)}
                   />
                   <MarkdownText markdown={choice} className="text-sm" />
@@ -1167,11 +1548,15 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           ) : (
             <Textarea
               value={currentAnswer}
-              disabled={Boolean(currentEvaluation) || examExpired || isFinishing}
+              disabled={
+                Boolean(currentEvaluation) || examExpired || isFinishing
+              }
               placeholder="Type your answer..."
               rows={7}
               className="min-h-0 flex-1 resize-none"
-              onChange={(event) => updateAnswer(currentQuestion.id, event.target.value)}
+              onChange={(event) =>
+                updateAnswer(currentQuestion.id, event.target.value)
+              }
             />
           )}
           {currentEvaluation && activeQuiz.mode === "practice" ? (
@@ -1184,32 +1569,88 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
               )}
             >
               <div className="font-medium">
-                {currentEvaluation.correct ? "Correct" : "Needs work"} - Score {formatPercent(currentEvaluation.score)}
+                {currentEvaluation.correct ? "Correct" : "Needs work"} - Score{" "}
+                {formatPercent(currentEvaluation.score)}
               </div>
-              <MarkdownText markdown={currentEvaluation.feedback} className="mt-1 space-y-2" />
+              <MarkdownText
+                markdown={currentEvaluation.feedback}
+                className="mt-1 space-y-2"
+              />
               <div className="mt-2 font-medium">Ideal answer</div>
-              <MarkdownText markdown={currentEvaluation.idealAnswer} className="mt-1 space-y-2" />
+              <MarkdownText
+                markdown={currentEvaluation.idealAnswer}
+                className="mt-1 space-y-2"
+              />
             </div>
           ) : null}
           <div className="flex shrink-0 flex-wrap items-center justify-between gap-3">
             <div className="flex flex-wrap gap-2">
-              <Button type="button" variant="outline" disabled={currentIndex === 0 || isFinishing} onClick={() => setCurrentIndex((index) => Math.max(0, index - 1))}>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={currentIndex === 0 || isFinishing}
+                onClick={() =>
+                  setCurrentIndex((index) => Math.max(0, index - 1))
+                }
+              >
                 Previous
               </Button>
-              <Button type="button" variant="outline" disabled={currentIndex >= activeQuiz.questions.length - 1 || isFinishing} onClick={() => setCurrentIndex((index) => Math.min(activeQuiz.questions.length - 1, index + 1))}>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={
+                  currentIndex >= activeQuiz.questions.length - 1 || isFinishing
+                }
+                onClick={() =>
+                  setCurrentIndex((index) =>
+                    Math.min(activeQuiz.questions.length - 1, index + 1),
+                  )
+                }
+              >
                 Next
               </Button>
             </div>
             <div className="flex flex-wrap gap-2">
               {activeQuiz.mode === "practice" ? (
-                <Button type="button" variant="outline" disabled={!currentAnswer.trim() || Boolean(currentEvaluation) || isEvaluating || isFinishing} leadingIcon={isEvaluating ? <Loader2 className="size-4 animate-spin" /> : <CheckCircle2 className="size-4" />} onClick={() => void checkCurrentAnswer()}>
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={
+                    !currentAnswer.trim() ||
+                    Boolean(currentEvaluation) ||
+                    isEvaluating ||
+                    isFinishing
+                  }
+                  leadingIcon={
+                    isEvaluating ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : (
+                      <CheckCircle2 className="size-4" />
+                    )
+                  }
+                  onClick={() => void checkCurrentAnswer()}
+                >
                   Check answer
                 </Button>
               ) : null}
-              <Button type="button" variant="outline" disabled={isFinishing} onClick={() => openLibrary(activeQuiz.id)}>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={isFinishing}
+                onClick={() => openLibrary(activeQuiz.id)}
+              >
                 Exit
               </Button>
-              <Button type="button" disabled={isFinishing} leadingIcon={isFinishing ? <Loader2 className="size-4 animate-spin" /> : undefined} onClick={() => void finishAttempt()}>
+              <Button
+                type="button"
+                disabled={isFinishing}
+                leadingIcon={
+                  isFinishing ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : undefined
+                }
+                onClick={() => void finishAttempt()}
+              >
                 Finish quiz
               </Button>
             </div>
@@ -1224,12 +1665,19 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
       return null;
     }
 
-    const byQuestionId = new Map(selectedAttempt.answers.map((answer) => [answer.questionId, answer]));
-    const resultQuestionIndex = Math.min(currentIndex, activeQuiz.questions.length - 1);
+    const byQuestionId = new Map(
+      selectedAttempt.answers.map((answer) => [answer.questionId, answer]),
+    );
+    const resultQuestionIndex = Math.min(
+      currentIndex,
+      activeQuiz.questions.length - 1,
+    );
     const resultQuestion = activeQuiz.questions[resultQuestionIndex];
-    const resultAnswer = resultQuestion ? byQuestionId.get(resultQuestion.id) : undefined;
+    const resultAnswer = resultQuestion
+      ? byQuestionId.get(resultQuestion.id)
+      : undefined;
     const resultEvaluation = resultQuestion
-      ? resultAnswer?.evaluation ?? createUnansweredEvaluation(resultQuestion)
+      ? (resultAnswer?.evaluation ?? createUnansweredEvaluation(resultQuestion))
       : null;
 
     return (
@@ -1241,19 +1689,27 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
           </CardHeader>
           <CardContent className="flex min-h-0 flex-1 flex-col gap-4 pb-5">
             <div className="rounded-lg border border-border bg-surface-muted p-4">
-              <div className="text-3xl font-semibold text-foreground">{formatPercent(selectedAttempt.score)}</div>
+              <div className="text-3xl font-semibold text-foreground">
+                {formatPercent(selectedAttempt.score)}
+              </div>
               <p className="mt-1 text-sm text-muted-foreground">
-                {selectedAttempt.correctCount}/{selectedAttempt.questionCount} correct, {selectedAttempt.answeredCount} answered.
+                {selectedAttempt.correctCount}/{selectedAttempt.questionCount}{" "}
+                correct, {selectedAttempt.answeredCount} answered.
               </p>
             </div>
             <div className="space-y-2 text-sm text-muted-foreground">
               <p>Completed {formatDate(selectedAttempt.completedAt)}</p>
-              {selectedAttempt.timeSpentSeconds !== null ? <p>Time spent {formatTimer(selectedAttempt.timeSpentSeconds)}</p> : null}
+              {selectedAttempt.timeSpentSeconds !== null ? (
+                <p>
+                  Time spent {formatTimer(selectedAttempt.timeSpentSeconds)}
+                </p>
+              ) : null}
             </div>
             <div className="min-h-0 flex-1 space-y-2 overflow-y-auto">
               {activeQuiz.questions.map((question, index) => {
                 const answer = byQuestionId.get(question.id);
-                const evaluation = answer?.evaluation ?? createUnansweredEvaluation(question);
+                const evaluation =
+                  answer?.evaluation ?? createUnansweredEvaluation(question);
                 return (
                   <button
                     key={question.id}
@@ -1277,10 +1733,18 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
               })}
             </div>
             <div className="flex flex-wrap gap-2">
-              <Button type="button" leadingIcon={<RotateCcw className="size-4" />} onClick={() => startTaking(activeQuiz)}>
+              <Button
+                type="button"
+                leadingIcon={<RotateCcw className="size-4" />}
+                onClick={() => startTaking(activeQuiz)}
+              >
                 Retake
               </Button>
-              <Button type="button" variant="outline" onClick={() => openLibrary(activeQuiz.id)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => openLibrary(activeQuiz.id)}
+              >
                 Back to detail
               </Button>
             </div>
@@ -1288,10 +1752,19 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
         </Card>
 
         {resultQuestion && resultEvaluation ? (
-          <Card className={cx("flex min-h-0 flex-col", resultEvaluation.correct ? "border-green-200 dark:border-green-950/70" : "border-red-200 dark:border-red-950/70")}>
+          <Card
+            className={cx(
+              "flex min-h-0 flex-col",
+              resultEvaluation.correct
+                ? "border-green-200 dark:border-green-950/70"
+                : "border-red-200 dark:border-red-950/70",
+            )}
+          >
             <CardHeader className="shrink-0 py-5">
               <div className="flex flex-wrap items-center gap-2">
-                <Badge variant="outline">Question {resultQuestionIndex + 1}</Badge>
+                <Badge variant="outline">
+                  Question {resultQuestionIndex + 1}
+                </Badge>
                 {resultEvaluation.correct ? (
                   <Badge variant="accent">
                     <CheckCircle2 className="size-3.5" />
@@ -1308,23 +1781,48 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
             </CardHeader>
             <CardContent className="flex min-h-0 flex-1 flex-col gap-3 text-sm">
               <div className="min-h-0 overflow-y-auto rounded-lg border border-border bg-surface-muted p-3">
-                <MarkdownText markdown={resultQuestion.prompt} className="space-y-2 font-medium" />
+                <MarkdownText
+                  markdown={resultQuestion.prompt}
+                  className="space-y-2 font-medium"
+                />
               </div>
               <div className="grid min-h-0 flex-1 gap-3 md:grid-cols-2">
                 <div className="min-h-0 overflow-y-auto rounded-lg border border-border bg-surface-muted p-3">
-                  <div className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">Your answer</div>
-                  <MarkdownText markdown={resultAnswer?.answer.trim() || "Unanswered"} className="space-y-2" />
+                  <div className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                    Your answer
+                  </div>
+                  <MarkdownText
+                    markdown={resultAnswer?.answer.trim() || "Unanswered"}
+                    className="space-y-2"
+                  />
                 </div>
                 <div className="min-h-0 overflow-y-auto rounded-lg border border-border bg-surface-muted p-3">
-                  <div className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">Correct answer</div>
-                  <MarkdownText markdown={resultQuestion.correctAnswer} className="space-y-2" />
+                  <div className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                    Correct answer
+                  </div>
+                  <MarkdownText
+                    markdown={resultQuestion.correctAnswer}
+                    className="space-y-2"
+                  />
                 </div>
               </div>
               <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-border bg-surface p-3">
-                <div className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">Feedback</div>
-                <MarkdownText markdown={resultEvaluation.feedback} className="space-y-2" />
-                <div className="mt-3 mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">Explanation</div>
-                <MarkdownText markdown={resultQuestion.explanation || resultEvaluation.idealAnswer} className="space-y-2" />
+                <div className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                  Feedback
+                </div>
+                <MarkdownText
+                  markdown={resultEvaluation.feedback}
+                  className="space-y-2"
+                />
+                <div className="mt-3 mb-1 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                  Explanation
+                </div>
+                <MarkdownText
+                  markdown={
+                    resultQuestion.explanation || resultEvaluation.idealAnswer
+                  }
+                  className="space-y-2"
+                />
               </div>
             </CardContent>
           </Card>
@@ -1336,11 +1834,13 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
   return (
     <main
       data-testid="quizzes-one-page"
-      className="mx-auto flex h-full min-h-0 w-full max-w-7xl flex-col gap-4 overflow-hidden px-4 py-5 sm:px-6 lg:px-8"
+      className="mx-auto flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden px-4 py-5 sm:px-6 lg:px-8"
     >
       <header className="shrink-0">
         <div>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.28em] text-muted-foreground">QUIZZES</p>
+          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.28em] text-muted-foreground">
+            QUIZZES
+          </p>
           <h1 className="text-3xl font-semibold tracking-tight text-foreground">
             {view === "library" ? "My Quizzes" : "Quizzes"}
           </h1>
@@ -1358,10 +1858,17 @@ export function QuizzesClient({ notes, initialQuizzes, initialAttempts }: Quizze
 
       {view !== "library" ? (
         <div className="flex shrink-0 flex-wrap gap-2">
-          <Button type="button" variant="ghost" size="sm" onClick={() => openLibrary(activeQuizId)}>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => openLibrary(activeQuizId)}
+          >
             My Quizzes
           </Button>
-          {view === "take" && activeQuiz ? <Badge variant="outline">Focus mode</Badge> : null}
+          {view === "take" && activeQuiz ? (
+            <Badge variant="outline">Focus mode</Badge>
+          ) : null}
         </div>
       ) : null}
 

From 8823ac1d4369b9a9924d0906fa81590456433a00 Mon Sep 17 00:00:00 2001
From: Ali <abenrami06@gmail.com>
Date: Fri, 29 May 2026 20:51:36 -0500
Subject: [PATCH 5/5] feat(flashcards/quizzes): card UX overhaul, error
 handling, and layout polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make entire library card clickable for primary Take/Review action
- Move Edit/Delete (and Duplicate for quizzes) behind a three-dot MoreHorizontal menu with backdrop dismiss
- Fix quiz edit section scrolling in one-pager layout
- Relax sourceNoteTitles Zod validation (.min(1) → .default([])); catch parse errors server-side and return generic message to client
- Replace inline error banners with toast.error() calls in flashcards client
- Remove explanatory page headers from both quizzes and flashcards
- Align library view structure and background between empty/filled states
- Simplify quiz cards to name, date, badges only (remove question previews, attempt history)
- Narrow card grids to md:grid-cols-2 xl:grid-cols-3 with auto-rows-min/content-start
- Expand AGENTS.md with UI copy, component reuse, React best practices, and error UX guidelines

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 AGENTS.md                            | 380 ++++++++++++
 app/api/flashcards/route.ts          |  39 +-
 app/flashcards/flashcards-client.tsx | 896 ++++++++++++++-------------
 app/quizzes/quizzes-client.tsx       | 290 ++++-----
 lib/flashcards/gemini.ts             |  11 +-
 5 files changed, 994 insertions(+), 622 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 8bd0e39..08bda48 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -3,3 +3,383 @@
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
 <!-- END:nextjs-agent-rules -->
+
+---
+
+# TaskMaster agent conventions
+
+Read this file before writing any code. It will save reprompts.
+
+---
+
+## 1. User feedback — loading, error, and success states
+
+**This is mandatory.** Every async operation must have all three states handled. Never leave the user staring at a button with no indication of what is happening.
+
+### Toasts (Sonner) — use for async feedback from API calls
+
+`<Toaster>` is already mounted in `app/layout.tsx`. Import and use directly:
+
+```ts
+import { toast } from "sonner";
+
+// Loading state for long operations
+const id = toast.loading("Saving...", { duration: Infinity });
+// Then resolve it:
+toast.success("Saved", { id });
+toast.error("Failed to save", { id, description: err.message });
+
+// Short operations
+toast.error("Failed to generate flashcards", {
+  description: err instanceof Error ? err.message : undefined,
+  duration: 5000,
+});
+toast.success("Deck saved");
+```
+
+Use `toast.loading` + `id` update for anything that takes more than ~1 second. Use `toast.error` / `toast.success` directly for quick ops.
+
+### Inline banners — use only for form validation and auth flows
+
+Auth and settings forms use inline `error` / `message` state rendered as colored boxes with `aria-live="polite"`. Use this pattern only for forms where the error is tied to specific fields and the user needs to act before proceeding — not for async API results.
+
+### Inline loading indicators
+
+Use `Loader2` from `lucide-react` with `animate-spin` on button icons during async operations. Disable the button and swap its label while loading:
+
+```tsx
+<Button disabled={isSaving} leadingIcon={isSaving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}>
+  {isSaving ? "Saving..." : "Save"}
+</Button>
+```
+
+### What NOT to do
+
+- Do not render raw API error responses or Zod issue arrays in the UI. In Zod v4, `ZodError.message` is a JSON-serialized issues array — catch it server-side, log it, and throw a plain string instead.
+- Do not silently swallow errors. Every catch block must either call `toast.error(...)` or set visible error state.
+- Do not skip loading state. Buttons must be `disabled` and show a spinner while their action is in flight.
+
+### Server-side error handling rule
+
+API routes must `console.error(...)` the actual error for server logs, then return only a short user-facing string:
+
+```ts
+} catch (error) {
+  console.error("[POST /api/example]", error);
+  return NextResponse.json({ error: "Operation failed" }, { status: 500 });
+}
+```
+
+Never return `error.message` directly from a catch block — it may contain Zod issue JSON, stack traces, or DB driver internals.
+
+---
+
+## 2. Layout and scroll — one-pager viewport-locked shell
+
+The app shell is **`h-screen overflow-hidden`**. Content must scroll *inside* panels, not on the page body. Getting this wrong means content is clipped with no scrollbar.
+
+### The pattern
+
+```
+app-shell: h-screen overflow-hidden
+  └── sidebar
+  └── main: h-full w-full (overflow-hidden for most routes)
+       └── page root: h-full min-h-0 flex flex-col overflow-hidden
+            └── header: shrink-0
+            └── scrollable region: flex-1 min-h-0 overflow-y-auto
+```
+
+`min-h-0` is required on every flex child that should shrink below its content size. Without it, flex items refuse to shrink and content overflows the viewport invisibly.
+
+### For new pages inside `(app)/`
+
+```tsx
+// Page root
+<main className="flex h-full min-h-0 flex-col gap-4 overflow-hidden px-4 py-5 sm:px-6 lg:px-8">
+  <header className="shrink-0">...</header>
+  <div className="min-h-0 flex-1 overflow-y-auto">
+    {/* your content */}
+  </div>
+</main>
+```
+
+Do **not** use `min-h-screen` inside `(app)/` routes. That breaks the locked shell.
+
+### Scrollable panels within a view
+
+When a view has a sidebar + main editor (like the quiz preview), the sidebar and editor each need their own scroll:
+
+```tsx
+<section className="grid min-h-0 flex-1 overflow-hidden lg:grid-cols-[260px_1fr]">
+  <aside className="flex min-h-0 flex-col overflow-hidden">
+    <div className="min-h-0 flex-1 overflow-y-auto">...</div>
+  </aside>
+  <div className="overflow-y-auto">...</div>   {/* editor scrolls independently */}
+</section>
+```
+
+Do not use `flex-1` on textareas or labels inside a scrollable editor panel — that fights the scroll and clips content. Give textareas natural height with `rows={N}` and let the parent scroll.
+
+---
+
+## 3. Available UI components and libraries
+
+### `components/ui/` — small custom set (shadcn-style, not full shadcn)
+
+| File | Exports |
+|------|---------|
+| `button.tsx` | `Button`, `getButtonClassName()` |
+| `badge.tsx` | `Badge` — variants: `accent`, `outline`, `neutral` |
+| `card.tsx` | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent` |
+| `input.tsx` | `Input`, `Textarea`, `Select` |
+| `page-header.tsx` | `PageHeader` — eyebrow/title/description |
+| `scaffold-page.tsx` | `ScaffoldPage` — placeholder for incomplete features |
+| `empty-state.tsx` | `EmptyState` |
+| `separator.tsx` | `Separator` |
+
+Use these before reaching for anything external. Do **not** add Radix primitives or full shadcn components — the `radix-ui` package is installed but its primitives are not imported in app code.
+
+### Installed libraries
+
+| Library | Purpose |
+|---------|---------|
+| `sonner` | Toasts — `import { toast } from "sonner"` |
+| `lucide-react` | Icons — use `Loader2 animate-spin` for loading |
+| `react-markdown` + `remark-gfm` + `remark-math` + `rehype-katex` | Markdown with math — reuse the `MarkdownText` component pattern from quizzes/flashcards |
+| `zod` v4 | Validation — `safeParse` on API bodies |
+| `drizzle-orm` | DB ORM |
+| `better-auth` | Auth — `lib/auth.ts`, `lib/auth-client.ts` |
+| `clsx` / `class-variance-authority` | Installed but use `cx()` from `lib/utils.ts` for class merging |
+
+`tailwind-merge` and `cva` are in `package.json` but unused in app code. Do not introduce them.
+
+### `cx()` does not resolve Tailwind conflicts
+
+`lib/utils.ts` `cx()` is filter/join only — it does **not** merge conflicting Tailwind classes like `tailwind-merge` does. If two classes conflict (e.g. `p-4 p-6`), the last one wins by CSS source order, not argument order. Account for this manually.
+
+---
+
+## 4. Navigation and view state
+
+### URL routing vs client view state
+
+- **Between features**: use `<Link>` and real routes under `app/(app)/`.
+- **Within a feature workspace**: use a local string-union view state. Never push view state into the URL for in-feature steps.
+
+```ts
+type View = "library" | "create" | "preview" | "take" | "results";
+const [view, setView] = useState<View>("library");
+```
+
+This is the pattern in quizzes, flashcards, and notes. Do not use `useRouter().push()` for within-feature navigation.
+
+### Search params for re-mount triggers
+
+Notes uses `?new=1` and `?classId=...` to trigger remounts via a `key` prop on the workspace — useful when you need a clean state without a full route change.
+
+### Sidebar navigation config
+
+Nav items live in `components/shell/navigation.ts`. Add new top-level routes there. Study sub-pages go in `studyNavItems`.
+
+---
+
+## 5. API conventions
+
+### Auth in API routes
+
+```ts
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+
+const session = await auth.api.getSession({ headers: await headers() });
+if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+```
+
+### Validation pattern
+
+```ts
+const parsed = mySchema.safeParse(body);
+if (!parsed.success) {
+  return NextResponse.json({ error: "Invalid request" }, { status: 400 });
+  // Do NOT return parsed.error.issues — that leaks implementation details
+}
+```
+
+### Error response shape
+
+Always `{ error: string }`. Optionally `{ logs: string[] }` for diagnostic streams (parse-test only). Never an array at the top level.
+
+### `runtime = "nodejs"`
+
+Almost every API route sets `export const runtime = "nodejs"`. Match this for routes that use DB or AI.
+
+### `await connection()` on dynamic pages
+
+Server Component pages that should not be statically cached must call `await connection()` from `next/server` at the top. See quizzes, flashcards, notes pages.
+
+---
+
+## 6. State management
+
+There is no global store. No React Context for app data. No TanStack Query.
+
+- Local `useState` in large client workspaces.
+- View state machines with string union types (see section 4).
+- `useTransition` for post-mutation router refreshes.
+- Temp IDs (`temp-${uuid}`) in notes — never call DELETE/PATCH while `isTempNote(id)`.
+
+---
+
+## 7. Styling
+
+### Tailwind v4
+
+Config is in `app/globals.css` via `@import "tailwindcss"` + `@theme inline`. Base font size is `20px` on `<html>` — all `rem` values are scaled up.
+
+### Use semantic tokens, not raw colors
+
+```
+Surfaces:   bg-background  bg-surface  bg-surface-muted  bg-surface-elevated
+Text:       text-foreground  text-muted-foreground
+Borders:    border-border  border-border-strong
+Accent:     bg-accent  bg-accent-soft  text-accent
+Danger:     bg-danger-soft  text-danger  border-red-200 dark:border-red-950/70
+Radius:     rounded-[var(--radius-xl)]
+Shadow:     shadow-[var(--shadow-card)]
+```
+
+### Dark mode
+
+Applied via `.dark` class on `<html>` by `applyTheme()`. Both `:root` and `html.dark` define CSS vars. Always test both.
+
+---
+
+## 8. UI copy and page headers
+
+**Never add explanatory page headers describing what a feature does.** Users know what Quizzes and Flashcards are. Headers like "Focused quiz library, generation queue, and question editor" add zero value and visual noise.
+
+The only text above the main content area should be:
+- Breadcrumb/back navigation (e.g. "My Quizzes" ghost button when a sub-view is open)
+- Functional state labels that change with the view (e.g. the step indicator pills in create flow)
+
+When a feature needs explanation, that belongs in onboarding — not on the feature page itself.
+
+**No marketing copy inside the app.** Descriptions like "Focused deck library, generation queue, and card editor" are not helpful to an active user. Remove them if you see them.
+
+---
+
+## 9. Component reuse — React is component-based
+
+**Extract and reuse components. Do not duplicate markup.** If two features (e.g. flashcard library and quiz library) have the same visual structure, they must use the same component or the same CSS pattern — not two independently-written blocks that drift apart over time.
+
+### Rules
+
+- **If you write the same element twice, extract a component.** The threshold is low: a stat pill, a section header with a count, a card action row — all worth extracting.
+- **Small local helpers are fine.** A `StatPill`, `StepPill`, or `EmptyLibrary` component that lives near its usage is better than inline-repeated markup.
+- **Prefer shared `components/ui/` for anything used across two or more features.** If you find yourself defining the same helper in `quizzes-client.tsx` and `flashcards-client.tsx`, move it to `components/ui/`.
+- **Check what exists before building.** `components/ui/` has `Badge`, `Button`, `Card`, `Input`, `Textarea`, `Select`, `EmptyState`, `ScaffoldPage`, `PageHeader`, `Separator`. Use them.
+
+### Library views must match structurally
+
+Any view that shows a collection of items (quizzes library, flashcards library, notes list, etc.) must follow the same pattern:
+
+```tsx
+<section className="flex h-full min-h-0 flex-col gap-5">
+  {/* stats + primary action — shrink-0 */}
+  <div className="flex shrink-0 flex-col gap-4 md:flex-row md:items-end md:justify-between">
+    <div className="flex flex-wrap gap-2">
+      <StatPill>N items</StatPill>
+    </div>
+    <Button leadingIcon={<Plus />}>Create ...</Button>
+  </div>
+
+  {/* empty state */}
+  <div className="flex min-h-0 flex-1 items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-surface/70 p-8">
+    ...
+  </div>
+
+  {/* OR: scrollable grid */}
+  <div className="grid min-h-0 flex-1 gap-4 overflow-y-auto pr-1 ...cols">
+    {items.map(...)}
+  </div>
+</section>
+```
+
+Do not reinvent this layout per-feature.
+
+### Do not define components inside components (React rule 5.4)
+
+Defining a component inside another component creates a new type on every render — React remounts it every time, losing state. Always define components at module scope and pass data as props.
+
+```tsx
+// WRONG — new type every render, state lost
+function Parent() {
+  const Child = () => <div>...</div>;  // ← never do this
+  return <Child />;
+}
+
+// RIGHT
+function Child({ value }: { value: string }) {
+  return <div>{value}</div>;
+}
+function Parent({ value }: { value: string }) {
+  return <Child value={value} />;
+}
+```
+
+---
+
+## 10. React best practices (key rules)
+
+These rules come from production React at scale. Violating them causes bugs that are hard to trace.
+
+### State and effects
+
+- **Derive state during render, not in effects.** If a value can be computed from existing state/props, do it inline — no `useState` + `useEffect` to sync. ([React docs](https://react.dev/learn/you-might-not-need-an-effect))
+- **Put interaction logic in event handlers, not effects.** Side effects triggered by a button click belong in the click handler, not a `useEffect` that watches a `submitted` boolean.
+- **Use functional `setState` updates.** When new state depends on old state, use the updater form: `setItems(curr => [...curr, newItem])`. This avoids stale closures and keeps callbacks stable.
+- **`useRef` for transient values.** If a value changes frequently and doesn't need to trigger a re-render (mouse position, interval ID, animation frame), use `useRef`, not `useState`.
+
+### Waterfalls
+
+- **Parallel-fetch independent data.** `await A; await B;` when A and B are independent is a 2× latency hit. Use `Promise.all([A, B])` or start both promises before awaiting.
+- **`await connection()` on dynamic pages.** Required in Next.js 16 for pages that must not be statically cached (notes, quizzes, flashcards pages already do this — keep it).
+
+### Rendering
+
+- **Avoid `&&` with numbers.** `{count && <Badge>}` renders `0` when count is 0. Use `{count > 0 ? <Badge> : null}` instead.
+- **`useTransition` over manual loading state.** `const [isPending, startTransition] = useTransition()` gives you a built-in pending flag with correct error-reset behavior. Prefer it over `const [isSaving, setIsSaving] = useState(false)` when the operation is navigation-like.
+- **`toSorted()` not `sort()`.** `.sort()` mutates the array — breaks React's immutability model. Use `.toSorted()` (all modern browsers, Node 20+).
+
+### Bundle
+
+- **Direct imports from `lucide-react` are fine** — Next.js 16 uses `optimizePackageImports` to tree-shake them automatically. No need for deep import paths.
+- **Dynamic import heavy components.** Editor.js, math renderers, and other large libraries should be `next/dynamic` with `ssr: false` if not needed on initial paint.
+
+---
+
+## 11. Key gotchas
+
+1. **Zod v4 `ZodError.message` is JSON** — if you do `error.message` in a catch where the error might be a ZodError, you will leak a JSON array to the client. Always catch parse errors specifically and throw a plain string.
+
+2. **Embeddings are required for AI features** — flashcards and quizzes filter notes by `hasEmbedding`. If a user selects notes without embeddings, the API returns 400. UI must disable those notes.
+
+3. **`/api/chat` has no auth guard** — do not expose sensitive data through it without adding session checks.
+
+4. **Parse-test is feature-flagged** — `isParseTestEnabled()` checks `ENABLE_PARSE_TEST` env var; off in production by default.
+
+5. **Auth schema and Drizzle schema are linked** — `pnpm auth:generate` rewrites `lib/db/schema.ts`. Coordinate with migrations.
+
+6. **`radix-ui` is listed in deps but not imported** — do not use `@radix-ui/react-*` primitives directly in new components.
+
+7. **Many study routes are scaffolds** — `/resources`, most `/study/*` pages use `ScaffoldPage` and are not implemented. Don't assume they have real functionality.
+
+8. **Note editor is Editor.js** — complex, debounced, with custom blocks. Hundreds of CSS lines in `globals.css`. Do not touch it without reading `components/note-editor/`.
+
+9. **Quiz storage guard** — `hasQuizStorage()` returns false if DB migrations haven't run; quiz APIs return 503. The page handles it gracefully — keep that check when adding quiz API routes.
+
+10. **No shared form library** — no react-hook-form. Build forms with plain `<label>`, `Input`, `Textarea`, `Select`, manual state, and Zod validation on the API side.
+
+11. **`hooks/` alias exists but the folder is empty** — no shared hooks yet. Add new shared hooks there if needed.
+
+12. **Math rendering** — reuse the `MarkdownText` component pattern (ReactMarkdown + remark-gfm + remark-math + rehype-katex) for any user-facing content that may contain LaTeX. Do not add a separate math renderer.
diff --git a/app/api/flashcards/route.ts b/app/api/flashcards/route.ts
index 9986506..c71d1da 100644
--- a/app/api/flashcards/route.ts
+++ b/app/api/flashcards/route.ts
@@ -158,8 +158,8 @@ export async function POST(req: Request) {
 
     return NextResponse.json({ deck: rowToFlashcardDeck(created) }, { status: 201 });
   } catch (error) {
-    const message = error instanceof Error ? error.message : "Flashcard generation failed";
-    return NextResponse.json({ error: message }, { status: 500 });
+    console.error("[POST /api/flashcards]", error);
+    return NextResponse.json({ error: "Flashcard generation failed" }, { status: 500 });
   }
 }
 
@@ -181,23 +181,28 @@ export async function PATCH(req: Request) {
     return NextResponse.json({ error: "Invalid flashcard deck" }, { status: 400 });
   }
 
-  const [updated] = await db
-    .update(flashcards)
-    .set({
-      title: parsed.data.title,
-      sourceNoteIds: parsed.data.sourceNoteIds,
-      cards: parsed.data.cards,
-      cardCount: parsed.data.cards.length,
-      updatedAt: new Date(),
-    })
-    .where(and(eq(flashcards.id, parsed.data.deckId), eq(flashcards.userId, session.user.id)))
-    .returning();
+  try {
+    const [updated] = await db
+      .update(flashcards)
+      .set({
+        title: parsed.data.title,
+        sourceNoteIds: parsed.data.sourceNoteIds,
+        cards: parsed.data.cards,
+        cardCount: parsed.data.cards.length,
+        updatedAt: new Date(),
+      })
+      .where(and(eq(flashcards.id, parsed.data.deckId), eq(flashcards.userId, session.user.id)))
+      .returning();
 
-  if (!updated) {
-    return NextResponse.json({ error: "Flashcard deck not found" }, { status: 404 });
-  }
+    if (!updated) {
+      return NextResponse.json({ error: "Flashcard deck not found" }, { status: 404 });
+    }
 
-  return NextResponse.json({ deck: rowToFlashcardDeck(updated) });
+    return NextResponse.json({ deck: rowToFlashcardDeck(updated) });
+  } catch (error) {
+    console.error("[PATCH /api/flashcards]", error);
+    return NextResponse.json({ error: "Failed to save flashcard deck" }, { status: 500 });
+  }
 }
 
 export async function DELETE(req: Request) {
diff --git a/app/flashcards/flashcards-client.tsx b/app/flashcards/flashcards-client.tsx
index b778dcb..1546dc8 100644
--- a/app/flashcards/flashcards-client.tsx
+++ b/app/flashcards/flashcards-client.tsx
@@ -1,20 +1,23 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import type { ReactNode } from "react";
 import {
   Brain,
   Check,
   ChevronLeft,
   ChevronRight,
   Edit3,
-  Layers3,
   Loader2,
+  MoreHorizontal,
+  Play,
   Plus,
   RotateCcw,
   Save,
   Trash2,
   X,
 } from "lucide-react";
+import { toast } from "sonner";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
@@ -29,7 +32,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Input, Textarea } from "@/components/ui/input";
-import { PageHeader } from "@/components/ui/page-header";
 import { cx } from "@/lib/utils";
 import type { FlashcardDeck, FlashcardItem } from "@/lib/flashcards/types";
 
@@ -143,6 +145,14 @@ function MarkdownText({
   );
 }
 
+function StatPill({ children }: { children: ReactNode }) {
+  return (
+    <span className="inline-flex h-8 items-center rounded-full border border-border bg-transparent px-3 text-sm font-medium text-muted-foreground">
+      {children}
+    </span>
+  );
+}
+
 function DeckEditor({
   deck,
   disabled,
@@ -306,7 +316,7 @@ export function FlashcardsClient({
   const [isGenerating, setIsGenerating] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [deletingDeckId, setDeletingDeckId] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [moreOpenId, setMoreOpenId] = useState<string | null>(null);
 
   const activeDeck = decks.find((deck) => deck.id === activeDeckId) ?? decks[0];
   const activeCard = activeDeck?.cards[activeCardIndex];
@@ -334,7 +344,6 @@ export function FlashcardsClient({
     setCreateStep("context");
     setDraftDeck(null);
     setEditingDeck(null);
-    setError(null);
   }
 
   function openReview(deckId: string) {
@@ -342,20 +351,17 @@ export function FlashcardsClient({
     setActiveCardIndex(0);
     setShowBack(false);
     setView("review");
-    setError(null);
   }
 
   function openCreate() {
     setView("create");
     setCreateStep("context");
     setDraftDeck(null);
-    setError(null);
   }
 
   function openEdit(deck: FlashcardDeck) {
     setEditingDeck(cloneDeck(deck));
     setView("edit");
-    setError(null);
   }
 
   function goToCard(index: number) {
@@ -370,7 +376,6 @@ export function FlashcardsClient({
   }
 
   async function generatePreview() {
-    setError(null);
     setIsGenerating(true);
     try {
       const payload = await readJsonResponse<{ deck: FlashcardDeck }>(
@@ -388,11 +393,12 @@ export function FlashcardsClient({
       setDraftDeck(cloneDeck(payload.deck));
       setCreateStep("preview");
     } catch (generationError) {
-      setError(
-        generationError instanceof Error
-          ? generationError.message
-          : "Flashcard generation failed",
-      );
+      toast.error("Failed to generate flashcards", {
+        description:
+          generationError instanceof Error
+            ? generationError.message
+            : undefined,
+      });
     } finally {
       setIsGenerating(false);
     }
@@ -403,7 +409,6 @@ export function FlashcardsClient({
       return;
     }
 
-    setError(null);
     setIsSaving(true);
     try {
       const payload = await readJsonResponse<{ deck: FlashcardDeck }>(
@@ -425,11 +430,10 @@ export function FlashcardsClient({
       setCreateStep("context");
       openReview(payload.deck.id);
     } catch (saveError) {
-      setError(
-        saveError instanceof Error
-          ? saveError.message
-          : "Flashcard deck save failed",
-      );
+      toast.error("Failed to save flashcard deck", {
+        description:
+          saveError instanceof Error ? saveError.message : undefined,
+      });
     } finally {
       setIsSaving(false);
     }
@@ -440,7 +444,6 @@ export function FlashcardsClient({
       return;
     }
 
-    setError(null);
     setIsSaving(true);
     try {
       const payload = await readJsonResponse<{ deck: FlashcardDeck }>(
@@ -464,11 +467,10 @@ export function FlashcardsClient({
       setEditingDeck(null);
       openReview(payload.deck.id);
     } catch (saveError) {
-      setError(
-        saveError instanceof Error
-          ? saveError.message
-          : "Flashcard deck update failed",
-      );
+      toast.error("Failed to update flashcard deck", {
+        description:
+          saveError instanceof Error ? saveError.message : undefined,
+      });
     } finally {
       setIsSaving(false);
     }
@@ -479,7 +481,6 @@ export function FlashcardsClient({
       return;
     }
 
-    setError(null);
     setDeletingDeckId(deckId);
     try {
       await readJsonResponse<{ deletedDeckId: string }>(
@@ -495,350 +496,386 @@ export function FlashcardsClient({
       }
       openLibrary();
     } catch (deleteError) {
-      setError(
-        deleteError instanceof Error
-          ? deleteError.message
-          : "Flashcard deck delete failed",
-      );
+      toast.error("Failed to delete flashcard deck", {
+        description:
+          deleteError instanceof Error ? deleteError.message : undefined,
+      });
     } finally {
       setDeletingDeckId(null);
     }
   }
 
+  const totalCards = decks.reduce((total, deck) => total + deck.cards.length, 0);
+
   return (
-    <main className="mx-auto flex min-h-full w-full flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8">
-      <PageHeader
-        eyebrow="Flashcards"
-        title={view === "library" ? "My Flashcards" : "Flashcards"}
-        description="Focused deck library, generation queue, and card editor."
-      />
-
-      {error ? (
-        <div className="rounded-lg border border-red-200 bg-danger-soft px-4 py-3 text-sm text-danger dark:border-red-950/70">
-          {error}
+    <main
+      className="mx-auto flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden px-4 py-5 sm:px-6 lg:px-8"
+    >
+      {view !== "library" ? (
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={openLibrary}
+          >
+            My Flashcards
+          </Button>
         </div>
       ) : null}
 
-      {view === "library" ? (
-        <div className="flex flex-1 flex-col gap-6">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <div className="flex flex-wrap gap-2">
-              <Badge variant="outline">{decks.length} decks</Badge>
-              <Badge variant="outline">
-                {decks.reduce((total, deck) => total + deck.cards.length, 0)}{" "}
-                cards
-              </Badge>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        {view === "library" ? (
+          <section className="flex h-full min-h-0 flex-col gap-5">
+            <div className="flex shrink-0 flex-col gap-4 md:flex-row md:items-end md:justify-between">
+              <div className="flex flex-wrap gap-2">
+                <StatPill>{decks.length} decks</StatPill>
+                <StatPill>{totalCards} cards</StatPill>
+              </div>
+              <Button
+                type="button"
+                leadingIcon={<Plus className="size-4" />}
+                onClick={openCreate}
+              >
+                Create flashcards
+              </Button>
             </div>
-            <Button
-              type="button"
-              leadingIcon={<Plus className="size-4" />}
-              onClick={openCreate}
-            >
-              Create flashcards
-            </Button>
-          </div>
-
-          {decks.length === 0 ? (
-            <Card className="flex min-h-[28rem] flex-1 border-dashed">
-              <CardContent className="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
-                <Brain className="size-10 text-muted-foreground" />
-                <div className="space-y-1">
-                  <h2 className="text-base font-semibold text-foreground">
-                    No flashcard decks
+
+            <div className="min-h-0 flex-1 overflow-hidden rounded-[var(--radius-xl)] border border-border bg-surface/70">
+            {decks.length === 0 ? (
+              <div className="flex h-full items-center justify-center p-8">
+                <div className="flex max-w-sm flex-col items-center text-center">
+                  <Brain className="mb-5 size-12 text-muted-foreground" />
+                  <h2 className="text-lg font-semibold text-foreground">
+                    No saved decks
                   </h2>
-                  <p className="max-w-md text-sm leading-6 text-muted-foreground">
+                  <p className="mt-2 text-sm text-muted-foreground">
                     Saved decks appear here.
                   </p>
                 </div>
-              </CardContent>
-            </Card>
-          ) : (
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-              {decks.map((deck) => (
-                <Card key={deck.id}>
-                  <CardHeader>
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0 space-y-2">
-                        <CardTitle className="truncate">{deck.title}</CardTitle>
-                        <CardDescription>
-                          {deck.cards.length} cards - Updated{" "}
-                          {formatDeckDate(deck.updatedAt)}
-                        </CardDescription>
+              </div>
+            ) : (
+              <div className="grid h-full auto-rows-min grid-cols-1 content-start items-start gap-4 overflow-y-auto p-4 md:grid-cols-2 xl:grid-cols-3">
+                {decks.map((deck) => {
+                  const isMenuOpen = moreOpenId === deck.id;
+                  return (
+                    <div
+                      key={deck.id}
+                      role="button"
+                      tabIndex={0}
+                      className="relative cursor-pointer rounded-[var(--radius-xl)] border border-border bg-card text-card-foreground shadow-[var(--shadow-card)] transition hover:border-border-strong hover:bg-surface-muted"
+                      onClick={() => openReview(deck.id)}
+                      onKeyDown={(e) => e.key === "Enter" && openReview(deck.id)}
+                    >
+                      <div className="flex items-start gap-3 p-5">
+                        <div className="min-w-0 flex-1 space-y-3">
+                          <div className="flex flex-wrap items-center gap-2">
+                            {deck.sourceNoteIds.length > 0 ? (
+                              <Badge variant="accent">Generated</Badge>
+                            ) : (
+                              <Badge variant="neutral">Manual</Badge>
+                            )}
+                            <Badge variant="outline">
+                              {deck.cards.length} cards
+                            </Badge>
+                          </div>
+                          <div>
+                            <p className="font-semibold text-foreground">
+                              {deck.title}
+                            </p>
+                            <p className="mt-0.5 text-sm text-muted-foreground">
+                              Updated {formatDeckDate(deck.updatedAt)}
+                            </p>
+                          </div>
+                        </div>
+
+                        <button
+                          type="button"
+                          className="shrink-0 rounded-md p-1.5 text-muted-foreground transition hover:bg-surface-elevated hover:text-foreground"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setMoreOpenId(isMenuOpen ? null : deck.id);
+                          }}
+                        >
+                          <MoreHorizontal className="size-4" />
+                        </button>
                       </div>
-                      <Layers3 className="size-5 shrink-0 text-muted-foreground" />
+
+                      {isMenuOpen ? (
+                        <>
+                          <div
+                            className="fixed inset-0 z-[49]"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setMoreOpenId(null);
+                            }}
+                          />
+                          <div className="absolute right-2 top-11 z-[50] min-w-[120px] overflow-hidden rounded-lg border border-border bg-surface-elevated py-1 shadow-[var(--shadow-card)]">
+                            <button
+                              type="button"
+                              className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-surface-muted"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                openEdit(deck);
+                                setMoreOpenId(null);
+                              }}
+                            >
+                              <Edit3 className="size-3.5" />
+                              Edit
+                            </button>
+                            <button
+                              type="button"
+                              className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-danger hover:bg-danger-soft"
+                              disabled={deletingDeckId === deck.id}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setMoreOpenId(null);
+                                void deleteDeck(deck.id);
+                              }}
+                            >
+                              {deletingDeckId === deck.id ? (
+                                <Loader2 className="size-3.5 animate-spin" />
+                              ) : (
+                                <Trash2 className="size-3.5" />
+                              )}
+                              Delete
+                            </button>
+                          </div>
+                        </>
+                      ) : null}
                     </div>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="flex flex-wrap gap-2">
-                      {deck.sourceNoteIds.length > 0 ? (
-                        <Badge variant="accent">Generated</Badge>
+                  );
+                })}
+              </div>
+            )}
+            </div>
+          </section>
+        ) : null}
+
+        {view === "create" ? (
+          <Card className="flex h-full min-h-0 flex-col">
+            <CardHeader className="shrink-0 gap-4 py-5 sm:flex-row sm:items-start sm:justify-between">
+              <div>
+                <CardTitle className="text-xl">
+                  {createStep === "context" ? "Create Flashcards" : "Preview Deck"}
+                </CardTitle>
+                <CardDescription>
+                  {createStep === "context"
+                    ? "Choose note context."
+                    : "Edit before saving."}
+                </CardDescription>
+              </div>
+              <div className="flex shrink-0 gap-2">
+                <Badge variant={createStep === "context" ? "accent" : "outline"}>
+                  Context
+                </Badge>
+                <Badge variant={createStep === "preview" ? "accent" : "outline"}>
+                  Preview
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="flex min-h-0 flex-1 flex-col gap-5 pb-5">
+              {createStep === "context" ? (
+                <>
+                  <section className="flex min-h-0 flex-1 flex-col gap-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <h2 className="text-sm font-semibold text-foreground">
+                        Notes
+                      </h2>
+                      <Badge variant="outline" className="text-sm">
+                        {selectedNoteIds.length} selected
+                      </Badge>
+                    </div>
+                    <div className="grid min-h-0 flex-1 gap-2 overflow-y-auto pr-1 md:grid-cols-2">
+                      {notes.length === 0 ? (
+                        <p className="rounded-lg border border-border bg-surface-muted px-3 py-3 text-sm text-muted-foreground">
+                          Create or upload notes first.
+                        </p>
                       ) : (
-                        <Badge>Manual</Badge>
+                        notes.map((note) => (
+                          <label
+                            key={note.id}
+                            className={cx(
+                              "flex min-h-20 cursor-pointer items-start gap-4 rounded-lg border border-border bg-surface px-4 py-4 text-sm transition",
+                              note.hasEmbedding
+                                ? "hover:border-border-strong hover:bg-surface-muted"
+                                : "cursor-not-allowed opacity-60",
+                              selectedNoteIds.includes(note.id)
+                                ? "border-accent bg-accent-soft/60"
+                                : "",
+                            )}
+                          >
+                            <input
+                              type="checkbox"
+                              className="mt-1 size-4 accent-[var(--accent)]"
+                              checked={selectedNoteIds.includes(note.id)}
+                              disabled={!note.hasEmbedding || isGenerating}
+                              onChange={() => toggleNote(note.id)}
+                            />
+                            <span className="min-w-0 flex-1">
+                              <span className="block truncate font-semibold text-foreground">
+                                {note.title}
+                              </span>
+                              <span className="mt-1 block text-sm text-muted-foreground">
+                                {note.hasEmbedding
+                                  ? "Embedding ready"
+                                  : "Embedding required"}
+                              </span>
+                            </span>
+                          </label>
+                        ))
                       )}
-                      <Badge variant="outline">Private</Badge>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      <Button
-                        type="button"
-                        size="sm"
-                        onClick={() => openReview(deck.id)}
-                      >
-                        Review
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        leadingIcon={<Edit3 className="size-4" />}
-                        onClick={() => openEdit(deck)}
-                      >
-                        Edit
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="destructive"
-                        size="sm"
-                        disabled={deletingDeckId === deck.id}
-                        leadingIcon={
-                          deletingDeckId === deck.id ? (
-                            <Loader2 className="size-4 animate-spin" />
-                          ) : (
-                            <Trash2 className="size-4" />
-                          )
-                        }
-                        onClick={() => deleteDeck(deck.id)}
-                      >
-                        Delete
-                      </Button>
                     </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
-      ) : null}
+                  </section>
+
+                  <label className="max-w-xs shrink-0 space-y-2 text-sm font-medium text-foreground">
+                    Cards
+                    <Input
+                      type="number"
+                      min={4}
+                      max={40}
+                      value={cardCount}
+                      disabled={isGenerating}
+                      onChange={(event) =>
+                        setCardCount(Number(event.target.value))
+                      }
+                    />
+                  </label>
+
+                  <div className="flex shrink-0 flex-wrap gap-3">
+                    <Button
+                      type="button"
+                      disabled={!canGenerate}
+                      leadingIcon={
+                        isGenerating ? (
+                          <Loader2 className="size-4 animate-spin" />
+                        ) : (
+                          <Check className="size-4" />
+                        )
+                      }
+                      onClick={generatePreview}
+                    >
+                      Generate preview
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={isGenerating}
+                      onClick={openLibrary}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </>
+              ) : null}
 
-      {view === "create" ? (
-        <Card>
-          <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div className="space-y-2">
-              <CardTitle>
-                {createStep === "context"
-                  ? "Create Flashcards"
-                  : "Preview Deck"}
-              </CardTitle>
-              <CardDescription>
-                {createStep === "context"
-                  ? "Choose note context."
-                  : "Edit before saving."}
-              </CardDescription>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Badge variant={createStep === "context" ? "accent" : "outline"}>
-                Context
-              </Badge>
-              <Badge variant={createStep === "preview" ? "accent" : "outline"}>
-                Preview
-              </Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {createStep === "context" ? (
-              <>
-                <section className="space-y-3">
-                  <div className="flex items-center justify-between gap-3">
-                    <h2 className="text-sm font-medium text-foreground">
-                      Notes
-                    </h2>
-                    <Badge variant="outline">
-                      {selectedNoteIds.length} selected
-                    </Badge>
+              {createStep === "preview" && draftDeck ? (
+                <>
+                  <div className="min-h-0 flex-1 overflow-y-auto">
+                    <DeckEditor
+                      deck={draftDeck}
+                      disabled={isSaving}
+                      onChange={setDraftDeck}
+                    />
                   </div>
-                  <div className="grid max-h-[28rem] gap-2 overflow-auto pr-1 md:grid-cols-2">
-                    {notes.length === 0 ? (
-                      <p className="rounded-lg border border-border bg-surface-muted px-3 py-2 text-sm text-muted-foreground">
-                        No notes yet.
-                      </p>
-                    ) : (
-                      notes.map((note) => (
-                        <label
-                          key={note.id}
-                          className={cx(
-                            "flex cursor-pointer items-start gap-3 rounded-lg border border-border bg-surface px-3 py-3 text-sm transition",
-                            note.hasEmbedding
-                              ? "hover:border-border-strong hover:bg-surface-muted"
-                              : "cursor-not-allowed opacity-60",
-                          )}
-                        >
-                          <input
-                            type="checkbox"
-                            className="mt-1 size-4 accent-[var(--accent)]"
-                            checked={selectedNoteIds.includes(note.id)}
-                            disabled={!note.hasEmbedding || isGenerating}
-                            onChange={() => toggleNote(note.id)}
-                          />
-                          <span className="min-w-0 flex-1">
-                            <span className="block truncate font-medium text-foreground">
-                              {note.title}
-                            </span>
-                            <span className="text-xs text-muted-foreground">
-                              {note.hasEmbedding
-                                ? "Embedding ready"
-                                : "No embedding"}
-                            </span>
-                          </span>
-                        </label>
-                      ))
-                    )}
+                  <div className="flex shrink-0 flex-wrap gap-3">
+                    <Button
+                      type="button"
+                      disabled={!canSaveDraft || isSaving}
+                      leadingIcon={
+                        isSaving ? (
+                          <Loader2 className="size-4 animate-spin" />
+                        ) : (
+                          <Save className="size-4" />
+                        )
+                      }
+                      onClick={saveDraftDeck}
+                    >
+                      Save deck
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={isSaving}
+                      leadingIcon={<ChevronLeft className="size-4" />}
+                      onClick={() => setCreateStep("context")}
+                    >
+                      Back
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      disabled={isSaving}
+                      onClick={openLibrary}
+                    >
+                      Cancel
+                    </Button>
                   </div>
-                </section>
-
-                <label className="max-w-xs space-y-2 text-sm font-medium text-foreground">
-                  Cards
-                  <Input
-                    type="number"
-                    min={4}
-                    max={40}
-                    value={cardCount}
-                    disabled={isGenerating}
-                    onChange={(event) =>
-                      setCardCount(Number(event.target.value))
-                    }
-                  />
-                </label>
-
-                <div className="flex flex-wrap gap-3">
-                  <Button
-                    type="button"
-                    disabled={!canGenerate}
-                    leadingIcon={
-                      isGenerating ? (
-                        <Loader2 className="size-4 animate-spin" />
-                      ) : (
-                        <Check className="size-4" />
-                      )
-                    }
-                    onClick={generatePreview}
-                  >
-                    Generate preview
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    disabled={isGenerating}
-                    onClick={openLibrary}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </>
-            ) : null}
-
-            {createStep === "preview" && draftDeck ? (
-              <>
+                </>
+              ) : null}
+            </CardContent>
+          </Card>
+        ) : null}
+
+        {view === "edit" && editingDeck ? (
+          <Card className="flex h-full min-h-0 flex-col">
+            <CardHeader className="shrink-0 gap-4 py-5 sm:flex-row sm:items-start sm:justify-between">
+              <div>
+                <CardTitle className="text-xl">Edit Flashcards</CardTitle>
+                <CardDescription>
+                  Deck name, card fronts, backs, and tags.
+                </CardDescription>
+              </div>
+              <Badge variant="outline">{editingDeck.cards.length} cards</Badge>
+            </CardHeader>
+            <CardContent className="flex min-h-0 flex-1 flex-col gap-5 pb-5">
+              <div className="min-h-0 flex-1 overflow-y-auto">
                 <DeckEditor
-                  deck={draftDeck}
+                  deck={editingDeck}
                   disabled={isSaving}
-                  onChange={setDraftDeck}
+                  onChange={setEditingDeck}
                 />
-                <div className="flex flex-wrap gap-3">
-                  <Button
-                    type="button"
-                    disabled={!canSaveDraft || isSaving}
-                    leadingIcon={
-                      isSaving ? (
-                        <Loader2 className="size-4 animate-spin" />
-                      ) : (
-                        <Save className="size-4" />
-                      )
-                    }
-                    onClick={saveDraftDeck}
-                  >
-                    Save deck
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    disabled={isSaving}
-                    leadingIcon={<ChevronLeft className="size-4" />}
-                    onClick={() => setCreateStep("context")}
-                  >
-                    Back
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    disabled={isSaving}
-                    onClick={openLibrary}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </>
-            ) : null}
-          </CardContent>
-        </Card>
-      ) : null}
-
-      {view === "edit" && editingDeck ? (
-        <Card>
-          <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div className="space-y-2">
-              <CardTitle>Edit Flashcards</CardTitle>
-              <CardDescription>
-                Deck name, card fronts, backs, and tags.
-              </CardDescription>
-            </div>
-            <Badge variant="outline">{editingDeck.cards.length} cards</Badge>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <DeckEditor
-              deck={editingDeck}
-              disabled={isSaving}
-              onChange={setEditingDeck}
-            />
-            <div className="flex flex-wrap gap-3">
-              <Button
-                type="button"
-                disabled={!canSaveEdit || isSaving}
-                leadingIcon={
-                  isSaving ? (
-                    <Loader2 className="size-4 animate-spin" />
-                  ) : (
-                    <Save className="size-4" />
-                  )
-                }
-                onClick={saveEditedDeck}
-              >
-                Save changes
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                disabled={isSaving}
-                leadingIcon={<X className="size-4" />}
-                onClick={openLibrary}
-              >
-                Cancel
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      ) : null}
-
-      {view === "review" ? (
-        <Card>
-          <CardHeader className="gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div className="space-y-2">
-              <CardTitle>{activeDeck?.title ?? "Deck workspace"}</CardTitle>
-              <CardDescription>
-                {activeDeck
-                  ? `${activeCardIndex + 1}/${activeDeck.cards.length} cards`
-                  : "No deck selected."}
-              </CardDescription>
-            </div>
-            <div className="flex flex-wrap gap-2">
+              </div>
+              <div className="flex shrink-0 flex-wrap gap-3">
+                <Button
+                  type="button"
+                  disabled={!canSaveEdit || isSaving}
+                  leadingIcon={
+                    isSaving ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : (
+                      <Save className="size-4" />
+                    )
+                  }
+                  onClick={saveEditedDeck}
+                >
+                  Save changes
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={isSaving}
+                  leadingIcon={<X className="size-4" />}
+                  onClick={openLibrary}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ) : null}
+
+        {view === "review" ? (
+          <Card className="flex h-full min-h-0 flex-col">
+            <CardHeader className="shrink-0 gap-4 py-5 sm:flex-row sm:items-start sm:justify-between">
+              <div>
+                <CardTitle>{activeDeck?.title ?? "Deck workspace"}</CardTitle>
+                <CardDescription>
+                  {activeDeck
+                    ? `${activeCardIndex + 1}/${activeDeck.cards.length} cards`
+                    : "No deck selected."}
+                </CardDescription>
+              </div>
               {activeDeck ? (
                 <Button
                   type="button"
@@ -850,97 +887,92 @@ export function FlashcardsClient({
                   Edit
                 </Button>
               ) : null}
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={openLibrary}
-              >
-                My Flashcards
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {activeCard ? (
-              <div className="space-y-5">
-                <button
-                  type="button"
-                  className="flex min-h-96 w-full flex-col justify-between rounded-lg border border-border bg-surface-muted p-6 text-left transition hover:border-border-strong"
-                  onClick={() => setShowBack((value) => !value)}
-                >
-                  <div className="flex items-center justify-between gap-3">
-                    <Badge variant="accent">
-                      {showBack ? "Back" : "Front"}
-                    </Badge>
-                    <Badge variant="outline">Flip</Badge>
-                  </div>
-                  <div className="mx-auto flex w-full max-w-3xl flex-1 items-center justify-center py-8">
-                    <MarkdownText
-                      markdown={showBack ? activeCard.back : activeCard.front}
-                      className="text-center text-xl font-medium leading-9"
-                    />
-                  </div>
-                  <div className="flex flex-wrap gap-2">
-                    {activeCard.tags?.map((tag) => (
-                      <Badge key={`${activeCard.id}-${tag}`} variant="accent">
-                        {tag}
-                      </Badge>
-                    ))}
-                    {activeCard.sourceNoteTitles.map((title) => (
-                      <Badge key={title} variant="neutral">
-                        {title}
-                      </Badge>
-                    ))}
-                  </div>
-                </button>
-
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                  <Button
+            </CardHeader>
+            <CardContent className="flex min-h-0 flex-1 flex-col gap-5 pb-5">
+              {activeCard ? (
+                <>
+                  <button
                     type="button"
-                    variant="outline"
-                    disabled={activeCardIndex === 0}
-                    leadingIcon={<ChevronLeft className="size-4" />}
-                    onClick={() => goToCard(activeCardIndex - 1)}
-                  >
-                    Previous
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    leadingIcon={<RotateCcw className="size-4" />}
+                    className="flex min-h-0 flex-1 flex-col justify-between rounded-lg border border-border bg-surface-muted p-6 text-left transition hover:border-border-strong"
                     onClick={() => setShowBack((value) => !value)}
                   >
-                    Flip
-                  </Button>
-                  <Button
-                    type="button"
-                    disabled={
-                      !activeDeck ||
-                      activeCardIndex >= activeDeck.cards.length - 1
-                    }
-                    leadingIcon={<ChevronRight className="size-4" />}
-                    onClick={() => goToCard(activeCardIndex + 1)}
-                  >
-                    Next
-                  </Button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex min-h-96 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-surface-muted px-6 text-center">
-                <Brain className="size-10 text-muted-foreground" />
-                <div className="space-y-1">
-                  <h2 className="text-base font-semibold text-foreground">
-                    No deck selected
-                  </h2>
-                  <p className="max-w-md text-sm leading-6 text-muted-foreground">
-                    Choose a saved deck.
-                  </p>
+                    <div className="flex items-center justify-between gap-3">
+                      <Badge variant="accent">
+                        {showBack ? "Back" : "Front"}
+                      </Badge>
+                      <Badge variant="outline">Flip</Badge>
+                    </div>
+                    <div className="mx-auto flex w-full max-w-3xl flex-1 items-center justify-center py-8">
+                      <MarkdownText
+                        markdown={showBack ? activeCard.back : activeCard.front}
+                        className="text-center text-xl font-medium leading-9"
+                      />
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {activeCard.tags?.map((tag) => (
+                        <Badge
+                          key={`${activeCard.id}-${tag}`}
+                          variant="accent"
+                        >
+                          {tag}
+                        </Badge>
+                      ))}
+                      {activeCard.sourceNoteTitles.map((title) => (
+                        <Badge key={title} variant="neutral">
+                          {title}
+                        </Badge>
+                      ))}
+                    </div>
+                  </button>
+
+                  <div className="flex shrink-0 flex-wrap items-center justify-between gap-3">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={activeCardIndex === 0}
+                      leadingIcon={<ChevronLeft className="size-4" />}
+                      onClick={() => goToCard(activeCardIndex - 1)}
+                    >
+                      Previous
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      leadingIcon={<RotateCcw className="size-4" />}
+                      onClick={() => setShowBack((value) => !value)}
+                    >
+                      Flip
+                    </Button>
+                    <Button
+                      type="button"
+                      disabled={
+                        !activeDeck ||
+                        activeCardIndex >= activeDeck.cards.length - 1
+                      }
+                      leadingIcon={<ChevronRight className="size-4" />}
+                      onClick={() => goToCard(activeCardIndex + 1)}
+                    >
+                      Next
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <div className="flex min-h-0 flex-1 items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-surface-muted">
+                  <div className="flex flex-col items-center text-center">
+                    <Brain className="mb-3 size-8 text-muted-foreground" />
+                    <p className="font-semibold text-foreground">
+                      No deck selected
+                    </p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      Choose a saved deck.
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      ) : null}
+              )}
+            </CardContent>
+          </Card>
+        ) : null}
+      </div>
     </main>
   );
 }
diff --git a/app/quizzes/quizzes-client.tsx b/app/quizzes/quizzes-client.tsx
index 7a6801e..1a14528 100644
--- a/app/quizzes/quizzes-client.tsx
+++ b/app/quizzes/quizzes-client.tsx
@@ -9,6 +9,7 @@ import {
   Copy,
   FileQuestion,
   Loader2,
+  MoreHorizontal,
   Pencil,
   Play,
   Plus,
@@ -290,6 +291,7 @@ export function QuizzesClient({
   const [isEvaluating, setIsEvaluating] = useState(false);
   const [isFinishing, setIsFinishing] = useState(false);
   const [deleteQuizId, setDeleteQuizId] = useState<string | null>(null);
+  const [moreOpenId, setMoreOpenId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const activeQuiz =
@@ -789,8 +791,9 @@ export function QuizzesClient({
           </Button>
         </div>
 
+        <div className="min-h-0 flex-1 overflow-hidden rounded-[var(--radius-xl)] border border-border bg-surface/70">
         {quizzes.length === 0 ? (
-          <div className="flex min-h-0 flex-1 items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-surface/70 p-8">
+          <div className="flex h-full items-center justify-center p-8">
             <div className="flex max-w-sm flex-col items-center text-center">
               <FileQuestion className="mb-5 size-12 text-muted-foreground" />
               <h2 className="text-lg font-semibold text-foreground">
@@ -802,121 +805,118 @@ export function QuizzesClient({
             </div>
           </div>
         ) : (
-          <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-y-auto pr-1 xl:grid-cols-2">
+          <div className="grid h-full auto-rows-min grid-cols-1 content-start items-start gap-4 overflow-y-auto p-4 md:grid-cols-2 xl:grid-cols-3">
             {quizzes.map((quiz) => {
-              const quizAttempts = attempts.filter(
-                (attempt) => attempt.quizId === quiz.id,
-              );
-              const lastAttempt = quizAttempts[0];
+              const lastAttempt = attempts.find((a) => a.quizId === quiz.id);
               const isDeleting = deleteQuizId === quiz.id;
+              const isMenuOpen = moreOpenId === quiz.id;
 
               return (
-                <Card
+                <div
                   key={quiz.id}
+                  role="button"
+                  tabIndex={0}
                   className={cx(
-                    "transition hover:border-border-strong hover:bg-surface-muted",
-                    activeQuiz?.id === quiz.id ? "border-accent/70" : "",
+                    "relative cursor-pointer rounded-[var(--radius-xl)] border bg-card text-card-foreground shadow-[var(--shadow-card)] transition hover:border-border-strong hover:bg-surface-muted",
+                    activeQuiz?.id === quiz.id ? "border-accent/70" : "border-border",
                   )}
+                  onClick={() => startTaking(quiz)}
+                  onKeyDown={(e) => e.key === "Enter" && startTaking(quiz)}
                 >
-                  <CardHeader className="gap-4">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Badge variant="accent">{quiz.mode}</Badge>
-                      <Badge variant="outline">{quiz.difficulty}</Badge>
-                      <Badge variant="outline">
-                        {quiz.questionCount} questions
-                      </Badge>
-                      {lastAttempt ? (
-                        <Badge variant="neutral">
-                          {formatPercent(lastAttempt.score)} last score
-                        </Badge>
-                      ) : null}
-                    </div>
-                    <div>
-                      <CardTitle>{quiz.title}</CardTitle>
-                      <CardDescription>
-                        Updated {formatDate(quiz.updatedAt)}
-                      </CardDescription>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-5">
-                    <div className="flex flex-wrap gap-2">
-                      {quiz.sourceNoteTitles.slice(0, 5).map((title) => (
-                        <Badge key={title} variant="neutral">
-                          {title}
+                  <div className="flex items-start gap-3 p-5">
+                    <div className="min-w-0 flex-1 space-y-3">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <Badge variant="accent">{quiz.mode}</Badge>
+                        <Badge variant="outline">{quiz.difficulty}</Badge>
+                        <Badge variant="outline">
+                          {quiz.questionCount} questions
                         </Badge>
-                      ))}
-                    </div>
-
-                    <div className="space-y-2">
-                      <h3 className="text-sm font-medium text-foreground">
-                        Questions
-                      </h3>
-                      <div className="grid gap-2">
-                        {quiz.questions.slice(0, 2).map((question, index) => (
-                          <button
-                            key={question.id}
-                            type="button"
-                            className="rounded-lg border border-border bg-surface px-3 py-2 text-left text-sm transition hover:bg-surface-muted"
-                            onClick={() => {
-                              setActiveQuizId(quiz.id);
-                              editQuiz(quiz);
-                            }}
-                          >
-                            <span className="mb-1 flex items-center gap-2">
-                              <Badge variant="outline">
-                                Question {index + 1}
-                              </Badge>
-                              <Badge variant="neutral">
-                                {question.type.replace("_", " ")}
-                              </Badge>
-                            </span>
-                            <MarkdownText
-                              markdown={question.prompt}
-                              className="line-clamp-2 text-sm"
-                            />
-                          </button>
-                        ))}
+                        {lastAttempt ? (
+                          <Badge variant="neutral">
+                            {formatPercent(lastAttempt.score)} last
+                          </Badge>
+                        ) : null}
+                      </div>
+                      <div>
+                        <p className="font-semibold text-foreground">
+                          {quiz.title}
+                        </p>
+                        <p className="mt-0.5 text-sm text-muted-foreground">
+                          Updated {formatDate(quiz.updatedAt)}
+                        </p>
                       </div>
                     </div>
 
-                    {quizAttempts.length > 0 ? (
-                      <div className="space-y-2">
-                        <h3 className="text-sm font-medium text-foreground">
-                          Previous results
-                        </h3>
-                        <div className="grid gap-2 sm:grid-cols-2">
-                          {quizAttempts.slice(0, 4).map((attempt) => (
-                            <button
-                              key={attempt.id}
-                              type="button"
-                              className="flex items-center justify-between gap-3 rounded-lg border border-border bg-surface px-3 py-2 text-left text-sm transition hover:bg-surface-muted"
-                              onClick={() => {
-                                setActiveQuizId(quiz.id);
-                                setSelectedAttemptId(attempt.id);
-                                setLatestAttempt(attempt);
-                                setView("results");
-                              }}
-                            >
-                              <span className="truncate text-muted-foreground">
-                                {formatDate(attempt.completedAt)}
-                              </span>
-                              <Badge variant="accent">
-                                {formatPercent(attempt.score)}
-                              </Badge>
-                            </button>
-                          ))}
-                        </div>
+                    <button
+                      type="button"
+                      className="shrink-0 rounded-md p-1.5 text-muted-foreground transition hover:bg-surface-elevated hover:text-foreground"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setMoreOpenId(isMenuOpen ? null : quiz.id);
+                      }}
+                    >
+                      <MoreHorizontal className="size-4" />
+                    </button>
+                  </div>
+
+                  {isMenuOpen ? (
+                    <>
+                      <div
+                        className="fixed inset-0 z-[49]"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setMoreOpenId(null);
+                        }}
+                      />
+                      <div className="absolute right-2 top-11 z-[50] min-w-[148px] overflow-hidden rounded-lg border border-border bg-surface-elevated py-1 shadow-[var(--shadow-card)]">
+                        <button
+                          type="button"
+                          className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-surface-muted"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            editQuiz(quiz);
+                            setMoreOpenId(null);
+                          }}
+                        >
+                          <Pencil className="size-3.5" />
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-surface-muted"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            void duplicateQuiz(quiz);
+                            setMoreOpenId(null);
+                          }}
+                        >
+                          <Copy className="size-3.5" />
+                          Duplicate
+                        </button>
+                        <button
+                          type="button"
+                          className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-danger hover:bg-danger-soft"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeleteQuizId(quiz.id);
+                            setMoreOpenId(null);
+                          }}
+                        >
+                          <Trash2 className="size-3.5" />
+                          Delete
+                        </button>
                       </div>
-                    ) : (
-                      <p className="rounded-lg border border-border bg-surface-muted px-3 py-2 text-sm text-muted-foreground">
-                        Attempts appear after quiz completion.
-                      </p>
-                    )}
+                    </>
+                  ) : null}
 
-                    {isDeleting ? (
-                      <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-red-200 bg-danger-soft px-3 py-3 text-sm text-danger dark:border-red-950/70">
+                  {isDeleting ? (
+                    <div
+                      className="border-t border-border px-5 py-3"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-danger">
                         <span>Delete quiz and saved attempts?</span>
-                        <span className="flex flex-wrap gap-2">
+                        <span className="flex gap-2">
                           <Button
                             type="button"
                             size="sm"
@@ -924,7 +924,7 @@ export function QuizzesClient({
                             disabled={isSaving}
                             onClick={() => void deleteQuiz(quiz.id)}
                           >
-                            Confirm delete
+                            Confirm
                           </Button>
                           <Button
                             type="button"
@@ -936,52 +936,14 @@ export function QuizzesClient({
                           </Button>
                         </span>
                       </div>
-                    ) : (
-                      <div className="flex flex-wrap gap-2">
-                        <Button
-                          type="button"
-                          size="sm"
-                          leadingIcon={<Play className="size-4" />}
-                          onClick={() => startTaking(quiz)}
-                        >
-                          Take
-                        </Button>
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="outline"
-                          leadingIcon={<Pencil className="size-4" />}
-                          onClick={() => editQuiz(quiz)}
-                        >
-                          Edit
-                        </Button>
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="outline"
-                          leadingIcon={<Copy className="size-4" />}
-                          disabled={isSaving}
-                          onClick={() => void duplicateQuiz(quiz)}
-                        >
-                          Duplicate
-                        </Button>
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="destructive"
-                          leadingIcon={<Trash2 className="size-4" />}
-                          onClick={() => setDeleteQuizId(quiz.id)}
-                        >
-                          Delete
-                        </Button>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
+                    </div>
+                  ) : null}
+                </div>
               );
             })}
           </div>
         )}
+        </div>
       </section>
     );
   }
@@ -1234,7 +1196,7 @@ export function QuizzesClient({
             </label>
           </section>
 
-          <section className="grid min-h-0 flex-1 gap-4 lg:grid-cols-[260px_minmax(0,1fr)]">
+          <section className="grid min-h-0 flex-1 gap-4 overflow-hidden lg:grid-cols-[260px_minmax(0,1fr)]">
             <aside className="flex min-h-0 flex-col rounded-[var(--radius-xl)] border border-border bg-surface-muted/60">
               <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border p-3">
                 <h2 className="text-sm font-semibold text-foreground">
@@ -1288,8 +1250,8 @@ export function QuizzesClient({
             </aside>
 
             {activeDraftQuestion ? (
-              <div className="flex min-h-0 flex-col rounded-[var(--radius-xl)] border border-border bg-surface-muted/60 p-4">
-                <div className="mb-3 flex shrink-0 flex-wrap items-center justify-between gap-3">
+              <div className="overflow-y-auto rounded-[var(--radius-xl)] border border-border bg-surface-muted/60 p-4">
+                <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
                   <Badge variant="outline">
                     Question {draftQuestionIndex + 1}
                   </Badge>
@@ -1304,14 +1266,14 @@ export function QuizzesClient({
                   </Button>
                 </div>
 
-                <div className="grid min-h-0 flex-1 gap-4 lg:grid-cols-2">
-                  <div className="flex min-h-0 flex-col gap-3">
-                    <label className="flex min-h-0 flex-1 flex-col gap-1.5 text-sm font-medium text-foreground">
+                <div className="grid gap-4 lg:grid-cols-2">
+                  <div className="flex flex-col gap-3">
+                    <label className="flex flex-col gap-1.5 text-sm font-medium text-foreground">
                       Prompt
                       <Textarea
                         rows={7}
                         value={activeDraftQuestion.prompt}
-                        className="min-h-0 flex-1 resize-none"
+                        className="resize-none"
                         onChange={(event) =>
                           updateDraftQuestion(draftQuestionIndex, {
                             prompt: event.target.value,
@@ -1319,7 +1281,7 @@ export function QuizzesClient({
                         }
                       />
                     </label>
-                    <div className="grid shrink-0 gap-3 md:grid-cols-[180px_minmax(0,1fr)]">
+                    <div className="grid gap-3 md:grid-cols-[180px_minmax(0,1fr)]">
                       <label className="space-y-1.5 text-sm font-medium text-foreground">
                         Type
                         <Select
@@ -1357,13 +1319,13 @@ export function QuizzesClient({
                     </div>
                   </div>
 
-                  <div className="flex min-h-0 flex-col gap-3">
-                    <label className="flex min-h-0 flex-1 flex-col gap-1.5 text-sm font-medium text-foreground">
+                  <div className="flex flex-col gap-3">
+                    <label className="flex flex-col gap-1.5 text-sm font-medium text-foreground">
                       Correct answer
                       <Textarea
                         rows={7}
                         value={activeDraftQuestion.correctAnswer}
-                        className="min-h-0 flex-1 resize-none"
+                        className="resize-none"
                         onChange={(event) =>
                           updateDraftQuestion(draftQuestionIndex, {
                             correctAnswer: event.target.value,
@@ -1371,12 +1333,12 @@ export function QuizzesClient({
                         }
                       />
                     </label>
-                    <label className="flex min-h-0 flex-1 flex-col gap-1.5 text-sm font-medium text-foreground">
+                    <label className="flex flex-col gap-1.5 text-sm font-medium text-foreground">
                       Explanation
                       <Textarea
                         rows={3}
                         value={activeDraftQuestion.explanation}
-                        className="min-h-0 flex-1 resize-none"
+                        className="resize-none"
                         onChange={(event) =>
                           updateDraftQuestion(draftQuestionIndex, {
                             explanation: event.target.value,
@@ -1836,20 +1798,6 @@ export function QuizzesClient({
       data-testid="quizzes-one-page"
       className="mx-auto flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden px-4 py-5 sm:px-6 lg:px-8"
     >
-      <header className="shrink-0">
-        <div>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.28em] text-muted-foreground">
-            QUIZZES
-          </p>
-          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
-            {view === "library" ? "My Quizzes" : "Quizzes"}
-          </h1>
-          <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            Focused quiz library, generation queue, and question editor.
-          </p>
-        </div>
-      </header>
-
       {error ? (
         <div className="shrink-0 rounded-lg border border-red-200 bg-danger-soft px-4 py-2 text-sm text-danger dark:border-red-950/70">
           {error}
diff --git a/lib/flashcards/gemini.ts b/lib/flashcards/gemini.ts
index adffc45..8a9959f 100644
--- a/lib/flashcards/gemini.ts
+++ b/lib/flashcards/gemini.ts
@@ -5,7 +5,7 @@ import type { FlashcardContextNote, FlashcardItem } from "@/lib/flashcards/types
 const generatedCardSchema = z.object({
   front: z.string().min(1),
   back: z.string().min(1),
-  sourceNoteTitles: z.array(z.string().min(1)).min(1),
+  sourceNoteTitles: z.array(z.string().min(1)).default([]),
 });
 
 const generatedDeckSchema = z.object({
@@ -123,7 +123,14 @@ export async function generateFlashcardDeck(params: {
     throw new Error("Gemini returned an empty flashcard generation response.");
   }
 
-  const deck = generatedDeckSchema.parse(parseJsonPayload(response.text));
+  let deck: z.infer<typeof generatedDeckSchema>;
+  try {
+    deck = generatedDeckSchema.parse(parseJsonPayload(response.text));
+  } catch (parseError) {
+    console.error("[flashcards/gemini] Deck parse failed:", parseError);
+    throw new Error("Flashcard generation failed");
+  }
+
   return {
     title: deck.title.trim() || "Generated flashcards",
     cards: deck.cards.map((card) => ({