review: lazy-load groups with infinite scroll, nest seasons

Client changes paired with the earlier /groups endpoint:
- Types: drop review[]/reviewTotal from PipelineData, add ReviewGroup
  and ReviewGroupsResponse.
- PipelinePage: parallel-fetch /pipeline and /groups?offset=0&limit=25.
- ReviewColumn: IntersectionObserver on a sentinel div fetches the
  next page when it scrolls into view. No more "Showing first N of M"
  banner — the column loads lazily until hasMore is false.
- SeriesCard: when a series has pending work in >1 season, render
  collapsible season sub-groups each with an "Approve season" button
  wired to POST /season/:key/:season/approve-all. Rename the series
  button from "Approve all" to "Approve series" for clarity.

v2026.04.15.3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

AUDIT.md

@@ -0,0 +1,73 @@
+# Security & Reliability Audit (2026-04-15)
+
+## Scope
+
+Reviewed server and client codepaths with focus on:
+- exposed attack surface
+- secret handling
+- destructive endpoints
+- job execution safety
+- input validation consistency
+
+## Findings (Highest Severity First)
+
+### 1. Critical: Real service credentials are committed in the repository
+- Evidence:
+  - `.env.development:6` (`JELLYFIN_API_KEY=...`)
+  - `.env.development:10` (`RADARR_API_KEY=...`)
+  - `.env.development:15` (`SONARR_API_KEY=...`)
+- Impact:
+  - Anyone with repository access can use these keys against the referenced services.
+  - Secrets are now considered compromised and must be rotated.
+- Fix:
+  - Rotate all exposed API keys immediately.
+  - Remove `.env.development` from Git history or sanitize it.
+  - Keep only `.env.example` in version control.
+
+### 2. High: No authentication/authorization on privileged API routes
+- Evidence:
+  - `server/index.tsx:37` to `server/index.tsx:43` mounts all admin routes without auth middleware.
+  - Destructive/control endpoints are publicly callable by any client that can reach port 3000, e.g.:
+    - `server/api/settings.ts:204` (`POST /api/settings/reset`)
+    - `server/api/settings.ts:183` (`POST /api/settings/clear-scan`)
+    - `server/api/execute.ts:150` (`POST /api/execute/start`)
+    - `server/api/execute.ts:209` (`POST /api/execute/stop`)
+- Impact:
+  - Unauthorized users can start/stop jobs, wipe state, and alter processing behavior.
+  - In containerized deployments with published ports, this is remotely exploitable on the network.
+- Fix:
+  - Add auth middleware at `/api/*` (at minimum: token-based admin auth).
+  - Gate destructive routes with explicit admin authorization checks.
+
+### 3. High: Settings endpoint leaks secrets in cleartext
+- Evidence:
+  - `server/api/settings.ts:11` to `server/api/settings.ts:15` returns `getAllConfig()` directly.
+  - `getAllConfig()` includes API keys and passwords from DB/env via `server/db/index.ts:123` to `server/db/index.ts:134`.
+- Impact:
+  - Any caller with API access can retrieve Jellyfin/Radarr/Sonarr API keys and MQTT password.
+- Fix:
+  - Redact secrets in responses (e.g. `***` with optional last-4 chars).
+  - Add a separate write-only secret update flow.
+
+### 4. Medium: Inconsistent route ID validation in execute API
+- Evidence:
+  - `server/lib/validate.ts:8` provides strict numeric `parseId`.
+  - `server/api/execute.ts:142` defines a looser local parser using `Number.parseInt`.
+- Impact:
+  - Values like `"12abc"` are accepted as ID `12` on execute routes, which can target unintended jobs.
+- Fix:
+  - Reuse `server/lib/validate.ts` `parseId` in `server/api/execute.ts`.
+  - Add route tests for mixed alphanumeric IDs (`"42abc"`, `"+1"`, etc.).
+
+## Testing & Verification Gaps
+
+- Could not run `bun test` / `bun lint` in this environment because `bun` is not installed.
+- Existing tests cover some parser behavior in `server/lib/__tests__/validate.test.ts`, but execute-route param parsing has no dedicated regression test.
+
+## Recommended Remediation Order
+
+1. Rotate leaked credentials and sanitize repository history.
+2. Introduce API authentication and enforce it on all `/api/*` routes.
+3. Redact secret fields from settings responses.
+4. Replace execute-local `parseId` with shared strict validator and add tests.
+

docs/superpowers/plans/2026-04-15-review-lazy-load.md

