feat(frontend): duplicates view, field-by-field merge dialog, api module

Adds the duplicate-detection UI:

- api/duplicates.ts: getDuplicates / dismissDuplicate / resolveDuplicate, plus
  the cluster and merge-field types.
- /files/duplicates: an offset-paginated list of clusters. Each cluster shows its
  files (auth-loaded thumbnails via a reusable Thumb component); the user clicks a
  file to mark it the survivor, then per other file: Merge, Delete, or "Not a dup"
  (dismiss). The list reloads after each action so it stays consistent with the
  rescan-gated server state.
- DuplicateMergeDialog: a bottom sheet to merge two files field-by-field — each
  scalar from the kept or other file, metadata keep/other/merge, tags & pools
  keep-or-union, with a swap-survivor toggle and an optional trash-the-other box.
- Entry point: a Duplicates action in the files Header next to Trash.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/api/duplicates.ts

@@ -0,0 +1,52 @@
+import { api } from '$lib/api/client';
+import type { File } from '$lib/api/types';
+
+/** A group of mutually similar files. */
+export interface DuplicateCluster {
+	files: File[];
+}
+
+export interface DuplicateClusterPage {
+	items: DuplicateCluster[];
+	total: number;
+	offset: number;
+	limit: number;
+}
+
+/** Per-field source for a merge. Scalars choose keep/discard; relations
+ *  (tags, pools) choose keep/both; metadata can also be shallow-merged. */
+export type ScalarChoice = 'keep' | 'discard';
+export type RelationChoice = 'keep' | 'both';
+export type MetadataChoice = 'keep' | 'discard' | 'merge';
+
+export interface MergeFields {
+	original_name?: ScalarChoice;
+	notes?: ScalarChoice;
+	content_datetime?: ScalarChoice;
+	is_public?: ScalarChoice;
+	metadata?: MetadataChoice;
+	tags?: RelationChoice;
+	pools?: RelationChoice;
+}
+
+export interface ResolveRequest {
+	keep: string;
+	discard: string;
+	fields?: MergeFields;
+	delete_discarded?: boolean;
+}
+
+/** Fetch a page of duplicate clusters (server reads a precomputed table). */
+export function getDuplicates(limit = 20, offset = 0): Promise<DuplicateClusterPage> {
+	return api.get<DuplicateClusterPage>(`/files/duplicates?limit=${limit}&offset=${offset}`);
+}
+
+/** Mark two files as "not a duplicate" so the pair stops surfacing. */
+export function dismissDuplicate(a: string, b: string): Promise<void> {
+	return api.post<void>('/files/duplicates/dismiss', { file_id_a: a, file_id_b: b });
+}
+
+/** Merge a duplicate pair, returning the updated survivor. */
+export function resolveDuplicate(req: ResolveRequest): Promise<File> {
+	return api.post<File>('/files/duplicates/resolve', req);
+}

frontend/src/lib/components/file/DuplicateMergeDialog.svelte

@@ -0,0 +1,402 @@
+<script lang="ts">
+	import type { File } from '$lib/api/types';
+	import {
+		resolveDuplicate,
+		type MergeFields,
+		type MetadataChoice,
+		type RelationChoice,
+		type ScalarChoice
+	} from '$lib/api/duplicates';
+	import Thumb from '$lib/components/file/Thumb.svelte';
+
+	interface Props {
+		/** The two files to merge; `keep` is the default survivor (swappable here). */
+		keep: File;
+		discard: File;
+		/** Called with the updated survivor after a successful merge. */
+		onResolved: (survivor: File) => void;
+		onClose: () => void;
+	}
+
+	let { keep, discard, onResolved, onClose }: Props = $props();
+
+	// Which file survives is swappable; derive the two sides from a single flag so
+	// the choice stays in sync with the props.
+	let swapped = $state(false);
+	let a = $derived<File>(swapped ? discard : keep);
+	let b = $derived<File>(swapped ? keep : discard);
+
+	// Per-field source, all defaulting to the survivor ("keep").
+	let original_name = $state<ScalarChoice>('keep');
+	let notes = $state<ScalarChoice>('keep');
+	let content_datetime = $state<ScalarChoice>('keep');
+	let is_public = $state<ScalarChoice>('keep');
+	let metadata = $state<MetadataChoice>('keep');
+	let tags = $state<RelationChoice>('keep');
+	let pools = $state<RelationChoice>('keep');
+	let deleteDiscarded = $state(true);
+
+	let busy = $state(false);
+	let error = $state('');
+
+	function swap() {
+		swapped = !swapped;
+	}
+
+	function fmtDate(s?: string | null): string {
+		if (!s) return '—';
+		const d = new Date(s);
+		return isNaN(d.getTime()) ? s : d.toLocaleString();
+	}
+	function metaCount(m: unknown): number {
+		return m && typeof m === 'object' ? Object.keys(m as object).length : 0;
+	}
+
+	async function submit() {
+		if (busy) return;
+		busy = true;
+		error = '';
+		const fields: MergeFields = {
+			original_name,
+			notes,
+			content_datetime,
+			is_public,
+			metadata,
+			tags,
+			pools
+		};
+		try {
+			const survivor = await resolveDuplicate({
+				keep: a.id,
+				discard: b.id,
+				fields,
+				delete_discarded: deleteDiscarded
+			});
+			onResolved(survivor);
+			onClose();
+		} catch {
+			error = 'Failed to merge';
+			busy = false;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="backdrop" role="presentation" onclick={onClose}></div>
+<div class="sheet" class:busy role="dialog" aria-label="Merge duplicates">
+	<div class="head">
+		<span class="title">Merge duplicates</span>
+		<button class="x" onclick={onClose} aria-label="Close">
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+			</svg>
+		</button>
+	</div>
+
+	<div class="body">
+		<!-- Survivor / other headers -->
+		<div class="files">
+			<div class="file">
+				<Thumb id={a.id} size={80} alt={a.original_name ?? ''} />
+				<span class="badge keep">Keep</span>
+				<span class="fname" title={a.original_name ?? ''}>{a.original_name ?? '—'}</span>
+			</div>
+			<button class="swap" onclick={swap} title="Swap which file is kept" aria-label="Swap">
+				<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+					<path
+						d="M5 4h8l-2.5-2.5M13 14H5l2.5 2.5"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+			<div class="file">
+				<Thumb id={b.id} size={80} alt={b.original_name ?? ''} />
+				<span class="badge other">Other</span>
+				<span class="fname" title={b.original_name ?? ''}>{b.original_name ?? '—'}</span>
+			</div>
+		</div>
+
+		<!-- Scalar fields: keep vs discard -->
+		{#snippet scalarRow(label: string, value: ScalarChoice, set: (v: ScalarChoice) => void, keepVal: string, otherVal: string)}
+			<div class="row">
+				<span class="label">{label}</span>
+				<div class="seg">
+					<button class:on={value === 'keep'} onclick={() => set('keep')} title={keepVal}>
+						{keepVal || '—'}
+					</button>
+					<button class:on={value === 'discard'} onclick={() => set('discard')} title={otherVal}>
+						{otherVal || '—'}
+					</button>
+				</div>
+			</div>
+		{/snippet}
+
+		{@render scalarRow(
+			'Name',
+			original_name,
+			(v) => (original_name = v),
+			a.original_name ?? '',
+			b.original_name ?? ''
+		)}
+		{@render scalarRow('Notes', notes, (v) => (notes = v), a.notes ?? '', b.notes ?? '')}
+		{@render scalarRow(
+			'Date',
+			content_datetime,
+			(v) => (content_datetime = v),
+			fmtDate(a.content_datetime),
+			fmtDate(b.content_datetime)
+		)}
+		{@render scalarRow(
+			'Visibility',
+			is_public,
+			(v) => (is_public = v),
+			a.is_public ? 'Public' : 'Private',
+			b.is_public ? 'Public' : 'Private'
+		)}
+
+		<!-- Metadata: keep / other / merge -->
+		<div class="row">
+			<span class="label">Metadata</span>
+			<div class="seg">
+				<button class:on={metadata === 'keep'} onclick={() => (metadata = 'keep')}>
+					Keep ({metaCount(a.metadata)})
+				</button>
+				<button class:on={metadata === 'discard'} onclick={() => (metadata = 'discard')}>
+					Other ({metaCount(b.metadata)})
+				</button>
+				<button class:on={metadata === 'merge'} onclick={() => (metadata = 'merge')}>Merge</button>
+			</div>
+		</div>
+
+		<!-- Relations: keep vs union both -->
+		<div class="row">
+			<span class="label">Tags</span>
+			<div class="seg">
+				<button class:on={tags === 'keep'} onclick={() => (tags = 'keep')}>
+					Keep ({a.tags?.length ?? 0})
+				</button>
+				<button class:on={tags === 'both'} onclick={() => (tags = 'both')}>Union both</button>
+			</div>
+		</div>
+		<div class="row">
+			<span class="label">Pools</span>
+			<div class="seg">
+				<button class:on={pools === 'keep'} onclick={() => (pools = 'keep')}>Keep</button>
+				<button class:on={pools === 'both'} onclick={() => (pools = 'both')}>Union both</button>
+			</div>
+		</div>
+
+		<label class="del">
+			<input type="checkbox" bind:checked={deleteDiscarded} />
+			Move the “Other” file to trash after merging
+		</label>
+
+		{#if error}<p class="error">{error}</p>{/if}
+	</div>
+
+	<div class="foot">
+		<button class="btn ghost" onclick={onClose}>Cancel</button>
+		<button class="btn primary" onclick={submit} disabled={busy}>Merge</button>
+	</div>
+</div>
+
+<style>
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 120;
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.sheet {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 121;
+		background-color: var(--color-bg-secondary);
+		border-radius: 14px 14px 0 0;
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+		max-height: 88dvh;
+		display: flex;
+		flex-direction: column;
+		animation: slide-up 0.18s ease-out;
+	}
+	.sheet.busy {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+	@keyframes slide-up {
+		from {
+			transform: translateY(20px);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+	.head {
+		display: flex;
+		align-items: center;
+		padding: 14px 16px 10px;
+		gap: 8px;
+	}
+	.title {
+		flex: 1;
+		font-size: 0.95rem;
+		font-weight: 600;
+	}
+	.x {
+		background: none;
+		border: none;
+		cursor: pointer;
+		color: var(--color-text-muted);
+		padding: 4px;
+		display: flex;
+	}
+	.x:hover {
+		color: var(--color-text-primary);
+	}
+	.body {
+		overflow-y: auto;
+		padding: 0 14px 8px;
+	}
+	.files {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12px;
+		margin-bottom: 12px;
+	}
+	.file {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+		min-width: 0;
+		max-width: 40%;
+	}
+	.badge {
+		font-size: 0.7rem;
+		font-weight: 600;
+		padding: 1px 7px;
+		border-radius: 6px;
+	}
+	.badge.keep {
+		background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
+		color: var(--color-accent);
+	}
+	.badge.other {
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-muted);
+	}
+	.fname {
+		font-size: 0.78rem;
+		color: var(--color-text-muted);
+		max-width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.swap {
+		background-color: var(--color-bg-elevated);
+		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+		color: var(--color-text-muted);
+		border-radius: 8px;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	.swap:hover {
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 7px 0;
+		border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
+	}
+	.label {
+		font-size: 0.82rem;
+		color: var(--color-text-muted);
+		width: 74px;
+		flex-shrink: 0;
+	}
+	.seg {
+		display: flex;
+		flex: 1;
+		gap: 4px;
+		min-width: 0;
+	}
+	.seg button {
+		flex: 1;
+		min-width: 0;
+		padding: 6px 8px;
+		border-radius: 7px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-muted);
+		font-size: 0.8rem;
+		font-family: inherit;
+		cursor: pointer;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.seg button.on {
+		background-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg-elevated));
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+	.del {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 0.82rem;
+		color: var(--color-text-muted);
+		padding: 12px 0 4px;
+	}
+	.error {
+		color: var(--color-danger);
+		font-size: 0.85rem;
+		text-align: center;
+	}
+	.foot {
+		display: flex;
+		gap: 8px;
+		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
+		border-top: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+	}
+	.btn {
+		flex: 1;
+		height: 38px;
+		border-radius: 8px;
+		border: 1px solid transparent;
+		font-size: 0.9rem;
+		font-family: inherit;
+		cursor: pointer;
+	}
+	.btn.ghost {
+		background-color: var(--color-bg-elevated);
+		border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
+		color: var(--color-text-muted);
+	}
+	.btn.primary {
+		background-color: var(--color-accent);
+		color: var(--color-bg-primary);
+		font-weight: 600;
+	}
+	.btn.primary:disabled {
+		opacity: 0.6;
+		cursor: default;
+	}
+</style>

frontend/src/lib/components/file/Thumb.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { get } from 'svelte/store';
+	import { authStore } from '$lib/stores/auth';
+
+	interface Props {
+		/** File id whose thumbnail to load. */
+		id: string;
+		alt?: string;
+		/** Square edge length in px. */
+		size?: number;
+	}
+
+	let { id, alt = '', size = 96 }: Props = $props();
+
+	let imgSrc = $state<string | null>(null);
+	let failed = $state(false);
+
+	// Thumbnails are auth-gated, so fetch with the bearer token and render the blob
+	// (mirrors FileCard's loader). Re-runs whenever the id changes.
+	$effect(() => {
+		const token = get(authStore).accessToken;
+		let objectUrl: string | null = null;
+		let cancelled = false;
+		imgSrc = null;
+		failed = false;
+
+		fetch(`/api/v1/files/${id}/thumbnail`, {
+			headers: token ? { Authorization: `Bearer ${token}` } : {}
+		})
+			.then((res) => (res.ok ? res.blob() : null))
+			.then((blob) => {
+				if (cancelled || !blob) {
+					if (!cancelled) failed = true;
+					return;
+				}
+				objectUrl = URL.createObjectURL(blob);
+				imgSrc = objectUrl;
+			})
+			.catch(() => {
+				if (!cancelled) failed = true;
+			});
+
+		return () => {
+			cancelled = true;
+			if (objectUrl) URL.revokeObjectURL(objectUrl);
+		};
+	});
+</script>
+
+<div class="thumb" style="width:{size}px;height:{size}px">
+	{#if imgSrc}
+		<img src={imgSrc} {alt} draggable="false" />
+	{:else if failed}
+		<div class="ph failed" aria-label="Failed to load"></div>
+	{:else}
+		<div class="ph loading" aria-label="Loading"></div>
+	{/if}
+</div>
+
+<style>
+	.thumb {
+		overflow: hidden;
+		border-radius: 8px;
+		background-color: var(--color-bg-elevated);
+		flex-shrink: 0;
+	}
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		display: block;
+	}
+	.ph {
+		width: 100%;
+		height: 100%;
+	}
+	.ph.loading {
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-elevated) 25%,
+			color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-elevated)) 50%,
+			var(--color-bg-elevated) 75%
+		);
+		background-size: 200% 100%;
+		animation: shimmer 1.4s infinite;
+	}
+	.ph.failed {
+		background-color: color-mix(in srgb, var(--color-danger) 15%, var(--color-bg-elevated));
+	}
+	@keyframes shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+</style>

frontend/src/lib/components/layout/Header.svelte

@@ -12,6 +12,7 @@
 		onFilterToggle: () => void;
 		onUpload?: () => void;
 		onTrash?: () => void;
+		onDuplicates?: () => void;
 	}
 
 	let {
@@ -23,7 +24,8 @@
 		onOrderToggle,
 		onFilterToggle,
 		onUpload,
-		onTrash
+		onTrash,
+		onDuplicates
 	}: Props = $props();
 </script>
 
@@ -51,6 +53,20 @@
 		</button>
 	{/if}
 
+	{#if onDuplicates}
+		<button class="icon-btn dup-btn" onclick={onDuplicates} title="Duplicates">
+			<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+				<rect x="2" y="2" width="8" height="8" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+				<path
+					d="M5 12.5h6A1.5 1.5 0 0 0 12.5 11V5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+				/>
+			</svg>
+		</button>
+	{/if}
+
 	{#if onTrash}
 		<button class="icon-btn trash-btn" onclick={onTrash} title="Trash">
 			<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">

frontend/src/routes/files/+page.svelte

@@ -722,6 +722,7 @@
 		onFilterToggle={() => (filterOpen = !filterOpen)}
 		onUpload={() => uploader?.open()}
 		onTrash={() => goto('/files/trash')}
+		onDuplicates={() => goto('/files/duplicates')}
 	/>
 
 	{#if filterOpen}

frontend/src/routes/files/duplicates/+page.svelte

@@ -0,0 +1,377 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api } from '$lib/api/client';
+	import { getDuplicates, dismissDuplicate, type DuplicateCluster } from '$lib/api/duplicates';
+	import Thumb from '$lib/components/file/Thumb.svelte';
+	import DuplicateMergeDialog from '$lib/components/file/DuplicateMergeDialog.svelte';
+	import type { File } from '$lib/api/types';
+
+	const LIMIT = 20;
+
+	let clusters = $state<DuplicateCluster[]>([]);
+	let total = $state(0);
+	let loading = $state(false);
+	let initialLoaded = $state(false);
+	let error = $state('');
+	let busyKey = $state(''); // cluster currently performing an action
+
+	// Which file is the survivor for a given cluster (keyed by its file-id set).
+	let keepers = $state<Record<string, string>>({});
+
+	// Merge dialog state.
+	let mergeKeep = $state<File | null>(null);
+	let mergeDiscard = $state<File | null>(null);
+
+	$effect(() => {
+		if (!initialLoaded && !loading) void load();
+	});
+
+	function clusterKey(c: DuplicateCluster): string {
+		return c.files.map((f) => f.id).join(',');
+	}
+	function keeperId(c: DuplicateCluster): string {
+		return keepers[clusterKey(c)] ?? c.files[0]?.id ?? '';
+	}
+
+	async function load() {
+		if (loading) return;
+		loading = true;
+		error = '';
+		try {
+			const res = await getDuplicates(LIMIT, clusters.length);
+			clusters = [...clusters, ...(res.items ?? [])];
+			total = res.total ?? clusters.length;
+		} catch {
+			error = 'Failed to load duplicates';
+		} finally {
+			loading = false;
+			initialLoaded = true;
+		}
+	}
+
+	async function reload() {
+		clusters = [];
+		keepers = {};
+		total = 0;
+		initialLoaded = false;
+		await load();
+	}
+
+	function setKeeper(c: DuplicateCluster, id: string) {
+		keepers = { ...keepers, [clusterKey(c)]: id };
+	}
+
+	function openMerge(c: DuplicateCluster, other: File) {
+		const keep = c.files.find((f) => f.id === keeperId(c));
+		if (!keep) return;
+		mergeKeep = keep;
+		mergeDiscard = other;
+	}
+
+	async function deleteFile(c: DuplicateCluster, id: string) {
+		if (busyKey) return;
+		busyKey = clusterKey(c);
+		try {
+			await api.post('/files/bulk/delete', { file_ids: [id] });
+			await reload();
+		} catch {
+			error = 'Failed to delete file';
+		} finally {
+			busyKey = '';
+		}
+	}
+
+	async function notDuplicate(c: DuplicateCluster, other: File) {
+		if (busyKey) return;
+		busyKey = clusterKey(c);
+		try {
+			await dismissDuplicate(keeperId(c), other.id);
+			await reload();
+		} catch {
+			error = 'Failed to dismiss pair';
+		} finally {
+			busyKey = '';
+		}
+	}
+
+	function onMerged() {
+		mergeKeep = null;
+		mergeDiscard = null;
+		void reload();
+	}
+
+	let hasMore = $derived(clusters.length < total);
+</script>
+
+<svelte:head>
+	<title>Duplicates | Tanabata</title>
+</svelte:head>
+
+<div class="page">
+	<header>
+		<button class="back" onclick={() => goto('/files')} aria-label="Back to files">
+			<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+				<path
+					d="M11 4l-5 5 5 5"
+					stroke="currentColor"
+					stroke-width="1.8"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		<span class="htitle">Duplicates{total ? ` (${total})` : ''}</span>
+		<button class="refresh" onclick={reload} title="Refresh" aria-label="Refresh">
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path
+					d="M13 8a5 5 0 1 1-1.5-3.5M13 2v3h-3"
+					stroke="currentColor"
+					stroke-width="1.6"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	</header>
+
+	<main>
+		{#if error}<p class="error" role="alert">{error}</p>{/if}
+
+		{#if initialLoaded && clusters.length === 0 && !error}
+			<div class="empty">
+				<p>No duplicates found.</p>
+				<p class="hint">
+					The list reflects the last <code>dedup</code> run. New uploads appear after the next rescan.
+				</p>
+			</div>
+		{/if}
+
+		{#each clusters as c (clusterKey(c))}
+			{@const keep = keeperId(c)}
+			<section class="cluster" class:busy={busyKey === clusterKey(c)}>
+				<div class="files">
+					{#each c.files as f (f.id)}
+						<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+						<div
+							class="file"
+							class:keep={f.id === keep}
+							role="button"
+							tabindex="0"
+							onclick={() => setKeeper(c, f.id)}
+							title="Click to keep this one"
+						>
+							<Thumb id={f.id} size={96} alt={f.original_name ?? ''} />
+							{#if f.id === keep}<span class="kbadge">Keep</span>{/if}
+							<span class="fname" title={f.original_name ?? ''}>{f.original_name ?? '—'}</span>
+							<span class="fmeta">{f.mime_type} · {f.tags?.length ?? 0} tags</span>
+						</div>
+					{/each}
+				</div>
+
+				<div class="actions">
+					{#each c.files.filter((f) => f.id !== keep) as other (other.id)}
+						<div class="actrow">
+							<span class="aname" title={other.original_name ?? ''}>{other.original_name ?? '—'}</span>
+							<button class="abtn" onclick={() => openMerge(c, other)}>Merge</button>
+							<button class="abtn" onclick={() => deleteFile(c, other.id)}>Delete</button>
+							<button class="abtn ghost" onclick={() => notDuplicate(c, other)}>Not a dup</button>
+						</div>
+					{/each}
+				</div>
+			</section>
+		{/each}
+
+		{#if hasMore}
+			<button class="more" onclick={load} disabled={loading}>
+				{loading ? 'Loading…' : 'Load more'}
+			</button>
+		{:else if loading && !initialLoaded}
+			<p class="loadingp">Loading…</p>
+		{/if}
+	</main>
+</div>
+
+{#if mergeKeep && mergeDiscard}
+	<DuplicateMergeDialog
+		keep={mergeKeep}
+		discard={mergeDiscard}
+		onResolved={onMerged}
+		onClose={() => {
+			mergeKeep = null;
+			mergeDiscard = null;
+		}}
+	/>
+{/if}
+
+<style>
+	.page {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+	header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 12px;
+		background-color: var(--color-bg-primary);
+		border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		flex-shrink: 0;
+	}
+	.back,
+	.refresh {
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 7px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+	.back:hover,
+	.refresh:hover {
+		color: var(--color-text-primary);
+		border-color: var(--color-accent);
+	}
+	.htitle {
+		flex: 1;
+		font-size: 0.95rem;
+		font-weight: 600;
+	}
+	main {
+		flex: 1;
+		overflow-y: auto;
+		padding: 10px 12px calc(72px + env(safe-area-inset-bottom, 0px));
+	}
+	.error {
+		color: var(--color-danger);
+		font-size: 0.9rem;
+		text-align: center;
+	}
+	.empty {
+		text-align: center;
+		color: var(--color-text-muted);
+		padding: 40px 16px;
+	}
+	.empty .hint {
+		font-size: 0.82rem;
+		opacity: 0.8;
+	}
+	code {
+		font-family: monospace;
+		background-color: var(--color-bg-elevated);
+		padding: 0 4px;
+		border-radius: 4px;
+	}
+	.cluster {
+		background-color: var(--color-bg-secondary);
+		border-radius: 12px;
+		padding: 12px;
+		margin-bottom: 12px;
+	}
+	.cluster.busy {
+		opacity: 0.55;
+		pointer-events: none;
+	}
+	.files {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+		margin-bottom: 10px;
+	}
+	.file {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 3px;
+		width: 96px;
+		cursor: pointer;
+		border-radius: 10px;
+		padding: 4px;
+		border: 2px solid transparent;
+	}
+	.file.keep {
+		border-color: var(--color-accent);
+		background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+	}
+	.kbadge {
+		font-size: 0.68rem;
+		font-weight: 600;
+		color: var(--color-accent);
+	}
+	.fname {
+		font-size: 0.74rem;
+		max-width: 96px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--color-text-primary);
+	}
+	.fmeta {
+		font-size: 0.68rem;
+		color: var(--color-text-muted);
+		max-width: 96px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.actions {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+	.actrow {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.aname {
+		flex: 1;
+		min-width: 0;
+		font-size: 0.78rem;
+		color: var(--color-text-muted);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.abtn {
+		padding: 5px 10px;
+		border-radius: 7px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+		font-size: 0.78rem;
+		font-family: inherit;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	.abtn:hover {
+		border-color: var(--color-accent);
+	}
+	.abtn.ghost {
+		color: var(--color-text-muted);
+	}
+	.more {
+		display: block;
+		width: 100%;
+		padding: 10px;
+		border-radius: 8px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+		font-family: inherit;
+		font-size: 0.85rem;
+		cursor: pointer;
+	}
+	.loadingp {
+		text-align: center;
+		color: var(--color-text-muted);
+		font-size: 0.9rem;
+	}
+</style>