@@ -0,0 +1,857 @@
+# Review column lazy-load + season grouping — Implementation Plan
+
+> **For agentic workers:** Use superpowers:subagent-driven-development. Checkbox (`- [ ]`) syntax tracks progress.
+
+**Goal:** Replace the 500-item review cap with group-paginated infinite scroll; nest season sub-groups inside series when they have pending work across >1 season; wire the existing `/season/:key/:season/approve-all` endpoint into the UI.
+
+**Architecture:** Move the grouping logic from the client to the server so groups are always returned complete. New `GET /api/review/groups?offset=N&limit=25` endpoint. Client's ReviewColumn becomes a stateful list that extends itself via `IntersectionObserver` on a sentinel.
+
+**Tech Stack:** Bun + Hono (server), React 19 + TanStack Router (client), bun:sqlite.
+
+---
+
+## Task 1: Server — build grouped data structure + new endpoint
+
+**Files:**
+- Modify: `server/api/review.ts`
+
+- [ ] **Step 1: Add shared types + builder**
+
+At the top of `server/api/review.ts` (near the other type definitions), add exported types:
+
+```ts
+export type ReviewGroup =
+	| { kind: "movie"; item: PipelineReviewItem }
+	| {
+			kind: "series";
+			seriesKey: string;
+			seriesName: string;
+			seriesJellyfinId: string | null;
+			episodeCount: number;
+			minConfidence: "high" | "low";
+			originalLanguage: string | null;
+			seasons: Array<{ season: number | null; episodes: PipelineReviewItem[] }>;
+	  };
+
+export interface ReviewGroupsResponse {
+	groups: ReviewGroup[];
+	totalGroups: number;
+	totalItems: number;
+	hasMore: boolean;
+}
+```
+
+Add a helper after the existing `enrichWithStreamsAndReasons` helper:
+
+```ts
+function buildReviewGroups(db: ReturnType<typeof getDb>): {
+	groups: ReviewGroup[];
+	totalItems: number;
+} {
+	// Fetch ALL pending non-noop items. Grouping + pagination happen in memory.
+	const rows = db
+		.prepare(`
+			SELECT rp.*, mi.name, mi.series_name, mi.series_jellyfin_id,
+				mi.jellyfin_id,
+				mi.season_number, mi.episode_number, mi.type, mi.container,
+				mi.original_language, mi.orig_lang_source, mi.file_path
+			FROM review_plans rp
+			JOIN media_items mi ON mi.id = rp.item_id
+			WHERE rp.status = 'pending' AND rp.is_noop = 0
+			ORDER BY
+				CASE rp.confidence WHEN 'high' THEN 0 ELSE 1 END,
+				COALESCE(mi.series_name, mi.name),
+				mi.season_number, mi.episode_number
+		`)
+		.all() as PipelineReviewItem[];
+
+	const movies: PipelineReviewItem[] = [];
+	const seriesMap = new Map<
+		string,
+		{
+			seriesName: string;
+			seriesJellyfinId: string | null;
+			seasons: Map<number | null, PipelineReviewItem[]>;
+			originalLanguage: string | null;
+			minConfidence: "high" | "low";
+			firstName: string;
+		}
+	>();
+
+	for (const row of rows) {
+		if (row.type === "Movie") {
+			movies.push(row);
+			continue;
+		}
+		const key = row.series_jellyfin_id ?? row.series_name ?? String(row.item_id);
+		let entry = seriesMap.get(key);
+		if (!entry) {
+			entry = {
+				seriesName: row.series_name ?? "",
+				seriesJellyfinId: row.series_jellyfin_id,
+				seasons: new Map(),
+				originalLanguage: row.original_language,
+				minConfidence: row.confidence,
+				firstName: row.series_name ?? "",
+			};
+			seriesMap.set(key, entry);
+		}
+		const season = row.season_number;
+		let bucket = entry.seasons.get(season);
+		if (!bucket) {
+			bucket = [];
+			entry.seasons.set(season, bucket);
+		}
+		bucket.push(row);
+		if (row.confidence === "high" && entry.minConfidence === "low") {
+			// Keep minConfidence as the "best" confidence across episodes — if any
+			// episode is high, that's the group's dominant confidence for sort.
+			// Actually we want the LOWEST (low wins) so user sees low-confidence
+			// groups sorted after high-confidence ones. Revisit: keep low if present.
+		}
+		if (row.confidence === "low") entry.minConfidence = "low";
+	}
+
+	// Sort season keys within each series (nulls last), episodes by episode_number.
+	const seriesGroups: ReviewGroup[] = [];
+	for (const [seriesKey, entry] of seriesMap) {
+		const seasonKeys = [...entry.seasons.keys()].sort((a, b) => {
+			if (a === null) return 1;
+			if (b === null) return -1;
+			return a - b;
+		});
+		const seasons = seasonKeys.map((season) => ({
+			season,
+			episodes: (entry.seasons.get(season) ?? []).sort(
+				(a, b) => (a.episode_number ?? 0) - (b.episode_number ?? 0),
+			),
+		}));
+		const episodeCount = seasons.reduce((sum, s) => sum + s.episodes.length, 0);
+		seriesGroups.push({
+			kind: "series",
+			seriesKey,
+			seriesName: entry.seriesName,
+			seriesJellyfinId: entry.seriesJellyfinId,
+			episodeCount,
+			minConfidence: entry.minConfidence,
+			originalLanguage: entry.originalLanguage,
+			seasons,
+		});
+	}
+
+	// Interleave movies + series, sort by (minConfidence, name).
+	const movieGroups: ReviewGroup[] = movies.map((m) => ({ kind: "movie" as const, item: m }));
+	const allGroups = [...movieGroups, ...seriesGroups].sort((a, b) => {
+		const confA = a.kind === "movie" ? a.item.confidence : a.minConfidence;
+		const confB = b.kind === "movie" ? b.item.confidence : b.minConfidence;
+		const rankA = confA === "high" ? 0 : 1;
+		const rankB = confB === "high" ? 0 : 1;
+		if (rankA !== rankB) return rankA - rankB;
+		const nameA = a.kind === "movie" ? a.item.name : a.seriesName;
+		const nameB = b.kind === "movie" ? b.item.name : b.seriesName;
+		return nameA.localeCompare(nameB);
+	});
+
+	const totalItems = movieGroups.length + seriesGroups.reduce((sum, g) => sum + (g as { episodeCount: number }).episodeCount, 0);
+	return { groups: allGroups, totalItems };
+}
+```
+
+(Delete the stray comment block inside the loop about "keep minConfidence as the best" — the actual logic below it is correct. I left a TODO-style note while drafting; clean it up when editing.)
+
+- [ ] **Step 2: Add the `/groups` endpoint**
+
+Add before `app.get("/pipeline", …)`:
+
+```ts
+app.get("/groups", (c) => {
+	const db = getDb();
+	const offset = Math.max(0, Number.parseInt(c.req.query("offset") ?? "0", 10) || 0);
+	const limit = Math.max(1, Math.min(200, Number.parseInt(c.req.query("limit") ?? "25", 10) || 25));
+
+	const { groups, totalItems } = buildReviewGroups(db);
+	const page = groups.slice(offset, offset + limit);
+
+	// Enrich each visible episode/movie with audio streams + transcode reasons
+	// (same shape the existing UI expects — reuse the helper already in this file).
+	const flatItemsForEnrichment: Array<{ id: number; plan_id?: number; item_id: number; transcode_reasons?: string[]; audio_streams?: PipelineAudioStream[] }> = [];
+	for (const g of page) {
+		if (g.kind === "movie") flatItemsForEnrichment.push(g.item as never);
+		else for (const s of g.seasons) for (const ep of s.episodes) flatItemsForEnrichment.push(ep as never);
+	}
+	enrichWithStreamsAndReasons(flatItemsForEnrichment);
+
+	return c.json<ReviewGroupsResponse>({
+		groups: page,
+		totalGroups: groups.length,
+		totalItems,
+		hasMore: offset + limit < groups.length,
+	});
+});
+```
+
+`PipelineAudioStream` already imported; if not, add to existing import block.
+
+- [ ] **Step 3: Modify `/pipeline` to drop `review`/`reviewTotal`**
+
+In the existing `app.get("/pipeline", …)` handler (around line 270):
+
+- Delete the `review` SELECT (lines ~278–293) and the enrichment of `review` rows.
+- Delete the `reviewTotal` count query (lines ~294–296).
+- Add in its place: `const reviewItemsTotal = (db.prepare("SELECT COUNT(*) as n FROM review_plans WHERE status = 'pending' AND is_noop = 0").get() as { n: number }).n;`
+- In the final `return c.json({...})` (line ~430), replace `review, reviewTotal` with `reviewItemsTotal`.
+
+- [ ] **Step 4: Run tests + lint + tsc**
+
+```
+mise exec bun -- bun test
+mise exec bun -- bun run lint
+mise exec bun -- bunx tsc --noEmit --project tsconfig.server.json
+```
+
+All must pass. If tests that hit `/pipeline` fail because they expect `review[]`, update them in the same commit (they need to migrate anyway).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add server/api/review.ts
+git commit -m "review: add /groups endpoint with server-side grouping + pagination"
+```
+
+---
+
+## Task 2: Server — test `/groups` endpoint
+
+**Files:**
+- Create: `server/api/__tests__/review-groups.test.ts`
+
+- [ ] **Step 1: Write the test file**
+
+```ts
+import { describe, expect, test } from "bun:test";
+import { Hono } from "hono";
+import reviewRoutes from "../review";
+import { setupTestDb, seedItem, seedPlan } from "./test-helpers"; // adjust to the project's test helpers; see existing webhook.test.ts for how tests wire up a DB
+
+const app = new Hono();
+app.route("/api/review", reviewRoutes);
+
+describe("GET /api/review/groups", () => {
+	test("returns complete series even when total items exceed limit", async () => {
+		const db = setupTestDb();
+		// Seed 1 series with 30 episodes, all pending non-noop
+		for (let i = 1; i <= 30; i++) seedItem(db, { type: "Episode", seriesName: "Breaking Bad", seasonNumber: 1, episodeNumber: i });
+		for (const row of db.prepare("SELECT id FROM media_items").all() as { id: number }[]) seedPlan(db, row.id, { pending: true, isNoop: false });
+
+		const res = await app.request("/api/review/groups?offset=0&limit=25");
+		const body = await res.json();
+
+		expect(body.groups).toHaveLength(1);
+		expect(body.groups[0].kind).toBe("series");
+		expect(body.groups[0].episodeCount).toBe(30);
+		expect(body.groups[0].seasons[0].episodes).toHaveLength(30);
+		expect(body.totalItems).toBe(30);
+		expect(body.hasMore).toBe(false);
+	});
+
+	test("paginates groups with hasMore=true", async () => {
+		const db = setupTestDb();
+		for (let i = 1; i <= 50; i++) seedItem(db, { type: "Movie", name: `Movie ${String(i).padStart(2, "0")}` });
+		for (const row of db.prepare("SELECT id FROM media_items").all() as { id: number }[]) seedPlan(db, row.id, { pending: true, isNoop: false });
+
+		const page1 = await (await app.request("/api/review/groups?offset=0&limit=25")).json();
+		const page2 = await (await app.request("/api/review/groups?offset=25&limit=25")).json();
+
+		expect(page1.groups).toHaveLength(25);
+		expect(page1.hasMore).toBe(true);
+		expect(page2.groups).toHaveLength(25);
+		expect(page2.hasMore).toBe(false);
+		const ids1 = page1.groups.map((g: { item: { item_id: number } }) => g.item.item_id);
+		const ids2 = page2.groups.map((g: { item: { item_id: number } }) => g.item.item_id);
+		expect(ids1.filter((id: number) => ids2.includes(id))).toHaveLength(0);
+	});
+
+	test("buckets episodes by season, nulls last", async () => {
+		const db = setupTestDb();
+		for (let ep = 1; ep <= 3; ep++) seedItem(db, { type: "Episode", seriesName: "Lost", seasonNumber: 1, episodeNumber: ep });
+		for (let ep = 1; ep <= 2; ep++) seedItem(db, { type: "Episode", seriesName: "Lost", seasonNumber: 2, episodeNumber: ep });
+		seedItem(db, { type: "Episode", seriesName: "Lost", seasonNumber: null, episodeNumber: null });
+		for (const row of db.prepare("SELECT id FROM media_items").all() as { id: number }[]) seedPlan(db, row.id, { pending: true, isNoop: false });
+
+		const body = await (await app.request("/api/review/groups?offset=0&limit=25")).json();
+		const lost = body.groups[0];
+		expect(lost.kind).toBe("series");
+		expect(lost.seasons.map((s: { season: number | null }) => s.season)).toEqual([1, 2, null]);
+	});
+});
+```
+
+Important: this test file needs the project's actual test-helpers pattern. Before writing, look at `server/services/__tests__/webhook.test.ts` (the 60-line one that's still in the repo after the verified-flag block was removed) and **copy its setup style** — including how it creates a test DB, how it seeds media_items and review_plans, and how it invokes the Hono app. Replace the placeholder `setupTestDb`, `seedItem`, `seedPlan` calls with whatever the real helpers are.
+
+- [ ] **Step 2: Run the tests**
+
+```
+mise exec bun -- bun test server/api/__tests__/review-groups.test.ts
+```
+
+Expected: 3 passes.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add server/api/__tests__/review-groups.test.ts
+git commit -m "test: /groups endpoint — series completeness, pagination, season buckets"
+```
+
+---
+
+## Task 3: Client types + PipelinePage
+
+**Files:**
+- Modify: `src/shared/lib/types.ts`
+- Modify: `src/features/pipeline/PipelinePage.tsx`
+
+- [ ] **Step 1: Update shared types**
+
+In `src/shared/lib/types.ts`, replace the `PipelineData` interface's `review` and `reviewTotal` fields with `reviewItemsTotal: number`. Add types for the new groups response:
+
+```ts
+export type ReviewGroup =
+	| { kind: "movie"; item: PipelineReviewItem }
+	| {
+			kind: "series";
+			seriesKey: string;
+			seriesName: string;
+			seriesJellyfinId: string | null;
+			episodeCount: number;
+			minConfidence: "high" | "low";
+			originalLanguage: string | null;
+			seasons: Array<{ season: number | null; episodes: PipelineReviewItem[] }>;
+	  };
+
+export interface ReviewGroupsResponse {
+	groups: ReviewGroup[];
+	totalGroups: number;
+	totalItems: number;
+	hasMore: boolean;
+}
+```
+
+The `PipelineData` interface becomes:
+```ts
+export interface PipelineData {
+	reviewItemsTotal: number;
+	queued: PipelineJobItem[];
+	processing: PipelineJobItem[];
+	done: PipelineJobItem[];
+	doneCount: number;
+	jellyfinUrl: string;
+}
+```
+
+- [ ] **Step 2: Update PipelinePage**
+
+Change `PipelinePage.tsx`:
+
+- Add state for the initial groups page: `const [initialGroups, setInitialGroups] = useState<ReviewGroupsResponse | null>(null);`
+- In `load()`, fetch both in parallel:
+  ```ts
+  const [pipelineRes, groupsRes] = await Promise.all([
+      api.get<PipelineData>("/api/review/pipeline"),
+      api.get<ReviewGroupsResponse>("/api/review/groups?offset=0&limit=25"),
+  ]);
+  setData(pipelineRes);
+  setInitialGroups(groupsRes);
+  ```
+- Wait for both before rendering (loading gate: `if (loading || !data || !initialGroups) return <Loading />`).
+- Pass to ReviewColumn: `<ReviewColumn initialResponse={initialGroups} totalItems={data.reviewItemsTotal} jellyfinUrl={data.jellyfinUrl} onMutate={load} />` — drop `items` and `total` props.
+
+- [ ] **Step 3: Tsc + lint**
+
+```
+mise exec bun -- bunx tsc --noEmit
+mise exec bun -- bun run lint
+```
+
+Expected: errors in `ReviewColumn.tsx` because its props type hasn't been updated yet — that's fine, Task 4 fixes it. For this step, only verify that types.ts and PipelinePage.tsx themselves compile internally. If the build breaks because of ReviewColumn, commit these two files anyway and proceed to Task 4 immediately.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/shared/lib/types.ts src/features/pipeline/PipelinePage.tsx
+git commit -m "pipeline: fetch review groups endpoint in parallel with pipeline"
+```
+
+---
+
+## Task 4: Client — ReviewColumn with infinite scroll
+
+**Files:**
+- Modify: `src/features/pipeline/ReviewColumn.tsx`
+
+- [ ] **Step 1: Rewrite ReviewColumn**
+
+Replace the file contents with:
+
+```tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api } from "~/shared/lib/api";
+import type { ReviewGroup, ReviewGroupsResponse } from "~/shared/lib/types";
+import { ColumnShell } from "./ColumnShell";
+import { PipelineCard } from "./PipelineCard";
+import { SeriesCard } from "./SeriesCard";
+
+const PAGE_SIZE = 25;
+
+interface ReviewColumnProps {
+	initialResponse: ReviewGroupsResponse;
+	totalItems: number;
+	jellyfinUrl: string;
+	onMutate: () => void;
+}
+
+export function ReviewColumn({ initialResponse, totalItems, jellyfinUrl, onMutate }: ReviewColumnProps) {
+	const [groups, setGroups] = useState<ReviewGroup[]>(initialResponse.groups);
+	const [hasMore, setHasMore] = useState(initialResponse.hasMore);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const sentinelRef = useRef<HTMLDivElement | null>(null);
+
+	// Reset when parent passes a new initial page (onMutate refetch)
+	useEffect(() => {
+		setGroups(initialResponse.groups);
+		setHasMore(initialResponse.hasMore);
+	}, [initialResponse]);
+
+	const loadMore = useCallback(async () => {
+		if (loadingMore || !hasMore) return;
+		setLoadingMore(true);
+		try {
+			const res = await api.get<ReviewGroupsResponse>(`/api/review/groups?offset=${groups.length}&limit=${PAGE_SIZE}`);
+			setGroups((prev) => [...prev, ...res.groups]);
+			setHasMore(res.hasMore);
+		} finally {
+			setLoadingMore(false);
+		}
+	}, [groups.length, hasMore, loadingMore]);
+
+	useEffect(() => {
+		if (!hasMore || !sentinelRef.current) return;
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) loadMore();
+			},
+			{ rootMargin: "200px" },
+		);
+		observer.observe(sentinelRef.current);
+		return () => observer.disconnect();
+	}, [hasMore, loadMore]);
+
+	const skipAll = async () => {
+		if (!confirm(`Skip all ${totalItems} pending items? They won't be processed unless you unskip them.`)) return;
+		await api.post("/api/review/skip-all");
+		onMutate();
+	};
+
+	const autoApprove = async () => {
+		const res = await api.post<{ ok: boolean; count: number }>("/api/review/auto-approve");
+		onMutate();
+		if (res.count === 0) alert("No high-confidence items to auto-approve.");
+	};
+
+	const approveItem = async (itemId: number) => {
+		await api.post(`/api/review/${itemId}/approve`);
+		onMutate();
+	};
+	const skipItem = async (itemId: number) => {
+		await api.post(`/api/review/${itemId}/skip`);
+		onMutate();
+	};
+	const approveBatch = async (itemIds: number[]) => {
+		if (itemIds.length === 0) return;
+		await api.post<{ ok: boolean; count: number }>("/api/review/approve-batch", { itemIds });
+		onMutate();
+	};
+
+	// Compute ids per visible group for "Approve above"
+	const idsByGroup: number[][] = groups.map((g) =>
+		g.kind === "movie" ? [g.item.item_id] : g.seasons.flatMap((s) => s.episodes.map((ep) => ep.item_id)),
+	);
+	const priorIds = (index: number): number[] => idsByGroup.slice(0, index).flat();
+
+	const actions =
+		totalItems > 0
+			? [
+					{ label: "Auto Review", onClick: autoApprove, primary: true },
+					{ label: "Skip all", onClick: skipAll },
+				]
+			: undefined;
+
+	return (
+		<ColumnShell title="Review" count={totalItems} actions={actions}>
+			<div className="space-y-2">
+				{groups.map((group, index) => {
+					const prior = index > 0 ? priorIds(index) : null;
+					const onApproveUpToHere = prior && prior.length > 0 ? () => approveBatch(prior) : undefined;
+					if (group.kind === "movie") {
+						return (
+							<PipelineCard
+								key={group.item.id}
+								item={group.item}
+								jellyfinUrl={jellyfinUrl}
+								onToggleStream={async (streamId, action) => {
+									await api.patch(`/api/review/${group.item.item_id}/stream/${streamId}`, { action });
+									onMutate();
+								}}
+								onApprove={() => approveItem(group.item.item_id)}
+								onSkip={() => skipItem(group.item.item_id)}
+								onApproveUpToHere={onApproveUpToHere}
+							/>
+						);
+					}
+					return (
+						<SeriesCard
+							key={group.seriesKey}
+							seriesKey={group.seriesKey}
+							seriesName={group.seriesName}
+							jellyfinUrl={jellyfinUrl}
+							seriesJellyfinId={group.seriesJellyfinId}
+							seasons={group.seasons}
+							episodeCount={group.episodeCount}
+							originalLanguage={group.originalLanguage}
+							onMutate={onMutate}
+							onApproveUpToHere={onApproveUpToHere}
+						/>
+					);
+				})}
+				{groups.length === 0 && <p className="text-sm text-gray-400 text-center py-8">No items to review</p>}
+				{hasMore && (
+					<div ref={sentinelRef} className="py-4 text-center text-xs text-gray-400">
+						{loadingMore ? "Loading more…" : ""}
+					</div>
+				)}
+			</div>
+		</ColumnShell>
+	);
+}
+```
+
+- [ ] **Step 2: Tsc + lint**
+
+```
+mise exec bun -- bunx tsc --noEmit
+mise exec bun -- bun run lint
+```
+
+Expected: the call site in ReviewColumn passes `seasons`, `episodeCount`, `originalLanguage` props to SeriesCard — this will fail until Task 5 updates SeriesCard. Same handling as Task 3 step 3: commit and proceed.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/features/pipeline/ReviewColumn.tsx
+git commit -m "review column: infinite scroll with IntersectionObserver sentinel"
+```
+
+---
+
+## Task 5: Client — SeriesCard season nesting
+
+**Files:**
+- Modify: `src/features/pipeline/SeriesCard.tsx`
+
+- [ ] **Step 1: Rewrite SeriesCard**
+
+Replace the file contents with:
+
+```tsx
+import { useState } from "react";
+import { api } from "~/shared/lib/api";
+import { LANG_NAMES } from "~/shared/lib/lang";
+import type { PipelineReviewItem } from "~/shared/lib/types";
+import { PipelineCard } from "./PipelineCard";
+
+interface SeriesCardProps {
+	seriesKey: string;
+	seriesName: string;
+	jellyfinUrl: string;
+	seriesJellyfinId: string | null;
+	seasons: Array<{ season: number | null; episodes: PipelineReviewItem[] }>;
+	episodeCount: number;
+	originalLanguage: string | null;
+	onMutate: () => void;
+	onApproveUpToHere?: () => void;
+}
+
+export function SeriesCard({
+	seriesKey,
+	seriesName,
+	jellyfinUrl,
+	seriesJellyfinId,
+	seasons,
+	episodeCount,
+	originalLanguage,
+	onMutate,
+	onApproveUpToHere,
+}: SeriesCardProps) {
+	const [expanded, setExpanded] = useState(false);
+
+	const flatEpisodes = seasons.flatMap((s) => s.episodes);
+	const highCount = flatEpisodes.filter((e) => e.confidence === "high").length;
+	const lowCount = flatEpisodes.filter((e) => e.confidence === "low").length;
+	const multipleSeasons = seasons.length > 1;
+
+	const setSeriesLanguage = async (lang: string) => {
+		await api.patch(`/api/review/series/${encodeURIComponent(seriesKey)}/language`, { language: lang });
+		onMutate();
+	};
+
+	const approveSeries = async () => {
+		await api.post(`/api/review/series/${encodeURIComponent(seriesKey)}/approve-all`);
+		onMutate();
+	};
+
+	const approveSeason = async (season: number | null) => {
+		if (season == null) return;
+		await api.post(`/api/review/season/${encodeURIComponent(seriesKey)}/${season}/approve-all`);
+		onMutate();
+	};
+
+	const jellyfinLink =
+		jellyfinUrl && seriesJellyfinId ? `${jellyfinUrl}/web/index.html#!/details?id=${seriesJellyfinId}` : null;
+
+	return (
+		<div className="group/series rounded-lg border bg-white overflow-hidden">
+			{/* Title row */}
+			<div
+				className="flex items-center gap-2 px-3 pt-3 pb-1 cursor-pointer hover:bg-gray-50 rounded-t-lg"
+				onClick={() => setExpanded(!expanded)}
+			>
+				<span className="text-xs text-gray-400 shrink-0">{expanded ? "▼" : "▶"}</span>
+				{jellyfinLink ? (
+					<a
+						href={jellyfinLink}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-sm font-medium truncate hover:text-blue-600 hover:underline"
+						onClick={(e) => e.stopPropagation()}
+					>
+						{seriesName}
+					</a>
+				) : (
+					<p className="text-sm font-medium truncate">{seriesName}</p>
+				)}
+			</div>
+
+			{/* Controls row */}
+			<div className="flex items-center gap-2 px-3 pb-3 pt-1">
+				<span className="text-xs text-gray-500 shrink-0">{episodeCount} eps</span>
+				{multipleSeasons && <span className="text-xs text-gray-500 shrink-0">· {seasons.length} seasons</span>}
+				{highCount > 0 && <span className="text-xs text-green-600 shrink-0">{highCount} ready</span>}
+				{lowCount > 0 && <span className="text-xs text-amber-600 shrink-0">{lowCount} review</span>}
+				<div className="flex-1" />
+				<select
+					className="h-6 text-xs border border-gray-300 rounded px-1 bg-white shrink-0"
+					value={originalLanguage ?? ""}
+					onChange={(e) => {
+						e.stopPropagation();
+						setSeriesLanguage(e.target.value);
+					}}
+				>
+					<option value="">unknown</option>
+					{Object.entries(LANG_NAMES).map(([code, name]) => (
+						<option key={code} value={code}>
+							{name}
+						</option>
+					))}
+				</select>
+				{onApproveUpToHere && (
+					<button
+						onClick={(e) => {
+							e.stopPropagation();
+							onApproveUpToHere();
+						}}
+						title="Approve every card listed above this one"
+						className="text-xs px-2 py-1 rounded border border-blue-600 text-blue-700 bg-white hover:bg-blue-50 cursor-pointer whitespace-nowrap shrink-0 opacity-0 group-hover/series:opacity-100 transition-opacity"
+					>
+						↑ Approve above
+					</button>
+				)}
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						approveSeries();
+					}}
+					className="text-xs px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 cursor-pointer whitespace-nowrap shrink-0"
+				>
+					Approve series
+				</button>
+			</div>
+
+			{expanded && (
+				<div className="border-t">
+					{multipleSeasons
+						? seasons.map((s) => (
+								<SeasonGroup
+									key={s.season ?? "unknown"}
+									season={s.season}
+									episodes={s.episodes}
+									jellyfinUrl={jellyfinUrl}
+									onApproveSeason={() => approveSeason(s.season)}
+									onMutate={onMutate}
+								/>
+							))
+						: flatEpisodes.map((ep) => (
+								<EpisodeRow key={ep.id} ep={ep} jellyfinUrl={jellyfinUrl} onMutate={onMutate} />
+							))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function SeasonGroup({
+	season,
+	episodes,
+	jellyfinUrl,
+	onApproveSeason,
+	onMutate,
+}: {
+	season: number | null;
+	episodes: PipelineReviewItem[];
+	jellyfinUrl: string;
+	onApproveSeason: () => void;
+	onMutate: () => void;
+}) {
+	const [open, setOpen] = useState(false);
+	const highCount = episodes.filter((e) => e.confidence === "high").length;
+	const lowCount = episodes.filter((e) => e.confidence === "low").length;
+	const label = season == null ? "No season" : `Season ${String(season).padStart(2, "0")}`;
+
+	return (
+		<div className="border-t first:border-t-0">
+			<div
+				className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-50"
+				onClick={() => setOpen(!open)}
+			>
+				<span className="text-xs text-gray-400 shrink-0">{open ? "▼" : "▶"}</span>
+				<span className="text-xs font-medium shrink-0">{label}</span>
+				<span className="text-xs text-gray-500 shrink-0">· {episodes.length} eps</span>
+				{highCount > 0 && <span className="text-xs text-green-600 shrink-0">{highCount} ready</span>}
+				{lowCount > 0 && <span className="text-xs text-amber-600 shrink-0">{lowCount} review</span>}
+				<div className="flex-1" />
+				{season != null && (
+					<button
+						onClick={(e) => {
+							e.stopPropagation();
+							onApproveSeason();
+						}}
+						className="text-xs px-2 py-1 rounded border border-blue-600 text-blue-700 bg-white hover:bg-blue-50 cursor-pointer whitespace-nowrap shrink-0"
+					>
+						Approve season
+					</button>
+				)}
+			</div>
+			{open && (
+				<div className="px-3 pb-3 space-y-2 pt-2">
+					{episodes.map((ep) => (
+						<EpisodeRow key={ep.id} ep={ep} jellyfinUrl={jellyfinUrl} onMutate={onMutate} />
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function EpisodeRow({ ep, jellyfinUrl, onMutate }: { ep: PipelineReviewItem; jellyfinUrl: string; onMutate: () => void }) {
+	return (
+		<div className="px-3 py-1">
+			<PipelineCard
+				item={ep}
+				jellyfinUrl={jellyfinUrl}
+				onToggleStream={async (streamId, action) => {
+					await api.patch(`/api/review/${ep.item_id}/stream/${streamId}`, { action });
+					onMutate();
+				}}
+				onApprove={async () => {
+					await api.post(`/api/review/${ep.item_id}/approve`);
+					onMutate();
+				}}
+				onSkip={async () => {
+					await api.post(`/api/review/${ep.item_id}/skip`);
+					onMutate();
+				}}
+			/>
+		</div>
+	);
+}
+```
+
+(The `EpisodeRow` wrapper keeps the padding consistent whether episodes render directly under the series or under a season group.)
+
+- [ ] **Step 2: Lint + tsc + test + build**
+
+```
+mise exec bun -- bun run lint
+mise exec bun -- bunx tsc --noEmit
+mise exec bun -- bun test
+mise exec bun -- bun run build
+```
+
+All must pass now that the whole pipeline (server → types → PipelinePage → ReviewColumn → SeriesCard) is consistent.
+
+- [ ] **Step 3: Manual smoke test**
+
+```
+mise exec bun -- bun run dev
+```
+
+Navigate to the Pipeline page:
+- Confirm no "Showing first 500 of N" banner.
+- Scroll the Review column to the bottom; new groups auto-load.
+- Find a series with pending work in >1 season; expand it; confirm nested seasons with working `Approve season` button.
+- Find a series with pending work in a single season; expand it; confirm flat episode list (no season nesting).
+- Click `Approve series` on a series with many pending episodes; confirm the whole series vanishes from the column.
+
+Kill the dev server.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/features/pipeline/SeriesCard.tsx
+git commit -m "series card: nest seasons when >1 pending, add Approve season button"
+```
+
+---
+
+## Task 6: Version bump + final push
+
+- [ ] **Step 1: Bump CalVer**
+
+In `package.json`, set version to today's next free dot-suffix (today is 2026-04-15; prior releases are `.1` and `.2`, so use `.3` unless already taken).
+
+- [ ] **Step 2: Final checks**
+
+```
+mise exec bun -- bun run lint
+mise exec bun -- bunx tsc --noEmit
+mise exec bun -- bunx tsc --noEmit --project tsconfig.server.json
+mise exec bun -- bun test
+mise exec bun -- bun run build
+```
+
+- [ ] **Step 3: Commit + push**
+
+```bash
+git add package.json
+git commit -m "v2026.04.15.3 — review column lazy-load + season grouping"
+git push gitea main
+```
+
+---
+
+## Guided Gates (user-verified)
+
+- **GG-1:** No "Showing first 500 of N" banner.
+- **GG-2:** A series with episodes previously split across the cap now shows the correct episode count.
+- **GG-3:** A series with >1 pending season expands into nested season groups, each with a working `Approve season` button.
+- **GG-4:** A series with 1 pending season expands flat (no extra nesting).
+- **GG-5:** Scrolling to the bottom of Review auto-loads the next page; no scroll = no extra fetch.

docs/superpowers/specs/2026-04-15-review-lazy-load-design.md

@@ -0,0 +1,111 @@
+# Review column lazy-load + season grouping
+
+Date: 2026-04-15
+
+## Summary
+
+Replace the Review column's 500-item hard cap with server-side group-paginated lazy loading. Series are always returned complete (every pending non-noop episode, grouped by season), eliminating the "2 eps" mirage caused by groups getting split across the cap. When a series has pending work in more than one season, the UI nests seasons as collapsible sub-groups, each with its own "Approve season" button.
+
+## Motivation
+
+`server/api/review.ts:277` caps the pipeline's review list at 500 items. ReviewColumn groups client-side, so any series whose episodes spill beyond the cap shows a wrong episode count and partial episode list. The banner "Showing first 500 of N" is present but misleading — the *groups* don't survive the cut, not just the tail.
+
+The existing "Approve all" button on a series card already calls `/series/:seriesKey/approve-all`, which operates on the DB directly and does approve every pending episode — so functionality works, only the display is wrong. Still, partial groups are confusing and the 500 cap forces users to approve in waves.
+
+## Server changes
+
+### New endpoint `GET /api/review/groups?offset=0&limit=25`
+
+Response:
+```ts
+{
+  groups: ReviewGroup[];
+  totalGroups: number;
+  totalItems: number;
+  hasMore: boolean;
+}
+
+type ReviewGroup =
+  | { kind: "movie"; item: PipelineReviewItem }
+  | {
+      kind: "series";
+      seriesKey: string;
+      seriesName: string;
+      seriesJellyfinId: string | null;
+      episodeCount: number;
+      minConfidence: "high" | "low";
+      originalLanguage: string | null;
+      seasons: Array<{ season: number | null; episodes: PipelineReviewItem[] }>;
+    };
+```
+
+Ordering:
+- Groups ordered by (min confidence across group ASC — `high` < `low`), then (series_name or movie name ASC)
+- Within a series, seasons ordered by `season_number` ASC (`null` last)
+- Within a season, episodes ordered by `episode_number` ASC
+
+Implementation outline:
+1. Query all pending non-noop plans joined to media_items (existing `review` query minus the LIMIT).
+2. Walk once in sort order, producing groups: a Movie becomes a one-shot `{ kind: "movie" }`; consecutive Episodes sharing `series_jellyfin_id` (or `series_name` fallback) accumulate into a `{ kind: "series" }` with `seasons` bucketed by `season_number`.
+3. Apply `.slice(offset, offset + limit)` over the full group list, enrich per-episode audio streams + transcode reasons for episodes that survive (reuse existing `enrichWithStreamsAndReasons`).
+4. `totalGroups` = full group count before slicing. `totalItems` = sum of episode counts + movie count (unchanged from today's `reviewTotal`). `hasMore` = `offset + limit < totalGroups`.
+
+### `GET /api/review/pipeline` changes
+
+Drop `review` and `reviewTotal` from the response. Add `reviewItemsTotal: number` so the column header shows a count before the groups endpoint resolves. Queue / Processing / Done / doneCount stay unchanged.
+
+### Kept as-is
+
+- `POST /api/review/series/:seriesKey/approve-all` (`review.ts:529`)
+- `POST /api/review/season/:seriesKey/:season/approve-all` (`review.ts:549`) — already implemented, just unused by the UI until now
+
+## Client changes
+
+### PipelinePage
+
+Fetches `/api/review/pipeline` for queue columns (existing) and separately `/api/review/groups?offset=0&limit=25` for the Review column's initial page. `onMutate` refetches both. Pass `reviewGroups`, `reviewGroupsTotalItems`, `reviewHasMore` into `ReviewColumn`.
+
+### ReviewColumn
+
+Replace the hard-cap rendering with infinite scroll:
+- Render the current loaded groups.
+- Append a sentinel `<div>` at the bottom when `hasMore`. An `IntersectionObserver` attached to it triggers a fetch of the next page when it enters the scroll viewport.
+- Pagination state (`offset`, `groups`, `hasMore`, `loading`) lives locally in ReviewColumn — parent passes `initialGroups` on mount and whenever the filter changes (`onMutate` → parent refetches page 0).
+- Remove the "Showing first N of M" banner and the `truncated` logic.
+
+### SeriesCard
+
+When `seasons.length > 1`:
+- Render seasons as collapsible sub-groups inside the expanded series body.
+- Each season header: `S{NN} — {episodeCount} eps · {high} high / {low} low` + an `Approve season` button.
+
+When `seasons.length === 1`:
+- Render the current flat episode list (no extra nesting).
+
+Rename the existing header button `Approve all` → `Approve series`.
+
+### "Approve above"
+
+Keeps its current "approve every group currently visible above this card" semantic. With lazy loading, that means "everything the user has scrolled past". Compute item ids client-side across the loaded groups as today. No endpoint change.
+
+## Data flow
+
+1. PipelinePage mounts → parallel fetch `/pipeline` + `/groups?offset=0&limit=25`.
+2. User scrolls; sentinel becomes visible → fetch `/groups?offset=25&limit=25`; appended to the list.
+3. User clicks `Approve series` on a card → `POST /series/:key/approve-all` → `onMutate` → parent refetches `/pipeline` + `/groups?offset=0&limit=25`. Series gone from list.
+4. User clicks `Approve season S02` on a nested season → `POST /season/:key/2/approve-all` → `onMutate` → same refetch.
+
+## Testing
+
+- Server unit test: `/groups` endpoint returns a series with all pending episodes even when the total item count exceeds `limit * offset_pages`.
+- Server unit test: offset/limit/hasMore correctness across the group boundary.
+- Server unit test: seasons array is populated, sorted, with `null` season_number ordered last.
+- Manual: scroll through the Review column on a library with >1000 pending items and confirm episode counts match `SELECT COUNT(*) ... WHERE pending AND is_noop=0` scoped per series.
+
+## Guided Gates
+
+- **GG-1:** No "Showing first 500 of N" banner ever appears.
+- **GG-2:** A series whose episodes previously split across the cap now shows the correct episode count immediately on first page load (if the series is in the first page) or after scroll (if not).
+- **GG-3:** A series with pending episodes in 2+ seasons expands into nested season sub-groups, each with an `Approve season` button that approves only that season.
+- **GG-4:** A series with pending episodes in exactly one season expands into the flat episode list as before.
+- **GG-5:** Scrolling to the bottom of the Review column auto-fetches the next page without a click; scrolling stops fetching when `hasMore` is false.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "netfelix-audio-fix",
-	"version": "2026.04.15.2",
+	"version": "2026.04.15.3",
 	"scripts": {
 		"dev:server": "NODE_ENV=development bun --hot server/index.tsx",
 		"dev:client": "vite",

server/api/__tests__/review-groups.test.ts

@@ -0,0 +1,161 @@
+import { Database } from "bun:sqlite";
+import { describe, expect, test } from "bun:test";
+import { SCHEMA } from "../../db/schema";
+import { buildReviewGroups } from "../review";
+
+function makeDb(): Database {
+	const db = new Database(":memory:");
+	for (const stmt of SCHEMA.split(";")) {
+		const trimmed = stmt.trim();
+		if (trimmed) db.run(trimmed);
+	}
+	return db;
+}
+
+interface SeedOpts {
+	id: number;
+	type: "Movie" | "Episode";
+	name?: string;
+	seriesName?: string | null;
+	seriesJellyfinId?: string | null;
+	seasonNumber?: number | null;
+	episodeNumber?: number | null;
+	confidence?: "high" | "low";
+}
+
+function seed(db: Database, opts: SeedOpts) {
+	const {
+		id,
+		type,
+		name = `Item ${id}`,
+		seriesName = null,
+		seriesJellyfinId = null,
+		seasonNumber = null,
+		episodeNumber = null,
+		confidence = "high",
+	} = opts;
+	db
+		.prepare(
+			"INSERT INTO media_items (id, jellyfin_id, type, name, series_name, series_jellyfin_id, season_number, episode_number, file_path) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)",
+		)
+		.run(id, `jf-${id}`, type, name, seriesName, seriesJellyfinId, seasonNumber, episodeNumber, `/x/${id}.mkv`);
+	db
+		.prepare(
+			"INSERT INTO review_plans (item_id, status, is_noop, confidence, apple_compat, job_type, notes) VALUES (?, 'pending', 0, ?, 'direct_play', 'copy', NULL)",
+		)
+		.run(id, confidence);
+}
+
+describe("buildReviewGroups", () => {
+	test("returns a complete series with every pending episode", () => {
+		const db = makeDb();
+		for (let i = 1; i <= 30; i++) {
+			seed(db, {
+				id: i,
+				type: "Episode",
+				seriesName: "Breaking Bad",
+				seriesJellyfinId: "bb",
+				seasonNumber: 1,
+				episodeNumber: i,
+			});
+		}
+
+		const { groups, totalItems } = buildReviewGroups(db);
+
+		expect(groups).toHaveLength(1);
+		const series = groups[0];
+		expect(series.kind).toBe("series");
+		if (series.kind !== "series") throw new Error("expected series");
+		expect(series.episodeCount).toBe(30);
+		expect(series.seasons).toHaveLength(1);
+		expect(series.seasons[0].episodes).toHaveLength(30);
+		expect(totalItems).toBe(30);
+	});
+
+	test("buckets episodes by season with null ordered last", () => {
+		const db = makeDb();
+		for (let ep = 1; ep <= 3; ep++) {
+			seed(db, {
+				id: ep,
+				type: "Episode",
+				seriesName: "Lost",
+				seriesJellyfinId: "lost",
+				seasonNumber: 1,
+				episodeNumber: ep,
+			});
+		}
+		for (let ep = 1; ep <= 2; ep++) {
+			seed(db, {
+				id: 10 + ep,
+				type: "Episode",
+				seriesName: "Lost",
+				seriesJellyfinId: "lost",
+				seasonNumber: 2,
+				episodeNumber: ep,
+			});
+		}
+		seed(db, { id: 99, type: "Episode", seriesName: "Lost", seriesJellyfinId: "lost", seasonNumber: null });
+
+		const { groups } = buildReviewGroups(db);
+		expect(groups).toHaveLength(1);
+		const lost = groups[0];
+		if (lost.kind !== "series") throw new Error("expected series");
+		expect(lost.seasons.map((s) => s.season)).toEqual([1, 2, null]);
+		expect(lost.seasons[0].episodes).toHaveLength(3);
+		expect(lost.seasons[1].episodes).toHaveLength(2);
+		expect(lost.seasons[2].episodes).toHaveLength(1);
+	});
+
+	test("sorts groups: high-confidence first, then by name", () => {
+		const db = makeDb();
+		seed(db, { id: 1, type: "Movie", name: "Zodiac", confidence: "high" });
+		seed(db, { id: 2, type: "Movie", name: "Arrival", confidence: "low" });
+		seed(db, { id: 3, type: "Movie", name: "Blade Runner", confidence: "high" });
+
+		const { groups } = buildReviewGroups(db);
+		const names = groups.map((g) => (g.kind === "movie" ? g.item.name : g.seriesName));
+		expect(names).toEqual(["Blade Runner", "Zodiac", "Arrival"]);
+	});
+
+	test("minConfidence is low when any episode in the series is low", () => {
+		const db = makeDb();
+		seed(db, {
+			id: 1,
+			type: "Episode",
+			seriesName: "Show",
+			seriesJellyfinId: "s",
+			seasonNumber: 1,
+			episodeNumber: 1,
+			confidence: "high",
+		});
+		seed(db, {
+			id: 2,
+			type: "Episode",
+			seriesName: "Show",
+			seriesJellyfinId: "s",
+			seasonNumber: 1,
+			episodeNumber: 2,
+			confidence: "low",
+		});
+
+		const { groups } = buildReviewGroups(db);
+		expect(groups).toHaveLength(1);
+		if (groups[0].kind !== "series") throw new Error("expected series");
+		expect(groups[0].minConfidence).toBe("low");
+	});
+
+	test("excludes plans that are not pending or are is_noop=1", () => {
+		const db = makeDb();
+		seed(db, { id: 1, type: "Movie", name: "Pending" });
+		seed(db, { id: 2, type: "Movie", name: "Approved" });
+		db.prepare("UPDATE review_plans SET status = 'approved' WHERE item_id = ?").run(2);
+		seed(db, { id: 3, type: "Movie", name: "Noop" });
+		db.prepare("UPDATE review_plans SET is_noop = 1 WHERE item_id = ?").run(3);
+
+		const { groups, totalItems } = buildReviewGroups(db);
+		expect(groups).toHaveLength(1);
+		expect(totalItems).toBe(1);
+		if (groups[0].kind !== "movie") throw new Error("expected movie");
+		expect(groups[0].item.name).toBe("Pending");
+	});
+});

server/api/review.ts

@@ -275,36 +275,246 @@ interface PipelineAudioStream {
 	action: "keep" | "remove";
 }
 
+type EnrichableRow = { id?: number; plan_id?: number; item_id: number } & {
+	transcode_reasons?: string[];
+	audio_streams?: PipelineAudioStream[];
+};
+
+/**
+ * Enrich review/queued rows with transcode-reason badges and pre-checked audio
+ * streams. Works for both the Review column (where `id` is the plan id) and
+ * the Queued column (where `plan_id` is explicit and `id` is the job id).
+ */
+function enrichWithStreamsAndReasons(db: ReturnType<typeof getDb>, rows: EnrichableRow[]): void {
+	if (rows.length === 0) return;
+	const planIdFor = (r: EnrichableRow): number => (r.plan_id ?? r.id) as number;
+	const planIds = rows.map(planIdFor);
+	const itemIds = rows.map((r) => r.item_id);
+
+	const reasonPh = planIds.map(() => "?").join(",");
+	const allReasons = db
+		.prepare(`
+		SELECT DISTINCT sd.plan_id, ms.codec, sd.transcode_codec
+		FROM stream_decisions sd
+		JOIN media_streams ms ON ms.id = sd.stream_id
+		WHERE sd.plan_id IN (${reasonPh}) AND sd.transcode_codec IS NOT NULL
+	`)
+		.all(...planIds) as { plan_id: number; codec: string | null; transcode_codec: string }[];
+	const reasonsByPlan = new Map<number, string[]>();
+	for (const r of allReasons) {
+		if (!reasonsByPlan.has(r.plan_id)) reasonsByPlan.set(r.plan_id, []);
+		reasonsByPlan.get(r.plan_id)!.push(`${(r.codec ?? "").toUpperCase()} → ${r.transcode_codec.toUpperCase()}`);
+	}
+
+	const streamPh = itemIds.map(() => "?").join(",");
+	const streamRows = db
+		.prepare(`
+		SELECT ms.id, ms.item_id, ms.language, ms.codec, ms.channels, ms.title,
+			ms.is_default, sd.action
+		FROM media_streams ms
+		JOIN review_plans rp ON rp.item_id = ms.item_id
+		LEFT JOIN stream_decisions sd ON sd.plan_id = rp.id AND sd.stream_id = ms.id
+		WHERE ms.item_id IN (${streamPh}) AND ms.type = 'Audio'
+		ORDER BY ms.item_id, ms.stream_index
+	`)
+		.all(...itemIds) as {
+		id: number;
+		item_id: number;
+		language: string | null;
+		codec: string | null;
+		channels: number | null;
+		title: string | null;
+		is_default: number;
+		action: "keep" | "remove" | null;
+	}[];
+	const streamsByItem = new Map<number, PipelineAudioStream[]>();
+	for (const r of streamRows) {
+		if (!streamsByItem.has(r.item_id)) streamsByItem.set(r.item_id, []);
+		streamsByItem.get(r.item_id)!.push({
+			id: r.id,
+			language: r.language,
+			codec: r.codec,
+			channels: r.channels,
+			title: r.title,
+			is_default: r.is_default,
+			action: r.action ?? "keep",
+		});
+	}
+
+	for (const r of rows) {
+		r.transcode_reasons = reasonsByPlan.get(planIdFor(r)) ?? [];
+		r.audio_streams = streamsByItem.get(r.item_id) ?? [];
+	}
+}
+
+// ─── Review groups (paginated, always returns complete series) ──────────────
+
+interface ReviewItemRow {
+	id: number;
+	item_id: number;
+	status: string;
+	is_noop: number;
+	confidence: "high" | "low";
+	apple_compat: ReviewPlan["apple_compat"];
+	job_type: "copy" | "transcode";
+	name: string;
+	series_name: string | null;
+	series_jellyfin_id: string | null;
+	jellyfin_id: string;
+	season_number: number | null;
+	episode_number: number | null;
+	type: "Movie" | "Episode";
+	container: string | null;
+	original_language: string | null;
+	orig_lang_source: string | null;
+	file_path: string;
+	transcode_reasons?: string[];
+	audio_streams?: PipelineAudioStream[];
+}
+
+type ReviewGroup =
+	| { kind: "movie"; item: ReviewItemRow }
+	| {
+			kind: "series";
+			seriesKey: string;
+			seriesName: string;
+			seriesJellyfinId: string | null;
+			episodeCount: number;
+			minConfidence: "high" | "low";
+			originalLanguage: string | null;
+			seasons: Array<{ season: number | null; episodes: ReviewItemRow[] }>;
+	  };
+
+export function buildReviewGroups(db: ReturnType<typeof getDb>): { groups: ReviewGroup[]; totalItems: number } {
+	const rows = db
+		.prepare(`
+			SELECT rp.*, mi.name, mi.series_name, mi.series_jellyfin_id,
+				mi.jellyfin_id,
+				mi.season_number, mi.episode_number, mi.type, mi.container,
+				mi.original_language, mi.orig_lang_source, mi.file_path
+			FROM review_plans rp
+			JOIN media_items mi ON mi.id = rp.item_id
+			WHERE rp.status = 'pending' AND rp.is_noop = 0
+			ORDER BY
+				CASE rp.confidence WHEN 'high' THEN 0 ELSE 1 END,
+				COALESCE(mi.series_name, mi.name),
+				mi.season_number, mi.episode_number
+		`)
+		.all() as ReviewItemRow[];
+
+	const movieGroups: ReviewGroup[] = [];
+	interface SeriesAccum {
+		seriesName: string;
+		seriesJellyfinId: string | null;
+		seasons: Map<number | null, ReviewItemRow[]>;
+		originalLanguage: string | null;
+		hasLow: boolean;
+	}
+	const seriesMap = new Map<string, SeriesAccum>();
+
+	for (const row of rows) {
+		if (row.type === "Movie") {
+			movieGroups.push({ kind: "movie", item: row });
+			continue;
+		}
+		const key = row.series_jellyfin_id ?? row.series_name ?? String(row.item_id);
+		let entry = seriesMap.get(key);
+		if (!entry) {
+			entry = {
+				seriesName: row.series_name ?? "",
+				seriesJellyfinId: row.series_jellyfin_id,
+				seasons: new Map(),
+				originalLanguage: row.original_language,
+				hasLow: false,
+			};
+			seriesMap.set(key, entry);
+		}
+		let bucket = entry.seasons.get(row.season_number);
+		if (!bucket) {
+			bucket = [];
+			entry.seasons.set(row.season_number, bucket);
+		}
+		bucket.push(row);
+		if (row.confidence === "low") entry.hasLow = true;
+	}
+
+	const seriesGroups: ReviewGroup[] = [];
+	for (const [seriesKey, entry] of seriesMap) {
+		const seasonKeys = [...entry.seasons.keys()].sort((a, b) => {
+			if (a === null) return 1;
+			if (b === null) return -1;
+			return a - b;
+		});
+		const seasons = seasonKeys.map((season) => ({
+			season,
+			episodes: (entry.seasons.get(season) ?? []).sort((a, b) => (a.episode_number ?? 0) - (b.episode_number ?? 0)),
+		}));
+		const episodeCount = seasons.reduce((sum, s) => sum + s.episodes.length, 0);
+		seriesGroups.push({
+			kind: "series",
+			seriesKey,
+			seriesName: entry.seriesName,
+			seriesJellyfinId: entry.seriesJellyfinId,
+			episodeCount,
+			minConfidence: entry.hasLow ? "low" : "high",
+			originalLanguage: entry.originalLanguage,
+			seasons,
+		});
+	}
+
+	const allGroups = [...movieGroups, ...seriesGroups].sort((a, b) => {
+		const confA = a.kind === "movie" ? a.item.confidence : a.minConfidence;
+		const confB = b.kind === "movie" ? b.item.confidence : b.minConfidence;
+		const rankA = confA === "high" ? 0 : 1;
+		const rankB = confB === "high" ? 0 : 1;
+		if (rankA !== rankB) return rankA - rankB;
+		const nameA = a.kind === "movie" ? a.item.name : a.seriesName;
+		const nameB = b.kind === "movie" ? b.item.name : b.seriesName;
+		return nameA.localeCompare(nameB);
+	});
+
+	const totalItems =
+		movieGroups.length + seriesGroups.reduce((sum, g) => sum + (g.kind === "series" ? g.episodeCount : 0), 0);
+	return { groups: allGroups, totalItems };
+}
+
+app.get("/groups", (c) => {
+	const db = getDb();
+	const offset = Math.max(0, Number.parseInt(c.req.query("offset") ?? "0", 10) || 0);
+	const limit = Math.max(1, Math.min(200, Number.parseInt(c.req.query("limit") ?? "25", 10) || 25));
+
+	const { groups, totalItems } = buildReviewGroups(db);
+	const page = groups.slice(offset, offset + limit);
+
+	// Enrich each visible episode/movie with audio streams + transcode reasons.
+	const flat: EnrichableRow[] = [];
+	for (const g of page) {
+		if (g.kind === "movie") flat.push(g.item as EnrichableRow);
+		else for (const s of g.seasons) for (const ep of s.episodes) flat.push(ep as EnrichableRow);
+	}
+	enrichWithStreamsAndReasons(db, flat);
+
+	return c.json({
+		groups: page,
+		totalGroups: groups.length,
+		totalItems,
+		hasMore: offset + limit < groups.length,
+	});
+});
+
 app.get("/pipeline", (c) => {
 	const db = getDb();
 	const jellyfinUrl = getConfig("jellyfin_url") ?? "";
 
-	// Cap the review column to keep the page snappy at scale; pipelines
-	// with thousands of pending items would otherwise ship 10k+ rows on
-	// every refresh and re-render every card.
-	const REVIEW_LIMIT = 500;
-	const review = db
-		.prepare(`
-		SELECT rp.*, mi.name, mi.series_name, mi.series_jellyfin_id,
-			mi.jellyfin_id,
-			mi.season_number, mi.episode_number, mi.type, mi.container,
-			mi.original_language, mi.orig_lang_source, mi.file_path
-		FROM review_plans rp
-		JOIN media_items mi ON mi.id = rp.item_id
-		WHERE rp.status = 'pending' AND rp.is_noop = 0
-		ORDER BY
-			CASE rp.confidence WHEN 'high' THEN 0 ELSE 1 END,
-			COALESCE(mi.series_name, mi.name),
-			mi.season_number, mi.episode_number
-		LIMIT ${REVIEW_LIMIT}
-	`)
-		.all();
-	const reviewTotal = (
+	// Review items ship via GET /groups (paginated, always returns complete
+	// series). The pipeline payload only carries the total count so the column
+	// header can render immediately.
+	const reviewItemsTotal = (
 		db.prepare("SELECT COUNT(*) as n FROM review_plans WHERE status = 'pending' AND is_noop = 0").get() as { n: number }
 	).n;
 
-	// Queued gets the same enrichment as review so the card can render
-	// streams + transcode reasons read-only (with a "Back to review" button).
+	// Queued carries stream + transcode-reason enrichment so the card renders
+	// read-only with a "Back to review" button.
 	const queued = db
 		.prepare(`
 		SELECT j.id, j.item_id, j.status, j.started_at, j.completed_at,
@@ -355,79 +565,9 @@ app.get("/pipeline", (c) => {
 	};
 	const doneCount = noopRow.n + doneRow.n;
 
-	// Enrich rows that have (plan_id, item_id) with the transcode-reason
-	// badges and pre-checked audio streams. Used for both review and queued
-	// columns so the queued card can render read-only with the same info.
-	type EnrichableRow = { id?: number; plan_id?: number; item_id: number } & {
-		transcode_reasons?: string[];
-		audio_streams?: PipelineAudioStream[];
-	};
-	const enrichWithStreamsAndReasons = (rows: EnrichableRow[]) => {
-		if (rows.length === 0) return;
-		const planIdFor = (r: EnrichableRow): number => (r.plan_id ?? r.id) as number;
-		const planIds = rows.map(planIdFor);
-		const itemIds = rows.map((r) => r.item_id);
+	enrichWithStreamsAndReasons(db, queued as EnrichableRow[]);
 
-		const reasonPh = planIds.map(() => "?").join(",");
-		const allReasons = db
-			.prepare(`
-			SELECT DISTINCT sd.plan_id, ms.codec, sd.transcode_codec
-			FROM stream_decisions sd
-			JOIN media_streams ms ON ms.id = sd.stream_id
-			WHERE sd.plan_id IN (${reasonPh}) AND sd.transcode_codec IS NOT NULL
-		`)
-			.all(...planIds) as { plan_id: number; codec: string | null; transcode_codec: string }[];
-		const reasonsByPlan = new Map<number, string[]>();
-		for (const r of allReasons) {
-			if (!reasonsByPlan.has(r.plan_id)) reasonsByPlan.set(r.plan_id, []);
-			reasonsByPlan.get(r.plan_id)!.push(`${(r.codec ?? "").toUpperCase()} → ${r.transcode_codec.toUpperCase()}`);
-		}
-
-		const streamPh = itemIds.map(() => "?").join(",");
-		const streamRows = db
-			.prepare(`
-			SELECT ms.id, ms.item_id, ms.language, ms.codec, ms.channels, ms.title,
-				ms.is_default, sd.action
-			FROM media_streams ms
-			JOIN review_plans rp ON rp.item_id = ms.item_id
-			LEFT JOIN stream_decisions sd ON sd.plan_id = rp.id AND sd.stream_id = ms.id
-			WHERE ms.item_id IN (${streamPh}) AND ms.type = 'Audio'
-			ORDER BY ms.item_id, ms.stream_index
-		`)
-			.all(...itemIds) as {
-			id: number;
-			item_id: number;
-			language: string | null;
-			codec: string | null;
-			channels: number | null;
-			title: string | null;
-			is_default: number;
-			action: "keep" | "remove" | null;
-		}[];
-		const streamsByItem = new Map<number, PipelineAudioStream[]>();
-		for (const r of streamRows) {
-			if (!streamsByItem.has(r.item_id)) streamsByItem.set(r.item_id, []);
-			streamsByItem.get(r.item_id)!.push({
-				id: r.id,
-				language: r.language,
-				codec: r.codec,
-				channels: r.channels,
-				title: r.title,
-				is_default: r.is_default,
-				action: r.action ?? "keep",
-			});
-		}
-
-		for (const r of rows) {
-			r.transcode_reasons = reasonsByPlan.get(planIdFor(r)) ?? [];
-			r.audio_streams = streamsByItem.get(r.item_id) ?? [];
-		}
-	};
-
-	enrichWithStreamsAndReasons(review as EnrichableRow[]);
-	enrichWithStreamsAndReasons(queued as EnrichableRow[]);
-
-	return c.json({ review, reviewTotal, queued, processing, done, doneCount, jellyfinUrl });
+	return c.json({ reviewItemsTotal, queued, processing, done, doneCount, jellyfinUrl });
 });
 
 // ─── List ─────────────────────────────────────────────────────────────────────

src/features/pipeline/PipelinePage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "~/shared/lib/api";
-import type { PipelineData } from "~/shared/lib/types";
+import type { PipelineData, ReviewGroupsResponse } from "~/shared/lib/types";
 import { DoneColumn } from "./DoneColumn";
 import { ProcessingColumn } from "./ProcessingColumn";
 import { QueueColumn } from "./QueueColumn";
@@ -20,13 +20,18 @@ interface QueueStatus {
 
 export function PipelinePage() {
 	const [data, setData] = useState<PipelineData | null>(null);
+	const [initialGroups, setInitialGroups] = useState<ReviewGroupsResponse | null>(null);
 	const [progress, setProgress] = useState<Progress | null>(null);
 	const [queueStatus, setQueueStatus] = useState<QueueStatus | null>(null);
 	const [loading, setLoading] = useState(true);
 
 	const load = useCallback(async () => {
-		const pipelineRes = await api.get<PipelineData>("/api/review/pipeline");
+		const [pipelineRes, groupsRes] = await Promise.all([
+			api.get<PipelineData>("/api/review/pipeline"),
+			api.get<ReviewGroupsResponse>("/api/review/groups?offset=0&limit=25"),
+		]);
 		setData(pipelineRes);
+		setInitialGroups(groupsRes);
 		setLoading(false);
 	}, []);
 
@@ -70,7 +75,7 @@ export function PipelinePage() {
 		};
 	}, [load]);
 
-	if (loading || !data) return <div className="p-6 text-gray-500">Loading pipeline...</div>;
+	if (loading || !data || !initialGroups) return <div className="p-6 text-gray-500">Loading pipeline...</div>;
 
 	return (
 		<div className="flex flex-col -mx-3 sm:-mx-5 -mt-4 -mb-12 h-[calc(100vh-3rem)] overflow-hidden">
@@ -79,7 +84,12 @@ export function PipelinePage() {
 				<span className="text-sm text-gray-500">{data.doneCount} files in desired state</span>
 			</div>
 			<div className="flex flex-1 gap-4 p-4 overflow-x-auto overflow-y-hidden min-h-0">
-				<ReviewColumn items={data.review} total={data.reviewTotal} jellyfinUrl={data.jellyfinUrl} onMutate={load} />
+				<ReviewColumn
+					initialResponse={initialGroups}
+					totalItems={data.reviewItemsTotal}
+					jellyfinUrl={data.jellyfinUrl}
+					onMutate={load}
+				/>
 				<QueueColumn items={data.queued} jellyfinUrl={data.jellyfinUrl} onMutate={load} />
 				<ProcessingColumn items={data.processing} progress={progress} queueStatus={queueStatus} onMutate={load} />
 				<DoneColumn items={data.done} onMutate={load} />

src/features/pipeline/ReviewColumn.tsx

@@ -1,28 +1,57 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "~/shared/lib/api";
-import type { PipelineReviewItem } from "~/shared/lib/types";
+import type { ReviewGroup, ReviewGroupsResponse } from "~/shared/lib/types";
 import { ColumnShell } from "./ColumnShell";
 import { PipelineCard } from "./PipelineCard";
 import { SeriesCard } from "./SeriesCard";
 
+const PAGE_SIZE = 25;
+
 interface ReviewColumnProps {
-	items: PipelineReviewItem[];
-	total: number;
+	initialResponse: ReviewGroupsResponse;
+	totalItems: number;
 	jellyfinUrl: string;
 	onMutate: () => void;
 }
 
-interface SeriesGroup {
-	name: string;
-	key: string;
-	jellyfinId: string | null;
-	episodes: PipelineReviewItem[];
-}
+export function ReviewColumn({ initialResponse, totalItems, jellyfinUrl, onMutate }: ReviewColumnProps) {
+	const [groups, setGroups] = useState<ReviewGroup[]>(initialResponse.groups);
+	const [hasMore, setHasMore] = useState(initialResponse.hasMore);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const sentinelRef = useRef<HTMLDivElement | null>(null);
 
-export function ReviewColumn({ items, total, jellyfinUrl, onMutate }: ReviewColumnProps) {
-	const truncated = total > items.length;
+	// Reset when the parent refetches page 0 (after approve/skip actions).
+	useEffect(() => {
+		setGroups(initialResponse.groups);
+		setHasMore(initialResponse.hasMore);
+	}, [initialResponse]);
+
+	const loadMore = useCallback(async () => {
+		if (loadingMore || !hasMore) return;
+		setLoadingMore(true);
+		try {
+			const res = await api.get<ReviewGroupsResponse>(`/api/review/groups?offset=${groups.length}&limit=${PAGE_SIZE}`);
+			setGroups((prev) => [...prev, ...res.groups]);
+			setHasMore(res.hasMore);
+		} finally {
+			setLoadingMore(false);
+		}
+	}, [groups.length, hasMore, loadingMore]);
+
+	useEffect(() => {
+		if (!hasMore || !sentinelRef.current) return;
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) loadMore();
+			},
+			{ rootMargin: "200px" },
+		);
+		observer.observe(sentinelRef.current);
+		return () => observer.disconnect();
+	}, [hasMore, loadMore]);
 
 	const skipAll = async () => {
-		if (!confirm(`Skip all ${total} pending items? They won't be processed unless you unskip them.`)) return;
+		if (!confirm(`Skip all ${totalItems} pending items? They won't be processed unless you unskip them.`)) return;
 		await api.post("/api/review/skip-all");
 		onMutate();
 	};
@@ -47,89 +76,62 @@ export function ReviewColumn({ items, total, jellyfinUrl, onMutate }: ReviewColu
 		onMutate();
 	};
 
-	// Group by series (movies are standalone)
-	const movies = items.filter((i) => i.type === "Movie");
-	const seriesMap = new Map<string, SeriesGroup>();
-
-	for (const item of items.filter((i) => i.type === "Episode")) {
-		const key = item.series_jellyfin_id ?? item.series_name ?? String(item.item_id);
-		if (!seriesMap.has(key)) {
-			seriesMap.set(key, { name: item.series_name ?? "", key, jellyfinId: item.series_jellyfin_id, episodes: [] });
-		}
-		seriesMap.get(key)!.episodes.push(item);
-	}
-
-	// Interleave movies and series, sorted by confidence (high first)
-	const allItems = [
-		...movies.map((m) => ({ type: "movie" as const, item: m, sortKey: m.confidence === "high" ? 0 : 1 })),
-		...[...seriesMap.values()].map((s) => ({
-			type: "series" as const,
-			item: s,
-			sortKey: s.episodes.every((e) => e.confidence === "high") ? 0 : 1,
-		})),
-	].sort((a, b) => a.sortKey - b.sortKey);
-
-	// Flatten each visible entry to its list of item_ids. "Approve up to here"
-	// on index i approves everything in the union of idsByEntry[0..i-1] — one
-	// id for a movie, N ids for a series (one per episode).
-	const idsByEntry: number[][] = allItems.map((entry) =>
-		entry.type === "movie" ? [entry.item.item_id] : entry.item.episodes.map((e) => e.item_id),
+	// Compute ids per visible group for "Approve above"
+	const idsByGroup: number[][] = groups.map((g) =>
+		g.kind === "movie" ? [g.item.item_id] : g.seasons.flatMap((s) => s.episodes.map((ep) => ep.item_id)),
 	);
-	const priorIds = (index: number): number[] => idsByEntry.slice(0, index).flat();
+	const priorIds = (index: number): number[] => idsByGroup.slice(0, index).flat();
+
+	const actions =
+		totalItems > 0
+			? [
+					{ label: "Auto Review", onClick: autoApprove, primary: true },
+					{ label: "Skip all", onClick: skipAll },
+				]
+			: undefined;
 
 	return (
-		<ColumnShell
-			title="Review"
-			count={truncated ? `${items.length} of ${total}` : total}
-			actions={
-				total > 0
-					? [
-							{ label: "Auto Review", onClick: autoApprove, primary: true },
-							{ label: "Skip all", onClick: skipAll },
-						]
-					: undefined
-			}
-		>
+		<ColumnShell title="Review" count={totalItems} actions={actions}>
 			<div className="space-y-2">
-				{allItems.map((entry, index) => {
-					// The button approves everything visually above this card. First
-					// card has nothing before it → undefined suppresses the affordance.
+				{groups.map((group, index) => {
 					const prior = index > 0 ? priorIds(index) : null;
 					const onApproveUpToHere = prior && prior.length > 0 ? () => approveBatch(prior) : undefined;
-					if (entry.type === "movie") {
+					if (group.kind === "movie") {
 						return (
 							<PipelineCard
-								key={entry.item.id}
-								item={entry.item}
+								key={group.item.id}
+								item={group.item}
 								jellyfinUrl={jellyfinUrl}
 								onToggleStream={async (streamId, action) => {
-									await api.patch(`/api/review/${entry.item.item_id}/stream/${streamId}`, { action });
+									await api.patch(`/api/review/${group.item.item_id}/stream/${streamId}`, { action });
 									onMutate();
 								}}
-								onApprove={() => approveItem(entry.item.item_id)}
-								onSkip={() => skipItem(entry.item.item_id)}
+								onApprove={() => approveItem(group.item.item_id)}
+								onSkip={() => skipItem(group.item.item_id)}
 								onApproveUpToHere={onApproveUpToHere}
 							/>
 						);
 					}
 					return (
 						<SeriesCard
-							key={entry.item.key}
-							seriesKey={entry.item.key}
-							seriesName={entry.item.name}
+							key={group.seriesKey}
+							seriesKey={group.seriesKey}
+							seriesName={group.seriesName}
 							jellyfinUrl={jellyfinUrl}
-							seriesJellyfinId={entry.item.jellyfinId}
-							episodes={entry.item.episodes}
+							seriesJellyfinId={group.seriesJellyfinId}
+							seasons={group.seasons}
+							episodeCount={group.episodeCount}
+							originalLanguage={group.originalLanguage}
 							onMutate={onMutate}
 							onApproveUpToHere={onApproveUpToHere}
 						/>
 					);
 				})}
-				{allItems.length === 0 && <p className="text-sm text-gray-400 text-center py-8">No items to review</p>}
-				{truncated && (
-					<p className="text-xs text-gray-400 text-center py-3 border-t mt-2">
-						Showing first {items.length} of {total}. Approve some to see the rest.
-					</p>
+				{groups.length === 0 && <p className="text-sm text-gray-400 text-center py-8">No items to review</p>}
+				{hasMore && (
+					<div ref={sentinelRef} className="py-4 text-center text-xs text-gray-400">
+						{loadingMore ? "Loading more…" : ""}
+					</div>
 				)}
 			</div>
 		</ColumnShell>

src/features/pipeline/SeriesCard.tsx

@@ -9,7 +9,9 @@ interface SeriesCardProps {
 	seriesName: string;
 	jellyfinUrl: string;
 	seriesJellyfinId: string | null;
-	episodes: PipelineReviewItem[];
+	seasons: Array<{ season: number | null; episodes: PipelineReviewItem[] }>;
+	episodeCount: number;
+	originalLanguage: string | null;
 	onMutate: () => void;
 	// Review-column affordance: approve every card visually above this
 	// series in one round-trip. See ReviewColumn for the id computation.
@@ -21,13 +23,18 @@ export function SeriesCard({
 	seriesName,
 	jellyfinUrl,
 	seriesJellyfinId,
-	episodes,
+	seasons,
+	episodeCount,
+	originalLanguage,
 	onMutate,
 	onApproveUpToHere,
 }: SeriesCardProps) {
 	const [expanded, setExpanded] = useState(false);
 
-	const seriesLang = episodes[0]?.original_language ?? "";
+	const flatEpisodes = seasons.flatMap((s) => s.episodes);
+	const highCount = flatEpisodes.filter((e) => e.confidence === "high").length;
+	const lowCount = flatEpisodes.filter((e) => e.confidence === "low").length;
+	const multipleSeasons = seasons.length > 1;
 
 	const setSeriesLanguage = async (lang: string) => {
 		await api.patch(`/api/review/series/${encodeURIComponent(seriesKey)}/language`, { language: lang });
@@ -39,8 +46,11 @@ export function SeriesCard({
 		onMutate();
 	};
 
-	const highCount = episodes.filter((e) => e.confidence === "high").length;
-	const lowCount = episodes.filter((e) => e.confidence === "low").length;
+	const approveSeason = async (season: number | null) => {
+		if (season == null) return;
+		await api.post(`/api/review/season/${encodeURIComponent(seriesKey)}/${season}/approve-all`);
+		onMutate();
+	};
 
 	const jellyfinLink =
 		jellyfinUrl && seriesJellyfinId ? `${jellyfinUrl}/web/index.html#!/details?id=${seriesJellyfinId}` : null;
@@ -70,13 +80,14 @@ export function SeriesCard({
 
 			{/* Controls row */}
 			<div className="flex items-center gap-2 px-3 pb-3 pt-1">
-				<span className="text-xs text-gray-500 shrink-0">{episodes.length} eps</span>
+				<span className="text-xs text-gray-500 shrink-0">{episodeCount} eps</span>
+				{multipleSeasons && <span className="text-xs text-gray-500 shrink-0">· {seasons.length} seasons</span>}
 				{highCount > 0 && <span className="text-xs text-green-600 shrink-0">{highCount} ready</span>}
 				{lowCount > 0 && <span className="text-xs text-amber-600 shrink-0">{lowCount} review</span>}
 				<div className="flex-1" />
 				<select
 					className="h-6 text-xs border border-gray-300 rounded px-1 bg-white shrink-0"
-					value={seriesLang}
+					value={originalLanguage ?? ""}
 					onChange={(e) => {
 						e.stopPropagation();
 						setSeriesLanguage(e.target.value);
@@ -91,6 +102,7 @@ export function SeriesCard({
 				</select>
 				{onApproveUpToHere && (
 					<button
+						type="button"
 						onClick={(e) => {
 							e.stopPropagation();
 							onApproveUpToHere();
@@ -102,39 +114,115 @@ export function SeriesCard({
 					</button>
 				)}
 				<button
+					type="button"
 					onClick={(e) => {
 						e.stopPropagation();
 						approveSeries();
 					}}
 					className="text-xs px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 cursor-pointer whitespace-nowrap shrink-0"
 				>
-					Approve all
+					Approve series
 				</button>
 			</div>
 
 			{expanded && (
-				<div className="border-t px-3 pb-3 space-y-2 pt-2">
+				<div className="border-t">
+					{multipleSeasons
+						? seasons.map((s) => (
+								<SeasonGroup
+									key={s.season ?? "unknown"}
+									season={s.season}
+									episodes={s.episodes}
+									jellyfinUrl={jellyfinUrl}
+									onApproveSeason={() => approveSeason(s.season)}
+									onMutate={onMutate}
+								/>
+							))
+						: flatEpisodes.map((ep) => <EpisodeRow key={ep.id} ep={ep} jellyfinUrl={jellyfinUrl} onMutate={onMutate} />)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function SeasonGroup({
+	season,
+	episodes,
+	jellyfinUrl,
+	onApproveSeason,
+	onMutate,
+}: {
+	season: number | null;
+	episodes: PipelineReviewItem[];
+	jellyfinUrl: string;
+	onApproveSeason: () => void;
+	onMutate: () => void;
+}) {
+	const [open, setOpen] = useState(false);
+	const highCount = episodes.filter((e) => e.confidence === "high").length;
+	const lowCount = episodes.filter((e) => e.confidence === "low").length;
+	const label = season == null ? "No season" : `Season ${String(season).padStart(2, "0")}`;
+
+	return (
+		<div className="border-t first:border-t-0">
+			<div className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-50" onClick={() => setOpen(!open)}>
+				<span className="text-xs text-gray-400 shrink-0">{open ? "▼" : "▶"}</span>
+				<span className="text-xs font-medium shrink-0">{label}</span>
+				<span className="text-xs text-gray-500 shrink-0">· {episodes.length} eps</span>
+				{highCount > 0 && <span className="text-xs text-green-600 shrink-0">{highCount} ready</span>}
+				{lowCount > 0 && <span className="text-xs text-amber-600 shrink-0">{lowCount} review</span>}
+				<div className="flex-1" />
+				{season != null && (
+					<button
+						type="button"
+						onClick={(e) => {
+							e.stopPropagation();
+							onApproveSeason();
+						}}
+						className="text-xs px-2 py-1 rounded border border-blue-600 text-blue-700 bg-white hover:bg-blue-50 cursor-pointer whitespace-nowrap shrink-0"
+					>
+						Approve season
+					</button>
+				)}
+			</div>
+			{open && (
+				<div className="px-3 pb-3 space-y-2 pt-2">
 					{episodes.map((ep) => (
-						<PipelineCard
-							key={ep.id}
-							item={ep}
-							jellyfinUrl={jellyfinUrl}
-							onToggleStream={async (streamId, action) => {
-								await api.patch(`/api/review/${ep.item_id}/stream/${streamId}`, { action });
-								onMutate();
-							}}
-							onApprove={async () => {
-								await api.post(`/api/review/${ep.item_id}/approve`);
-								onMutate();
-							}}
-							onSkip={async () => {
-								await api.post(`/api/review/${ep.item_id}/skip`);
-								onMutate();
-							}}
-						/>
+						<EpisodeRow key={ep.id} ep={ep} jellyfinUrl={jellyfinUrl} onMutate={onMutate} />
 					))}
 				</div>
 			)}
 		</div>
 	);
 }
+
+function EpisodeRow({
+	ep,
+	jellyfinUrl,
+	onMutate,
+}: {
+	ep: PipelineReviewItem;
+	jellyfinUrl: string;
+	onMutate: () => void;
+}) {
+	return (
+		<div className="px-3 py-1">
+			<PipelineCard
+				item={ep}
+				jellyfinUrl={jellyfinUrl}
+				onToggleStream={async (streamId, action) => {
+					await api.patch(`/api/review/${ep.item_id}/stream/${streamId}`, { action });
+					onMutate();
+				}}
+				onApprove={async () => {
+					await api.post(`/api/review/${ep.item_id}/approve`);
+					onMutate();
+				}}
+				onSkip={async () => {
+					await api.post(`/api/review/${ep.item_id}/skip`);
+					onMutate();
+				}}
+			/>
+		</div>
+	);
+}

src/shared/lib/types.ts

@@ -160,11 +160,32 @@ export interface PipelineJobItem {
 }
 
 export interface PipelineData {
-	review: PipelineReviewItem[];
-	reviewTotal: number;
+	reviewItemsTotal: number;
 	queued: PipelineJobItem[];
 	processing: PipelineJobItem[];
 	done: PipelineJobItem[];
 	doneCount: number;
 	jellyfinUrl: string;
 }
+
+// ─── Review groups (GET /api/review/groups) ──────────────────────────────────
+
+export type ReviewGroup =
+	| { kind: "movie"; item: PipelineReviewItem }
+	| {
+			kind: "series";
+			seriesKey: string;
+			seriesName: string;
+			seriesJellyfinId: string | null;
+			episodeCount: number;
+			minConfidence: "high" | "low";
+			originalLanguage: string | null;
+			seasons: Array<{ season: number | null; episodes: PipelineReviewItem[] }>;
+	  };
+
+export interface ReviewGroupsResponse {
+	groups: ReviewGroup[];
+	totalGroups: number;
+	totalItems: number;
+	hasMore: boolean;
+}