diff --git a/REPORT.md b/REPORT.md
new file mode 100644
index 00000000..11b13e51
--- /dev/null
+++ b/REPORT.md
@@ -0,0 +1,24 @@
+# V2 UI migration report
+
+`/v2/*` は `DESIGN.md` と Design Lab を基準にした移行用フロントエンドです。既存APIで成立する検索、ソース操作、メディア管理、AI操作、設定、インポート、データ転送は実データへ接続し、未対応機能は推測データを表示せず無効化しています。
+
+## Backend work required
+
+| 項目 | 現状の原因 | 必要な実装 | V2での扱い |
+| --- | --- | --- | --- |
+| Jobs一覧・履歴・詳細 | jobs contractはイベント購読のみで、一覧取得APIがない | Job DTO、list/detail query | 専用画面の骨格と未対応状態を表示 |
+| JobのRetry / Cancel | 対応するuse caseとmutationがない | retry/cancel command、状態遷移、権限制御 | 操作をdisabled |
+| Sourceの件数・同期中状態 | `SafeMediaSource`にmedia countとsync lifecycleがない | source summary DTO、集計、sync status event | sidebarに「件数未取得」 |
+| Managerの利用件数 | Project / IP / Character一覧にmedia count等がない | 集計queryまたはsummary DTO | 取得可能な実データだけ表示 |
+| Export / RestoreのJobs追跡 | 現行はHTTP download/uploadを直接実行する | job type、progress、artifact、失敗履歴 | 転送自体は実行し、Jobs連携は表示しない |
+| AI接続状態・latency | health check contractがない | typed health endpointとtimeout/error定義 | Settingsで「未確認」、確認操作をdisabled |
+| リロード後の前後メディア移動 | 詳細routeだけでは元のfilter/sort/cursorを復元できない | navigation context永続化、またはneighbor query | 前後ボタンをdisabled |
+
+## Frontend follow-up
+
+| 項目 | 理由 | V2での扱い |
+| --- | --- | --- |
+| Collectionのlist表示 | 4:3 gridを先行し、listの情報設計とvirtual row実装が未着手 | toggleをdisabled |
+| Tauri route adapter | TauriはWebと別のhash routerを持つ | 今回はWebの`/v2/*`のみ。共有screenを使う薄いroute追加が必要 |
+
+バックエンド追加時は、無効状態を消すだけでなく、loading / error / offline / retryとリアルタイム更新まで同じ画面内で接続します。
diff --git a/apps/server/src/components/imports/pending-downloads-indicator.tsx b/apps/server/src/components/imports/pending-downloads-indicator.tsx
index 34dde467..de84a1ef 100644
--- a/apps/server/src/components/imports/pending-downloads-indicator.tsx
+++ b/apps/server/src/components/imports/pending-downloads-indicator.tsx
@@ -6,8 +6,10 @@ import {
 import { orpc } from "~/infrastructure/api-clients/orpc-client";
 import { fetchMediaSources } from "~/infrastructure/api-clients/sources-api";
 
-export function PendingDownloadsIndicator() {
-	const props: PendingDownloadsIndicatorProps = {
+export function PendingDownloadsIndicator(
+	displayProps: { compact?: boolean; variant?: "default" | "v2" } = {},
+) {
+	const indicatorProps: PendingDownloadsIndicatorProps = {
 		countPending: async () => {
 			const result = await orpc.imports.countPending();
 			return result.count;
@@ -44,5 +46,7 @@ export function PendingDownloadsIndicator() {
 		},
 	};
 
-	return <SharedPendingDownloadsIndicator {...props} />;
+	return (
+		<SharedPendingDownloadsIndicator {...indicatorProps} {...displayProps} />
+	);
 }
diff --git a/apps/server/src/components/media/media-grid-item.tsx b/apps/server/src/components/media/media-grid-item.tsx
index 2e6ef4bb..acfcf0cb 100644
--- a/apps/server/src/components/media/media-grid-item.tsx
+++ b/apps/server/src/components/media/media-grid-item.tsx
@@ -1,11 +1,15 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
-import { MediaGridItem as SharedMediaGridItem } from "@solid-imager/ui/media-grid-item";
-import { Link } from "@tanstack/solid-router";
+import {
+	type MediaGridLinkProps,
+	MediaGridItem as SharedMediaGridItem,
+} from "@solid-imager/ui/media-grid-item";
+import { Link, useLocation } from "@tanstack/solid-router";
 import { Show } from "solid-js";
 import { ThumbnailImage } from "./thumbnail-image";
 
 type MediaGridItemProps = {
 	linkPrefix?: string;
+	routeVersion?: "default" | "v2";
 	media: Media;
 	onContextMenu?: (event: MouseEvent) => void;
 	priority?: boolean;
@@ -13,32 +17,77 @@ type MediaGridItemProps = {
 	isBulkSelectMode?: boolean;
 	isSelected?: boolean;
 	onToggleSelect?: () => void;
+	onPreviewSelect?: () => void;
 };
 
 export function MediaGridItem(props: MediaGridItemProps) {
+	const location = useLocation();
+	const detailLink = (linkProps: MediaGridLinkProps) =>
+		props.routeVersion === "v2" ? (
+			<Link
+				class={linkProps.class}
+				data-media-id={linkProps["data-media-id"]}
+				onClick={(event: MouseEvent) => {
+					if (
+						props.onPreviewSelect &&
+						window.matchMedia("(min-width: 1536px)").matches
+					) {
+						event.preventDefault();
+						props.onPreviewSelect();
+						return;
+					}
+					if (
+						event.button === 0 &&
+						!event.metaKey &&
+						!event.ctrlKey &&
+						!event.shiftKey &&
+						!event.altKey
+					) {
+						sessionStorage.setItem("v2:media-return", location().href);
+					}
+				}}
+				onContextMenu={linkProps.onContextMenu}
+				params={{
+					mediaId: props.media.id,
+					mediaSourceId: props.media.mediaSourceId,
+				}}
+				to="/v2/sources/$mediaSourceId/$mediaId"
+			>
+				{linkProps.children}
+			</Link>
+		) : (
+			<Link
+				class={linkProps.class}
+				data-media-id={linkProps["data-media-id"]}
+				onClick={(event: MouseEvent) => {
+					if (
+						props.onPreviewSelect &&
+						window.matchMedia("(min-width: 1536px)").matches
+					) {
+						event.preventDefault();
+						props.onPreviewSelect();
+					}
+				}}
+				onContextMenu={linkProps.onContextMenu}
+				params={{
+					mediaId: props.media.id,
+					mediaSourceId: props.media.mediaSourceId,
+				}}
+				to="/sources/$mediaSourceId/$mediaId"
+			>
+				{linkProps.children}
+			</Link>
+		);
+
 	return (
 		<SharedMediaGridItem
+			variant={props.routeVersion === "v2" ? "v2" : "default"}
 			isBulkSelectMode={props.isBulkSelectMode}
 			isSelected={props.isSelected}
 			linkComponent={(linkProps) => (
-				<Show
-					fallback={
-						<Link
-							class={linkProps.class}
-							data-media-id={linkProps["data-media-id"]}
-							onContextMenu={linkProps.onContextMenu}
-							params={{
-								mediaId: props.media.id,
-								mediaSourceId: props.media.mediaSourceId,
-							}}
-							to="/sources/$mediaSourceId/$mediaId"
-						>
-							{linkProps.children}
-						</Link>
-					}
-					when={props.isBulkSelectMode}
-				>
+				<Show fallback={detailLink(linkProps)} when={props.isBulkSelectMode}>
 					<button
+						aria-pressed={props.isSelected}
 						type="button"
 						class={linkProps.class}
 						data-media-id={linkProps["data-media-id"]}
diff --git a/apps/server/src/components/media/media-sidebar.tsx b/apps/server/src/components/media/media-sidebar.tsx
index 304e024e..88134247 100644
--- a/apps/server/src/components/media/media-sidebar.tsx
+++ b/apps/server/src/components/media/media-sidebar.tsx
@@ -1,12 +1,36 @@
 import type { MediaDetails } from "@solid-imager/core/domain/media/schemas";
 import { getErrorMessage } from "@solid-imager/core/utils";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@solid-imager/ui/alert-dialog";
 import { Badge } from "@solid-imager/ui/badge";
+import { Button } from "@solid-imager/ui/button";
 import { ClipboardCopy } from "@solid-imager/ui/clipboard-copy";
 import { CollapsibleRoot as Collapsible } from "@solid-imager/ui/collapsible";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@solid-imager/ui/popover";
 import { activateVectorSearch } from "@solid-imager/ui/stores/search-store";
 import { toast } from "@solid-imager/ui/toast";
+import {
+	Binary,
+	ChevronDown,
+	Scan,
+	ScanSearch,
+	Sparkles,
+} from "@solid-imager/ui/v2/icons";
 import { createQuery, useQueryClient } from "@tanstack/solid-query";
-import { useNavigate } from "@tanstack/solid-router";
+// biome-ignore lint/suspicious/noDeprecatedImports: the object overload used below is current; TanStack's legacy overload annotation marks the re-export.
+import { useBlocker, useNavigate } from "@tanstack/solid-router";
 import {
 	createEffect,
 	createMemo,
@@ -52,8 +76,14 @@ type MediaSidebarProps = {
 	media: MediaDetails;
 	isUpdating?: boolean;
 	onUpdate?: () => void;
+	variant?: "default" | "v2";
 };
 
+type MediaActionsProps = Pick<
+	MediaSidebarProps,
+	"media" | "onUpdate" | "variant"
+>;
+
 const CCIP_STATUS_REFRESH_INTERVAL_MS = 1_000;
 const CCIP_MISSING_STATUS_LIMIT = 5;
 
@@ -95,14 +125,11 @@ const _CollapsibleSection = (props: {
 	);
 };
 
-export function MediaSidebar(props: MediaSidebarProps) {
-	const queryClient = useQueryClient();
+export function MediaActions(props: MediaActionsProps) {
 	const navigate = useNavigate();
-	const tags = createMemo(() => props.media.tags || []);
 	const [isAiTaggingModalOpen, setIsAiTaggingModalOpen] = createSignal(false);
 	const [isOppaiOracleModalOpen, setIsOppaiOracleModalOpen] =
 		createSignal(false);
-
 	const [isCharacterCropModalOpen, setIsCharacterCropModalOpen] =
 		createSignal(false);
 	const [ccipStatus, setCcipStatus] = createSignal<
@@ -228,11 +255,185 @@ export function MediaSidebar(props: MediaSidebarProps) {
 		onCleanup(() => clearInterval(intervalId));
 	});
 
+	const handleFindSimilar = () => {
+		activateVectorSearch(props.media.id);
+		if (props.variant === "v2") {
+			void navigate({ to: "/v2/search" });
+			return;
+		}
+		void navigate({ to: "/search" });
+	};
+	const ccipActionLabel = () => {
+		if (ccipStatus() === "ready" || ccipStatus() === "stale") {
+			return "Re-extract CCIP vector";
+		}
+		if (ccipStatus() === "processing") return "Extracting CCIP vector…";
+		return "Extract CCIP vector";
+	};
+
+	return (
+		<>
+			<Show
+				fallback={
+					<div class="flex flex-col gap-2">
+						<button
+							class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-purple-600 px-3 py-2 font-medium text-sm text-white transition-colors hover:bg-purple-700"
+							onClick={() => setIsAiTaggingModalOpen(true)}
+							type="button"
+						>
+							<Sparkles aria-hidden="true" size={16} />
+							Extract Tags (AI)
+						</button>
+						<button
+							class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-orange-600 px-3 py-2 font-medium text-sm text-white transition-colors hover:bg-orange-700"
+							onClick={() => setIsOppaiOracleModalOpen(true)}
+							type="button"
+						>
+							<Sparkles aria-hidden="true" size={16} />
+							Extract Tags (OppaiOracle)
+						</button>
+						<button
+							class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-teal-600 px-3 py-2 font-medium text-sm text-white transition-colors hover:bg-teal-700"
+							onClick={() => setIsCharacterCropModalOpen(true)}
+							type="button"
+						>
+							<Scan aria-hidden="true" size={16} />
+							Detect &amp; Crop Characters
+						</button>
+						<button
+							class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md border px-3 py-2 font-medium text-sm transition-colors hover:bg-gray-100 disabled:opacity-50"
+							disabled={isExtractingCcip() || isCcipJobPending()}
+							onClick={handleCcipExtraction}
+							type="button"
+						>
+							<Binary aria-hidden="true" size={16} />
+							{ccipActionLabel()}
+						</button>
+						<Show when={ccipStatus() === "ready"}>
+							<button
+								class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md border px-3 py-2 font-medium text-sm transition-colors hover:bg-gray-100"
+								onClick={handleFindSimilar}
+								type="button"
+							>
+								<ScanSearch aria-hidden="true" size={16} />
+								Find Similar
+							</button>
+						</Show>
+					</div>
+				}
+				when={props.variant === "v2"}
+			>
+				<div class="flex w-full flex-wrap items-center gap-2 md:w-auto md:flex-nowrap">
+					<Button
+						class="h-10 min-w-32 flex-1 md:h-9 md:flex-none"
+						onClick={() => setIsAiTaggingModalOpen(true)}
+						size="sm"
+					>
+						<Sparkles aria-hidden="true" size={15} />
+						Extract tags
+					</Button>
+					<Button
+						class="h-10 min-w-32 flex-1 md:h-9 md:flex-none"
+						disabled={ccipStatus() !== "ready"}
+						onClick={handleFindSimilar}
+						size="sm"
+						title={
+							ccipStatus() === "ready"
+								? undefined
+								: "CCIP vector is required before similar search"
+						}
+						variant="outline"
+					>
+						<ScanSearch aria-hidden="true" size={15} />
+						Find similar
+					</Button>
+					<Popover placement="bottom-end">
+						<PopoverTrigger class="flex h-10 min-w-32 flex-1 items-center justify-center gap-2 rounded-md border border-input bg-white px-3 font-medium text-xs outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:h-9 md:flex-none">
+							More actions
+							<ChevronDown aria-hidden="true" size={14} />
+						</PopoverTrigger>
+						<PopoverContent class="v2-theme w-64 space-y-1 p-1.5 shadow-xl">
+							<Button
+								class="h-9 w-full justify-start px-2"
+								onClick={() => setIsOppaiOracleModalOpen(true)}
+								size="sm"
+								variant="ghost"
+							>
+								<Sparkles aria-hidden="true" size={14} />
+								Extract tags (OppaiOracle)
+							</Button>
+							<Button
+								class="h-9 w-full justify-start px-2"
+								onClick={() => setIsCharacterCropModalOpen(true)}
+								size="sm"
+								variant="ghost"
+							>
+								<Scan aria-hidden="true" size={14} />
+								Detect &amp; crop characters
+							</Button>
+							<Button
+								class="h-9 w-full justify-start px-2"
+								disabled={isExtractingCcip() || isCcipJobPending()}
+								onClick={handleCcipExtraction}
+								size="sm"
+								variant="ghost"
+							>
+								<Binary aria-hidden="true" size={14} />
+								{ccipActionLabel()}
+							</Button>
+							<p
+								aria-live="polite"
+								class="px-2 py-1 text-[11px] text-[var(--v2-text-muted)]"
+							>
+								CCIP status: {ccipStatus()}
+							</p>
+						</PopoverContent>
+					</Popover>
+				</div>
+			</Show>
+
+			<AiTaggingModal
+				isOpen={isAiTaggingModalOpen()}
+				mediaId={props.media.id}
+				mediaSourceId={props.media.mediaSourceId}
+				onClose={() => setIsAiTaggingModalOpen(false)}
+				onSuccess={props.onUpdate}
+			/>
+			<OppaiOracleModal
+				isOpen={isOppaiOracleModalOpen()}
+				mediaId={props.media.id}
+				mediaSourceId={props.media.mediaSourceId}
+				onClose={() => setIsOppaiOracleModalOpen(false)}
+			/>
+			<CharacterCropModal
+				isOpen={isCharacterCropModalOpen()}
+				media={props.media}
+				onClose={() => setIsCharacterCropModalOpen(false)}
+			/>
+		</>
+	);
+}
+
+export function MediaSidebar(props: MediaSidebarProps) {
+	const queryClient = useQueryClient();
+	const tags = createMemo(() => props.media.tags || []);
+
 	// Description editing state
 	const [isEditingDescription, setIsEditingDescription] = createSignal(false);
 	const [descriptionValue, setDescriptionValue] = createSignal(
 		props.media.description || "",
 	);
+	const descriptionDirty = () =>
+		props.variant === "v2" &&
+		isEditingDescription() &&
+		descriptionValue() !== (props.media.description ?? "");
+	const navigationBlocker = useBlocker({
+		shouldBlockFn: descriptionDirty,
+		enableBeforeUnload: descriptionDirty,
+		withResolver: true,
+	});
+	const [allowBlockedNavigation, setAllowBlockedNavigation] =
+		createSignal(false);
 
 	const handleSaveDescription = async () => {
 		try {
@@ -380,97 +581,55 @@ export function MediaSidebar(props: MediaSidebarProps) {
 	};
 
 	return (
-		<aside class="min-w-0 space-y-4 rounded-lg border bg-gray-50 p-3 sm:p-4 lg:h-full lg:overflow-y-auto lg:overscroll-contain">
-			<div>
-				<h1 class="font-bold text-xl break-all">{props.media.fileName}</h1>
-				<p class="text-gray-500 text-sm break-all">{props.media.filePath}</p>
-			</div>
-
-			<div class="flex flex-col gap-2">
-				<button
-					class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-purple-600 px-3 py-2 font-medium text-sm text-white transition-colors hover:bg-purple-700"
-					onClick={() => setIsAiTaggingModalOpen(true)}
-					type="button"
-				>
-					<span class="i-lucide-sparkles" />
-					Extract Tags (AI)
-				</button>
-				<button
-					class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-orange-600 px-3 py-2 font-medium text-sm text-white transition-colors hover:bg-orange-700"
-					onClick={() => setIsOppaiOracleModalOpen(true)}
-					type="button"
-				>
-					<span class="i-lucide-sparkles" />
-					Extract Tags (OppaiOracle)
-				</button>
-				<button
-					class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-teal-600 px-3 py-2 font-medium text-sm text-white transition-colors hover:bg-teal-700"
-					onClick={() => setIsCharacterCropModalOpen(true)}
-					type="button"
-				>
-					<span class="i-lucide-scan" />
-					Detect &amp; Crop Characters
-				</button>
-				<button
-					class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md border px-3 py-2 font-medium text-sm transition-colors hover:bg-gray-100 disabled:opacity-50"
-					disabled={isExtractingCcip() || isCcipJobPending()}
-					onClick={handleCcipExtraction}
-					type="button"
-				>
-					<span class="i-lucide-binary" />
-					{ccipStatus() === "ready" || ccipStatus() === "stale"
-						? "Re-extract CCIP Vector"
-						: ccipStatus() === "processing"
-							? "Extracting CCIP Vector..."
-							: "Extract CCIP Vector"}
-				</button>
-				<Show when={ccipStatus() === "ready"}>
-					<button
-						class="flex min-h-11 w-full items-center justify-center gap-2 rounded-md border px-3 py-2 font-medium text-sm transition-colors hover:bg-gray-100"
-						onClick={() => {
-							activateVectorSearch(props.media.id);
-							void navigate({ to: "/search" });
-						}}
-						type="button"
-					>
-						<span class="i-lucide-scan-search" />
-						Find Similar
-					</button>
-				</Show>
-			</div>
-
-			<AiTaggingModal
-				isOpen={isAiTaggingModalOpen()}
-				mediaId={props.media.id}
-				mediaSourceId={props.media.mediaSourceId}
-				onClose={() => setIsAiTaggingModalOpen(false)}
-				onSuccess={props.onUpdate}
-			/>
-
-			<OppaiOracleModal
-				isOpen={isOppaiOracleModalOpen()}
-				mediaId={props.media.id}
-				mediaSourceId={props.media.mediaSourceId}
-				onClose={() => setIsOppaiOracleModalOpen(false)}
-			/>
+		<aside
+			class={
+				props.variant === "v2"
+					? "min-w-0 divide-y divide-[var(--v2-border)] bg-[var(--v2-surface-subtle)] px-4 pb-6 lg:h-full lg:overflow-y-auto lg:overscroll-contain [&>div]:py-4 [scrollbar-gutter:stable]"
+					: "min-w-0 space-y-4 rounded-lg border bg-gray-50 p-3 sm:p-4 lg:h-full lg:overflow-y-auto lg:overscroll-contain"
+			}
+		>
+			<Show when={props.variant !== "v2"}>
+				<div>
+					<h1 class="font-bold text-xl break-all">{props.media.fileName}</h1>
+					<p class="text-muted-foreground text-sm break-all">
+						{props.media.filePath}
+					</p>
+				</div>
+			</Show>
 
-			<CharacterCropModal
-				isOpen={isCharacterCropModalOpen()}
-				media={props.media}
-				onClose={() => setIsCharacterCropModalOpen(false)}
-			/>
+			<Show when={props.variant !== "v2"}>
+				<MediaActions
+					media={props.media}
+					onUpdate={props.onUpdate}
+					variant={props.variant}
+				/>
+			</Show>
 
 			<div class="space-y-2">
-				<h2 class="font-semibold text-lg">Details</h2>
-				<dl class="grid grid-cols-1 gap-1 text-sm sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2">
-					<dt class="font-medium text-gray-600">Resolution</dt>
-					<dd class="text-gray-800">
+				<h2 class="font-semibold text-lg">
+					{props.variant === "v2" ? "File information" : "Details"}
+				</h2>
+				<dl
+					class={
+						props.variant === "v2"
+							? "grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-2 text-sm"
+							: "grid grid-cols-1 gap-1 text-sm sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2"
+					}
+				>
+					<dt class="font-medium text-muted-foreground">Resolution</dt>
+					<dd class="text-foreground">
 						{props.media.width} x {props.media.height}
 					</dd>
-					<dt class="font-medium text-gray-600">File Size</dt>
-					<dd class="text-gray-800">
+					<dt class="font-medium text-muted-foreground">File Size</dt>
+					<dd class="text-foreground">
 						{props.media.fileSize ? formatBytes(props.media.fileSize) : "N/A"}
 					</dd>
+					<Show when={props.variant === "v2"}>
+						<dt class="font-medium text-muted-foreground">Path</dt>
+						<dd class="min-w-0 max-w-52 break-all text-right text-foreground text-xs">
+							{props.media.filePath}
+						</dd>
+					</Show>
 				</dl>
 			</div>
 
@@ -490,7 +649,7 @@ export function MediaSidebar(props: MediaSidebarProps) {
 				</div>
 				<Show
 					fallback={
-						<div class="rounded-md bg-gray-100 p-3 text-gray-500 text-sm italic">
+						<div class="rounded-md bg-muted p-3 text-muted-foreground text-sm italic">
 							No description
 						</div>
 					}
@@ -498,20 +657,20 @@ export function MediaSidebar(props: MediaSidebarProps) {
 				>
 					<Show
 						fallback={
-							<div class="whitespace-pre-wrap rounded-md bg-gray-100 p-3 text-sm">
+							<div class="whitespace-pre-wrap rounded-md bg-muted p-3 text-sm">
 								{props.media.description}
 							</div>
 						}
 						when={isEditingDescription()}
 					>
 						<textarea
-							class="w-full scroll-mb-24 rounded-md border border-gray-300 p-2 text-base sm:text-sm"
+							class="w-full scroll-mb-24 rounded-md border border-input bg-background p-2 text-base sm:text-sm"
 							onInput={(e) => setDescriptionValue(e.currentTarget.value)}
 							placeholder="Enter description..."
 							rows={6}
 							value={descriptionValue()}
 						/>
-						<div class="sticky bottom-0 z-10 -mx-3 flex flex-col gap-2 border-t bg-gray-50 px-3 py-3 sm:-mx-4 sm:px-4 lg:static lg:mx-0 lg:flex-row lg:border-0 lg:bg-transparent lg:p-0">
+						<div class="sticky bottom-0 z-10 -mx-3 flex flex-col gap-2 border-t bg-background px-3 py-3 sm:-mx-4 sm:px-4 lg:static lg:mx-0 lg:flex-row lg:border-0 lg:bg-transparent lg:p-0">
 							<button
 								class="min-h-11 w-full rounded-md bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700 lg:w-auto"
 								onClick={handleSaveDescription}
@@ -520,7 +679,7 @@ export function MediaSidebar(props: MediaSidebarProps) {
 								Save
 							</button>
 							<button
-								class="min-h-11 w-full rounded-md bg-gray-300 px-3 py-1 text-gray-700 text-sm hover:bg-gray-400 lg:w-auto"
+								class="min-h-11 w-full rounded-md border border-input bg-background px-3 py-1 text-foreground text-sm hover:bg-accent lg:w-auto"
 								onClick={handleCancelEdit}
 								type="button"
 							>
@@ -565,7 +724,7 @@ export function MediaSidebar(props: MediaSidebarProps) {
 									<div class="flex min-w-0 items-center gap-2">
 										<span class="break-words font-medium">{author.name}</span>
 										<Show when={author.accountId}>
-											<span class="break-all text-gray-500 text-xs">
+											<span class="break-all text-muted-foreground text-xs">
 												({author.accountId})
 											</span>
 										</Show>
@@ -578,6 +737,9 @@ export function MediaSidebar(props: MediaSidebarProps) {
 			</Show>
 
 			<div class="space-y-4">
+				<Show when={props.variant === "v2"}>
+					<h2 class="font-semibold text-lg">Relations</h2>
+				</Show>
 				<AssociationManager
 					availableItems={allProjects.data || []}
 					isLoading={projects.isLoading || props.isUpdating}
@@ -678,16 +840,21 @@ export function MediaSidebar(props: MediaSidebarProps) {
 					<Collapsible.Root>
 						<Collapsible.Trigger class="flex w-full items-center justify-between font-semibold text-lg">
 							Generation Info
-							<span class="i-lucide-chevron-down ui-expanded:rotate-180 transition-transform" />
+							<ChevronDown
+								class="ui-expanded:rotate-180 transition-transform"
+								size={14}
+							/>
 						</Collapsible.Trigger>
 						<Collapsible.Content class="space-y-2 text-sm">
 							<Show when={genInfo()?.prompt}>
 								<div>
 									<div class="mb-1 flex items-center justify-between">
-										<span class="font-medium text-gray-600">Prompt:</span>
+										<span class="font-medium text-muted-foreground">
+											Prompt:
+										</span>
 										<ClipboardCopy text={genInfo()?.prompt ?? ""} />
 									</div>
-									<p class="max-h-32 overflow-y-auto whitespace-pre-wrap rounded bg-gray-100 p-2 text-xs">
+									<p class="max-h-32 overflow-y-auto whitespace-pre-wrap rounded bg-muted p-2 text-xs">
 										{genInfo()?.prompt}
 									</p>
 								</div>
@@ -695,12 +862,12 @@ export function MediaSidebar(props: MediaSidebarProps) {
 							<Show when={genInfo()?.negativePrompt}>
 								<div>
 									<div class="mb-1 flex items-center justify-between">
-										<span class="font-medium text-gray-600">
+										<span class="font-medium text-muted-foreground">
 											Negative Prompt:
 										</span>
 										<ClipboardCopy text={genInfo()?.negativePrompt ?? ""} />
 									</div>
-									<p class="max-h-32 overflow-y-auto whitespace-pre-wrap rounded bg-gray-100 p-2 text-xs">
+									<p class="max-h-32 overflow-y-auto whitespace-pre-wrap rounded bg-muted p-2 text-xs">
 										{genInfo()?.negativePrompt}
 									</p>
 								</div>
@@ -708,7 +875,9 @@ export function MediaSidebar(props: MediaSidebarProps) {
 							<Show when={genInfo()?.workflow}>
 								<div>
 									<div class="mb-1 flex items-center justify-between">
-										<span class="font-medium text-gray-600">Workflow:</span>
+										<span class="font-medium text-muted-foreground">
+											Workflow:
+										</span>
 										<ClipboardCopy
 											text={
 												genInfo()?.workflow
@@ -717,7 +886,7 @@ export function MediaSidebar(props: MediaSidebarProps) {
 											}
 										/>
 									</div>
-									<pre class="max-h-32 overflow-y-auto whitespace-pre-wrap rounded bg-gray-100 p-2 text-xs">
+									<pre class="max-h-32 overflow-y-auto whitespace-pre-wrap rounded bg-muted p-2 text-xs">
 										{JSON.stringify(genInfo()?.workflow, null, 2)}
 									</pre>
 								</div>
@@ -726,6 +895,44 @@ export function MediaSidebar(props: MediaSidebarProps) {
 					</Collapsible.Root>
 				</div>
 			</Show>
+
+			<AlertDialog
+				onOpenChange={(open) => {
+					const resolver = navigationBlocker();
+					if (!open && resolver.status === "blocked") {
+						if (allowBlockedNavigation()) {
+							setAllowBlockedNavigation(false);
+							return;
+						}
+						resolver.reset?.();
+					}
+				}}
+				open={navigationBlocker().status === "blocked"}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>説明の変更を破棄しますか？</AlertDialogTitle>
+						<AlertDialogDescription>
+							保存されていない説明があります。このページを離れると入力内容は失われます。
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>編集を続ける</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={() => {
+								const resolver = navigationBlocker();
+								if (resolver.status !== "blocked") return;
+								setDescriptionValue(props.media.description ?? "");
+								setIsEditingDescription(false);
+								setAllowBlockedNavigation(true);
+								resolver.proceed?.();
+							}}
+						>
+							破棄して移動
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</aside>
 	);
 }
diff --git a/apps/server/src/components/media/media-viewer.tsx b/apps/server/src/components/media/media-viewer.tsx
index f34b508e..b105ec6b 100644
--- a/apps/server/src/components/media/media-viewer.tsx
+++ b/apps/server/src/components/media/media-viewer.tsx
@@ -74,6 +74,7 @@ class ApiMediaSource implements MediaSource {
 type MediaViewerProps = {
 	media: MediaDetails;
 	sourceRootPath?: string | null;
+	variant?: "default" | "v2";
 };
 
 export function MediaViewer(props: MediaViewerProps) {
@@ -99,6 +100,7 @@ export function MediaViewer(props: MediaViewerProps) {
 			fileName={props.media.fileName}
 			height={props.media.height}
 			source={source()}
+			variant={props.variant}
 			width={props.media.width}
 		/>
 	);
diff --git a/apps/server/src/components/v2/v2-app-shell.tsx b/apps/server/src/components/v2/v2-app-shell.tsx
new file mode 100644
index 00000000..8d86e20e
--- /dev/null
+++ b/apps/server/src/components/v2/v2-app-shell.tsx
@@ -0,0 +1,469 @@
+import type {
+	MediaSourceInfo,
+	SafeMediaSource,
+} from "@solid-imager/core/domain/sources/schemas";
+import { mediaSourceInfoSchema } from "@solid-imager/core/domain/sources/schemas";
+import { Button } from "@solid-imager/ui/button";
+import {
+	CollapsibleContent,
+	CollapsibleRoot,
+	CollapsibleTrigger,
+} from "@solid-imager/ui/collapsible";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@solid-imager/ui/dialog";
+import { subscribeToEventStream } from "@solid-imager/ui/event-stream";
+import type { RawEventHandler } from "@solid-imager/ui/hooks/use-sources-events";
+import { useSourcesPage } from "@solid-imager/ui/hooks/use-sources-page";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@solid-imager/ui/popover";
+import { SourceDeleteModal } from "@solid-imager/ui/source-delete-modal";
+import { SourceFormModal } from "@solid-imager/ui/source-form-modal";
+import {
+	BriefcaseBusiness,
+	ChevronDown,
+	CircleHelp,
+	Clock3,
+	Database,
+	Ellipsis,
+	FileText,
+	Image,
+	Library,
+	Menu,
+	PanelLeftClose,
+	PanelLeftOpen,
+	Plus,
+	RefreshCw,
+	Search,
+	Settings,
+} from "@solid-imager/ui/v2/icons";
+import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import { Link, useLocation } from "@tanstack/solid-router";
+import type { JSX, ParentProps } from "solid-js";
+import { createSignal, For, Show } from "solid-js";
+import { PendingDownloadsIndicator } from "~/components/imports/pending-downloads-indicator";
+import { orpc } from "~/infrastructure/api-clients/orpc-client";
+import { mediaSourcesQueryOptions } from "~/infrastructure/api-clients/queries";
+import {
+	createMediaSource,
+	deleteMediaSource,
+	syncMediaSources,
+	updateMediaSource,
+} from "~/infrastructure/api-clients/sources-api";
+
+type V2AppShellProps = ParentProps<{
+	statusIndicator?: JSX.Element;
+}>;
+
+type V2SidebarProps = {
+	expanded: boolean;
+	mediaSources: SafeMediaSource[];
+	onAddSource: () => void;
+	onCollapseToggle: () => void;
+	onDeleteSource: (source: SafeMediaSource) => void;
+	onEditSource: (source: SafeMediaSource) => void;
+	onNavigate?: () => void;
+	onSyncSource: (source: SafeMediaSource) => void;
+};
+
+const V2_NAVIGATION_ITEMS = [
+	{ icon: Search, label: "Search", to: "/v2/search" },
+	{ icon: BriefcaseBusiness, label: "Manager", to: "/v2/manager" },
+	{ icon: Clock3, label: "Jobs", to: "/v2/jobs" },
+	{ icon: Settings, label: "Settings", to: "/v2/config" },
+] as const;
+
+function registerSourceEvents(handler: RawEventHandler): () => void {
+	return subscribeToEventStream(
+		(signal) => orpc.sources.events({ id: "*" }, { signal }),
+		handler,
+	);
+}
+
+function sourceTypeLabel(source: SafeMediaSource): string {
+	return source.type === "local" ? "Local" : source.type.toUpperCase();
+}
+
+function V2NavigationItem(props: {
+	children?: JSX.Element;
+	expanded: boolean;
+	icon: typeof Library;
+	label: string;
+	onClick?: () => void;
+	to: string;
+}) {
+	const location = useLocation();
+	const active = () =>
+		location().pathname === props.to ||
+		(props.to !== "/v2/search" &&
+			location().pathname.startsWith(`${props.to}/`));
+	const Icon = props.icon;
+
+	return (
+		<Link
+			aria-current={active() ? "page" : undefined}
+			aria-label={props.label}
+			class={`flex h-11 w-full items-center gap-2 rounded-md px-3 font-medium text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:h-10 ${
+				active()
+					? "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
+					: "text-[var(--v2-text-secondary)] hover:bg-[var(--v2-surface-muted)] hover:text-[var(--v2-text)]"
+			}`}
+			onClick={props.onClick}
+			to={props.to}
+		>
+			<Icon aria-hidden="true" class="shrink-0" size={18} />
+			<Show when={props.expanded}>
+				<span class="min-w-0 flex-1 truncate">{props.label}</span>
+				{props.children}
+			</Show>
+		</Link>
+	);
+}
+
+function V2SourceActions(props: {
+	onDelete: () => void;
+	onEdit: () => void;
+	onSync: () => void;
+	sourceName: string;
+}) {
+	return (
+		<Popover placement="right-start">
+			<PopoverTrigger
+				aria-label={`${props.sourceName}の操作`}
+				class="flex size-11 shrink-0 items-center justify-center rounded-md text-[var(--v2-text-muted)] outline-none hover:bg-white focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:size-7"
+			>
+				<Ellipsis aria-hidden="true" size={14} />
+			</PopoverTrigger>
+			<PopoverContent class="w-44 space-y-1 p-1.5">
+				<Button
+					class="h-11 w-full justify-start px-2 md:h-8"
+					onClick={props.onSync}
+					size="sm"
+					variant="ghost"
+				>
+					<RefreshCw aria-hidden="true" size={14} />
+					Sync
+				</Button>
+				<Button
+					class="h-11 w-full justify-start px-2 md:h-8"
+					onClick={props.onEdit}
+					size="sm"
+					variant="ghost"
+				>
+					Edit
+				</Button>
+				<Button
+					class="h-11 w-full justify-start px-2 text-destructive md:h-8"
+					onClick={props.onDelete}
+					size="sm"
+					variant="ghost"
+				>
+					Delete
+				</Button>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+function V2Sidebar(props: V2SidebarProps) {
+	const location = useLocation();
+	const [sourcesOpen, setSourcesOpen] = createSignal(true);
+	const currentSourceId = () => {
+		const match = /^\/v2\/sources\/([^/]+)/.exec(location().pathname);
+		return match?.[1] ? decodeURIComponent(match[1]) : undefined;
+	};
+
+	return (
+		<div class="flex min-h-0 h-full flex-col bg-[var(--v2-surface-subtle)] p-2">
+			<div class="group mb-3 flex h-12 items-center gap-2 px-2">
+				<Link
+					aria-label="Solid Imager Library"
+					class="flex min-w-0 flex-1 items-center gap-2 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]"
+					onClick={props.onNavigate}
+					to="/v2/search"
+				>
+					<span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--v2-primary)] text-white">
+						<Image aria-hidden="true" size={17} />
+					</span>
+					<Show when={props.expanded}>
+						<strong class="min-w-0 flex-1 truncate font-semibold text-base text-[var(--v2-text)]">
+							Solid Imager
+						</strong>
+					</Show>
+				</Link>
+				<Button
+					aria-label={
+						props.expanded ? "サイドバーを折りたたむ" : "サイドバーを展開する"
+					}
+					class={`size-11 shrink-0 p-0 text-[var(--v2-text-muted)] md:size-8 ${
+						props.expanded
+							? "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
+							: "opacity-100"
+					}`}
+					onClick={props.onCollapseToggle}
+					size="icon"
+					variant="ghost"
+				>
+					<Show
+						fallback={<PanelLeftOpen aria-hidden="true" size={17} />}
+						when={props.expanded}
+					>
+						<PanelLeftClose aria-hidden="true" size={17} />
+					</Show>
+				</Button>
+			</div>
+
+			<nav aria-label="主要ナビゲーション" class="space-y-1">
+				<V2NavigationItem
+					expanded={props.expanded}
+					icon={Library}
+					label="Library"
+					onClick={props.onNavigate}
+					to="/v2/search"
+				/>
+				<div class={props.expanded ? "block" : "hidden"}>
+					<PendingDownloadsIndicator variant="v2" />
+				</div>
+			</nav>
+
+			<CollapsibleRoot.Root
+				class="mt-1 min-h-0"
+				onOpenChange={setSourcesOpen}
+				open={sourcesOpen()}
+			>
+				<CollapsibleTrigger
+					aria-label="Sources"
+					class="flex h-11 w-full items-center gap-2 rounded-md px-3 text-left font-medium text-sm text-[var(--v2-text-secondary)] outline-none hover:bg-[var(--v2-surface-muted)] focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:h-10"
+					onClick={() => {
+						if (!props.expanded) props.onCollapseToggle();
+					}}
+				>
+					<Database aria-hidden="true" class="shrink-0" size={18} />
+					<Show when={props.expanded}>
+						<span class="min-w-0 flex-1 truncate">Sources</span>
+						<ChevronDown
+							aria-hidden="true"
+							class={`shrink-0 transition-transform motion-reduce:transition-none ${sourcesOpen() ? "rotate-180" : ""}`}
+							size={14}
+						/>
+					</Show>
+				</CollapsibleTrigger>
+				<Show when={props.expanded}>
+					<CollapsibleContent>
+						<div class="ml-4 max-h-[min(36dvh,22rem)] overflow-y-auto overscroll-contain border-[var(--v2-border)] border-l py-1 pl-2 [scrollbar-gutter:stable]">
+							<Show
+								fallback={
+									<p class="px-2 py-3 text-xs text-[var(--v2-text-muted)]">
+										ソースはまだありません
+									</p>
+								}
+								when={props.mediaSources.length > 0}
+							>
+								<For each={props.mediaSources}>
+									{(source) => (
+										<div
+											class={`group/source flex min-h-11 items-center rounded-md pr-1 ${
+												currentSourceId() === source.id
+													? "bg-[var(--v2-surface-selected)]"
+													: "hover:bg-[var(--v2-surface-muted)]"
+											}`}
+										>
+											<Link
+												aria-current={
+													currentSourceId() === source.id ? "page" : undefined
+												}
+												class="min-w-0 flex-1 rounded-md px-2 py-1.5 outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]"
+												onClick={props.onNavigate}
+												params={{ mediaSourceId: source.id ?? "" }}
+												to="/v2/sources/$mediaSourceId"
+											>
+												<span class="block truncate font-medium text-xs text-[var(--v2-text)]">
+													{source.name}
+												</span>
+												<span class="mt-0.5 block text-[10px] text-[var(--v2-text-muted)]">
+													{sourceTypeLabel(source)} · 件数未取得
+												</span>
+											</Link>
+											<V2SourceActions
+												onDelete={() => props.onDeleteSource(source)}
+												onEdit={() => props.onEditSource(source)}
+												onSync={() => props.onSyncSource(source)}
+												sourceName={source.name}
+											/>
+										</div>
+									)}
+								</For>
+							</Show>
+						</div>
+						<Button
+							class="mt-1 h-11 w-full justify-start px-6 text-xs md:h-8"
+							onClick={props.onAddSource}
+							size="sm"
+							variant="ghost"
+						>
+							<Plus aria-hidden="true" size={14} />
+							Add source
+						</Button>
+					</CollapsibleContent>
+				</Show>
+			</CollapsibleRoot.Root>
+
+			<nav aria-label="管理ナビゲーション" class="mt-1 space-y-1">
+				<For each={V2_NAVIGATION_ITEMS.slice(1)}>
+					{(item) => (
+						<V2NavigationItem
+							expanded={props.expanded}
+							icon={item.icon}
+							label={item.label}
+							onClick={props.onNavigate}
+							to={item.to}
+						/>
+					)}
+				</For>
+			</nav>
+
+			<div class="mt-auto border-[var(--v2-border)] border-t pt-2">
+				<V2NavigationItem
+					expanded={props.expanded}
+					icon={CircleHelp}
+					label="About"
+					onClick={props.onNavigate}
+					to="/v2/about"
+				/>
+				<a
+					aria-label="API Docs"
+					class="flex h-11 items-center gap-2 rounded-md px-3 font-medium text-sm text-[var(--v2-text-muted)] outline-none hover:bg-[var(--v2-surface-muted)] focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:h-10"
+					href="/docs/swagger"
+					rel="noopener noreferrer"
+					target="_blank"
+				>
+					<FileText aria-hidden="true" class="shrink-0" size={18} />
+					<Show when={props.expanded}>
+						<span>API Docs</span>
+					</Show>
+				</a>
+			</div>
+		</div>
+	);
+}
+
+export function V2AppShell(props: V2AppShellProps) {
+	const queryClient = useQueryClient();
+	const mediaSources = createQuery(mediaSourcesQueryOptions);
+	const [sidebarExpanded, setSidebarExpanded] = createSignal(true);
+	const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
+	const sourceData = () => mediaSources.data ?? [];
+	const sourcePage = useSourcesPage({
+		actions: {
+			createMediaSource: (data: unknown) =>
+				createMediaSource(mediaSourceInfoSchema.parse(data)),
+			updateMediaSource: (id: string, data: unknown) =>
+				updateMediaSource(id, mediaSourceInfoSchema.parse(data)),
+			deleteMediaSource,
+			syncMediaSources,
+		},
+		queryClient,
+		invalidateQueryKey: mediaSourcesQueryOptions().queryKey,
+		registerEvents: registerSourceEvents,
+		getSourceIds: () =>
+			sourceData().flatMap((source) => (source.id ? [source.id] : [])),
+	});
+	const sidebarProps = (): V2SidebarProps => ({
+		expanded: sidebarExpanded(),
+		mediaSources: sourceData(),
+		onAddSource: sourcePage.handleAddSource,
+		onCollapseToggle: () => setSidebarExpanded((expanded) => !expanded),
+		onDeleteSource: sourcePage.handleDeleteSource,
+		onEditSource: sourcePage.handleEditSource,
+		onSyncSource: (source) => void sourcePage.handleSyncSource(source),
+	});
+
+	return (
+		<div
+			class={`v2-theme grid h-dvh min-h-0 overflow-hidden bg-[var(--v2-canvas)] text-[var(--v2-text)] ${
+				sidebarExpanded()
+					? "md:grid-cols-[216px_minmax(0,1fr)]"
+					: "md:grid-cols-[64px_minmax(0,1fr)]"
+			}`}
+			data-design-version="v2"
+		>
+			<a
+				class="sr-only fixed top-2 left-2 z-[80] rounded-md bg-white px-4 py-2 shadow focus:not-sr-only focus:ring-2 focus:ring-[var(--v2-focus)]"
+				href="#v2-main-content"
+			>
+				メインコンテンツへ移動
+			</a>
+			<aside
+				aria-label="アプリケーションサイドバー"
+				class="hidden min-h-0 border-[var(--v2-border)] border-r md:block"
+			>
+				<V2Sidebar {...sidebarProps()} />
+			</aside>
+
+			<div class="flex min-h-0 min-w-0 flex-col">
+				<header class="flex h-13 shrink-0 items-center gap-3 border-[var(--v2-border)] border-b bg-[var(--v2-surface-subtle)] px-3 md:hidden">
+					<Button
+						aria-label="メニューを開く"
+						class="size-10 p-0"
+						onClick={() => setMobileMenuOpen(true)}
+						size="icon"
+						variant="ghost"
+					>
+						<Menu aria-hidden="true" size={19} />
+					</Button>
+					<strong class="min-w-0 flex-1 truncate font-semibold">
+						Solid Imager
+					</strong>
+					<PendingDownloadsIndicator compact variant="v2" />
+				</header>
+				{props.statusIndicator}
+				<main
+					class="min-h-0 min-w-0 flex-1 overflow-hidden"
+					id="v2-main-content"
+					tabIndex={-1}
+				>
+					{props.children}
+				</main>
+			</div>
+
+			<Dialog onOpenChange={setMobileMenuOpen} open={mobileMenuOpen()}>
+				<DialogContent class="v2-theme p-0" placement="left">
+					<DialogHeader class="sr-only">
+						<DialogTitle>ナビゲーション</DialogTitle>
+						<DialogDescription>
+							画面とメディアソースを選択します。
+						</DialogDescription>
+					</DialogHeader>
+					<V2Sidebar
+						{...sidebarProps()}
+						expanded
+						onNavigate={() => setMobileMenuOpen(false)}
+					/>
+				</DialogContent>
+			</Dialog>
+
+			<SourceFormModal
+				editingSource={
+					sourcePage.editingSource() as MediaSourceInfo | SafeMediaSource | null
+				}
+				isOpen={sourcePage.showFormModal()}
+				onClose={() => sourcePage.setShowFormModal(false)}
+				onSubmit={sourcePage.handleFormSubmit}
+				variant="v2"
+			/>
+			<SourceDeleteModal
+				isOpen={sourcePage.showDeleteModal()}
+				onClose={() => sourcePage.setShowDeleteModal(false)}
+				onConfirm={sourcePage.handleDeleteConfirm}
+				sourceToDelete={sourcePage.deletingSource()}
+			/>
+		</div>
+	);
+}
diff --git a/apps/server/src/router.tsx b/apps/server/src/router.tsx
index af18fb1b..aa5e0a8a 100644
--- a/apps/server/src/router.tsx
+++ b/apps/server/src/router.tsx
@@ -59,7 +59,10 @@ export function getRouter() {
 			routeTree,
 			context: { queryClient },
 			scrollRestoration: true,
-			defaultPreload: "intent",
+			// Loader-heavy routes prefetch several queries in parallel. Disabling
+			// intent preloading avoids a stale-match race when navigation starts
+			// before an aborted preload has finished.
+			defaultPreload: false,
 			defaultPreloadStaleTime: 0,
 			// A route with `ssr: false` renders its pending component on the server,
 			// but its route component immediately on the client. Keep the server
diff --git a/apps/server/src/routes/__root.tsx b/apps/server/src/routes/__root.tsx
index 0b7a86c4..3ab5579f 100644
--- a/apps/server/src/routes/__root.tsx
+++ b/apps/server/src/routes/__root.tsx
@@ -41,6 +41,8 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 function RootComponent() {
 	const [isHydrated, setIsHydrated] = createSignal(false);
 	const location = useLocation();
+	const isV2Route = () =>
+		location().pathname === "/v2" || location().pathname.startsWith("/v2/");
 	onMount(() => {
 		setIsHydrated(true);
 	});
@@ -51,13 +53,14 @@ function RootComponent() {
 				<HydrationScript />
 				<HeadContent />
 			</head>
-			<body>
+			<body classList={{ "v2-theme": isV2Route() }}>
 				<Toaster />
 				<Show
 					fallback={<Outlet />}
 					when={
 						location().pathname !== "/design-lab" &&
-						!location().pathname.startsWith("/design-lab/")
+						!location().pathname.startsWith("/design-lab/") &&
+						!isV2Route()
 					}
 				>
 					<AppShell
diff --git a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
index 563877fc..f71d2ec6 100644
--- a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
+++ b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
@@ -4,11 +4,12 @@ import { sourceMediaQueryKeys } from "@solid-imager/ui/query-options";
 import { RouteDataPendingScreen } from "@solid-imager/ui/router-status";
 import { SourceMediaPage as SourceMediaPageComponent } from "@solid-imager/ui/source-media-page";
 import { createQuery, useQueryClient } from "@tanstack/solid-query";
-import { useParams } from "@tanstack/solid-router";
-import { createSignal, onMount, Show } from "solid-js";
+import { useLocation, useNavigate, useParams } from "@tanstack/solid-router";
+import { type Accessor, createSignal, onMount, Show } from "solid-js";
 import { BulkActionDialog } from "~/components/media/bulk-action-dialog";
 import { MediaGridItem } from "~/components/media/media-grid-item";
 import { MoveCopyMediaDialog } from "~/components/media/move-copy-media-dialog";
+import { ThumbnailImage } from "~/components/media/thumbnail-image";
 import { UploadMediaModal } from "~/components/upload-media-modal";
 import { createServerTransport } from "~/hooks/use-media-source-events";
 import { PresetClient as rawPresetClient } from "~/infrastructure/api/clients/preset-client";
@@ -43,9 +44,13 @@ import {
 
 const PresetClient = createPresetClient(rawPresetClient);
 
-export function SourceMediaPage() {
-	const params = useParams({ from: "/sources/$mediaSourceId/" });
-	const mediaSourceId = () => params().mediaSourceId;
+export function SourceMediaPage(
+	props: { mediaSourceId?: Accessor<string>; variant?: "default" | "v2" } = {},
+) {
+	const params = useParams({ strict: false });
+	const location = useLocation();
+	const navigate = useNavigate();
+	const mediaSourceId = () => props.mediaSourceId?.() ?? params().mediaSourceId;
 	const queryClient = useQueryClient();
 	const [isMounted, setIsMounted] = createSignal(false);
 	const mediaSources = createQuery(mediaSourcesQueryOptions);
@@ -97,10 +102,11 @@ export function SourceMediaPage() {
 					title="メディア一覧"
 				/>
 			}
-			when={isMounted()}
+			when={props.variant === "v2" || isMounted()}
 		>
 			<SourceMediaPageComponent
 				enableVirtualization
+				variant={props.variant}
 				mediaSourceId={mediaSourceId}
 				mediaSourceName={mediaSourceName}
 				transport={transport}
@@ -138,12 +144,34 @@ export function SourceMediaPage() {
 				renderItem={(media, options) => (
 					<MediaGridItem
 						media={media}
+						routeVersion={props.variant === "v2" ? "v2" : "default"}
 						onContextMenu={options.onContextMenu}
 						isBulkSelectMode={options.isBulkSelectMode}
-						isSelected={options.isSelected}
+						isSelected={options.isSelected || options.isPreviewSelected}
+						onPreviewSelect={options.onPreviewSelect}
 						onToggleSelect={() => handleToggleSelect(media.id)}
 					/>
 				)}
+				onOpenMediaDetail={(media) => {
+					sessionStorage.setItem("v2:media-return", location().href);
+					void navigate({
+						params: {
+							mediaId: media.id,
+							mediaSourceId: media.mediaSourceId,
+						},
+						to: "/v2/sources/$mediaSourceId/$mediaId",
+					});
+				}}
+				renderMediaPreview={(media) => (
+					<ThumbnailImage
+						alt={media.fileName}
+						class="h-full w-full object-contain"
+						height={media.height}
+						loading="eager"
+						media={media}
+						width={media.width}
+					/>
+				)}
 				moveCopyDialogComponent={MoveCopyMediaDialog}
 				uploadModalComponent={UploadMediaModal}
 				showOpenInNewTab
diff --git a/apps/server/src/routes/v2/$.tsx b/apps/server/src/routes/v2/$.tsx
new file mode 100644
index 00000000..c890f5aa
--- /dev/null
+++ b/apps/server/src/routes/v2/$.tsx
@@ -0,0 +1,34 @@
+import { Button } from "@solid-imager/ui/button";
+import { Search } from "@solid-imager/ui/v2/icons";
+import { createFileRoute, Link } from "@tanstack/solid-router";
+
+export const Route = createFileRoute("/v2/$")({
+	component: V2NotFoundRoute,
+});
+
+function V2NotFoundRoute() {
+	return (
+		<section
+			aria-labelledby="v2-not-found-title"
+			class="flex h-full min-h-0 flex-col items-center justify-center gap-4 bg-[var(--v2-canvas)] p-6 text-center"
+		>
+			<span class="flex size-12 items-center justify-center rounded-full bg-[var(--v2-surface-muted)] text-[var(--v2-text-muted)]">
+				<Search aria-hidden="true" size={22} />
+			</span>
+			<div>
+				<h1
+					class="font-semibold text-xl text-[var(--v2-text)]"
+					id="v2-not-found-title"
+				>
+					ページが見つかりません
+				</h1>
+				<p class="mt-2 text-sm text-[var(--v2-text-secondary)]">
+					URLを確認するか、ライブラリへ戻ってください。
+				</p>
+			</div>
+			<Button as={Link} to="/v2/search">
+				ライブラリへ戻る
+			</Button>
+		</section>
+	);
+}
diff --git a/apps/server/src/routes/v2/about.tsx b/apps/server/src/routes/v2/about.tsx
new file mode 100644
index 00000000..2a0c51c1
--- /dev/null
+++ b/apps/server/src/routes/v2/about.tsx
@@ -0,0 +1,82 @@
+import { Badge } from "@solid-imager/ui/badge";
+import { Button } from "@solid-imager/ui/button";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@solid-imager/ui/card";
+import { createFileRoute, Link } from "@tanstack/solid-router";
+
+export const Route = createFileRoute("/v2/about")({
+	component: V2AboutRoute,
+});
+
+function V2AboutRoute() {
+	return (
+		<section class="h-full min-h-0 overflow-y-auto overscroll-contain bg-[var(--v2-canvas)] [scrollbar-gutter:stable]">
+			<header class="border-[var(--v2-border)] border-b bg-[var(--v2-surface-subtle)] px-4 py-4 sm:px-6">
+				<div class="flex flex-wrap items-start justify-between gap-3">
+					<div>
+						<h1 class="font-semibold text-xl text-[var(--v2-text)]">
+							About Solid Imager
+						</h1>
+						<p class="mt-1 text-sm text-[var(--v2-text-secondary)]">
+							メディアを整理・検索し、関連情報とバックグラウンド処理を一か所で管理するワークベンチです。
+						</p>
+					</div>
+					<Badge
+						class="border-[var(--v2-border-strong)] bg-[var(--v2-surface-muted)] text-[var(--v2-text-secondary)]"
+						variant="outline"
+					>
+						V2 preview
+					</Badge>
+				</div>
+			</header>
+
+			<div class="grid gap-4 p-4 sm:p-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.6fr)]">
+				<Card class="border-[var(--v2-border)] bg-[var(--v2-surface)] shadow-none">
+					<CardHeader class="p-5 pb-3">
+						<CardTitle class="text-base">Media-first workspace</CardTitle>
+					</CardHeader>
+					<CardContent class="px-5 pb-5 text-sm leading-6 text-[var(--v2-text-secondary)]">
+						<p>
+							Solid
+							Imagerは、複数のメディアソース、検索条件、タグ・作品・キャラクターなどの関連情報をまとめて扱います。
+							AI補助処理やインポートは、閲覧作業を妨げないバックグラウンドジョブとして実行されます。
+						</p>
+						<p class="mt-3">
+							このV2画面は新しい情報設計への移行検証中です。既存APIで提供できない操作は、実装されるまで明示的に無効化します。
+						</p>
+					</CardContent>
+				</Card>
+
+				<Card class="border-[var(--v2-border)] bg-[var(--v2-surface)] shadow-none">
+					<CardHeader class="p-5 pb-3">
+						<CardTitle class="text-base">Documentation</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-2 px-5 pb-5">
+						<Button
+							as={Link}
+							class="w-full"
+							to="/docs/swagger"
+							variant="outline"
+						>
+							API documentation
+						</Button>
+						<Button
+							as="a"
+							class="w-full"
+							href="https://github.com/hmjn023/solid-imager"
+							rel="noopener noreferrer"
+							target="_blank"
+							variant="outline"
+						>
+							Source repository
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		</section>
+	);
+}
diff --git a/apps/server/src/routes/v2/config.tsx b/apps/server/src/routes/v2/config.tsx
new file mode 100644
index 00000000..7bc316e5
--- /dev/null
+++ b/apps/server/src/routes/v2/config.tsx
@@ -0,0 +1,33 @@
+import { configQueryKeys } from "@solid-imager/ui/query-options";
+import { toQueryUiState } from "@solid-imager/ui/query-state";
+import { ConfigStateScreen } from "@solid-imager/ui/screens/config-state-screen";
+import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import { createFileRoute } from "@tanstack/solid-router";
+import { orpc } from "~/infrastructure/api-clients/orpc-client";
+import { configQueryOptions } from "~/infrastructure/api-clients/queries";
+
+export const Route = createFileRoute("/v2/config")({
+	component: V2ConfigPage,
+});
+
+function V2ConfigPage() {
+	const configQuery = createQuery(configQueryOptions);
+	const queryClient = useQueryClient();
+
+	return (
+		<ConfigStateScreen
+			data={configQuery.data}
+			onRetry={async () => {
+				await configQuery.refetch();
+			}}
+			onSubmit={async (value) => {
+				await orpc.config.update(value);
+				await queryClient.invalidateQueries({
+					queryKey: configQueryKeys.all(),
+				});
+			}}
+			state={toQueryUiState(configQuery)}
+			variant="v2"
+		/>
+	);
+}
diff --git a/apps/server/src/routes/v2/index.tsx b/apps/server/src/routes/v2/index.tsx
new file mode 100644
index 00000000..ee487e24
--- /dev/null
+++ b/apps/server/src/routes/v2/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute, Navigate } from "@tanstack/solid-router";
+
+export const Route = createFileRoute("/v2/")({
+	component: V2Index,
+});
+
+function V2Index() {
+	return <Navigate replace to="/v2/search" />;
+}
diff --git a/apps/server/src/routes/v2/jobs.tsx b/apps/server/src/routes/v2/jobs.tsx
new file mode 100644
index 00000000..d6403115
--- /dev/null
+++ b/apps/server/src/routes/v2/jobs.tsx
@@ -0,0 +1,10 @@
+import { V2JobsScreen } from "@solid-imager/ui/screens/v2-jobs-screen";
+import { createFileRoute } from "@tanstack/solid-router";
+
+export const Route = createFileRoute("/v2/jobs")({
+	component: V2JobsRoute,
+});
+
+function V2JobsRoute() {
+	return <V2JobsScreen />;
+}
diff --git a/apps/server/src/routes/v2/manager.tsx b/apps/server/src/routes/v2/manager.tsx
new file mode 100644
index 00000000..978a5a84
--- /dev/null
+++ b/apps/server/src/routes/v2/manager.tsx
@@ -0,0 +1,160 @@
+import { useManagerPage } from "@solid-imager/ui/hooks/use-manager-page";
+import { ManagerScreen } from "@solid-imager/ui/screens/manager-screen";
+import type { V2ManagerTransferFormat } from "@solid-imager/ui/screens/v2-manager-screen";
+import { toast } from "@solid-imager/ui/toast";
+import { useQueryClient } from "@tanstack/solid-query";
+import { createFileRoute } from "@tanstack/solid-router";
+import { useBatchJobEvents } from "~/hooks/use-batch-job-events";
+import {
+	scanBatchCcipTargets,
+	scanBatchTaggingTargets,
+	startBatchCcipExtraction,
+	startBatchTagging,
+} from "~/infrastructure/api-clients/ai-api";
+import {
+	createCharacter,
+	deleteCharacter,
+	updateCharacter,
+} from "~/infrastructure/api-clients/characters-api";
+import {
+	createIp,
+	deleteIp,
+	updateIp,
+} from "~/infrastructure/api-clients/ips-api";
+import {
+	bulkDeleteMedia,
+	findDuplicateMedia,
+} from "~/infrastructure/api-clients/media-api";
+import {
+	createProject,
+	deleteProject,
+	updateProject,
+} from "~/infrastructure/api-clients/projects-api";
+import {
+	allCharactersQueryOptions,
+	allIpsQueryOptions,
+	allProjectsQueryOptions,
+	mediaSourcesQueryOptions,
+} from "~/infrastructure/api-clients/queries";
+import {
+	fetchSourceDump,
+	importSourceLanceDB,
+	importSourceNdjson,
+	importSourceZip,
+} from "~/infrastructure/api-clients/sources-api";
+
+const managerQueryOptions = {
+	projects: allProjectsQueryOptions,
+	ips: allIpsQueryOptions,
+	characters: allCharactersQueryOptions,
+	sources: mediaSourcesQueryOptions,
+};
+
+const managerActions = {
+	createProject,
+	updateProject,
+	deleteProject,
+	createIp,
+	updateIp,
+	deleteIp,
+	createCharacter,
+	updateCharacter,
+	deleteCharacter,
+	scanBatchTaggingTargets,
+	startBatchTagging,
+	scanBatchCcipTargets,
+	startBatchCcipExtraction,
+	findDuplicateMedia,
+	bulkDeleteMedia,
+};
+
+function downloadBlob(blob: Blob, fileName: string): void {
+	const url = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = fileName;
+	document.body.append(anchor);
+	anchor.click();
+	anchor.remove();
+	URL.revokeObjectURL(url);
+}
+
+function dumpFileName(
+	sourceId: string,
+	format: V2ManagerTransferFormat,
+): string {
+	switch (format) {
+		case "ndjson":
+			return `source-${sourceId}-dump.ndjson`;
+		case "tar":
+			return `source-${sourceId}-dump.tar`;
+		case "lancedb":
+			return `source-${sourceId}-dump-lancedb.tar`;
+	}
+}
+
+const transferActions = {
+	exportSource: async (input: {
+		format: V2ManagerTransferFormat;
+		includeImages: boolean;
+		sourceId: string;
+	}) => {
+		try {
+			const mode =
+				input.format === "ndjson"
+					? "json"
+					: input.format === "tar"
+						? "zip"
+						: "lancedb";
+			const blob = await fetchSourceDump(input.sourceId, mode, {
+				includeImages: input.format === "lancedb" && input.includeImages,
+			});
+			downloadBlob(blob, dumpFileName(input.sourceId, input.format));
+			toast.success("Source dump downloaded");
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : "Export failed");
+			throw error;
+		}
+	},
+	importSource: async (input: {
+		file: File;
+		format: V2ManagerTransferFormat;
+		sourceId: string;
+	}) => {
+		try {
+			const result =
+				input.format === "ndjson"
+					? await importSourceNdjson(input.sourceId, input.file)
+					: input.format === "tar"
+						? await importSourceZip(input.sourceId, input.file)
+						: await importSourceLanceDB(input.sourceId, input.file);
+			toast.success(`Restore complete: ${result.importedCount} items imported`);
+			return { importedCount: result.importedCount };
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : "Restore failed");
+			throw error;
+		}
+	},
+};
+
+export const Route = createFileRoute("/v2/manager")({
+	component: V2ManagerRoute,
+});
+
+function V2ManagerRoute() {
+	const queryClient = useQueryClient();
+	const manager = useManagerPage({
+		queryClient,
+		queryOptions: managerQueryOptions,
+		actions: managerActions,
+		useBatchJobEvents,
+	});
+
+	return (
+		<ManagerScreen
+			manager={manager}
+			transferActions={transferActions}
+			variant="v2"
+		/>
+	);
+}
diff --git a/apps/server/src/routes/v2/route.tsx b/apps/server/src/routes/v2/route.tsx
new file mode 100644
index 00000000..c87bb3c1
--- /dev/null
+++ b/apps/server/src/routes/v2/route.tsx
@@ -0,0 +1,24 @@
+import { RouteTransitionIndicator } from "@solid-imager/ui/router-status";
+import { createFileRoute, Outlet } from "@tanstack/solid-router";
+import { createSignal, onMount, Show } from "solid-js";
+import { ApiActivityIndicator } from "~/components/api-activity-indicator";
+import { V2AppShell } from "~/components/v2/v2-app-shell";
+
+export const Route = createFileRoute("/v2")({
+	pendingComponent: () => null,
+	component: V2Layout,
+});
+
+function V2Layout() {
+	const [isMounted, setIsMounted] = createSignal(false);
+	onMount(() => setIsMounted(true));
+
+	return (
+		<Show when={isMounted()}>
+			<V2AppShell statusIndicator={<RouteTransitionIndicator />}>
+				<ApiActivityIndicator />
+				<Outlet />
+			</V2AppShell>
+		</Show>
+	);
+}
diff --git a/apps/server/src/routes/v2/search.tsx b/apps/server/src/routes/v2/search.tsx
new file mode 100644
index 00000000..bf29ca88
--- /dev/null
+++ b/apps/server/src/routes/v2/search.tsx
@@ -0,0 +1,119 @@
+import { useCurrentSearchPersistence } from "@solid-imager/ui/hooks/use-current-search-persistence";
+import { useSearchPage } from "@solid-imager/ui/hooks/use-search-page";
+import { createPresetClient } from "@solid-imager/ui/preset-client";
+import { SearchScreen } from "@solid-imager/ui/screens/search-screen";
+import {
+	createFileRoute,
+	useLocation,
+	useNavigate,
+} from "@tanstack/solid-router";
+import { MediaGridItem } from "~/components/media/media-grid-item";
+import { ThumbnailImage } from "~/components/media/thumbnail-image";
+import { useMediaSourceEvents } from "~/hooks/use-media-source-events";
+import { PresetClient as rawPresetClient } from "~/infrastructure/api/clients/preset-client";
+import {
+	allAuthorsQueryOptions,
+	allCharactersQueryOptions,
+	allIpsQueryOptions,
+	allProjectsQueryOptions,
+	mediaSourcesQueryOptions,
+	tagsQueryOptions,
+} from "~/infrastructure/api-clients/queries";
+import {
+	searchMedia,
+	searchSimilar,
+} from "~/infrastructure/api-clients/search-api";
+import {
+	getSearchCondition,
+	searchState,
+	setSearchState,
+} from "~/presentation/store/search-store";
+
+const SEARCH_RESULTS_REFRESH_DEBOUNCE_MS = 300;
+const PresetClient = createPresetClient(rawPresetClient);
+
+export const Route = createFileRoute("/v2/search")({
+	component: V2SearchRoute,
+});
+
+function V2SearchRoute() {
+	const location = useLocation();
+	const navigate = useNavigate();
+	const isSearchStateRestored = useCurrentSearchPersistence("all");
+	const page = useSearchPage({
+		searchMedia,
+		searchSimilar,
+		queries: {
+			tags: tagsQueryOptions,
+			sources: mediaSourcesQueryOptions,
+			projects: allProjectsQueryOptions,
+			ips: allIpsQueryOptions,
+			characters: allCharactersQueryOptions,
+			authors: allAuthorsQueryOptions,
+		},
+		selectedSource: () => searchState.selectedSource,
+		getSearchCondition,
+		sortBy: () => searchState.sortBy,
+		sortOrder: () => searchState.sortOrder,
+		limit: () => searchState.limit,
+		scrollY: () => searchState.scrollY,
+		setScrollY: (value) => setSearchState("scrollY", value),
+		setOffset: (value) => setSearchState("offset", value),
+		mode: () => searchState.mode,
+		similarityAnchorMediaId: () => searchState.similarityAnchorMediaId,
+		similarityTopK: () => searchState.similarityTopK,
+		refreshDebounceMs: SEARCH_RESULTS_REFRESH_DEBOUNCE_MS,
+		isSearchStateRestored,
+		scrollContainerSelector: "[data-media-scroll]",
+	});
+
+	useMediaSourceEvents(() => searchState.selectedSource || "*", {
+		onMediaAdded: page.refreshSearchResults,
+		onMediaDeleted: page.refreshSearchResults,
+		onMediaChanged: page.refreshSearchResults,
+		onMediaCopied: page.refreshSearchResults,
+		onMediaMoved: page.refreshSearchResults,
+		onAllJobsCompleted: page.refreshSearchResults,
+	});
+
+	return (
+		<SearchScreen
+			enableVirtualization
+			filterData={page.filterData}
+			onSelectSource={(id) => setSearchState("selectedSource", id)}
+			page={page}
+			presetClient={PresetClient}
+			renderMediaItem={(media, options) => (
+				<MediaGridItem
+					isSelected={options?.isPreviewSelected}
+					media={media}
+					onPreviewSelect={options?.onPreviewSelect}
+					routeVersion="v2"
+				/>
+			)}
+			onOpenMediaDetail={(media) => {
+				sessionStorage.setItem("v2:media-return", location().href);
+				void navigate({
+					params: {
+						mediaId: media.id,
+						mediaSourceId: media.mediaSourceId,
+					},
+					to: "/v2/sources/$mediaSourceId/$mediaId",
+				});
+			}}
+			renderMediaPreview={(media) => (
+				<ThumbnailImage
+					alt={media.fileName}
+					class="h-full w-full object-contain"
+					height={media.height}
+					loading="eager"
+					media={media}
+					width={media.width}
+				/>
+			)}
+			selectedSource={searchState.selectedSource}
+			sources={page.sources()}
+			variant="v2"
+		/>
+	);
+}
diff --git a/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx b/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx
new file mode 100644
index 00000000..c23a3419
--- /dev/null
+++ b/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx
@@ -0,0 +1,159 @@
+import type { MediaDetails } from "@solid-imager/core/domain/media/schemas";
+import { Button } from "@solid-imager/ui/button";
+import { MediaDetailScreen } from "@solid-imager/ui/screens/media-detail-screen";
+import {
+	ArrowLeft,
+	ChevronLeft,
+	ChevronRight,
+} from "@solid-imager/ui/v2/icons";
+import { createQuery } from "@tanstack/solid-query";
+import { createFileRoute, useNavigate } from "@tanstack/solid-router";
+import type { Accessor } from "solid-js";
+import { MediaActions, MediaSidebar } from "~/components/media/media-sidebar";
+import { MediaViewer } from "~/components/media/media-viewer";
+import { createServerTransport } from "~/hooks/use-media-source-events";
+import {
+	mediaDetailsQueryOptions,
+	mediaSourcesQueryOptions,
+} from "~/infrastructure/api-clients/queries";
+
+interface MediaRouteParams {
+	mediaId: string;
+	mediaSourceId: string;
+}
+
+export const Route = createFileRoute("/v2/sources/$mediaSourceId/$mediaId/")({
+	ssr: false,
+	remountDeps: ({ params }: { params: MediaRouteParams }) => [
+		params.mediaSourceId,
+		params.mediaId,
+	],
+	pendingComponent: () => null,
+	component: MediaRoute,
+});
+
+function MediaRoute() {
+	const params = Route.useParams();
+	const mediaSourceId = () => params().mediaSourceId;
+	const mediaId = () => params().mediaId;
+
+	return <MediaContent mediaId={mediaId} mediaSourceId={mediaSourceId} />;
+}
+
+function MediaDetailHeader(props: {
+	media: MediaDetails;
+	onUpdate: () => void;
+	sourceName: string;
+}) {
+	const navigate = useNavigate();
+	const returnToCollection = () => {
+		const returnPath = sessionStorage.getItem("v2:media-return");
+		if (
+			typeof returnPath === "string" &&
+			(returnPath === "/v2/search" ||
+				returnPath.startsWith("/v2/search?") ||
+				returnPath.startsWith("/v2/sources/"))
+		) {
+			sessionStorage.removeItem("v2:media-return");
+			void navigate({ to: returnPath });
+			return;
+		}
+		void navigate({
+			to: "/v2/sources/$mediaSourceId",
+			params: { mediaSourceId: props.media.mediaSourceId },
+		});
+	};
+
+	return (
+		<header class="z-10 shrink-0 border-[var(--v2-border)] border-b bg-[var(--v2-surface-subtle)] px-3 py-2 sm:px-4">
+			<div class="flex min-w-0 flex-wrap items-center gap-2">
+				<Button
+					aria-label="一覧に戻る"
+					class="size-10 shrink-0 p-0 md:size-9"
+					onClick={returnToCollection}
+					size="icon"
+					variant="ghost"
+				>
+					<ArrowLeft aria-hidden="true" size={17} />
+				</Button>
+
+				<div class="min-w-0 flex-1">
+					<h1 class="truncate font-semibold text-sm text-[var(--v2-text)]">
+						{props.media.fileName}
+					</h1>
+					<p class="truncate text-[11px] text-[var(--v2-text-muted)]">
+						{props.sourceName}
+					</p>
+				</div>
+
+				<div
+					class="flex shrink-0 items-center rounded-md border border-[var(--v2-border)] bg-white p-0.5"
+					title="一覧コンテキストがないため前後移動は利用できません"
+				>
+					<Button
+						aria-label="前のメディア（利用不可）"
+						class="size-9 p-0 md:size-8"
+						disabled
+						size="icon"
+						variant="ghost"
+					>
+						<ChevronLeft aria-hidden="true" size={16} />
+					</Button>
+					<Button
+						aria-label="次のメディア（利用不可）"
+						class="size-9 p-0 md:size-8"
+						disabled
+						size="icon"
+						variant="ghost"
+					>
+						<ChevronRight aria-hidden="true" size={16} />
+					</Button>
+				</div>
+
+				<div class="order-last mt-1 w-full md:order-none md:mt-0 md:w-auto">
+					<MediaActions
+						media={props.media}
+						onUpdate={props.onUpdate}
+						variant="v2"
+					/>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+function MediaContent(props: {
+	mediaId: Accessor<string>;
+	mediaSourceId: Accessor<string>;
+}) {
+	const mediaSources = createQuery(mediaSourcesQueryOptions);
+	const sourceName = () =>
+		mediaSources.data?.find((source) => source.id === props.mediaSourceId())
+			?.name ?? "Media source";
+
+	return (
+		<MediaDetailScreen
+			mediaDetailsQueryOptions={mediaDetailsQueryOptions}
+			mediaId={props.mediaId}
+			mediaSourceId={props.mediaSourceId}
+			renderHeader={(media, _isUpdating, onUpdate) => (
+				<MediaDetailHeader
+					media={media}
+					onUpdate={() => void onUpdate()}
+					sourceName={sourceName()}
+				/>
+			)}
+			renderMediaSidebar={(media, isUpdating, onUpdate) => (
+				<MediaSidebar
+					isUpdating={isUpdating}
+					media={media}
+					onUpdate={onUpdate}
+					variant="v2"
+				/>
+			)}
+			renderMediaViewer={(media) => <MediaViewer media={media} variant="v2" />}
+			transport={createServerTransport(props.mediaSourceId)}
+			variant="v2"
+		/>
+	);
+}
diff --git a/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx b/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
new file mode 100644
index 00000000..9dd068ac
--- /dev/null
+++ b/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/solid-router";
+import { SourceMediaPage } from "~/routes/sources/$mediaSourceId/components/source-media-page";
+
+export const Route = createFileRoute("/v2/sources/$mediaSourceId/")({
+	remountDeps: ({ params }: { params: { mediaSourceId: string } }) => [
+		params.mediaSourceId,
+	],
+	component: V2SourceMediaRoute,
+});
+
+function V2SourceMediaRoute() {
+	const params = Route.useParams();
+	return (
+		<SourceMediaPage
+			mediaSourceId={() => params().mediaSourceId}
+			variant="v2"
+		/>
+	);
+}
diff --git a/apps/server/src/tests/e2e/v2-routes.responsive.spec.ts b/apps/server/src/tests/e2e/v2-routes.responsive.spec.ts
new file mode 100644
index 00000000..b8bf58f6
--- /dev/null
+++ b/apps/server/src/tests/e2e/v2-routes.responsive.spec.ts
@@ -0,0 +1,183 @@
+import type { Page } from "@playwright/test";
+import {
+	E2E_PRIMARY_FILE_NAME,
+	E2E_PRIMARY_MEDIA_ID,
+	E2E_SIMILAR_FILE_NAME,
+	E2E_SIMILAR_MEDIA_ID,
+	E2E_SOURCE_ID,
+	E2E_SOURCE_NAME,
+} from "./support/fixture";
+import {
+	expect,
+	expectRouteHealthy,
+	test,
+	waitForAppHydration,
+} from "./support/test";
+
+const v2SourcePath = `/v2/sources/${E2E_SOURCE_ID}`;
+const v2MediaPath = (mediaId: string) => `${v2SourcePath}/${mediaId}`;
+
+async function expectNoHorizontalOverflow(page: Page): Promise<void> {
+	const overflow = await page.evaluate(
+		() =>
+			document.documentElement.scrollWidth -
+			document.documentElement.clientWidth,
+	);
+	expect(overflow).toBeLessThanOrEqual(1);
+}
+
+test("V2 routes survive direct navigation and reload", async ({ page }) => {
+	const routes = [
+		["/v2/search", "すべてのメディア"],
+		[v2SourcePath, E2E_SOURCE_NAME],
+		[v2MediaPath(E2E_PRIMARY_MEDIA_ID), E2E_PRIMARY_FILE_NAME],
+		["/v2/manager", "Manager"],
+		["/v2/jobs", "Jobs"],
+		["/v2/config", "Settings"],
+		["/v2/about", "About Solid Imager"],
+	] as const;
+
+	for (const [path, visibleText] of routes) {
+		await page.goto(path);
+		await waitForAppHydration(page);
+		await expect(
+			page.getByText(visibleText, { exact: true }).last(),
+		).toBeVisible();
+		await page.reload();
+		await waitForAppHydration(page);
+		await expect(
+			page.getByText(visibleText, { exact: true }).last(),
+		).toBeVisible();
+		await expectRouteHealthy(page);
+		await expectNoHorizontalOverflow(page);
+	}
+});
+
+test("V2 detail changes after returning to a collection", async ({ page }) => {
+	await page.goto(v2SourcePath);
+	await waitForAppHydration(page);
+
+	await page.locator(`[data-media-id="${E2E_PRIMARY_MEDIA_ID}"]`).click();
+	await expect(page).toHaveURL(v2MediaPath(E2E_PRIMARY_MEDIA_ID));
+	await expect(
+		page.getByRole("img", { name: E2E_PRIMARY_FILE_NAME, exact: true }),
+	).toBeVisible();
+
+	await page.getByRole("button", { name: "一覧に戻る", exact: true }).click();
+	await expect(page).toHaveURL(v2SourcePath);
+	await page.locator(`[data-media-id="${E2E_SIMILAR_MEDIA_ID}"]`).click();
+	await expect(page).toHaveURL(v2MediaPath(E2E_SIMILAR_MEDIA_ID));
+	await expect(
+		page.getByRole("img", { name: E2E_SIMILAR_FILE_NAME, exact: true }),
+	).toBeVisible();
+});
+
+test("V2 wide collection uses selection preview before detail navigation", async ({
+	page,
+}) => {
+	await page.setViewportSize({ width: 1600, height: 900 });
+	await page.goto(v2SourcePath);
+	await waitForAppHydration(page);
+
+	await page.locator(`[data-media-id="${E2E_PRIMARY_MEDIA_ID}"]`).click();
+	await expect(page).toHaveURL(v2SourcePath);
+	const inspector = page.getByRole("complementary", {
+		name: "選択中のメディア",
+	});
+	await expect(inspector).toContainText(E2E_PRIMARY_FILE_NAME);
+	await page.locator(`[data-media-id="${E2E_SIMILAR_MEDIA_ID}"]`).click();
+	await expect(page).toHaveURL(v2SourcePath);
+	await expect(inspector).toContainText(E2E_SIMILAR_FILE_NAME);
+	await expect(
+		inspector.getByRole("img", { name: E2E_SIMILAR_FILE_NAME, exact: true }),
+	).toBeVisible();
+	await inspector.getByRole("button", { name: "詳細を開く" }).click();
+	await expect(page).toHaveURL(v2MediaPath(E2E_SIMILAR_MEDIA_ID));
+});
+
+test("V2 search filter opens without remounting media results", async ({
+	page,
+}) => {
+	await page.goto("/v2/search");
+	await waitForAppHydration(page);
+
+	const firstMedia = page.locator("[data-media-id]").first();
+	await expect(firstMedia).toBeVisible();
+	await page.evaluate(() => {
+		const state = window as Window & {
+			__v2FirstMedia?: Element;
+			__v2FilterDialog?: Element;
+			__v2SawLoadingFallback?: boolean;
+			__v2LoadingObserver?: MutationObserver;
+		};
+		state.__v2FirstMedia =
+			document.querySelector("[data-media-id]") ?? undefined;
+		state.__v2SawLoadingFallback = false;
+		state.__v2LoadingObserver = new MutationObserver(() => {
+			if (
+				document.body.textContent?.includes("画面を読み込んでいます") ||
+				document.body.textContent?.includes("検索結果を読み込んでいます")
+			) {
+				state.__v2SawLoadingFallback = true;
+			}
+		});
+		state.__v2LoadingObserver.observe(document.body, {
+			childList: true,
+			subtree: true,
+		});
+	});
+
+	const filterButton = page.getByRole("button", {
+		name: /検索フィルター、\d+件の条件/,
+	});
+	await filterButton.click();
+	const filterDialog = page.getByRole("dialog", { name: "検索フィルター" });
+	await expect(filterDialog).toBeVisible();
+	await filterDialog.evaluate((element) => {
+		(
+			window as Window & {
+				__v2FilterDialog?: Element;
+			}
+		).__v2FilterDialog = element;
+	});
+
+	const comboboxNames = await filterDialog
+		.getByRole("combobox")
+		.evaluateAll((elements) =>
+			elements.map((element) => {
+				const labelledBy = element.getAttribute("aria-labelledby");
+				return (
+					element.getAttribute("aria-label") ??
+					(labelledBy
+						? document.getElementById(labelledBy)?.textContent?.trim()
+						: "")
+				);
+			}),
+		);
+	expect(comboboxNames.length).toBeGreaterThan(0);
+	expect(comboboxNames.every(Boolean)).toBe(true);
+
+	await filterDialog.getByRole("button", { name: "閉じる" }).click();
+	await filterButton.click();
+	await expect(filterDialog).toBeVisible();
+	const renderState = await page.evaluate(() => {
+		const state = window as Window & {
+			__v2FirstMedia?: Element;
+			__v2FilterDialog?: Element;
+			__v2SawLoadingFallback?: boolean;
+			__v2LoadingObserver?: MutationObserver;
+		};
+		state.__v2LoadingObserver?.disconnect();
+		return {
+			filterNodeWasPreserved:
+				state.__v2FilterDialog ===
+				document.querySelector('[role="dialog"][aria-label="検索フィルター"]'),
+			mediaNodeWasPreserved:
+				state.__v2FirstMedia === document.querySelector("[data-media-id]"),
+			sawLoadingFallback: state.__v2SawLoadingFallback,
+		};
+	});
+	expect(renderState.filterNodeWasPreserved).toBe(true);
+	expect(renderState.mediaNodeWasPreserved).toBe(true);
+	expect(renderState.sawLoadingFallback).toBe(false);
+});
diff --git a/apps/server/src/tests/unit/application/services/maintenance-service.test.ts b/apps/server/src/tests/unit/application/services/maintenance-service.test.ts
index 02ceb0b9..0fff2712 100644
--- a/apps/server/src/tests/unit/application/services/maintenance-service.test.ts
+++ b/apps/server/src/tests/unit/application/services/maintenance-service.test.ts
@@ -316,5 +316,4 @@ describe("MaintenanceService", () => {
 			expect(mockJobRepo.createIfUnique).not.toHaveBeenCalled();
 		});
 	});
-
 });
diff --git a/packages/application/src/services/media-processing-service.ts b/packages/application/src/services/media-processing-service.ts
index 443238c4..3fbe61a8 100644
--- a/packages/application/src/services/media-processing-service.ts
+++ b/packages/application/src/services/media-processing-service.ts
@@ -280,7 +280,6 @@ export class MediaProcessingServiceImpl implements IMediaProcessingService {
 				);
 			}
 		}
-
 	}
 
 	private async registerContextMetadata(
diff --git a/packages/ui/src/combobox.tsx b/packages/ui/src/combobox.tsx
index 4be46769..d0661892 100644
--- a/packages/ui/src/combobox.tsx
+++ b/packages/ui/src/combobox.tsx
@@ -14,9 +14,28 @@ import {
 import { cn } from "./utils/cn";
 
 const Combobox = ComboboxPrimitive.Root;
+const useComboboxContext = ComboboxPrimitive.useComboboxContext;
 const ComboboxItemLabel = ComboboxPrimitive.ItemLabel;
 const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect;
 
+type ComboboxLabelProps<T extends ValidComponent = "label"> =
+	ComboboxPrimitive.ComboboxLabelProps<T> & { class?: string | undefined };
+
+const ComboboxLabel = <T extends ValidComponent = "label">(
+	props: PolymorphicProps<T, ComboboxLabelProps<T>>,
+) => {
+	const [local, others] = splitProps(props as ComboboxLabelProps, ["class"]);
+	return (
+		<ComboboxPrimitive.Label
+			class={cn(
+				"font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				local.class,
+			)}
+			{...others}
+		/>
+	);
+};
+
 type ComboboxItemProps<T extends ValidComponent = "li"> =
 	ComboboxPrimitive.ComboboxItemProps<T> & {
 		class?: string | undefined;
@@ -307,7 +326,9 @@ export {
 	ComboboxItem,
 	ComboboxItemIndicator,
 	ComboboxItemLabel,
+	ComboboxLabel,
 	ComboboxSection,
 	ComboboxTrigger,
+	useComboboxContext,
 	VirtualComboboxContent,
 };
diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
index 8de5ad00..b43f1bd7 100644
--- a/packages/ui/src/dialog.tsx
+++ b/packages/ui/src/dialog.tsx
@@ -54,7 +54,7 @@ type DialogContentProps<_T extends ValidComponent = "div"> = ComponentProps<
 > & {
 	class?: string | undefined;
 	children?: JSX.Element;
-	placement?: "center" | "right";
+	placement?: "center" | "left" | "right";
 };
 
 const DialogContent = <T extends ValidComponent = "div">(
@@ -74,7 +74,9 @@ const DialogContent = <T extends ValidComponent = "div">(
 					"fixed z-50 grid overflow-y-auto overscroll-contain border bg-background shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in motion-reduce:animate-none",
 					placement() === "center"
 						? "top-1/2 left-1/2 max-h-[calc(100dvh-2rem-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 origin-center gap-4 p-6 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 sm:max-h-[calc(100dvh-4rem)] sm:rounded-lg"
-						: "inset-y-0 right-0 left-auto h-dvh max-h-none w-[min(28rem,calc(100%-1rem))] max-w-none translate-x-0 translate-y-0 origin-right gap-4 rounded-none border-y-0 border-r-0 p-6 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:slide-out-to-right data-[expanded]:slide-in-from-right sm:max-h-none",
+						: placement() === "left"
+							? "inset-y-0 left-0 h-dvh max-h-none w-[min(20rem,calc(100%-1rem))] max-w-none translate-x-0 translate-y-0 origin-left gap-4 rounded-none border-y-0 border-l-0 p-4 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:slide-out-to-left data-[expanded]:slide-in-from-left sm:max-h-none"
+							: "inset-y-0 right-0 left-auto h-dvh max-h-none w-[min(28rem,calc(100%-1rem))] max-w-none translate-x-0 translate-y-0 origin-right gap-4 rounded-none border-y-0 border-r-0 p-6 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:slide-out-to-right data-[expanded]:slide-in-from-right sm:max-h-none",
 					props.class,
 				)}
 				{...rest}
diff --git a/packages/ui/src/hooks/scroll-container.ts b/packages/ui/src/hooks/scroll-container.ts
new file mode 100644
index 00000000..cb54bf29
--- /dev/null
+++ b/packages/ui/src/hooks/scroll-container.ts
@@ -0,0 +1,28 @@
+export function resolveScrollContainer(
+	selector: string | undefined,
+): HTMLElement | null {
+	if (!selector || typeof document === "undefined") return null;
+	return document.querySelector<HTMLElement>(selector);
+}
+
+export function scrollToPosition(
+	selector: string | undefined,
+	top: number,
+): boolean {
+	if (selector) {
+		const container = resolveScrollContainer(selector);
+		if (!container) return false;
+		container.scrollTo({ top });
+		return true;
+	}
+	if (typeof window === "undefined") return false;
+	window.scrollTo(0, top);
+	return true;
+}
+
+export function currentScrollPosition(
+	selector: string | undefined,
+): number | null {
+	if (selector) return resolveScrollContainer(selector)?.scrollTop ?? null;
+	return typeof window === "undefined" ? null : window.scrollY;
+}
diff --git a/packages/ui/src/hooks/use-manager-page.ts b/packages/ui/src/hooks/use-manager-page.ts
index ce340133..b16af346 100644
--- a/packages/ui/src/hooks/use-manager-page.ts
+++ b/packages/ui/src/hooks/use-manager-page.ts
@@ -110,6 +110,7 @@ export type UseManagerPageOptions = {
 	useBatchJobEvents?: (
 		activeJobId: Accessor<string | null>,
 		handlers: ManagerJobHandlers,
+		options?: { subscribeImmediately?: boolean },
 	) => void;
 	onBatchTaggingStart?: (result: StartBatchTaggingResult) => void;
 };
@@ -712,7 +713,9 @@ export function useManagerPage(
 		handleJobFailed,
 	};
 
-	useBatchJobEvents?.(activeJobId, jobHandlers);
+	// Fast children may publish parent progress before the start request returns.
+	// Buffer those events until activeJobId is known.
+	useBatchJobEvents?.(activeJobId, jobHandlers, { subscribeImmediately: true });
 
 	return {
 		activeTab,
diff --git a/packages/ui/src/hooks/use-search-page.ts b/packages/ui/src/hooks/use-search-page.ts
index 33452a00..7af6431f 100644
--- a/packages/ui/src/hooks/use-search-page.ts
+++ b/packages/ui/src/hooks/use-search-page.ts
@@ -20,6 +20,7 @@ import {
 import { isServer } from "solid-js/web";
 import { buildSearchResultsQueryOptions } from "../query-options";
 import { type QueryUiState, toQueryUiState } from "../query-state";
+import { currentScrollPosition, scrollToPosition } from "./scroll-container";
 
 const DEFAULT_GC_TIME = 1000 * 60 * 5;
 const DEFAULT_REFRESH_DEBOUNCE_MS = 0;
@@ -76,6 +77,7 @@ export interface UseSearchPageOptions {
 	gcTime?: number;
 	refreshDebounceMs?: number;
 	isSearchStateRestored?: Accessor<boolean>;
+	scrollContainerSelector?: string;
 }
 
 export interface UseSearchPageResult {
@@ -246,7 +248,6 @@ export function useSearchPage(
 	};
 
 	const [isRestored, setIsRestored] = createSignal(false);
-
 	createEffect(() => {
 		if (
 			!(searchResultQuery.isLoading || isRestored()) &&
@@ -255,7 +256,7 @@ export function useSearchPage(
 		) {
 			if (scrollY() > 0) {
 				requestAnimationFrame(() => {
-					window.scrollTo(0, scrollY());
+					scrollToPosition(options.scrollContainerSelector, scrollY());
 				});
 			}
 			setIsRestored(true);
@@ -264,7 +265,8 @@ export function useSearchPage(
 
 	onCleanup(() => {
 		if (!isServer) {
-			setScrollY(window.scrollY);
+			const position = currentScrollPosition(options.scrollContainerSelector);
+			if (position !== null) setScrollY(position);
 		}
 		const timer = refreshTimer();
 		if (timer) {
@@ -275,7 +277,7 @@ export function useSearchPage(
 	const handleSearch = () => {
 		setOffset(0);
 		setScrollY(0);
-		window.scrollTo(0, 0);
+		scrollToPosition(options.scrollContainerSelector, 0);
 	};
 
 	const [loadMoreRef, setLoadMoreRef] = createSignal<
diff --git a/packages/ui/src/hooks/use-source-media-page.ts b/packages/ui/src/hooks/use-source-media-page.ts
index 997d8a39..e4662323 100644
--- a/packages/ui/src/hooks/use-source-media-page.ts
+++ b/packages/ui/src/hooks/use-source-media-page.ts
@@ -36,6 +36,7 @@ import { type QueryUiState, toQueryUiState } from "../query-state";
 import type { PresetManagerClient } from "../search-control-panel";
 import { toast } from "../toast";
 import { getRestoreImportStrategies } from "./restore-import";
+import { currentScrollPosition, scrollToPosition } from "./scroll-container";
 import type { MediaSourceEventTransport } from "./use-media-source-events";
 import { useMediaSourceEvents } from "./use-media-source-events";
 
@@ -170,6 +171,7 @@ export type UseSourceMediaPageOptions = {
 	itemsPerPage?: number;
 	onThumbnailReady?: (mediaId: string) => void;
 	isSearchStateRestored?: Accessor<boolean>;
+	scrollContainerSelector?: string;
 };
 
 export type UseSourceMediaPageResult = {
@@ -240,7 +242,6 @@ export function useSourceMediaPage(
 	} = options;
 
 	const id = mediaSourceId;
-
 	// --- Filter data queries ---
 	const filterData = (): SourceMediaPageFilterData => ({
 		tags: queries.tags(),
@@ -294,7 +295,7 @@ export function useSourceMediaPage(
 
 	// --- Search handler ---
 	const handleSearch = () => {
-		window.scrollTo(0, 0);
+		scrollToPosition(options.scrollContainerSelector, 0);
 	};
 
 	// --- Scroll restoration ---
@@ -324,7 +325,7 @@ export function useSourceMediaPage(
 			if (targetScrollY > 0) {
 				setTimeout(() => {
 					requestAnimationFrame(() => {
-						window.scrollTo(0, targetScrollY);
+						scrollToPosition(options.scrollContainerSelector, targetScrollY);
 						setIsScrollRestored(true);
 					});
 				}, SCROLL_RESTORE_DELAY);
@@ -340,7 +341,8 @@ export function useSourceMediaPage(
 		}
 		const sourceId = id();
 		if (sourceId) {
-			setScrollPosition(sourceId, window.scrollY);
+			const position = currentScrollPosition(options.scrollContainerSelector);
+			if (position !== null) setScrollPosition(sourceId, position);
 		}
 	});
 
diff --git a/packages/ui/src/import-review-modal.tsx b/packages/ui/src/import-review-modal.tsx
index 1afbd711..49588dbe 100644
--- a/packages/ui/src/import-review-modal.tsx
+++ b/packages/ui/src/import-review-modal.tsx
@@ -8,7 +8,6 @@ import {
 	For,
 	Show,
 } from "solid-js";
-import { Portal } from "solid-js/web";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -19,6 +18,15 @@ import {
 	AlertDialogHeader,
 	AlertDialogTitle,
 } from "./alert-dialog";
+import { Button } from "./button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "./dialog";
 import {
 	getPendingImportPrimaryAuthor,
 	getPreferredImportSourceId,
@@ -43,6 +51,7 @@ export type ImportReviewModalProps = {
 		targetSourceId: string,
 	) => Promise<{ success: boolean; processedCount: number }>;
 	cancelPending: (jobIds: string[]) => Promise<{ success: boolean }>;
+	variant?: "default" | "v2";
 };
 
 function getPreviewUrl(url?: string): string {
@@ -73,6 +82,11 @@ export function ImportReviewModal(props: ImportReviewModalProps) {
 	);
 	const [selectedSourceId, setSelectedSourceId] = createSignal("");
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = createSignal(false);
+	const [isDiscardDialogOpen, setIsDiscardDialogOpen] = createSignal(false);
+	const [isDirty, setIsDirty] = createSignal(false);
+	const [activeAction, setActiveAction] = createSignal<
+		"import" | "delete" | null
+	>(null);
 
 	const [pendingJobs, { refetch: refetchJobs }] = createResource(
 		() => props.isOpen || undefined,
@@ -80,6 +94,14 @@ export function ImportReviewModal(props: ImportReviewModalProps) {
 	);
 	const [sources] = createResource(props.listSources);
 
+	createEffect(() => {
+		if (props.isOpen) {
+			setIsDirty(false);
+			setIsDiscardDialogOpen(false);
+			void refetchJobs();
+		}
+	});
+
 	createEffect(() => {
 		const jobs = pendingJobs();
 		if (jobs?.length) {
@@ -109,6 +131,20 @@ export function ImportReviewModal(props: ImportReviewModalProps) {
 			current.add(id);
 		}
 		setSelectedJobIds(current);
+		setIsDirty(true);
+	};
+	const requestClose = () => {
+		if (activeAction() !== null) return;
+		if (isDirty()) {
+			setIsDiscardDialogOpen(true);
+			return;
+		}
+		props.onClose();
+	};
+	const discardAndClose = () => {
+		setIsDirty(false);
+		setIsDiscardDialogOpen(false);
+		props.onClose();
 	};
 
 	const handleProcess = async () => {
@@ -119,150 +155,228 @@ export function ImportReviewModal(props: ImportReviewModalProps) {
 		}
 
 		try {
+			setActiveAction("import");
 			await props.processPending(jobIds, sourceId);
+			setIsDirty(false);
 			props.onImportCompleted();
 			props.onClose();
 		} catch (error) {
 			toast.error(`Failed to process imports: ${getErrorMessage(error)}`);
+		} finally {
+			setActiveAction(null);
 		}
 	};
 
 	const confirmDelete = async () => {
 		try {
+			setActiveAction("delete");
 			await props.cancelPending(Array.from(selectedJobIds()));
 			await refetchJobs();
 			setSelectedJobIds(createEmptySelection());
+			setIsDirty(false);
 			toast.success("Requests deleted");
 		} catch (error) {
 			toast.error(`Failed to cancel imports: ${getErrorMessage(error)}`);
 		} finally {
+			setActiveAction(null);
 			setIsDeleteDialogOpen(false);
 		}
 	};
 
 	return (
-		<Show when={props.isOpen}>
-			<Portal>
-				<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-					<div class="flex max-h-[85vh] w-full max-w-4xl flex-col rounded-lg bg-gray-900 shadow-xl">
-						<div class="flex items-center justify-between border-gray-700 border-b p-4">
-							<h2 class="font-bold text-white text-xl">
-								Review Pending Imports
-							</h2>
-							<button
-								class="text-gray-400 hover:text-white"
-								onClick={props.onClose}
-								type="button"
-							>
-								✕
-							</button>
+		<>
+			<Dialog
+				onOpenChange={(open) => {
+					if (!open) {
+						requestClose();
+					}
+				}}
+				open={props.isOpen}
+			>
+				<DialogContent
+					class={`flex max-h-[min(52rem,calc(100dvh-2rem))] max-w-5xl flex-col gap-0 overflow-hidden p-0 ${props.variant === "v2" ? "v2-theme" : ""}`}
+				>
+					<DialogHeader class="border-b px-5 py-4 pr-12">
+						<DialogTitle>Import inbox</DialogTitle>
+						<DialogDescription>
+							Review downloaded media, choose a source, then import the selected
+							items.
+						</DialogDescription>
+					</DialogHeader>
+
+					<div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+						<div
+							class={`flex flex-col gap-3 border-b px-5 py-3 sm:flex-row sm:items-end sm:justify-between ${props.variant === "v2" ? "bg-[var(--v2-surface-muted)]" : "bg-muted"}`}
+						>
+							<label class="grid min-w-0 gap-1 font-medium text-sm sm:w-80">
+								Target source
+								<select
+									class="min-h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+									disabled={sources.loading || activeAction() !== null}
+									onChange={(event) => {
+										setSelectedSourceId(event.currentTarget.value);
+										setIsDirty(true);
+									}}
+									value={selectedSourceId()}
+								>
+									<For each={sources()}>
+										{(source) => (
+											<option value={source.id}>
+												{source.name} · {source.type}
+											</option>
+										)}
+									</For>
+								</select>
+							</label>
+							<div class="text-muted-foreground text-sm" aria-live="polite">
+								{selectedJobIds().size} of {pendingJobs()?.length ?? 0} selected
+							</div>
 						</div>
-						<div class="flex-1 overflow-y-auto p-4">
-							<div class="mb-4 flex items-center justify-between">
-								<div class="flex gap-2">
-									<span class="text-gray-300">Target Source:</span>
-									<select
-										class="rounded border border-gray-600 bg-gray-800 p-1 text-white"
-										onChange={(event) =>
-											setSelectedSourceId(event.currentTarget.value)
-										}
-										value={selectedSourceId()}
-									>
-										<For each={sources()}>
-											{(source) => (
-												<option value={source.id}>
-													{source.name} ({source.type})
-												</option>
-											)}
-										</For>
-									</select>
-								</div>
-								<div class="text-gray-400 text-sm">
-									Selected: {selectedJobIds().size} /{" "}
-									{pendingJobs()?.length || 0}
+
+						<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-5">
+							<Show when={pendingJobs.loading}>
+								<div class="flex min-h-48 items-center justify-center text-muted-foreground text-sm">
+									Loading import inbox…
 								</div>
-							</div>
-							<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
-								<For each={pendingJobs()}>
-									{(job) => (
-										<button
-											class={`relative flex cursor-pointer flex-col rounded border p-2 text-left ${
-												selectedJobIds().has(job.id)
-													? "border-sky-500 bg-sky-900/20"
-													: "border-gray-700 bg-gray-800"
-											}`}
-											onClick={() => toggleSelection(job.id)}
-											type="button"
-										>
-											<div class="absolute top-1 right-1">
+							</Show>
+							<Show
+								when={
+									!pendingJobs.loading &&
+									!pendingJobs.error &&
+									(pendingJobs()?.length ?? 0) > 0
+								}
+							>
+								<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+									<For each={pendingJobs()}>
+										{(job) => (
+											<label
+												class={`relative min-w-0 cursor-pointer rounded-lg border p-2 transition-colors focus-within:ring-2 focus-within:ring-ring ${
+													selectedJobIds().has(job.id)
+														? "border-primary bg-primary/5"
+														: "border-border bg-card hover:bg-accent/50"
+												}`}
+											>
 												<input
 													checked={selectedJobIds().has(job.id)}
-													class="h-4 w-4"
+													class="peer sr-only"
+													disabled={activeAction() !== null}
+													onChange={() => toggleSelection(job.id)}
 													type="checkbox"
 												/>
-											</div>
-											<div class="aspect-square w-full overflow-hidden rounded bg-black">
-												<Show
-													fallback={
-														<div class="flex h-full items-center justify-center text-gray-500">
-															No Preview
-														</div>
-													}
-													when={job.item.targetUrl}
-												>
-													<img
-														alt="Preview"
-														class="h-full w-full object-cover"
-														onError={(event) => {
-															event.currentTarget.style.display = "none";
-														}}
-														src={getPreviewUrl(job.item.targetUrl)}
-													/>
-												</Show>
-											</div>
-											<div class="mt-2 truncate text-gray-400 text-xs">
-												{job.item.description ||
-													job.item.targetUrl ||
-													"No description"}
-											</div>
-											<div class="text-[10px] text-gray-500">
-												AUTH: {getPendingImportPrimaryAuthor(job.item)}
-											</div>
-										</button>
-									)}
-								</For>
-							</div>
-						</div>
-						<div class="flex justify-end gap-2 border-gray-700 border-t p-4">
-							<button
-								class="rounded px-4 py-2 text-red-400 hover:bg-red-900/20 disabled:opacity-50"
-								disabled={selectedJobIds().size === 0}
-								onClick={() => setIsDeleteDialogOpen(true)}
-								type="button"
-							>
-								Delete Selected
-							</button>
-							<div class="flex-1" />
-							<button
-								class="rounded border border-gray-600 px-4 py-2 text-gray-300 hover:bg-gray-800"
-								onClick={props.onClose}
-								type="button"
-							>
-								Cancel
-							</button>
-							<button
-								class="rounded bg-sky-600 px-6 py-2 font-bold text-white hover:bg-sky-500 disabled:opacity-50"
-								disabled={selectedJobIds().size === 0 || !selectedSourceId()}
-								onClick={() => void handleProcess()}
-								type="button"
+												<span class="absolute top-3 right-3 z-10 flex size-5 items-center justify-center rounded border border-input bg-background font-bold text-primary text-xs peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground">
+													{selectedJobIds().has(job.id) ? "✓" : ""}
+												</span>
+												<div class="aspect-[4/3] w-full overflow-hidden rounded-md bg-muted">
+													<Show
+														fallback={
+															<div class="flex h-full items-center justify-center text-muted-foreground text-xs">
+																No preview
+															</div>
+														}
+														when={job.item.targetUrl}
+													>
+														<img
+															alt="Import preview"
+															class="h-full w-full object-cover"
+															onError={(event) => {
+																event.currentTarget.style.display = "none";
+															}}
+															src={getPreviewUrl(job.item.targetUrl)}
+														/>
+													</Show>
+												</div>
+												<div class="mt-2 truncate font-medium text-sm">
+													{job.item.description ||
+														job.item.targetUrl ||
+														"Untitled import"}
+												</div>
+												<div class="truncate text-muted-foreground text-xs">
+													{getPendingImportPrimaryAuthor(job.item)}
+												</div>
+											</label>
+										)}
+									</For>
+								</div>
+							</Show>
+							<Show when={!pendingJobs.loading && pendingJobs.error}>
+								<div class="flex min-h-48 flex-col items-center justify-center gap-3 text-center">
+									<p class="text-destructive text-sm">
+										Failed to load import inbox.
+									</p>
+									<Button onClick={() => void refetchJobs()} variant="outline">
+										Retry
+									</Button>
+								</div>
+							</Show>
+							<Show
+								when={
+									!pendingJobs.loading &&
+									!pendingJobs.error &&
+									pendingJobs()?.length === 0
+								}
 							>
-								Import{" "}
-								{selectedJobIds().size ? `(${selectedJobIds().size})` : ""}
-							</button>
+								<div class="flex min-h-48 flex-col items-center justify-center gap-1 text-center">
+									<p class="font-medium">Import inbox is empty</p>
+									<p class="text-muted-foreground text-sm">
+										New bulk-upload requests will appear here.
+									</p>
+								</div>
+							</Show>
 						</div>
 					</div>
-				</div>
-			</Portal>
+
+					<DialogFooter class="border-t px-5 py-3">
+						<Button
+							class="sm:mr-auto"
+							disabled={selectedJobIds().size === 0 || activeAction() !== null}
+							onClick={() => setIsDeleteDialogOpen(true)}
+							variant="destructive"
+						>
+							Delete selected
+						</Button>
+						<Button
+							disabled={activeAction() !== null}
+							onClick={requestClose}
+							variant="outline"
+						>
+							Close
+						</Button>
+						<Button
+							disabled={
+								selectedJobIds().size === 0 ||
+								!selectedSourceId() ||
+								activeAction() !== null
+							}
+							onClick={() => void handleProcess()}
+						>
+							{activeAction() === "import"
+								? "Importing…"
+								: `Import${selectedJobIds().size ? ` (${selectedJobIds().size})` : ""}`}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+			<AlertDialog
+				onOpenChange={setIsDiscardDialogOpen}
+				open={isDiscardDialogOpen()}
+			>
+				<AlertDialogContent
+					class={props.variant === "v2" ? "v2-theme" : undefined}
+				>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Discard selected changes?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Your selected items and target source have not been imported yet.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Continue reviewing</AlertDialogCancel>
+						<AlertDialogAction onClick={discardAndClose}>
+							Discard and close
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 			<AlertDialog
 				onOpenChange={setIsDeleteDialogOpen}
 				open={isDeleteDialogOpen()}
@@ -278,13 +392,14 @@ export function ImportReviewModal(props: ImportReviewModalProps) {
 						<AlertDialogCancel>Cancel</AlertDialogCancel>
 						<AlertDialogAction
 							class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+							disabled={activeAction() === "delete"}
 							onClick={() => void confirmDelete()}
 						>
-							Delete
+							{activeAction() === "delete" ? "Deleting…" : "Delete"}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
-		</Show>
+		</>
 	);
 }
diff --git a/packages/ui/src/layouts/app-nav.tsx b/packages/ui/src/layouts/app-nav.tsx
index 6db74c27..035f948f 100644
--- a/packages/ui/src/layouts/app-nav.tsx
+++ b/packages/ui/src/layouts/app-nav.tsx
@@ -23,6 +23,8 @@ const navigationItems = [
 	{ label: "Manager", to: "/manager" },
 	{ label: "About", to: "/about" },
 	{ label: "Settings", to: "/config" },
+	{ label: "V2", to: "/v2" },
+	{ label: "Design Lab", to: "/design-lab" },
 ] as const;
 
 export function AppNav(props: AppNavProps) {
diff --git a/packages/ui/src/media-grid-item.tsx b/packages/ui/src/media-grid-item.tsx
index 47e94af4..12c400d6 100644
--- a/packages/ui/src/media-grid-item.tsx
+++ b/packages/ui/src/media-grid-item.tsx
@@ -18,10 +18,13 @@ export type MediaGridLinkProps = {
 	class: string;
 	"data-media-id": string;
 	href: string;
+	"aria-pressed"?: boolean;
+	onClick?: (event: MouseEvent) => void;
 	onContextMenu: (event: MouseEvent) => void;
 };
 
 type MediaGridItemProps = {
+	variant?: "default" | "v2";
 	media: Media;
 	linkPrefix?: string;
 	priority?: boolean;
@@ -51,22 +54,35 @@ export function MediaGridItem(props: MediaGridItemProps) {
 	return (
 		<LinkComponent
 			class={cn(
-				"group relative block aspect-[3/4] overflow-hidden rounded-lg bg-gray-100 transition-all hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-				props.isSelected && "ring-4 ring-blue-500 ring-offset-2",
+				props.variant === "v2"
+					? "group relative block aspect-[4/3] overflow-hidden rounded-md bg-[var(--v2-surface-muted)] outline-none ring-offset-2 ring-offset-[var(--v2-canvas)] transition focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]"
+					: "group relative block aspect-[3/4] overflow-hidden rounded-lg bg-gray-100 transition-all hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+				props.isSelected &&
+					(props.variant === "v2"
+						? "ring-2 ring-[var(--v2-focus)]"
+						: "ring-4 ring-blue-500 ring-offset-2"),
 				props.class,
 			)}
 			data-media-id={props.media.id}
 			href={href()}
+			aria-pressed={
+				props.isBulkSelectMode || props.variant === "v2"
+					? props.isSelected
+					: undefined
+			}
+			onClick={undefined}
 			onContextMenu={(event) => props.onContextMenu?.(event)}
 		>
-			<Show when={props.isBulkSelectMode}>
-				<div class="absolute right-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-white bg-black/40 text-white">
-					<input
-						type="checkbox"
-						checked={props.isSelected}
-						class="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-						readOnly
-					/>
+			<Show
+				when={
+					props.isBulkSelectMode || (props.variant === "v2" && props.isSelected)
+				}
+			>
+				<div
+					aria-hidden="true"
+					class="absolute top-2 right-2 z-10 flex size-6 items-center justify-center rounded-full border border-white bg-black/55 font-bold text-white text-xs shadow-sm"
+				>
+					{props.isSelected ? "✓" : ""}
 				</div>
 			</Show>
 
@@ -81,7 +97,10 @@ export function MediaGridItem(props: MediaGridItemProps) {
 				{props.renderThumbnail({
 					alt: props.media.fileName,
 					class: cn(
-						"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+						"h-full w-full object-cover",
+						props.variant === "v2"
+							? "transition duration-200 group-hover:scale-[1.015] motion-reduce:transition-none"
+							: "transition-transform duration-300 group-hover:scale-105",
 						props.thumbnailClass,
 					),
 					height: props.media.height,
@@ -94,7 +113,7 @@ export function MediaGridItem(props: MediaGridItemProps) {
 
 			<div
 				class={cn(
-					"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100",
+					"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
 					props.overlayClass,
 				)}
 			>
diff --git a/packages/ui/src/media-viewer.tsx b/packages/ui/src/media-viewer.tsx
index 9c620361..fe603455 100644
--- a/packages/ui/src/media-viewer.tsx
+++ b/packages/ui/src/media-viewer.tsx
@@ -18,6 +18,7 @@ export interface MediaViewerProps {
 	fileName: string;
 	width?: number;
 	height?: number;
+	variant?: "default" | "v2";
 }
 
 export function MediaViewer(props: MediaViewerProps) {
@@ -55,7 +56,9 @@ export function MediaViewer(props: MediaViewerProps) {
 
 	return (
 		<div
-			class="flex aspect-[var(--media-aspect)] min-h-0 min-w-0 w-full items-center justify-center overflow-hidden rounded-lg lg:aspect-auto lg:h-full"
+			class={`flex aspect-[var(--media-aspect)] min-h-0 min-w-0 w-full items-center justify-center overflow-hidden lg:aspect-auto lg:h-full ${
+				props.variant === "v2" ? "bg-[var(--v2-surface)]" : "rounded-lg"
+			}`}
 			data-media-viewer
 			style={`--media-aspect: ${props.width && props.height ? `${props.width} / ${props.height}` : "4 / 3"}`}
 		>
@@ -63,14 +66,22 @@ export function MediaViewer(props: MediaViewerProps) {
 				<Match when={props.source.type === "video"}>
 					<Show
 						fallback={
-							<div class="flex h-full max-h-full w-full items-center justify-center rounded-lg bg-slate-900 text-white">
+							<div
+								class={`flex h-full max-h-full w-full items-center justify-center bg-slate-900 text-white ${
+									props.variant === "v2" ? "" : "rounded-lg"
+								}`}
+							>
 								Video preview unavailable
 							</div>
 						}
 						when={mediaUrl()}
 					>
 						{(url) => (
-							<video class="h-full max-w-full rounded-md" controls src={url()}>
+							<video
+								class={`h-full max-w-full ${props.variant === "v2" ? "" : "rounded-md"}`}
+								controls
+								src={url()}
+							>
 								<track kind="captions" />
 							</video>
 						)}
@@ -79,7 +90,9 @@ export function MediaViewer(props: MediaViewerProps) {
 				<Match when={props.source.type === "audio"}>
 					<Show
 						fallback={
-							<div class="rounded-lg bg-slate-900 px-8 py-6 text-white">
+							<div
+								class={`bg-slate-900 px-8 py-6 text-white ${props.variant === "v2" ? "" : "rounded-lg"}`}
+							>
 								Audio preview unavailable
 							</div>
 						}
@@ -96,13 +109,21 @@ export function MediaViewer(props: MediaViewerProps) {
 					<Show
 						fallback={
 							<div
-								class="flex h-full w-full items-center justify-center rounded-lg border text-white"
-								style={{
-									background:
-										"linear-gradient(135deg, rgba(15,23,42,0.18), rgba(15,23,42,0.02)), linear-gradient(135deg, #0f766e, #60a5fa)",
-								}}
+								class={`flex h-full w-full items-center justify-center ${
+									props.variant === "v2"
+										? "bg-[var(--v2-surface-muted)] text-[var(--v2-text-muted)]"
+										: "rounded-lg border text-white"
+								}`}
+								style={
+									props.variant === "v2"
+										? undefined
+										: {
+												background:
+													"linear-gradient(135deg, rgba(15,23,42,0.18), rgba(15,23,42,0.02)), linear-gradient(135deg, #0f766e, #60a5fa)",
+											}
+								}
 							>
-								<div class="rounded-full border border-white/30 bg-white/10 px-6 py-3 text-sm uppercase tracking-[0.35em]">
+								<div class="max-w-[80%] truncate rounded-md border border-current/20 px-4 py-2 text-sm">
 									{props.fileName}
 								</div>
 							</div>
@@ -112,7 +133,8 @@ export function MediaViewer(props: MediaViewerProps) {
 						{(url) => (
 							<img
 								alt={props.fileName}
-								class="h-full w-full rounded-md object-contain"
+								class={`h-full w-full object-contain ${props.variant === "v2" ? "" : "rounded-md"}`}
+								fetchpriority="high"
 								height={props.height}
 								src={url()}
 								width={props.width}
diff --git a/packages/ui/src/pending-downloads-indicator.tsx b/packages/ui/src/pending-downloads-indicator.tsx
index e0cd046d..7e3da7fd 100644
--- a/packages/ui/src/pending-downloads-indicator.tsx
+++ b/packages/ui/src/pending-downloads-indicator.tsx
@@ -13,11 +13,14 @@ import {
 	type PendingImportJob,
 } from "./import-review-modal";
 import { toast } from "./toast";
+import { cn } from "./utils/cn";
 
 export type ImportEventHandler = (event: ImportEvent) => void | Promise<void>;
 export type ImportEventConnectedHandler = () => void | Promise<void>;
 
 export type PendingDownloadsIndicatorProps = {
+	compact?: boolean;
+	variant?: "default" | "v2";
 	countPending: () => Promise<number>;
 	listPending: () => Promise<PendingImportJob[]>;
 	listSources: () => Promise<SafeMediaSource[]>;
@@ -129,7 +132,12 @@ export function PendingDownloadsIndicator(
 		<ErrorBoundary
 			fallback={() => (
 				<button
-					class="cursor-default rounded bg-gray-700 px-3 py-1.5 font-bold text-gray-400 text-xs"
+					class={cn(
+						"cursor-default rounded px-3 py-1.5 font-bold text-xs",
+						props.variant === "v2"
+							? "h-10 w-full bg-transparent text-[var(--v2-text-muted)]"
+							: "bg-gray-700 text-gray-400",
+					)}
 					disabled
 					type="button"
 				>
@@ -138,22 +146,35 @@ export function PendingDownloadsIndicator(
 			)}
 		>
 			<button
+				aria-label={`Import inbox${(pendingCount() ?? 0) > 0 ? `, ${pendingCount()}件` : ""}`}
+				class={cn(
+					"relative flex items-center gap-2 rounded-md px-3 font-medium text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					props.variant === "v2"
+						? "h-10 w-full justify-start text-[var(--v2-text-secondary)] hover:bg-[var(--v2-surface-muted)] disabled:pointer-events-auto disabled:opacity-60"
+						: (pendingCount() ?? 0) > 0
+							? "bg-sky-600 py-1.5 text-white hover:bg-sky-500"
+							: "cursor-default bg-gray-700 py-1.5 text-gray-400",
+					props.compact && "size-10 justify-center px-0",
+				)}
 				aria-disabled={!hasPendingImports()}
-				class={`flex items-center gap-1 rounded px-3 py-1.5 font-bold text-xs transition-colors ${
-					hasPendingImports()
-						? "bg-sky-600 text-white hover:bg-sky-500"
-						: "cursor-default bg-gray-700 text-gray-400"
-				}`}
-				onClick={() => {
-					if (hasPendingImports()) {
-						setIsModalOpen(true);
-					}
-				}}
+				disabled={(pendingCount() ?? 0) === 0}
+				onClick={() => setIsModalOpen(true)}
 				type="button"
 			>
-				<span>Inbox</span>
+				<span aria-hidden="true" class="text-base leading-none">
+					↓
+				</span>
+				<span class={props.compact ? "sr-only" : undefined}>Import inbox</span>
 				<Show when={(pendingCount() ?? 0) > 0}>
-					<span class="rounded bg-white px-1.5 py-0.5 text-sky-700">
+					<span
+						class={cn(
+							"rounded-full px-1.5 py-0.5 text-[10px]",
+							props.variant === "v2"
+								? "ml-auto bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
+								: "bg-white text-sky-700",
+							props.compact && "absolute -mt-5 ml-5",
+						)}
+					>
 						{pendingCount()}
 					</span>
 				</Show>
@@ -168,6 +189,7 @@ export function PendingDownloadsIndicator(
 					void refreshPendingCount();
 				}}
 				processPending={props.processPending}
+				variant={props.variant}
 			/>
 		</ErrorBoundary>
 	);
diff --git a/packages/ui/src/screens/config-screen.tsx b/packages/ui/src/screens/config-screen.tsx
index 2ea6025e..c31acbf7 100644
--- a/packages/ui/src/screens/config-screen.tsx
+++ b/packages/ui/src/screens/config-screen.tsx
@@ -1,8 +1,26 @@
 import type { AppConfig } from "@solid-imager/core/domain/config/config-schema";
 import { AppConfigSchema } from "@solid-imager/core/domain/config/config-schema";
 import { createForm } from "@tanstack/solid-form";
-import { createEffect, createSignal } from "solid-js";
+// biome-ignore lint/suspicious/noDeprecatedImports: the object overload used below is current; TanStack's legacy overload annotation marks the re-export.
+import { useBlocker } from "@tanstack/solid-router";
+import Bot from "lucide-solid/icons/bot";
+import BriefcaseBusiness from "lucide-solid/icons/briefcase-business";
+import DownloadCloud from "lucide-solid/icons/cloud-download";
+import HardDrive from "lucide-solid/icons/hard-drive";
+import Image from "lucide-solid/icons/image";
+import Logs from "lucide-solid/icons/logs";
+import { createEffect, createSignal, For, Show } from "solid-js";
 import type { z } from "zod";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "../alert-dialog";
 import { Button } from "../button";
 import {
 	FormError,
@@ -15,9 +33,42 @@ import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from "../switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
 import { Textarea } from "../textarea";
 import { toast } from "../toast";
+import {
+	V2_CATEGORY_TABS_CLASS,
+	V2CategoryLabel,
+} from "../v2/management-layout";
 
 type AppConfigFormValues = z.input<typeof AppConfigSchema>;
 
+const SETTINGS_CATEGORIES = [
+	{
+		description: "並列数と自動処理",
+		icon: BriefcaseBusiness,
+		label: "Jobs",
+		value: "jobs",
+	},
+	{ description: "推論サービス接続", icon: Bot, label: "AI", value: "ai" },
+	{
+		description: "取得速度と制限",
+		icon: DownloadCloud,
+		label: "Downloads",
+		value: "downloads",
+	},
+	{
+		description: "サムネイルと保存先",
+		icon: HardDrive,
+		label: "Storage",
+		value: "storage",
+	},
+	{
+		description: "形式とメタデータ",
+		icon: Image,
+		label: "Media",
+		value: "media",
+	},
+	{ description: "出力レベル", icon: Logs, label: "Logging", value: "logging" },
+] as const;
+
 function toFormValues(data: AppConfig): AppConfigFormValues {
 	return data;
 }
@@ -30,11 +81,17 @@ export type ConfigScreenProps = {
 	data: AppConfig;
 	onSubmit: (value: Partial<AppConfig>) => Promise<void>;
 	onSubmitSuccess?: () => void;
+	variant?: "default" | "v2";
 };
 
 export function ConfigScreen(props: ConfigScreenProps) {
 	const [activeTab, setActiveTab] = createSignal("jobs");
 	const [submitError, setSubmitError] = createSignal<string | null>(null);
+	const isV2 = () => props.variant === "v2";
+	const sectionClass = () =>
+		isV2()
+			? "space-y-5 border-b border-[var(--v2-border)] pb-8"
+			: "space-y-4 rounded-md border p-3 sm:p-4";
 	const form = createForm(() => ({
 		defaultValues: toFormValues(props.data),
 		validators: {
@@ -56,6 +113,11 @@ export function ConfigScreen(props: ConfigScreenProps) {
 			}
 		},
 	}));
+	const navigationBlocker = useBlocker({
+		shouldBlockFn: () => isV2() && form.state.isDirty,
+		enableBeforeUnload: () => isV2() && form.state.isDirty,
+		withResolver: true,
+	});
 
 	createEffect(() => {
 		const data = props.data;
@@ -66,61 +128,81 @@ export function ConfigScreen(props: ConfigScreenProps) {
 
 	return (
 		<div class="min-w-0 space-y-6 [&_input]:scroll-mt-28 [&_input]:text-base [&_select]:scroll-mt-28 [&_select]:text-base [&_textarea]:scroll-mt-28 [&_textarea]:text-base sm:[&_input]:text-sm sm:[&_select]:text-sm sm:[&_textarea]:text-sm">
-			<div class="sticky top-[calc(4rem+env(safe-area-inset-top))] z-20 -mx-3 flex flex-col gap-3 border-b bg-background px-3 py-3 sm:-mx-6 sm:flex-row sm:items-center sm:justify-between sm:px-6 md:static md:mx-0 md:border-0 md:bg-transparent md:p-0">
-				<h1 class="font-bold text-2xl sm:text-3xl">Settings</h1>
-				<form.Subscribe
-					selector={(state) => ({
-						canSubmit: state.canSubmit,
-						isSubmitting: state.isSubmitting,
-					})}
+			<Show when={!isV2()}>
+				<div
+					class={
+						"sticky top-[calc(4rem+env(safe-area-inset-top))] z-20 -mx-3 flex flex-col gap-3 border-b bg-background px-3 py-3 sm:-mx-6 sm:flex-row sm:items-center sm:justify-between sm:px-6 md:static md:mx-0 md:border-0 md:bg-transparent md:p-0"
+					}
 				>
-					{(state) => (
-						<Button
-							class="w-full sm:w-auto"
-							disabled={!state().canSubmit || state().isSubmitting}
-							onClick={() => {
-								void form.handleSubmit();
-							}}
+					<h1 class="font-bold text-2xl sm:text-3xl">Settings</h1>
+					<Show when={!isV2()}>
+						<form.Subscribe
+							selector={(state) => ({
+								canSubmit: state.canSubmit,
+								isSubmitting: state.isSubmitting,
+							})}
 						>
-							{state().isSubmitting ? "Saving..." : "Save Changes"}
-						</Button>
-					)}
-				</form.Subscribe>
-			</div>
+							{(state) => (
+								<Button
+									class="w-full sm:w-auto"
+									disabled={!state().canSubmit || state().isSubmitting}
+									onClick={() => {
+										void form.handleSubmit();
+									}}
+								>
+									{state().isSubmitting ? "Saving..." : "Save Changes"}
+								</Button>
+							)}
+						</form.Subscribe>
+					</Show>
+				</div>
+			</Show>
 			<FormError message={submitError()} />
 
-			<Tabs class="min-w-0 w-full" onChange={setActiveTab} value={activeTab()}>
+			<Tabs
+				class={
+					isV2()
+						? "grid min-w-0 w-full gap-6 lg:grid-cols-[12rem_minmax(0,1fr)] xl:gap-8"
+						: "min-w-0 w-full"
+				}
+				onChange={setActiveTab}
+				value={activeTab()}
+			>
 				<TabsList
 					aria-label="Settings categories"
-					class="flex h-auto w-full justify-start gap-1 overflow-x-auto rounded-md p-1 md:grid md:grid-cols-6 md:overflow-visible"
+					class={
+						isV2()
+							? "flex h-auto w-full justify-start gap-1 overflow-x-auto rounded-none bg-transparent p-0 lg:sticky lg:top-0 lg:flex-col lg:self-start lg:overflow-visible"
+							: "flex h-auto w-full justify-start gap-1 overflow-x-auto rounded-md p-1 md:grid md:grid-cols-6 md:overflow-visible"
+					}
 				>
-					<TabsTrigger class="min-h-11 shrink-0" type="button" value="jobs">
-						Jobs
-					</TabsTrigger>
-					<TabsTrigger class="min-h-11 shrink-0" type="button" value="ai">
-						AI
-					</TabsTrigger>
-					<TabsTrigger
-						class="min-h-11 shrink-0"
-						type="button"
-						value="downloads"
-					>
-						Downloads
-					</TabsTrigger>
-					<TabsTrigger class="min-h-11 shrink-0" type="button" value="storage">
-						Storage
-					</TabsTrigger>
-					<TabsTrigger class="min-h-11 shrink-0" type="button" value="media">
-						Media
-					</TabsTrigger>
-					<TabsTrigger class="min-h-11 shrink-0" type="button" value="logging">
-						Logging
-					</TabsTrigger>
+					<For each={SETTINGS_CATEGORIES}>
+						{(category) => {
+							const Icon = category.icon;
+							return (
+								<TabsTrigger
+									class={isV2() ? V2_CATEGORY_TABS_CLASS : "min-h-11 shrink-0"}
+									type="button"
+									value={category.value}
+								>
+									<V2CategoryLabel
+										description={category.description}
+										icon={<Icon aria-hidden="true" size={16} />}
+										label={category.label}
+									/>
+								</TabsTrigger>
+							);
+						}}
+					</For>
 				</TabsList>
 
-				<div class="mt-4 space-y-4 sm:mt-6 sm:space-y-6">
+				<div
+					class={
+						isV2() ? "min-w-0 space-y-6" : "mt-4 space-y-4 sm:mt-6 sm:space-y-6"
+					}
+				>
 					<TabsContent value="jobs">
-						<div class="space-y-4 rounded-md border p-3 sm:p-4">
+						<div class={sectionClass()}>
 							<h2 class="mb-4 font-semibold text-xl">Job Processing</h2>
 
 							<form.Field name="jobs.concurrency">
@@ -239,8 +321,21 @@ export function ConfigScreen(props: ConfigScreenProps) {
 					</TabsContent>
 
 					<TabsContent value="ai">
-						<div class="space-y-4 rounded-md border p-3 sm:p-4">
+						<div class={sectionClass()}>
 							<h2 class="mb-4 font-semibold text-xl">AI Service</h2>
+							<Show when={isV2()}>
+								<div class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface-muted)] px-3 py-2.5">
+									<div>
+										<div class="font-medium text-sm">Connection status</div>
+										<div class="text-[var(--v2-text-muted)] text-xs">
+											Health check API is not available yet.
+										</div>
+									</div>
+									<Button disabled size="sm" variant="outline">
+										Not checked
+									</Button>
+								</div>
+							</Show>
 							<form.Field name="ai.baseUrl">
 								{(field) => (
 									<div class="space-y-2">
@@ -290,7 +385,7 @@ export function ConfigScreen(props: ConfigScreenProps) {
 					</TabsContent>
 
 					<TabsContent value="downloads">
-						<div class="space-y-4 rounded-md border p-3 sm:p-4">
+						<div class={sectionClass()}>
 							<h2 class="mb-4 font-semibold text-xl">Downloads</h2>
 
 							<form.Field name="downloads.rateLimitEnabled">
@@ -339,7 +434,7 @@ export function ConfigScreen(props: ConfigScreenProps) {
 					</TabsContent>
 
 					<TabsContent value="storage">
-						<div class="space-y-4 rounded-md border p-3 sm:p-4">
+						<div class={sectionClass()}>
 							<h2 class="mb-4 font-semibold text-xl">Storage</h2>
 							<form.Field name="storage.thumbnailDir">
 								{(field) => (
@@ -399,7 +494,7 @@ export function ConfigScreen(props: ConfigScreenProps) {
 					</TabsContent>
 
 					<TabsContent value="media">
-						<div class="space-y-4 rounded-md border p-3 sm:p-4">
+						<div class={sectionClass()}>
 							<h2 class="mb-4 font-semibold text-xl">Media Extensions</h2>
 
 							<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
@@ -540,7 +635,7 @@ export function ConfigScreen(props: ConfigScreenProps) {
 					</TabsContent>
 
 					<TabsContent value="logging">
-						<div class="space-y-4 rounded-md border p-3 sm:p-4">
+						<div class={sectionClass()}>
 							<h2 class="mb-4 font-semibold text-xl">Logging</h2>
 							<form.Field name="logging.level">
 								{(field) => (
@@ -576,6 +671,74 @@ export function ConfigScreen(props: ConfigScreenProps) {
 					</TabsContent>
 				</div>
 			</Tabs>
+			<Show when={isV2()}>
+				<form.Subscribe
+					selector={(state) => ({
+						canSubmit: state.canSubmit,
+						isDirty: state.isDirty,
+						isSubmitting: state.isSubmitting,
+					})}
+				>
+					{(state) => (
+						<Show when={state().isDirty}>
+							<div class="sticky bottom-3 z-20 ml-auto flex w-fit items-center gap-2 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-2 shadow-lg backdrop-blur">
+								<span class="px-2 text-[var(--v2-text-muted)] text-sm">
+									Unsaved changes
+								</span>
+								<Button
+									disabled={state().isSubmitting}
+									onClick={() => {
+										setSubmitError(null);
+										form.reset(toFormValues(props.data));
+									}}
+									variant="outline"
+								>
+									Discard
+								</Button>
+								<Button
+									disabled={!state().canSubmit || state().isSubmitting}
+									onClick={() => {
+										void form.handleSubmit();
+									}}
+								>
+									{state().isSubmitting ? "Saving..." : "Save Changes"}
+								</Button>
+							</div>
+						</Show>
+					)}
+				</form.Subscribe>
+			</Show>
+			<AlertDialog
+				onOpenChange={(open) => {
+					const resolver = navigationBlocker();
+					if (!open && resolver.status === "blocked") {
+						resolver.reset?.();
+					}
+				}}
+				open={navigationBlocker().status === "blocked"}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>設定変更を破棄しますか？</AlertDialogTitle>
+						<AlertDialogDescription>
+							保存されていない変更があります。このページを離れると入力内容は失われます。
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>編集を続ける</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={() => {
+								const resolver = navigationBlocker();
+								if (resolver.status !== "blocked") return;
+								form.reset(toFormValues(props.data));
+								resolver.proceed?.();
+							}}
+						>
+							破棄して移動
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }
diff --git a/packages/ui/src/screens/config-state-screen.tsx b/packages/ui/src/screens/config-state-screen.tsx
index 3a86394c..7825cf47 100644
--- a/packages/ui/src/screens/config-state-screen.tsx
+++ b/packages/ui/src/screens/config-state-screen.tsx
@@ -4,6 +4,7 @@ import { ErrorState, OfflineState, QueryStatus } from "../async-state";
 import type { QueryUiState } from "../query-state";
 import { ConfigSkeleton, LoadingRegion, Skeleton } from "../skeleton";
 import { cn } from "../utils/cn";
+import { V2ManagementHeader } from "../v2/management-layout";
 import { ConfigScreen } from "./config-screen";
 
 export type ConfigStateScreenProps = {
@@ -13,14 +14,14 @@ export type ConfigStateScreenProps = {
 	onSubmit: (value: Partial<AppConfig>) => Promise<void>;
 	onSubmitSuccess?: () => void;
 	state: QueryUiState<AppConfig>;
+	variant?: "default" | "v2";
 };
 
 /** Shared server/Tauri query-state wrapper for the settings form. */
 export function ConfigStateScreen(props: ConfigStateScreenProps) {
 	const hasData = () => props.data !== undefined;
-
-	return (
-		<div class={cn("container mx-auto max-w-4xl p-3 sm:p-6", props.class)}>
+	const content = () => (
+		<>
 			<Show when={hasData()}>
 				<QueryStatus
 					class="mb-2"
@@ -38,21 +39,26 @@ export function ConfigStateScreen(props: ConfigStateScreenProps) {
 							data={data()}
 							onSubmit={props.onSubmit}
 							onSubmitSuccess={props.onSubmitSuccess}
+							variant={props.variant}
 						/>
 					)}
 				</Match>
 				<Match when={props.state.phase === "pending"}>
 					<LoadingRegion label="設定を読み込んでいます...">
-						<div class="mb-6 flex items-center justify-between">
-							<h1 class="font-bold text-3xl">Settings</h1>
-							<Skeleton class="h-10 w-32" />
-						</div>
+						<Show when={props.variant !== "v2"}>
+							<div class="mb-6 flex items-center justify-between">
+								<h1 class="font-bold text-3xl">Settings</h1>
+								<Skeleton class="h-10 w-32" />
+							</div>
+						</Show>
 						<ConfigSkeleton />
 					</LoadingRegion>
 				</Match>
 				<Match when={props.state.phase === "offline"}>
 					<div class="space-y-6">
-						<h1 class="font-bold text-3xl">Settings</h1>
+						<Show when={props.variant !== "v2"}>
+							<h1 class="font-bold text-3xl">Settings</h1>
+						</Show>
 						<OfflineState
 							description="接続が戻ったら、この画面から設定を再取得できます。"
 							onRetry={props.onRetry}
@@ -61,7 +67,9 @@ export function ConfigStateScreen(props: ConfigStateScreenProps) {
 				</Match>
 				<Match when={props.state.phase === "error"}>
 					<div class="space-y-6">
-						<h1 class="font-bold text-3xl">Settings</h1>
+						<Show when={props.variant !== "v2"}>
+							<h1 class="font-bold text-3xl">Settings</h1>
+						</Show>
 						<ErrorState
 							description="接続を確認して、もう一度お試しください。"
 							onRetry={props.onRetry}
@@ -70,6 +78,31 @@ export function ConfigStateScreen(props: ConfigStateScreenProps) {
 					</div>
 				</Match>
 			</Switch>
+		</>
+	);
+
+	if (props.variant === "v2") {
+		return (
+			<section class="flex h-full min-h-0 min-w-0 flex-col bg-[var(--v2-canvas)]">
+				<V2ManagementHeader
+					description="アプリケーション全体の動作と接続先を管理します。"
+					title="Settings"
+				/>
+				<div
+					class={cn(
+						"min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-4 sm:px-4 lg:px-6 lg:py-5 xl:px-8 [scrollbar-gutter:stable]",
+						props.class,
+					)}
+				>
+					{content()}
+				</div>
+			</section>
+		);
+	}
+
+	return (
+		<div class={cn("container mx-auto max-w-4xl p-3 sm:p-6", props.class)}>
+			{content()}
 		</div>
 	);
 }
diff --git a/packages/ui/src/screens/design-concept-screen.tsx b/packages/ui/src/screens/design-concept-screen.tsx
index fc72987f..47b11b89 100644
--- a/packages/ui/src/screens/design-concept-screen.tsx
+++ b/packages/ui/src/screens/design-concept-screen.tsx
@@ -1144,6 +1144,7 @@ function DesignToolbar(props: {
 			</div>
 			<div class="flex min-w-0 flex-wrap items-start gap-2">
 				<form
+					autocomplete="off"
 					class="relative min-w-64 flex-1"
 					onSubmit={(event) => {
 						event.preventDefault();
@@ -1189,6 +1190,8 @@ function DesignToolbar(props: {
 						</Show>
 						<Input
 							class="h-7 min-h-7 min-w-44 flex-1 border-0 bg-transparent px-1 py-0 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+							autocomplete="off"
+							enterkeyhint="search"
 							id="design-search-input"
 							onInput={(event) =>
 								props.onDraftChange(event.currentTarget.value)
diff --git a/packages/ui/src/screens/manager-screen.tsx b/packages/ui/src/screens/manager-screen.tsx
index f33b1058..596fce04 100644
--- a/packages/ui/src/screens/manager-screen.tsx
+++ b/packages/ui/src/screens/manager-screen.tsx
@@ -61,9 +61,15 @@ import {
 	SelectValue,
 } from "../select";
 import { CardGridSkeleton, LoadingRegion } from "../skeleton";
+import {
+	V2ManagerScreen,
+	type V2ManagerTransferActions,
+} from "./v2-manager-screen";
 
 export type ManagerScreenProps = {
 	manager: UseManagerPageResult;
+	transferActions?: V2ManagerTransferActions;
+	variant?: "legacy" | "v2";
 };
 
 const managerTabs: ManagerEntityType[] = [
@@ -102,6 +108,15 @@ function isCrudTab(tab: ManagerEntityType) {
 const ALL_SOURCES_OPTION = { id: "__all__", name: "All Sources" };
 
 export function ManagerScreen(props: ManagerScreenProps) {
+	if (props.variant === "v2") {
+		return (
+			<V2ManagerScreen
+				manager={props.manager}
+				transferActions={props.transferActions}
+			/>
+		);
+	}
+
 	const manager = () => props.manager;
 	const activeQueryState = () => {
 		const states = manager().queryStates();
diff --git a/packages/ui/src/screens/media-detail-screen.tsx b/packages/ui/src/screens/media-detail-screen.tsx
index 92c22894..ab2a1173 100644
--- a/packages/ui/src/screens/media-detail-screen.tsx
+++ b/packages/ui/src/screens/media-detail-screen.tsx
@@ -5,7 +5,15 @@ import type {
 	ThumbnailGeneratedEvent,
 } from "@solid-imager/core/domain/sources/events";
 import { createQuery, useQueryClient } from "@tanstack/solid-query";
-import { type Accessor, type JSX, Match, Show, Switch } from "solid-js";
+import {
+	type Accessor,
+	getOwner,
+	type JSX,
+	Match,
+	runWithOwner,
+	Show,
+	Switch,
+} from "solid-js";
 import { ErrorState, OfflineState, QueryStatus } from "../async-state";
 import {
 	type MediaSourceEventTransport,
@@ -15,6 +23,7 @@ import { toQueryUiState } from "../query-state";
 import { LoadingRegion, MediaDetailSkeleton } from "../skeleton";
 
 export type MediaDetailScreenProps = {
+	variant?: "default" | "v2";
 	mediaSourceId: Accessor<string>;
 	mediaId: Accessor<string>;
 	// biome-ignore lint/suspicious/noExplicitAny: library type mismatch between oRPC and solid-query
@@ -32,10 +41,19 @@ export type MediaDetailScreenProps = {
 		onUpdate: () => void,
 		sourceRootPath?: string,
 	) => JSX.Element;
+	renderHeader?: (
+		media: MediaDetails,
+		isUpdating: boolean,
+		onUpdate: () => void,
+		sourceRootPath?: string,
+	) => JSX.Element;
 };
 
 export function MediaDetailScreen(props: MediaDetailScreenProps) {
 	const queryClient = useQueryClient();
+	const owner = getOwner();
+	const renderOwned = (render: () => JSX.Element) =>
+		owner ? runWithOwner(owner, render) : render();
 
 	const mediaDetails = createQuery<MediaDetails>(() =>
 		props.mediaDetailsQueryOptions(props.mediaSourceId(), props.mediaId()),
@@ -86,7 +104,13 @@ export function MediaDetailScreen(props: MediaDetailScreenProps) {
 	});
 
 	return (
-		<div class="mx-auto w-full px-3 py-4 sm:px-4 lg:container lg:p-4">
+		<div
+			class={
+				props.variant === "v2"
+					? "flex h-full min-h-0 w-full flex-col bg-[var(--v2-canvas)]"
+					: "mx-auto w-full px-3 py-4 sm:px-4 lg:container lg:p-4"
+			}
+		>
 			<QueryStatus
 				fetchState={state().fetchState}
 				hasData={state().data !== undefined}
@@ -97,19 +121,56 @@ export function MediaDetailScreen(props: MediaDetailScreenProps) {
 				<Match when={state().phase === "data"}>
 					<Show keyed when={state().data}>
 						{(details) => (
-							<div class="flex flex-col gap-4 lg:h-[calc(100dvh-7.5rem)] lg:flex-row">
-								<div class="min-h-64 min-w-0 overflow-hidden rounded-lg lg:min-h-0 lg:flex-1">
-									{props.renderMediaViewer(details, props.sourceRootPath)}
-								</div>
-								<div class="min-w-0 shrink-0 lg:w-96 lg:max-w-[40%]">
-									{props.renderMediaSidebar(
-										details,
-										mediaDetails.isRefetching,
-										handleUpdate,
-										props.sourceRootPath,
+							<Show
+								fallback={
+									<div class="flex flex-col gap-4 lg:h-[calc(100dvh-7.5rem)] lg:flex-row">
+										<div class="min-h-64 min-w-0 overflow-hidden rounded-lg lg:min-h-0 lg:flex-1">
+											{renderOwned(() =>
+												props.renderMediaViewer(details, props.sourceRootPath),
+											)}
+										</div>
+										<div class="min-w-0 shrink-0 lg:w-96 lg:max-w-[40%]">
+											{renderOwned(() =>
+												props.renderMediaSidebar(
+													details,
+													mediaDetails.isRefetching,
+													handleUpdate,
+													props.sourceRootPath,
+												),
+											)}
+										</div>
+									</div>
+								}
+								when={props.variant === "v2"}
+							>
+								<div class="flex min-h-0 flex-1 flex-col">
+									{renderOwned(() =>
+										props.renderHeader?.(
+											details,
+											mediaDetails.isRefetching,
+											handleUpdate,
+											props.sourceRootPath,
+										),
 									)}
+									<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain lg:grid lg:grid-cols-[minmax(0,1fr)_22rem] lg:overflow-hidden [scrollbar-gutter:stable]">
+										<div class="min-w-0 lg:min-h-0 lg:overflow-hidden">
+											{renderOwned(() =>
+												props.renderMediaViewer(details, props.sourceRootPath),
+											)}
+										</div>
+										<div class="min-w-0 border-[var(--v2-border)] border-t lg:min-h-0 lg:border-t-0 lg:border-l">
+											{renderOwned(() =>
+												props.renderMediaSidebar(
+													details,
+													mediaDetails.isRefetching,
+													handleUpdate,
+													props.sourceRootPath,
+												),
+											)}
+										</div>
+									</div>
 								</div>
-							</div>
+							</Show>
 						)}
 					</Show>
 				</Match>
@@ -129,8 +190,11 @@ export function MediaDetailScreen(props: MediaDetailScreenProps) {
 					/>
 				</Match>
 				<Match when={state().phase === "pending"}>
-					<LoadingRegion label="メディア情報を読み込んでいます...">
-						<MediaDetailSkeleton />
+					<LoadingRegion
+						class={props.variant === "v2" ? "h-full min-h-0" : undefined}
+						label="メディア情報を読み込んでいます..."
+					>
+						<MediaDetailSkeleton variant={props.variant} />
 					</LoadingRegion>
 				</Match>
 			</Switch>
diff --git a/packages/ui/src/screens/search-screen.tsx b/packages/ui/src/screens/search-screen.tsx
index c0e683fa..404f76e9 100644
--- a/packages/ui/src/screens/search-screen.tsx
+++ b/packages/ui/src/screens/search-screen.tsx
@@ -14,12 +14,14 @@ import { MobileSearchFilterDialog } from "../mobile-search-filter-dialog";
 import { SearchControlPanel } from "../search-control-panel";
 import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
 import { SourceMediaGrid } from "../source-media-grid";
+import { V2SearchScreen } from "./v2-search-screen";
 
 export type SearchScreenNavActions = {
 	openMobileFilters: () => void;
 };
 
 export type SearchScreenProps = {
+	variant?: "default" | "v2";
 	page: UseSearchPageResult;
 	filterData: SearchPageFilterData;
 	sources: SafeMediaSource[] | undefined;
@@ -27,12 +29,20 @@ export type SearchScreenProps = {
 	onSelectSource: (id: string) => void;
 	presetClient: SourceMediaPagePresetClient;
 	renderNavActions?: (actions: SearchScreenNavActions) => JSX.Element;
-	renderMediaItem: (media: Media) => JSX.Element;
+	renderMediaItem: (
+		media: Media,
+		options?: { onPreviewSelect?: () => void; isPreviewSelected?: boolean },
+	) => JSX.Element;
+	renderMediaPreview?: (media: Media) => JSX.Element;
+	onOpenMediaDetail?: (media: Media) => void;
 	ssrGuard?: boolean;
 	enableVirtualization?: boolean;
 };
 
 export function SearchScreen(props: SearchScreenProps) {
+	if (props.variant === "v2") {
+		return <V2SearchScreen {...props} />;
+	}
 	const [isMounted, setIsMounted] = createSignal(false);
 	const [isMobileFilterOpen, setIsMobileFilterOpen] = createSignal(false);
 
diff --git a/packages/ui/src/screens/source-media-screen.tsx b/packages/ui/src/screens/source-media-screen.tsx
index 72b50017..702fdfca 100644
--- a/packages/ui/src/screens/source-media-screen.tsx
+++ b/packages/ui/src/screens/source-media-screen.tsx
@@ -21,8 +21,10 @@ import { MobileSearchFilterDialog } from "../mobile-search-filter-dialog";
 import { SearchControlPanel } from "../search-control-panel";
 import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
 import { SourceMediaGrid } from "../source-media-grid";
+import { V2SourceMediaScreen } from "./v2-source-media-screen";
 
 export type SourceMediaScreenProps = {
+	variant?: "default" | "v2";
 	page: UseSourceMediaPageResult;
 	mediaSourceName?: () => string | undefined;
 	/** Render navigation actions without giving them ownership of filter draft state. */
@@ -34,8 +36,12 @@ export type SourceMediaScreenProps = {
 			onContextMenu: () => void;
 			isBulkSelectMode?: boolean;
 			isSelected?: boolean;
+			onPreviewSelect?: () => void;
+			isPreviewSelected?: boolean;
 		},
 	) => JSX.Element;
+	renderMediaPreview?: (media: Media) => JSX.Element;
+	onOpenMediaDetail?: (media: Media) => void;
 	renderJobProgress?: (props: {
 		jobProgress: () =>
 			| import("@solid-imager/core/domain/sources/events").JobProgressEvent
@@ -71,6 +77,9 @@ export type SourceMediaScreenProps = {
 };
 
 export function SourceMediaScreen(props: SourceMediaScreenProps) {
+	if (props.variant === "v2") {
+		return <V2SourceMediaScreen {...props} />;
+	}
 	const [isMounted, setIsMounted] = createSignal(false);
 	const [isMobileFilterOpen, setIsMobileFilterOpen] = createSignal(false);
 	const page = () => props.page;
diff --git a/packages/ui/src/screens/v2-jobs-screen.tsx b/packages/ui/src/screens/v2-jobs-screen.tsx
new file mode 100644
index 00000000..09183ec0
--- /dev/null
+++ b/packages/ui/src/screens/v2-jobs-screen.tsx
@@ -0,0 +1,198 @@
+import Ban from "lucide-solid/icons/ban";
+import CircleAlert from "lucide-solid/icons/circle-alert";
+import CircleCheck from "lucide-solid/icons/circle-check";
+import Clock3 from "lucide-solid/icons/clock-3";
+import RefreshCw from "lucide-solid/icons/refresh-cw";
+import RotateCcw from "lucide-solid/icons/rotate-ccw";
+import { createSignal, For } from "solid-js";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Card, CardContent } from "../card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import {
+	V2_CATEGORY_TABS_CLASS,
+	V2CategoryLabel,
+	V2ManagementHeader,
+} from "../v2/management-layout";
+
+const JOB_FILTERS = [
+	{ description: "すべての処理", icon: Clock3, label: "All", value: "all" },
+	{
+		description: "実行中と待機中",
+		icon: RefreshCw,
+		label: "Active",
+		value: "active",
+	},
+	{
+		description: "確認が必要な処理",
+		icon: CircleAlert,
+		label: "Failed",
+		value: "failed",
+	},
+	{
+		description: "完了した処理",
+		icon: CircleCheck,
+		label: "Completed",
+		value: "completed",
+	},
+] as const;
+
+function JobsUnavailableState(props: { filterLabel: string }) {
+	return (
+		<Card class="rounded-md border-[var(--v2-border)] border-dashed bg-[var(--v2-surface)] shadow-none">
+			<CardContent class="flex min-h-64 flex-col items-center justify-center px-5 py-10 text-center">
+				<span class="flex size-11 items-center justify-center rounded-full bg-[var(--v2-surface-muted)] text-[var(--v2-text-muted)]">
+					<Clock3 aria-hidden="true" size={20} />
+				</span>
+				<h2 class="mt-4 font-semibold text-base text-[var(--v2-text)]">
+					{props.filterLabel} jobsはまだ表示できません
+				</h2>
+				<p class="mt-2 max-w-xl text-sm leading-6 text-[var(--v2-text-secondary)]">
+					現在のバックエンドはジョブイベントのみを配信しており、一覧・詳細・履歴を取得するAPIは未実装です。
+					実データを取得できるようになるまで、この画面では状態を推測して表示しません。
+				</p>
+				<Badge
+					class="mt-4 border-[var(--v2-border-strong)] bg-[var(--v2-surface-muted)] text-[var(--v2-text-secondary)]"
+					variant="outline"
+				>
+					Backend support required
+				</Badge>
+			</CardContent>
+		</Card>
+	);
+}
+
+function JobsInspectorPlaceholder() {
+	return (
+		<aside
+			aria-label="Job details"
+			class="hidden min-h-0 overflow-y-auto overscroll-contain border-[var(--v2-border)] border-l bg-[var(--v2-surface-subtle)] p-5 [scrollbar-gutter:stable] xl:block"
+		>
+			<div class="flex items-start justify-between gap-3">
+				<div>
+					<p class="text-xs text-[var(--v2-text-muted)]">Inspector</p>
+					<h2 class="mt-1 font-semibold text-base text-[var(--v2-text)]">
+						Job details
+					</h2>
+				</div>
+				<Badge
+					class="border-[var(--v2-border-strong)] text-[var(--v2-text-muted)]"
+					variant="outline"
+				>
+					Unavailable
+				</Badge>
+			</div>
+
+			<p class="mt-3 text-sm leading-6 text-[var(--v2-text-secondary)]">
+				一覧APIの実装後、選択したジョブの進捗・対象・失敗理由をここに表示します。
+			</p>
+
+			<dl class="mt-5 space-y-3 border-[var(--v2-border)] border-y py-4 text-xs">
+				<div class="flex justify-between gap-3">
+					<dt class="text-[var(--v2-text-muted)]">Status</dt>
+					<dd class="text-[var(--v2-text-secondary)]">—</dd>
+				</div>
+				<div class="flex justify-between gap-3">
+					<dt class="text-[var(--v2-text-muted)]">Source</dt>
+					<dd class="text-[var(--v2-text-secondary)]">—</dd>
+				</div>
+				<div class="flex justify-between gap-3">
+					<dt class="text-[var(--v2-text-muted)]">Started</dt>
+					<dd class="text-[var(--v2-text-secondary)]">—</dd>
+				</div>
+				<div class="flex justify-between gap-3">
+					<dt class="text-[var(--v2-text-muted)]">Job ID</dt>
+					<dd class="text-[var(--v2-text-secondary)]">—</dd>
+				</div>
+			</dl>
+
+			<div class="mt-5 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface-muted)] p-3">
+				<div class="flex items-start gap-2 text-sm text-[var(--v2-text-secondary)]">
+					<CircleAlert aria-hidden="true" class="mt-0.5 shrink-0" size={16} />
+					<p>再実行とキャンセル用APIも未実装のため、操作は無効です。</p>
+				</div>
+			</div>
+
+			<div class="mt-4 space-y-2">
+				<Button class="w-full" disabled variant="outline">
+					<RotateCcw aria-hidden="true" size={15} />
+					Retry job
+				</Button>
+				<Button class="w-full" disabled variant="outline">
+					<Ban aria-hidden="true" size={15} />
+					Cancel job
+				</Button>
+			</div>
+		</aside>
+	);
+}
+
+export function V2JobsScreen() {
+	const [activeFilter, setActiveFilter] = createSignal("all");
+
+	return (
+		<section class="flex h-full min-h-0 min-w-0 flex-col bg-[var(--v2-canvas)]">
+			<V2ManagementHeader
+				actions={
+					<div class="flex items-center gap-2">
+						<Badge
+							class="border-[var(--v2-warning)] bg-[var(--v2-warning-surface)] text-[var(--v2-warning)]"
+							variant="outline"
+						>
+							History API unavailable
+						</Badge>
+						<Button disabled size="sm" variant="outline">
+							<RefreshCw aria-hidden="true" size={14} />
+							Refresh
+						</Button>
+					</div>
+				}
+				description="バックグラウンド処理の進捗、失敗、履歴を確認します。"
+				title="Jobs"
+			/>
+
+			<div class="grid min-h-0 flex-1 xl:grid-cols-[minmax(0,1fr)_22rem]">
+				<div class="min-h-0 overflow-y-auto overscroll-contain px-3 py-4 sm:px-4 lg:px-6 lg:py-5 xl:px-8 [scrollbar-gutter:stable]">
+					<Tabs onChange={setActiveFilter} value={activeFilter()}>
+						<div class="grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)] xl:gap-8">
+							<TabsList
+								aria-label="Job status filter"
+								class="flex h-auto max-w-full justify-start gap-1 overflow-x-auto rounded-none bg-transparent p-0 lg:sticky lg:top-0 lg:flex-col lg:self-start lg:overflow-visible"
+							>
+								<For each={JOB_FILTERS}>
+									{(filter) => {
+										const Icon = filter.icon;
+										return (
+											<TabsTrigger
+												class={V2_CATEGORY_TABS_CLASS}
+												type="button"
+												value={filter.value}
+											>
+												<V2CategoryLabel
+													description={filter.description}
+													icon={<Icon aria-hidden="true" size={16} />}
+													label={filter.label}
+												/>
+											</TabsTrigger>
+										);
+									}}
+								</For>
+							</TabsList>
+							<div class="min-w-0">
+								<For each={JOB_FILTERS}>
+									{(filter) => (
+										<TabsContent class="mt-0" value={filter.value}>
+											<JobsUnavailableState filterLabel={filter.label} />
+										</TabsContent>
+									)}
+								</For>
+							</div>
+						</div>
+					</Tabs>
+				</div>
+
+				<JobsInspectorPlaceholder />
+			</div>
+		</section>
+	);
+}
diff --git a/packages/ui/src/screens/v2-manager-screen.tsx b/packages/ui/src/screens/v2-manager-screen.tsx
new file mode 100644
index 00000000..5450337b
--- /dev/null
+++ b/packages/ui/src/screens/v2-manager-screen.tsx
@@ -0,0 +1,1605 @@
+import type { Character } from "@solid-imager/core/domain/characters/schemas";
+import type { Ip } from "@solid-imager/core/domain/ips/schemas";
+import Bot from "lucide-solid/icons/bot";
+import CopyCheck from "lucide-solid/icons/copy-check";
+import Download from "lucide-solid/icons/download";
+import Folder from "lucide-solid/icons/folder";
+import Image from "lucide-solid/icons/image";
+import Pencil from "lucide-solid/icons/pencil";
+import Plus from "lucide-solid/icons/plus";
+import Search from "lucide-solid/icons/search";
+import Share2 from "lucide-solid/icons/share-2";
+import Trash2 from "lucide-solid/icons/trash-2";
+import Upload from "lucide-solid/icons/upload";
+import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "../alert-dialog";
+import {
+	EmptyState,
+	ErrorState,
+	OfflineState,
+	QueryStatus,
+	RetryButton,
+} from "../async-state";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Checkbox, CheckboxControl, CheckboxLabel } from "../checkbox";
+import {
+	Combobox,
+	ComboboxContent,
+	ComboboxControl,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxItemIndicator,
+	ComboboxItemLabel,
+	ComboboxTrigger,
+} from "../combobox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "../dialog";
+import type {
+	ManagerEntity,
+	ManagerEntityType,
+	UseManagerPageResult,
+} from "../hooks/use-manager-page";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Progress } from "../progress";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../select";
+import { LoadingRegion } from "../skeleton";
+import {
+	V2CategoryLabel,
+	V2ManagementHeader,
+	v2CategoryButtonClass,
+} from "../v2/management-layout";
+
+type ManagerCategory = {
+	description: string;
+	group: "Entities" | "Tools";
+	label: string;
+	value: V2ManagerCategory;
+};
+
+type V2ManagerCategory = ManagerEntityType | "transfer";
+
+export type V2ManagerTransferFormat = "ndjson" | "tar" | "lancedb";
+
+export type V2ManagerTransferActions = {
+	exportSource: (input: {
+		format: V2ManagerTransferFormat;
+		includeImages: boolean;
+		sourceId: string;
+	}) => Promise<void>;
+	importSource: (input: {
+		file: File;
+		format: V2ManagerTransferFormat;
+		sourceId: string;
+	}) => Promise<{ importedCount?: number }>;
+};
+
+const MANAGER_CATEGORIES: ManagerCategory[] = [
+	{
+		description: "Collections and work",
+		group: "Entities",
+		label: "Projects",
+		value: "projects",
+	},
+	{
+		description: "Series and franchises",
+		group: "Entities",
+		label: "IPs",
+		value: "ips",
+	},
+	{
+		description: "People and subjects",
+		group: "Entities",
+		label: "Characters",
+		value: "characters",
+	},
+	{
+		description: "Submit AI tag jobs",
+		group: "Tools",
+		label: "Batch tagging",
+		value: "tagging",
+	},
+	{
+		description: "Build CCIP features",
+		group: "Tools",
+		label: "Vector extraction",
+		value: "vectors",
+	},
+	{
+		description: "Review matching media",
+		group: "Tools",
+		label: "Duplicates",
+		value: "duplicates",
+	},
+	{
+		description: "Export and restore source data",
+		group: "Tools",
+		label: "Data transfer",
+		value: "transfer",
+	},
+];
+
+const ALL_SOURCES_OPTION = { id: "__all__", name: "All sources" };
+
+function isCrudCategory(value: V2ManagerCategory): value is ManagerEntityType {
+	return value === "projects" || value === "ips" || value === "characters";
+}
+
+function isCharacter(item: ManagerEntity): item is Character {
+	return "ips" in item;
+}
+
+function isIp(item: ManagerEntity): item is Ip {
+	return "source" in item;
+}
+
+function categoryLabel(value: V2ManagerCategory): string {
+	return (
+		MANAGER_CATEGORIES.find((category) => category.value === value)?.label ??
+		value
+	);
+}
+
+function singularLabel(value: ManagerEntityType): string {
+	switch (value) {
+		case "projects":
+			return "Project";
+		case "ips":
+			return "IP";
+		case "characters":
+			return "Character";
+		default:
+			return "Item";
+	}
+}
+
+function formatDate(value: Date | string): string {
+	return new Date(value).toLocaleDateString("ja-JP", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+}
+
+function formatBytes(bytes: number | null | undefined): string {
+	if (bytes == null) return "—";
+	if (bytes < 1024) return `${bytes} B`;
+	return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+function ManagerCategoryIcon(props: { value: V2ManagerCategory }) {
+	switch (props.value) {
+		case "projects":
+			return <Folder aria-hidden="true" size={16} />;
+		case "ips":
+			return <CopyCheck aria-hidden="true" size={16} />;
+		case "characters":
+			return <Image aria-hidden="true" size={16} />;
+		case "tagging":
+			return <Bot aria-hidden="true" size={16} />;
+		case "vectors":
+			return <Share2 aria-hidden="true" size={16} />;
+		case "duplicates":
+			return <CopyCheck aria-hidden="true" size={16} />;
+		case "transfer":
+			return <Share2 aria-hidden="true" size={16} />;
+	}
+}
+
+function ManagerCategoryNavigation(props: {
+	active: V2ManagerCategory;
+	compact?: boolean;
+	onChange: (value: V2ManagerCategory) => void;
+}) {
+	if (props.compact) {
+		return (
+			<nav
+				aria-label="Manager categories"
+				class="sticky top-0 z-10 flex gap-1 overflow-x-auto border-[var(--v2-border)] border-b bg-[var(--v2-canvas)]/95 px-3 py-2 backdrop-blur lg:hidden"
+			>
+				<For each={MANAGER_CATEGORIES}>
+					{(category) => (
+						<Button
+							aria-current={
+								props.active === category.value ? "page" : undefined
+							}
+							class={`min-h-11 shrink-0 gap-2.5 px-2.5 ${
+								props.active === category.value
+									? "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
+									: "text-[var(--v2-text-secondary)]"
+							}`}
+							onClick={() => props.onChange(category.value)}
+							variant="ghost"
+						>
+							<V2CategoryLabel
+								description={category.description}
+								icon={<ManagerCategoryIcon value={category.value} />}
+								label={category.label}
+							/>
+						</Button>
+					)}
+				</For>
+			</nav>
+		);
+	}
+
+	return (
+		<nav aria-label="Manager categories" class="hidden lg:block">
+			<div class="sticky top-5 space-y-5">
+				<For each={["Entities", "Tools"] as const}>
+					{(group) => (
+						<div>
+							<p class="mb-1 px-2.5 font-medium text-[10px] uppercase tracking-[0.12em] text-[var(--v2-text-muted)]">
+								{group}
+							</p>
+							<div class="space-y-0.5">
+								<For
+									each={MANAGER_CATEGORIES.filter(
+										(category) => category.group === group,
+									)}
+								>
+									{(category) => (
+										<button
+											aria-current={
+												props.active === category.value ? "page" : undefined
+											}
+											class={v2CategoryButtonClass(
+												props.active === category.value,
+											)}
+											onClick={() => props.onChange(category.value)}
+											type="button"
+										>
+											<V2CategoryLabel
+												description={category.description}
+												icon={<ManagerCategoryIcon value={category.value} />}
+												label={category.label}
+											/>
+										</button>
+									)}
+								</For>
+							</div>
+						</div>
+					)}
+				</For>
+			</div>
+		</nav>
+	);
+}
+
+function ManagerTableSkeleton() {
+	return (
+		<LoadingRegion label="管理データを読み込んでいます...">
+			<div class="overflow-hidden rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)]">
+				<div class="h-9 animate-pulse bg-[var(--v2-surface-muted)] motion-reduce:animate-none" />
+				<For each={[1, 2, 3, 4, 5]}>
+					{() => (
+						<div class="grid h-14 grid-cols-[2fr_3fr_1fr] gap-4 border-[var(--v2-border)] border-t px-4 py-3">
+							<span class="rounded bg-[var(--v2-surface-muted)]" />
+							<span class="rounded bg-[var(--v2-surface-muted)]" />
+							<span class="rounded bg-[var(--v2-surface-muted)]" />
+						</div>
+					)}
+				</For>
+			</div>
+		</LoadingRegion>
+	);
+}
+
+function relationSummary(item: ManagerEntity): string {
+	if (isCharacter(item)) {
+		return item.ips.length > 0 ? item.ips.map((ip) => ip.name).join(", ") : "—";
+	}
+	if (isIp(item)) {
+		return item.source || "—";
+	}
+	return "—";
+}
+
+function EntityInspector(props: {
+	item: ManagerEntity;
+	manager: UseManagerPageResult;
+}) {
+	const active = () => props.manager.activeTab();
+	return (
+		<aside
+			aria-label="選択中の項目"
+			class="hidden self-start rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-4 2xl:block"
+		>
+			<p class="text-xs text-[var(--v2-text-muted)]">
+				Selected {singularLabel(active())}
+			</p>
+			<h3 class="mt-1 break-words font-semibold text-base text-[var(--v2-text)]">
+				{props.item.name}
+			</h3>
+			<p class="mt-2 text-xs leading-5 text-[var(--v2-text-secondary)]">
+				{props.item.description || "No description"}
+			</p>
+			<dl class="mt-4 space-y-3 border-[var(--v2-border)] border-y py-4 text-xs">
+				<div class="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
+					<dt class="text-[var(--v2-text-muted)]">ID</dt>
+					<dd class="break-all text-[var(--v2-text)]">{props.item.id}</dd>
+				</div>
+				<div class="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
+					<dt class="text-[var(--v2-text-muted)]">Updated</dt>
+					<dd class="text-[var(--v2-text)]">
+						{formatDate(props.item.updatedAt)}
+					</dd>
+				</div>
+				<Show when={isCharacter(props.item) || isIp(props.item)}>
+					<div class="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
+						<dt class="text-[var(--v2-text-muted)]">
+							{isCharacter(props.item) ? "IPs" : "Source"}
+						</dt>
+						<dd class="break-words text-[var(--v2-text)]">
+							{relationSummary(props.item)}
+						</dd>
+					</div>
+				</Show>
+			</dl>
+			<div class="mt-4 grid grid-cols-2 gap-2">
+				<Button
+					aria-label={`${props.item.name}を編集`}
+					onClick={() => props.manager.openEditDialog(props.item)}
+					variant="outline"
+				>
+					<Pencil aria-hidden="true" size={14} />
+					Edit
+				</Button>
+				<Button
+					aria-label={`${props.item.name}を削除`}
+					class="text-destructive"
+					onClick={() => {
+						props.manager.setItemToDelete(props.item);
+						props.manager.setIsDeleteDialogOpen(true);
+					}}
+					variant="outline"
+				>
+					<Trash2 aria-hidden="true" size={14} />
+					Delete
+				</Button>
+			</div>
+		</aside>
+	);
+}
+
+function EntityTablePanel(props: {
+	manager: UseManagerPageResult;
+	query: string;
+	selectedId: string | null;
+	onQueryChange: (value: string) => void;
+	onSelect: (id: string) => void;
+}) {
+	const active = () => props.manager.activeTab();
+	const items = createMemo(() => {
+		const normalized = props.query.trim().toLocaleLowerCase();
+		const activeItems = props.manager.getActiveItems();
+		if (!normalized) return activeItems;
+		return activeItems.filter((item) =>
+			`${item.name} ${item.description ?? ""} ${relationSummary(item)}`
+				.toLocaleLowerCase()
+				.includes(normalized),
+		);
+	});
+	const selectedItem = createMemo(
+		() => items().find((item) => item.id === props.selectedId) ?? items()[0],
+	);
+
+	return (
+		<div class="min-w-0">
+			<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+				<div>
+					<h2 class="font-semibold text-lg text-[var(--v2-text)]">
+						{categoryLabel(active())}
+					</h2>
+					<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+						Create, review, and maintain {categoryLabel(active()).toLowerCase()}
+						.
+					</p>
+				</div>
+				<Button
+					class="w-full sm:w-auto"
+					onClick={props.manager.openCreateDialog}
+				>
+					<Plus aria-hidden="true" size={15} />
+					New {singularLabel(active())}
+				</Button>
+			</div>
+
+			<div class="grid min-w-0 gap-4 2xl:grid-cols-[minmax(0,1fr)_20rem]">
+				<div class="min-w-0">
+					<div class="relative mb-3">
+						<Search
+							aria-hidden="true"
+							class="absolute top-1/2 left-3 -translate-y-1/2 text-[var(--v2-text-muted)]"
+							size={15}
+						/>
+						<Input
+							aria-label={`${categoryLabel(active())}を検索`}
+							class="h-9 bg-[var(--v2-surface)] pl-9 shadow-none"
+							onInput={(event) =>
+								props.onQueryChange(event.currentTarget.value)
+							}
+							placeholder={`Search ${categoryLabel(active()).toLowerCase()}...`}
+							value={props.query}
+						/>
+					</div>
+
+					<Show
+						fallback={
+							<EmptyState
+								class="min-h-52"
+								description="検索条件を変更するか、新しい項目を作成してください。"
+								title={`${categoryLabel(active())}が見つかりません`}
+							>
+								<Button onClick={props.manager.openCreateDialog}>
+									New {singularLabel(active())}
+								</Button>
+							</EmptyState>
+						}
+						when={items().length > 0}
+					>
+						<div class="overflow-x-auto rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] [scrollbar-gutter:stable]">
+							<table class="w-full min-w-[46rem] border-collapse text-left text-sm">
+								<caption class="sr-only">
+									{categoryLabel(active())}の一覧。{items().length}件。
+								</caption>
+								<thead class="bg-[var(--v2-surface-muted)] text-xs text-[var(--v2-text-muted)]">
+									<tr>
+										<th class="px-3 py-2 font-medium" scope="col">
+											Name
+										</th>
+										<th class="px-3 py-2 font-medium" scope="col">
+											Description
+										</th>
+										<th class="px-3 py-2 font-medium" scope="col">
+											{active() === "characters"
+												? "IPs"
+												: active() === "ips"
+													? "Source"
+													: "Status"}
+										</th>
+										<th class="px-3 py-2 font-medium" scope="col">
+											Updated
+										</th>
+										<th class="px-3 py-2 text-right font-medium" scope="col">
+											Actions
+										</th>
+									</tr>
+								</thead>
+								<tbody class="divide-y divide-[var(--v2-border)]">
+									<For each={items()}>
+										{(item) => {
+											const selected = () => selectedItem()?.id === item.id;
+											return (
+												<tr
+													class={
+														selected()
+															? "bg-[var(--v2-surface-selected)]"
+															: "hover:bg-[var(--v2-surface-muted)]"
+													}
+												>
+													<th class="p-0 font-normal" scope="row">
+														<button
+															aria-pressed={selected()}
+															class="block min-h-12 w-full px-3 py-2 text-left font-medium text-[var(--v2-text)] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--v2-focus)]"
+															onClick={() => props.onSelect(item.id)}
+															type="button"
+														>
+															<span class="block max-w-52 truncate">
+																{item.name}
+															</span>
+														</button>
+													</th>
+													<td class="max-w-[28rem] px-3 py-2 text-xs text-[var(--v2-text-secondary)]">
+														<span class="line-clamp-2">
+															{item.description || "No description"}
+														</span>
+													</td>
+													<td class="max-w-52 px-3 py-2 text-xs text-[var(--v2-text-secondary)]">
+														<span class="block truncate">
+															{active() === "projects"
+																? "Active"
+																: relationSummary(item)}
+														</span>
+													</td>
+													<td class="whitespace-nowrap px-3 py-2 text-xs text-[var(--v2-text-muted)]">
+														{formatDate(item.updatedAt)}
+													</td>
+													<td class="px-3 py-2">
+														<div class="flex justify-end gap-1">
+															<Button
+																aria-label={`${item.name}を編集`}
+																class="size-8 p-0"
+																onClick={() =>
+																	props.manager.openEditDialog(item)
+																}
+																size="icon"
+																variant="ghost"
+															>
+																<Pencil aria-hidden="true" size={14} />
+															</Button>
+															<Button
+																aria-label={`${item.name}を削除`}
+																class="size-8 p-0 text-destructive"
+																onClick={() => {
+																	props.manager.setItemToDelete(item);
+																	props.manager.setIsDeleteDialogOpen(true);
+																}}
+																size="icon"
+																variant="ghost"
+															>
+																<Trash2 aria-hidden="true" size={14} />
+															</Button>
+														</div>
+													</td>
+												</tr>
+											);
+										}}
+									</For>
+								</tbody>
+							</table>
+						</div>
+						<p
+							class="mt-2 text-xs text-[var(--v2-text-muted)]"
+							aria-live="polite"
+						>
+							{items().length} items
+						</p>
+					</Show>
+				</div>
+
+				<Show when={selectedItem()}>
+					{(item) => <EntityInspector item={item()} manager={props.manager} />}
+				</Show>
+			</div>
+		</div>
+	);
+}
+
+function SourceSelect(props: {
+	manager: UseManagerPageResult;
+	onChange: (id: string | undefined) => void;
+	value: string | undefined;
+}) {
+	return (
+		<Select
+			itemComponent={(selectProps) => (
+				<SelectItem item={selectProps.item}>
+					{selectProps.item.rawValue.name}
+				</SelectItem>
+			)}
+			onChange={(value) => props.onChange(value?.id)}
+			options={props.manager.sources()}
+			optionTextValue="name"
+			optionValue="id"
+			placeholder="All sources"
+			value={
+				props.value
+					? props.manager.sources().find((source) => source.id === props.value)
+					: null
+			}
+		>
+			<SelectTrigger class="w-full bg-[var(--v2-surface)]">
+				<SelectValue<unknown>>
+					{(state) => {
+						const selected = state.selectedOption();
+						return selected &&
+							typeof selected === "object" &&
+							"name" in selected
+							? (selected as { name: string }).name
+							: "All sources";
+					}}
+				</SelectValue>
+			</SelectTrigger>
+			<SelectContent />
+		</Select>
+	);
+}
+
+function BatchToolPanel(props: {
+	kind: "tagging" | "vectors";
+	manager: UseManagerPageResult;
+}) {
+	const [pendingAction, setPendingAction] = createSignal<
+		"scan" | "start" | null
+	>(null);
+	const isVector = () => props.kind === "vectors";
+	const runScan = async () => {
+		if (pendingAction()) return;
+		setPendingAction("scan");
+		try {
+			await props.manager.handleScan();
+		} finally {
+			setPendingAction(null);
+		}
+	};
+	const runStart = async () => {
+		if (pendingAction()) return;
+		setPendingAction("start");
+		try {
+			if (isVector()) {
+				await props.manager.handleStartBatchCcipExtraction();
+			} else {
+				await props.manager.handleStartBatchTagging();
+			}
+		} finally {
+			setPendingAction(null);
+		}
+	};
+
+	return (
+		<div class="space-y-5">
+			<div>
+				<h2 class="font-semibold text-lg text-[var(--v2-text)]">
+					{isVector() ? "Vector extraction" : "Batch tagging"}
+				</h2>
+				<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+					{isVector()
+						? "Create CCIP character embeddings for similarity search."
+						: "Analyze media and submit AI tagging jobs."}
+				</p>
+			</div>
+
+			<section
+				aria-labelledby={`${props.kind}-options-title`}
+				class="border-[var(--v2-border)] border-y bg-[var(--v2-surface)] py-4 sm:rounded-md sm:border sm:p-4"
+			>
+				<h3 class="sr-only" id={`${props.kind}-options-title`}>
+					Job options
+				</h3>
+				<div class="grid gap-4 lg:grid-cols-2">
+					<div class="space-y-1.5">
+						<Label>Target source</Label>
+						<SourceSelect
+							manager={props.manager}
+							onChange={props.manager.setSelectedSourceId}
+							value={props.manager.selectedSourceId()}
+						/>
+						<p class="text-xs text-[var(--v2-text-muted)]">
+							Leave empty to process all sources.
+						</p>
+					</div>
+					<div class="space-y-2">
+						<Label>Existing results</Label>
+						<Checkbox
+							checked={props.manager.forceRetag()}
+							class="flex min-h-9 items-center gap-2"
+							onChange={props.manager.setForceRetag}
+						>
+							<CheckboxControl />
+							<CheckboxLabel>
+								{isVector() ? "Force re-extraction" : "Force re-tagging"}
+							</CheckboxLabel>
+						</Checkbox>
+						<p class="text-xs text-[var(--v2-text-muted)]">
+							When disabled, processed media is skipped.
+						</p>
+					</div>
+				</div>
+				<div class="mt-4 flex flex-col justify-end gap-2 border-[var(--v2-border)] border-t pt-4 sm:flex-row">
+					<Button
+						class="w-full sm:w-auto"
+						disabled={pendingAction() !== null || !!props.manager.activeJobId()}
+						onClick={() => void runScan()}
+						variant="outline"
+					>
+						{pendingAction() === "scan" ? "Scanning..." : "Scan targets"}
+					</Button>
+					<Button
+						class="w-full sm:w-auto"
+						disabled={pendingAction() !== null || !!props.manager.activeJobId()}
+						onClick={() => void runStart()}
+					>
+						{pendingAction() === "start"
+							? "Submitting..."
+							: isVector()
+								? "Start extraction"
+								: "Start tagging"}
+					</Button>
+				</div>
+			</section>
+
+			<Show when={props.manager.taggingStatus() || props.manager.jobProgress()}>
+				<section
+					aria-live="polite"
+					class="space-y-3 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-4"
+				>
+					<div class="flex flex-wrap items-center justify-between gap-2">
+						<h3 class="font-medium text-sm">Current run</h3>
+						<Badge variant="secondary">
+							{props.manager.activeJobId() ? "Running" : "Status"}
+						</Badge>
+					</div>
+					<p class="text-xs text-[var(--v2-text-secondary)]">
+						{props.manager.taggingStatus()}
+					</p>
+					<Show when={props.manager.jobProgress()}>
+						{(progress) => (
+							<div class="space-y-2">
+								<div class="flex justify-between text-xs text-[var(--v2-text-muted)]">
+									<span>Progress</span>
+									<span>
+										{progress().processed} / {progress().total}
+									</span>
+								</div>
+								<Progress
+									class="h-2"
+									value={
+										progress().total > 0
+											? (progress().processed / progress().total) * 100
+											: 0
+									}
+								/>
+							</div>
+						)}
+					</Show>
+				</section>
+			</Show>
+		</div>
+	);
+}
+
+function DuplicateToolPanel(props: { manager: UseManagerPageResult }) {
+	const [isScanning, setIsScanning] = createSignal(false);
+	const scan = async () => {
+		if (isScanning()) return;
+		setIsScanning(true);
+		try {
+			await props.manager.handleScanDuplicates();
+		} finally {
+			setIsScanning(false);
+		}
+	};
+
+	return (
+		<div class="space-y-5">
+			<div>
+				<h2 class="font-semibold text-lg text-[var(--v2-text)]">
+					Duplicate detection
+				</h2>
+				<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+					Find matching media and choose one item to keep in each group.
+				</p>
+			</div>
+
+			<section class="border-[var(--v2-border)] border-y bg-[var(--v2-surface)] py-4 sm:rounded-md sm:border sm:p-4">
+				<div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
+					<div class="space-y-1.5">
+						<Label>Target source</Label>
+						<Select
+							itemComponent={(selectProps) => (
+								<SelectItem item={selectProps.item}>
+									{selectProps.item.rawValue.name}
+								</SelectItem>
+							)}
+							onChange={(value) =>
+								props.manager.setDuplicateSourceId(
+									value?.id === ALL_SOURCES_OPTION.id ? undefined : value?.id,
+								)
+							}
+							options={[ALL_SOURCES_OPTION, ...props.manager.sources()]}
+							optionTextValue="name"
+							optionValue="id"
+							value={
+								props.manager.duplicateSourceId()
+									? props.manager
+											.sources()
+											.find(
+												(source) =>
+													source.id === props.manager.duplicateSourceId(),
+											)
+									: ALL_SOURCES_OPTION
+							}
+						>
+							<SelectTrigger class="w-full bg-[var(--v2-surface)]">
+								<SelectValue<unknown>>
+									{(state) => {
+										const selected = state.selectedOption();
+										return selected &&
+											typeof selected === "object" &&
+											"name" in selected
+											? (selected as { name: string }).name
+											: "All sources";
+									}}
+								</SelectValue>
+							</SelectTrigger>
+							<SelectContent />
+						</Select>
+					</div>
+					<Button
+						class="w-full lg:w-auto"
+						disabled={isScanning()}
+						onClick={() => void scan()}
+					>
+						{isScanning() ? "Scanning..." : "Scan for duplicates"}
+					</Button>
+				</div>
+				<Show when={props.manager.duplicateStatus()}>
+					<p
+						aria-live="polite"
+						class="mt-3 text-xs text-[var(--v2-text-secondary)]"
+					>
+						{props.manager.duplicateStatus()}
+					</p>
+				</Show>
+			</section>
+
+			<Show when={props.manager.duplicateGroups().length > 0}>
+				<div class="flex flex-col gap-3 border-[var(--v2-border)] border-b pb-3 sm:flex-row sm:items-center sm:justify-between">
+					<p class="font-medium text-sm">
+						{props.manager.duplicateGroups().length} duplicate groups
+					</p>
+					<div class="grid grid-cols-2 gap-2 sm:flex">
+						<Button
+							onClick={props.manager.selectKeepOldest}
+							size="sm"
+							variant="outline"
+						>
+							Keep oldest
+						</Button>
+						<Button
+							onClick={props.manager.selectKeepLargest}
+							size="sm"
+							variant="outline"
+						>
+							Keep largest
+						</Button>
+						<Button
+							class="col-span-2 sm:col-auto"
+							disabled={props.manager.deleteCount() === 0}
+							onClick={props.manager.handleDeleteDuplicates}
+							variant="destructive"
+						>
+							Delete {props.manager.deleteCount()}
+						</Button>
+					</div>
+				</div>
+
+				<div class="space-y-4">
+					<For each={props.manager.duplicateGroups()}>
+						{(group, index) => (
+							<div class="overflow-x-auto rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] [scrollbar-gutter:stable]">
+								<table class="w-full min-w-[42rem] border-collapse text-left text-xs">
+									<caption class="px-3 py-2 text-left font-medium text-sm text-[var(--v2-text)]">
+										Group {index() + 1} · {group.media.length} items
+									</caption>
+									<thead class="border-[var(--v2-border)] border-t bg-[var(--v2-surface-muted)] text-[var(--v2-text-muted)]">
+										<tr>
+											<th class="px-3 py-2 font-medium" scope="col">
+												Preview
+											</th>
+											<th class="px-3 py-2 font-medium" scope="col">
+												File
+											</th>
+											<th class="px-3 py-2 font-medium" scope="col">
+												Resolution
+											</th>
+											<th class="px-3 py-2 font-medium" scope="col">
+												Size
+											</th>
+											<th class="px-3 py-2 font-medium" scope="col">
+												Created
+											</th>
+											<th class="px-3 py-2 text-right font-medium" scope="col">
+												Decision
+											</th>
+										</tr>
+									</thead>
+									<tbody class="divide-y divide-[var(--v2-border)]">
+										<For each={group.media}>
+											{(item) => {
+												const keep = () => props.manager.keepIds().has(item.id);
+												const thumbnail = () =>
+													`/api/sources/${item.mediaSourceId}/thumbnail/${item.id}?t=${new Date(item.modifiedAt).getTime()}`;
+												return (
+													<tr
+														class={
+															keep()
+																? "bg-[var(--v2-surface-selected)]"
+																: undefined
+														}
+													>
+														<td class="px-3 py-2">
+															<img
+																alt=""
+																class="h-10 w-14 rounded object-cover"
+																loading="lazy"
+																src={thumbnail()}
+															/>
+														</td>
+														<th
+															class="max-w-64 px-3 py-2 font-medium"
+															scope="row"
+														>
+															<span
+																class="block truncate"
+																title={item.fileName}
+															>
+																{item.fileName}
+															</span>
+														</th>
+														<td class="whitespace-nowrap px-3 py-2 text-[var(--v2-text-secondary)]">
+															{item.width} × {item.height}
+														</td>
+														<td class="whitespace-nowrap px-3 py-2 text-[var(--v2-text-secondary)]">
+															{formatBytes(item.fileSize)}
+														</td>
+														<td class="whitespace-nowrap px-3 py-2 text-[var(--v2-text-secondary)]">
+															{formatDate(item.createdAt)}
+														</td>
+														<td class="px-3 py-2 text-right">
+															<Button
+																aria-label={`${item.fileName}を保持`}
+																aria-pressed={keep()}
+																onClick={() =>
+																	props.manager.setKeepForGroup(
+																		group.id,
+																		item.id,
+																	)
+																}
+																size="sm"
+																variant={keep() ? "default" : "outline"}
+															>
+																{keep() ? "Keep" : "Keep this"}
+															</Button>
+														</td>
+													</tr>
+												);
+											}}
+										</For>
+									</tbody>
+								</table>
+							</div>
+						)}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+}
+
+function DataTransferPanel(props: {
+	actions: V2ManagerTransferActions;
+	manager: UseManagerPageResult;
+}) {
+	const [sourceId, setSourceId] = createSignal<string>();
+	const [exportFormat, setExportFormat] =
+		createSignal<V2ManagerTransferFormat>("ndjson");
+	const [importFormat, setImportFormat] =
+		createSignal<V2ManagerTransferFormat>("ndjson");
+	const [includeImages, setIncludeImages] = createSignal(false);
+	const [pending, setPending] = createSignal<"export" | "import" | null>(null);
+	let fileInput: HTMLInputElement | undefined;
+
+	const selectedSource = () =>
+		props.manager.sources().find((source) => source.id === sourceId());
+	const accept = () => {
+		switch (importFormat()) {
+			case "ndjson":
+				return ".ndjson,application/x-ndjson";
+			case "tar":
+				return ".tar,.zip,application/x-tar,application/zip";
+			case "lancedb":
+				return ".tar,application/x-tar";
+		}
+	};
+	const runExport = async () => {
+		const selectedId = sourceId();
+		if (!selectedId || pending()) return;
+		setPending("export");
+		try {
+			await props.actions.exportSource({
+				format: exportFormat(),
+				includeImages: includeImages(),
+				sourceId: selectedId,
+			});
+		} finally {
+			setPending(null);
+		}
+	};
+	const importFile = async (file: File) => {
+		const selectedId = sourceId();
+		if (!selectedId || pending()) return;
+		setPending("import");
+		try {
+			await props.actions.importSource({
+				file,
+				format: importFormat(),
+				sourceId: selectedId,
+			});
+		} finally {
+			setPending(null);
+			if (fileInput) fileInput.value = "";
+		}
+	};
+
+	return (
+		<div class="space-y-5">
+			<div>
+				<h2 class="font-semibold text-lg text-[var(--v2-text)]">
+					Data transfer
+				</h2>
+				<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+					Export a portable source dump or restore one into an existing source.
+				</p>
+			</div>
+
+			<section class="space-y-1.5 border-[var(--v2-border)] border-y bg-[var(--v2-surface)] py-4 sm:rounded-md sm:border sm:p-4">
+				<Label>Target source</Label>
+				<Select
+					itemComponent={(selectProps) => (
+						<SelectItem item={selectProps.item}>
+							{selectProps.item.rawValue.name}
+						</SelectItem>
+					)}
+					onChange={(source) => setSourceId(source?.id)}
+					options={props.manager.sources()}
+					optionTextValue="name"
+					optionValue="id"
+					placeholder="Choose a source"
+					value={selectedSource() ?? null}
+				>
+					<SelectTrigger class="w-full bg-[var(--v2-surface)] sm:max-w-xl">
+						<SelectValue<unknown>>
+							{() => selectedSource()?.name ?? "Choose a source"}
+						</SelectValue>
+					</SelectTrigger>
+					<SelectContent />
+				</Select>
+				<p class="text-xs text-[var(--v2-text-muted)]">
+					Restore writes into the selected source. Existing source configuration
+					is not replaced.
+				</p>
+			</section>
+
+			<div class="grid gap-4 xl:grid-cols-2">
+				<section class="rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-4">
+					<div class="flex items-start gap-3">
+						<span class="rounded-md bg-[var(--v2-surface-muted)] p-2 text-[var(--v2-primary)]">
+							<Download aria-hidden="true" size={17} />
+						</span>
+						<div>
+							<h3 class="font-medium text-sm text-[var(--v2-text)]">Export</h3>
+							<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+								Download metadata, media archive, or LanceDB data.
+							</p>
+						</div>
+					</div>
+					<div class="mt-4 space-y-4">
+						<div class="space-y-1.5">
+							<Label>Format</Label>
+							<Select
+								onChange={(value) => value && setExportFormat(value)}
+								options={["ndjson", "tar", "lancedb"] as const}
+								value={exportFormat()}
+							>
+								<SelectTrigger class="w-full">
+									<SelectValue<string>>
+										{(state) =>
+											state.selectedOption() === "ndjson"
+												? "NDJSON metadata"
+												: state.selectedOption() === "tar"
+													? "TAR archive"
+													: "LanceDB TAR"
+										}
+									</SelectValue>
+								</SelectTrigger>
+								<SelectContent />
+							</Select>
+						</div>
+						<Show when={exportFormat() === "lancedb"}>
+							<Checkbox
+								checked={includeImages()}
+								class="flex min-h-9 items-center gap-2"
+								onChange={setIncludeImages}
+							>
+								<CheckboxControl />
+								<CheckboxLabel>Include original media</CheckboxLabel>
+							</Checkbox>
+						</Show>
+						<Button
+							class="w-full sm:w-auto"
+							disabled={!sourceId() || pending() !== null}
+							onClick={() => void runExport()}
+						>
+							{pending() === "export" ? "Preparing..." : "Download dump"}
+						</Button>
+					</div>
+				</section>
+
+				<section class="rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-4">
+					<div class="flex items-start gap-3">
+						<span class="rounded-md bg-[var(--v2-surface-muted)] p-2 text-[var(--v2-primary)]">
+							<Upload aria-hidden="true" size={17} />
+						</span>
+						<div>
+							<h3 class="font-medium text-sm text-[var(--v2-text)]">Restore</h3>
+							<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+								Choose the dump type before selecting its file.
+							</p>
+						</div>
+					</div>
+					<div class="mt-4 space-y-4">
+						<div class="space-y-1.5">
+							<Label>Format</Label>
+							<Select
+								onChange={(value) => value && setImportFormat(value)}
+								options={["ndjson", "tar", "lancedb"] as const}
+								value={importFormat()}
+							>
+								<SelectTrigger class="w-full">
+									<SelectValue<string>>
+										{(state) =>
+											state.selectedOption() === "ndjson"
+												? "NDJSON metadata"
+												: state.selectedOption() === "tar"
+													? "TAR archive"
+													: "LanceDB TAR"
+										}
+									</SelectValue>
+								</SelectTrigger>
+								<SelectContent />
+							</Select>
+						</div>
+						<Input
+							accept={accept()}
+							aria-label="復元するダンプファイル"
+							class="sr-only"
+							onChange={(event) => {
+								const file = event.currentTarget.files?.[0];
+								if (file) void importFile(file);
+							}}
+							ref={fileInput}
+							type="file"
+						/>
+						<Button
+							class="w-full sm:w-auto"
+							disabled={!sourceId() || pending() !== null}
+							onClick={() => fileInput?.click()}
+							variant="outline"
+						>
+							{pending() === "import" ? "Restoring..." : "Choose dump file"}
+						</Button>
+					</div>
+				</section>
+			</div>
+			<p class="text-xs text-[var(--v2-text-muted)]">
+				Exports and restores run immediately. Job history and cancellation are
+				not yet available for these operations.
+			</p>
+		</div>
+	);
+}
+
+function entityFormIsDirty(manager: UseManagerPageResult): boolean {
+	const form = manager.formData();
+	const editing = manager.editingItem();
+	if (!editing) {
+		return (
+			form.name.trim().length > 0 ||
+			form.description.trim().length > 0 ||
+			(form.ipIds?.length ?? 0) > 0
+		);
+	}
+	const originalIpIds = isCharacter(editing)
+		? editing.ips.map((ip) => ip.id).sort()
+		: [];
+	const currentIpIds = [...(form.ipIds ?? [])].sort();
+	return (
+		form.name !== editing.name ||
+		form.description !== (editing.description ?? "") ||
+		originalIpIds.join("|") !== currentIpIds.join("|")
+	);
+}
+
+function ManagerDialogs(props: { manager: UseManagerPageResult }) {
+	const [discardDialogOpen, setDiscardDialogOpen] = createSignal(false);
+	const requestFormClose = () => {
+		if (entityFormIsDirty(props.manager)) {
+			setDiscardDialogOpen(true);
+			return;
+		}
+		props.manager.setIsDialogOpen(false);
+	};
+	const handleFormOpenChange = (open: boolean) => {
+		if (open) {
+			props.manager.setIsDialogOpen(true);
+			return;
+		}
+		requestFormClose();
+	};
+
+	return (
+		<>
+			<Dialog
+				onOpenChange={handleFormOpenChange}
+				open={props.manager.isDialogOpen()}
+			>
+				<DialogContent
+					onEscapeKeyDown={(event) => {
+						if (!entityFormIsDirty(props.manager)) return;
+						event.preventDefault();
+						setDiscardDialogOpen(true);
+					}}
+					onPointerDownOutside={(event) => {
+						if (!entityFormIsDirty(props.manager)) return;
+						event.preventDefault();
+						setDiscardDialogOpen(true);
+					}}
+				>
+					<DialogHeader>
+						<DialogTitle>
+							{props.manager.editingItem() ? "Edit" : "Create"}{" "}
+							{singularLabel(props.manager.activeTab())}
+						</DialogTitle>
+						<DialogDescription>
+							{props.manager.editingItem()
+								? "Update this item without leaving the Manager context."
+								: "Add a new item to the current category."}
+						</DialogDescription>
+					</DialogHeader>
+					<div class="grid gap-4 py-2">
+						<div class="space-y-1.5">
+							<Label for="v2-manager-entity-name">Name</Label>
+							<Input
+								id="v2-manager-entity-name"
+								onInput={(event) =>
+									props.manager.setFormData({
+										...props.manager.formData(),
+										name: event.currentTarget.value,
+									})
+								}
+								value={props.manager.formData().name}
+							/>
+						</div>
+						<div class="space-y-1.5">
+							<Label for="v2-manager-entity-description">Description</Label>
+							<Input
+								id="v2-manager-entity-description"
+								onInput={(event) =>
+									props.manager.setFormData({
+										...props.manager.formData(),
+										description: event.currentTarget.value,
+									})
+								}
+								value={props.manager.formData().description}
+							/>
+						</div>
+						<Show when={props.manager.activeTab() === "characters"}>
+							<div class="space-y-1.5">
+								<Label for="v2-manager-entity-ips">IPs</Label>
+								<Combobox<Ip>
+									itemComponent={(comboboxProps) => (
+										<ComboboxItem item={comboboxProps.item}>
+											<ComboboxItemLabel>
+												{comboboxProps.item.rawValue.name}
+											</ComboboxItemLabel>
+											<ComboboxItemIndicator />
+										</ComboboxItem>
+									)}
+									multiple
+									onChange={(values) =>
+										props.manager.setFormData({
+											...props.manager.formData(),
+											ipIds: values.map((value) => value.id),
+										})
+									}
+									optionLabel="name"
+									options={props.manager.ips()}
+									optionTextValue="name"
+									optionValue="id"
+									value={props.manager
+										.ips()
+										.filter((ip) =>
+											props.manager.formData().ipIds?.includes(ip.id),
+										)}
+								>
+									<ComboboxControl>
+										<ComboboxInput
+											id="v2-manager-entity-ips"
+											placeholder="Select IPs..."
+										/>
+										<ComboboxTrigger />
+									</ComboboxControl>
+									<ComboboxContent />
+								</Combobox>
+							</div>
+						</Show>
+					</div>
+					<DialogFooter>
+						<Button onClick={requestFormClose} variant="outline">
+							Cancel
+						</Button>
+						<Button
+							disabled={!props.manager.formData().name.trim()}
+							onClick={props.manager.handleSave}
+						>
+							Save
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			<AlertDialog
+				onOpenChange={setDiscardDialogOpen}
+				open={discardDialogOpen()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+						<AlertDialogDescription>
+							The changes in this form have not been saved.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Keep editing</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={() => {
+								setDiscardDialogOpen(false);
+								props.manager.setIsDialogOpen(false);
+							}}
+						>
+							Discard
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			<AlertDialog
+				onOpenChange={props.manager.setIsDeleteDialogOpen}
+				open={props.manager.isDeleteDialogOpen()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete this item?</AlertDialogTitle>
+						<AlertDialogDescription>
+							This permanently deletes{" "}
+							{props.manager.itemToDelete()?.name ?? "the item"}.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+							onClick={props.manager.handleConfirmDelete}
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			<AlertDialog
+				onOpenChange={props.manager.setIsDuplicateDeleteDialogOpen}
+				open={props.manager.isDuplicateDeleteDialogOpen()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete duplicate media?</AlertDialogTitle>
+						<AlertDialogDescription>
+							This permanently deletes{" "}
+							{props.manager.duplicatesToDelete().length} media items.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div class="max-h-48 overflow-y-auto overscroll-contain text-sm">
+						<For each={props.manager.duplicatesToDelete()}>
+							{(item) => (
+								<div class="truncate border-[var(--v2-border)] border-b py-1 text-[var(--v2-text-secondary)]">
+									{item.fileName}
+								</div>
+							)}
+						</For>
+					</div>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+							onClick={props.manager.handleConfirmDeleteDuplicates}
+						>
+							Delete {props.manager.duplicatesToDelete().length}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
+}
+
+export function V2ManagerScreen(props: {
+	manager: UseManagerPageResult;
+	transferActions?: V2ManagerTransferActions;
+}) {
+	const [query, setQuery] = createSignal("");
+	const [selectedId, setSelectedId] = createSignal<string | null>(null);
+	const [activeCategory, setActiveCategory] =
+		createSignal<V2ManagerCategory>("projects");
+	const activeQueryState = () => {
+		const states = props.manager.queryStates();
+		switch (activeCategory()) {
+			case "projects":
+				return states.projects;
+			case "ips":
+				return states.ips;
+			case "characters":
+				return states.characters;
+			default:
+				return states.sources;
+		}
+	};
+	const canRenderContent = () =>
+		activeQueryState().phase === "data" ||
+		(activeQueryState().phase === "empty" && !isCrudCategory(activeCategory()));
+	const changeCategory = (value: V2ManagerCategory) => {
+		setQuery("");
+		setSelectedId(null);
+		setActiveCategory(value);
+		if (value !== "transfer") props.manager.setActiveTab(value);
+	};
+
+	return (
+		<section class="flex h-full min-h-0 min-w-0 flex-col bg-[var(--v2-canvas)]">
+			<V2ManagementHeader
+				description="分類データの管理とバッチ処理の投入を行います。"
+				title="Manager"
+			/>
+
+			<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
+				<ManagerCategoryNavigation
+					active={activeCategory()}
+					compact
+					onChange={changeCategory}
+				/>
+				<div class="grid w-full gap-6 px-3 py-4 sm:px-4 lg:grid-cols-[12rem_minmax(0,1fr)] lg:px-6 lg:py-5 xl:gap-8 xl:px-8">
+					<ManagerCategoryNavigation
+						active={activeCategory()}
+						onChange={changeCategory}
+					/>
+
+					<div class="min-w-0">
+						<QueryStatus
+							class="mb-3"
+							fetchState={activeQueryState().fetchState}
+							hasData={activeQueryState().data !== undefined}
+							hideWhenIdle
+							offlineLabel="オフラインのため保存済みの管理データを表示しています。"
+							updatingLabel="管理データを更新中..."
+						/>
+
+						<Switch>
+							<Match when={activeQueryState().phase === "pending"}>
+								<ManagerTableSkeleton />
+							</Match>
+							<Match when={activeQueryState().phase === "error"}>
+								<ErrorState
+									description="接続を確認して、もう一度お試しください。"
+									onRetry={props.manager.retryQueries}
+									title="管理データを取得できませんでした"
+								/>
+							</Match>
+							<Match when={activeQueryState().phase === "offline"}>
+								<OfflineState
+									description="接続が戻ったら、この画面から再試行できます。"
+									onRetry={props.manager.retryQueries}
+								/>
+							</Match>
+						</Switch>
+
+						<Show
+							when={
+								activeQueryState().phase === "empty" &&
+								isCrudCategory(activeCategory())
+							}
+						>
+							<EmptyState
+								description="最初の項目を作成すると、ここに表示されます。"
+								title={`${categoryLabel(activeCategory())}はまだありません`}
+							>
+								<Button onClick={props.manager.openCreateDialog}>
+									New {singularLabel(props.manager.activeTab())}
+								</Button>
+							</EmptyState>
+						</Show>
+
+						<Show when={canRenderContent()}>
+							<Switch>
+								<Match when={isCrudCategory(activeCategory())}>
+									<Show
+										when={
+											props.manager.activeTab() !== "characters" ||
+											(props.manager.queryStates().ips.phase !== "error" &&
+												props.manager.queryStates().ips.phase !== "offline")
+										}
+									>
+										<EntityTablePanel
+											manager={props.manager}
+											onQueryChange={setQuery}
+											onSelect={setSelectedId}
+											query={query()}
+											selectedId={selectedId()}
+										/>
+									</Show>
+									<Show
+										when={
+											props.manager.activeTab() === "characters" &&
+											(props.manager.queryStates().ips.phase === "error" ||
+												props.manager.queryStates().ips.phase === "offline")
+										}
+									>
+										<div class="mb-3 flex flex-wrap items-center justify-between gap-2 rounded-md border border-warning-foreground/30 bg-warning/40 p-3">
+											<p class="text-xs text-[var(--v2-text-secondary)]">
+												IP候補を取得できませんでした。Characters一覧は引き続き利用できます。
+											</p>
+											<RetryButton
+												class="h-8 px-3 text-xs"
+												label="IP候補を再取得"
+												onRetry={props.manager.retryQueries}
+											/>
+										</div>
+										<EntityTablePanel
+											manager={props.manager}
+											onQueryChange={setQuery}
+											onSelect={setSelectedId}
+											query={query()}
+											selectedId={selectedId()}
+										/>
+									</Show>
+								</Match>
+								<Match when={activeCategory() === "tagging"}>
+									<BatchToolPanel kind="tagging" manager={props.manager} />
+								</Match>
+								<Match when={activeCategory() === "vectors"}>
+									<BatchToolPanel kind="vectors" manager={props.manager} />
+								</Match>
+								<Match when={activeCategory() === "duplicates"}>
+									<DuplicateToolPanel manager={props.manager} />
+								</Match>
+								<Match when={activeCategory() === "transfer"}>
+									<Show
+										fallback={
+											<ErrorState
+												description="Data transfer actions are not configured for this client."
+												title="Data transfer is unavailable"
+											/>
+										}
+										when={props.transferActions}
+									>
+										{(actions) => (
+											<DataTransferPanel
+												actions={actions()}
+												manager={props.manager}
+											/>
+										)}
+									</Show>
+								</Match>
+							</Switch>
+						</Show>
+					</div>
+				</div>
+			</div>
+
+			<ManagerDialogs manager={props.manager} />
+		</section>
+	);
+}
diff --git a/packages/ui/src/screens/v2-search-screen.tsx b/packages/ui/src/screens/v2-search-screen.tsx
new file mode 100644
index 00000000..5b136748
--- /dev/null
+++ b/packages/ui/src/screens/v2-search-screen.tsx
@@ -0,0 +1,128 @@
+import { createSignal, onMount, Show } from "solid-js";
+import { FilterErrorBanner, QueryStatus } from "../async-state";
+import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
+import { SourceMediaGrid } from "../source-media-grid";
+import { V2CollectionInspector } from "../v2/collection-inspector";
+import { V2SearchToolbar } from "../v2/search-toolbar";
+import type { SearchScreenProps } from "./search-screen";
+
+export function V2SearchScreen(props: SearchScreenProps) {
+	const [isMounted, setIsMounted] = createSignal(false);
+	const [previewMediaId, setPreviewMediaId] = createSignal<string | null>(null);
+	const page = () => props.page;
+	const filterStates = () => [
+		page().filterStates.tags(),
+		page().filterStates.sources(),
+		page().filterStates.projects(),
+		page().filterStates.ips(),
+		page().filterStates.characters(),
+		page().filterStates.authors(),
+	];
+	const sourceName = () =>
+		props.sources?.find((source) => source.id === props.selectedSource)?.name ??
+		"すべてのメディア";
+	const canRenderContent = () => !props.ssrGuard || isMounted();
+	const previewMedia = () =>
+		page()
+			.searchResults()
+			.find((media) => media.id === previewMediaId());
+	const previewSourceName = () =>
+		props.sources?.find((source) => source.id === previewMedia()?.mediaSourceId)
+			?.name;
+
+	onMount(() => setIsMounted(true));
+
+	return (
+		<section class="flex h-full min-h-0 min-w-0 flex-col bg-[var(--v2-canvas)]">
+			<V2SearchToolbar
+				context="global"
+				filterData={props.filterData}
+				itemCount={page().searchResultQuery.data?.pages[0]?.total}
+				onSearch={page().handleSearch}
+				onSelectSource={props.onSelectSource}
+				presetClient={props.presetClient}
+				selectedSource={props.selectedSource ?? undefined}
+				sourceName={sourceName()}
+				sources={props.sources}
+			/>
+
+			<div
+				class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 [scrollbar-gutter:stable]"
+				data-media-scroll
+			>
+				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
+					<div class="min-w-0">
+						<Show
+							when={filterStates().some(
+								(state) => state.phase === "error" || state.phase === "offline",
+							)}
+						>
+							<FilterErrorBanner
+								class="mb-3"
+								message="一部の検索フィルターを取得できませんでした。検索結果は引き続き利用できます。"
+								onRetry={page().retryFilters}
+							/>
+						</Show>
+						<QueryStatus
+							class="mb-2"
+							fetchState={page().contentState().fetchState}
+							hasData={page().contentState().data !== undefined}
+							hideWhenIdle
+							offlineLabel="オフラインのため保存済みの検索結果を表示しています"
+							updatingLabel="検索結果を更新中..."
+						/>
+						<Show
+							fallback={
+								<LoadingRegion label="検索結果を読み込んでいます...">
+									<MediaGridSkeleton aspectRatio="4/3" />
+								</LoadingRegion>
+							}
+							when={canRenderContent()}
+						>
+							<SourceMediaGrid
+								detailBasePath="/v2/sources"
+								disableContextMenu
+								enableVirtualization={props.enableVirtualization}
+								errorTitle="検索結果を取得できませんでした"
+								hasNextPage={page().searchResultQuery.hasNextPage}
+								isFetchingNextPage={page().searchResultQuery.isFetchingNextPage}
+								itemAspectRatio={4 / 3}
+								mediaResults={page().searchResults}
+								mediaSourceId={() => undefined}
+								onLoadMore={() => page().searchResultQuery.fetchNextPage()}
+								onRetry={async () => {
+									await page().searchResultQuery.refetch();
+								}}
+								onPreviewSelect={(media) => setPreviewMediaId(media.id)}
+								previewSelectedMediaId={previewMediaId}
+								renderItem={(media, options) =>
+									props.renderMediaItem(media, options)
+								}
+								setLoadMoreRef={page().setLoadMoreRef}
+								showEmptyState
+								showResultCount={false}
+								scrollMode="element"
+								state={page().contentState}
+								totalCount={page().searchResultQuery.data?.pages[0]?.total}
+							/>
+						</Show>
+					</div>
+					<Show when={props.renderMediaPreview}>
+						{(renderPreview) => (
+							<Show when={previewMedia()}>
+								{(media) => (
+									<V2CollectionInspector
+										media={media()}
+										onOpenDetail={props.onOpenMediaDetail}
+										renderPreview={renderPreview()}
+										sourceName={previewSourceName()}
+									/>
+								)}
+							</Show>
+						)}
+					</Show>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/packages/ui/src/screens/v2-source-media-screen.tsx b/packages/ui/src/screens/v2-source-media-screen.tsx
new file mode 100644
index 00000000..08c28ebc
--- /dev/null
+++ b/packages/ui/src/screens/v2-source-media-screen.tsx
@@ -0,0 +1,243 @@
+import Upload from "lucide-solid/icons/upload";
+import { createSignal, onMount, Show } from "solid-js";
+import { FilterErrorBanner, QueryStatus } from "../async-state";
+import { Button } from "../button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "../dialog";
+import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
+import { SourceMediaGrid } from "../source-media-grid";
+import { V2CollectionInspector } from "../v2/collection-inspector";
+import { V2SearchToolbar } from "../v2/search-toolbar";
+import type { SourceMediaScreenProps } from "./source-media-screen";
+
+export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
+	const [isMounted, setIsMounted] = createSignal(false);
+	const [previewMediaId, setPreviewMediaId] = createSignal<string | null>(null);
+	const page = () => props.page;
+	const filterStates = () => Object.values(page().filterStates());
+	const shouldRenderGrid = () => !props.enableVirtualization || isMounted();
+	const previewMedia = () =>
+		page()
+			.mediaResults()
+			.find((media) => media.id === previewMediaId());
+
+	onMount(() => setIsMounted(true));
+
+	return (
+		<section
+			aria-label="Media upload area"
+			class="flex h-full min-h-0 min-w-0 flex-col bg-[var(--v2-canvas)]"
+			onDragOver={page().handleDragOver}
+			onDrop={page().handleDrop}
+		>
+			<V2SearchToolbar
+				actions={
+					<div class="flex flex-wrap gap-2">
+						<Show when={props.onEnterBulkSelectMode}>
+							<Button
+								class="min-h-11 sm:min-h-9"
+								onClick={() => props.onEnterBulkSelectMode?.()}
+								size="sm"
+								variant="outline"
+							>
+								複数選択
+							</Button>
+						</Show>
+						<Button
+							class="min-h-11 sm:min-h-9"
+							disabled={
+								page().isSyncingMedia() || !page().mediaQuery.data?.pages.length
+							}
+							onClick={page().handleSyncLoadedMedia}
+							size="sm"
+							variant="outline"
+						>
+							{page().isSyncingMedia() ? "同期中..." : "表示分を同期"}
+						</Button>
+						<Button
+							class="min-h-11 sm:min-h-9"
+							onClick={page().handleAddButtonClick}
+							size="sm"
+						>
+							<Upload aria-hidden="true" size={15} />
+							追加
+						</Button>
+					</div>
+				}
+				context="source"
+				filterData={page().filterData()}
+				itemCount={page().mediaQuery.data?.pages[0]?.total}
+				onSearch={page().handleSearch}
+				presetClient={page().presetClient}
+				sourceName={props.mediaSourceName?.() ?? "メディア一覧"}
+			/>
+
+			<Show when={props.renderJobProgress && page().jobProgress()}>
+				{props.renderJobProgress?.({ jobProgress: page().jobProgress })}
+			</Show>
+
+			<div
+				class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 [scrollbar-gutter:stable]"
+				data-media-scroll
+			>
+				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
+					<div class="min-w-0">
+						<Show
+							when={filterStates().some(
+								(state) => state.phase === "error" || state.phase === "offline",
+							)}
+						>
+							<FilterErrorBanner
+								class="mb-3"
+								message="一部の検索フィルターを取得できませんでした。メディア一覧は引き続き利用できます。"
+								onRetry={props.onRetryFilters}
+							/>
+						</Show>
+						<QueryStatus
+							class="mb-2"
+							fetchState={page().contentState().fetchState}
+							hasData={page().contentState().data !== undefined}
+							hideWhenIdle
+							offlineLabel="オフラインのため保存済みデータを表示しています"
+							updatingLabel="メディア一覧を更新中..."
+						/>
+						<Show
+							fallback={
+								<LoadingRegion label="メディア一覧を読み込んでいます...">
+									<MediaGridSkeleton aspectRatio="4/3" />
+								</LoadingRegion>
+							}
+							when={shouldRenderGrid()}
+						>
+							<SourceMediaGrid
+								contextMenuMediaId={page().contextMenuMediaId}
+								detailBasePath="/v2/sources"
+								enableVirtualization={props.enableVirtualization}
+								hasNextPage={page().mediaQuery.hasNextPage}
+								isBulkSelectMode={props.isBulkSelectMode}
+								isFetchingNextPage={page().mediaQuery.isFetchingNextPage}
+								itemAspectRatio={4 / 3}
+								isSelected={props.isSelected}
+								mediaResults={page().mediaResults}
+								mediaSourceId={page().mediaSourceId}
+								onBulkAction={props.onBulkAction}
+								onClearSelection={props.onClearSelection}
+								onCopyMove={page().handleCopyMove}
+								onDelete={page().handleDelete}
+								onLoadMore={() => page().mediaQuery.fetchNextPage()}
+								onPreviewSelect={(media) => setPreviewMediaId(media.id)}
+								onRetry={async () => {
+									await page().mediaQuery.refetch();
+								}}
+								onSyncSingleMedia={page().handleSyncSingleMedia}
+								onToggleSelect={props.onToggleSelect}
+								renderItem={props.renderItem}
+								previewSelectedMediaId={previewMediaId}
+								selectedCount={props.selectedCount}
+								setContextMenuMediaId={page().setContextMenuMediaId}
+								setLoadMoreRef={page().setLoadMoreRef}
+								showOpenInNewTab={props.showOpenInNewTab}
+								showResultCount={false}
+								scrollMode="element"
+								state={page().contentState}
+								totalCount={page().mediaQuery.data?.pages[0]?.total}
+							/>
+						</Show>
+					</div>
+					<Show when={props.renderMediaPreview}>
+						{(renderPreview) => (
+							<Show when={previewMedia()}>
+								{(media) => (
+									<V2CollectionInspector
+										media={media()}
+										onOpenDetail={props.onOpenMediaDetail}
+										renderPreview={renderPreview()}
+										sourceName={props.mediaSourceName?.()}
+									/>
+								)}
+							</Show>
+						)}
+					</Show>
+				</div>
+			</div>
+
+			<input
+				accept=".json,.ndjson,.tar"
+				class="hidden"
+				id="v2-restore-input"
+				onChange={page().handleRestoreSelect}
+				ref={page().setRestoreInputRef}
+				type="file"
+			/>
+			<input
+				accept="image/*,.json"
+				class="hidden"
+				onChange={page().handleFileSelect}
+				ref={page().setFileInputRef}
+				type="file"
+			/>
+
+			{(() => {
+				const UploadModal = props.uploadModalComponent;
+				return (
+					<UploadModal
+						initialFile={page().fileToUpload()}
+						isOpen={page().showUploadModal()}
+						onClose={() => {
+							page().setShowUploadModal(false);
+							page().setPastedUrl(null);
+							page().setFileToUpload(null);
+						}}
+						onUpload={page().handleUpload}
+						onUrlFetch={(file) => page().setFileToUpload(file)}
+						pastedUrl={page().pastedUrl()}
+					/>
+				);
+			})()}
+
+			<Dialog
+				onOpenChange={page().setDeleteDialogOpen}
+				open={page().deleteDialogOpen()}
+			>
+				<DialogContent class="v2-theme">
+					<DialogHeader>
+						<DialogTitle>メディアを削除</DialogTitle>
+						<DialogDescription>
+							この操作は取り消せません。選択したメディアを削除しますか？
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button
+							onClick={() => page().setDeleteDialogOpen(false)}
+							variant="outline"
+						>
+							キャンセル
+						</Button>
+						<Button onClick={page().confirmDelete} variant="destructive">
+							削除
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{(() => {
+				const MoveCopyDialog = props.moveCopyDialogComponent;
+				return (
+					<MoveCopyDialog
+						currentSourceId={page().mediaSourceId() || ""}
+						mode={page().moveCopyMode()}
+						onConfirm={page().handleConfirmCopyMove}
+						onOpenChange={page().setMoveCopyDialogOpen}
+						open={page().moveCopyDialogOpen()}
+					/>
+				);
+			})()}
+		</section>
+	);
+}
diff --git a/packages/ui/src/search-control-panel.tsx b/packages/ui/src/search-control-panel.tsx
index d5613261..c51b15c3 100644
--- a/packages/ui/src/search-control-panel.tsx
+++ b/packages/ui/src/search-control-panel.tsx
@@ -9,7 +9,6 @@ import type { TagResponse } from "@solid-imager/core/domain/tags/schemas";
 import { Show } from "solid-js";
 import type { SetStoreFunction } from "solid-js/store";
 import { Button } from "./button";
-import { Label } from "./label";
 import { PresetManager, type PresetManagerClient } from "./preset-manager";
 import { ProSearchDialog } from "./pro-search-dialog";
 import { SearchFilters } from "./search-filters";
@@ -17,6 +16,7 @@ import {
 	Select,
 	SelectContent,
 	SelectItem,
+	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "./select";
@@ -85,7 +85,6 @@ export function SearchControlPanel(props: SearchControlPanelProps) {
 		<div class={props.class}>
 			<Show when={props.context === "global" && props.sources}>
 				<div class="mb-4 space-y-2">
-					<Label>メディアソース</Label>
 					<Select
 						itemComponent={(itemProps) => (
 							<SelectItem item={itemProps.item}>
@@ -107,6 +106,7 @@ export function SearchControlPanel(props: SearchControlPanelProps) {
 							...(props.sources || []),
 						].find((source) => source.id === selectedSource())}
 					>
+						<SelectLabel>メディアソース</SelectLabel>
 						<SelectTrigger>
 							<SelectValue<{ name: string }>>
 								{(state) => state.selectedOption()?.name || "ソースを選択"}
@@ -118,7 +118,7 @@ export function SearchControlPanel(props: SearchControlPanelProps) {
 			</Show>
 
 			<div class="mb-4 flex flex-wrap items-center justify-between gap-2">
-				<Label class="font-medium text-sm">検索モード</Label>
+				<span class="font-medium text-sm">検索モード</span>
 				<div class="flex flex-wrap gap-2">
 					<Button
 						class="min-h-11 md:min-h-9"
@@ -201,7 +201,7 @@ export function SearchControlPanel(props: SearchControlPanelProps) {
 			<div class={currentState().mode === "vector" ? "block" : "hidden"}>
 				<div class="space-y-4">
 					<div class="space-y-2">
-						<Label>類似元メディア</Label>
+						<p class="font-medium text-sm leading-none">類似元メディア</p>
 						<div class="rounded-md border p-3 text-sm">
 							{currentState().similarityAnchorMediaId ??
 								"メディア個別画面の「Find Similar」から選択してください。"}
@@ -218,7 +218,7 @@ export function SearchControlPanel(props: SearchControlPanelProps) {
 						</Show>
 					</div>
 					<div class="space-y-2">
-						<Label>表示件数</Label>
+						<p class="font-medium text-sm leading-none">表示件数</p>
 						<div class="flex gap-2">
 							{([20, 50, 100] as const).map((value) => (
 								<Button
diff --git a/packages/ui/src/search-filters.tsx b/packages/ui/src/search-filters.tsx
index b9d800fa..932414f2 100644
--- a/packages/ui/src/search-filters.tsx
+++ b/packages/ui/src/search-filters.tsx
@@ -14,9 +14,9 @@ import {
 	ComboboxInput,
 	ComboboxItem,
 	ComboboxItemLabel,
+	ComboboxLabel,
 	VirtualComboboxContent,
 } from "./combobox";
-import { Label } from "./label";
 import { TextField, TextFieldInput, TextFieldLabel } from "./text-field";
 import { cn } from "./utils/cn";
 import { createDebouncedSignal } from "./utils/debounce";
@@ -61,32 +61,6 @@ function FilterSection<T>(props: {
 
 	return (
 		<div class="space-y-2">
-			<Label>{props.label}</Label>
-			<div class="mb-2 flex flex-wrap gap-2">
-				<For each={props.selectedItems}>
-					{(id) => {
-						const item = props.items?.find(
-							(i) =>
-								(props.getSelectedItemValue?.(i) ?? props.getItemKey(i)) === id,
-						) as T;
-						return (
-							<Badge
-								class="cursor-pointer"
-								variant={props.badgeVariant || "default"}
-							>
-								{item ? props.getItemLabel(item) : id}
-								<button
-									class="ml-1 hover:text-red-500"
-									onClick={() => props.onRemove(id)}
-									type="button"
-								>
-									×
-								</button>
-							</Badge>
-						);
-					}}
-				</For>
-			</div>
 			<Combobox<T>
 				itemComponent={(itemProps) => (
 					<ComboboxItem item={itemProps.item}>
@@ -112,6 +86,33 @@ function FilterSection<T>(props: {
 				triggerMode="focus"
 				value={value()}
 			>
+				<ComboboxLabel>{props.label}</ComboboxLabel>
+				<div class="mb-2 flex flex-wrap gap-2">
+					<For each={props.selectedItems}>
+						{(id) => {
+							const item = props.items?.find(
+								(i) =>
+									(props.getSelectedItemValue?.(i) ?? props.getItemKey(i)) ===
+									id,
+							) as T;
+							return (
+								<Badge
+									class="cursor-pointer"
+									variant={props.badgeVariant || "default"}
+								>
+									{item ? props.getItemLabel(item) : id}
+									<button
+										class="ml-1 hover:text-red-500"
+										onClick={() => props.onRemove(id)}
+										type="button"
+									>
+										×
+									</button>
+								</Badge>
+							);
+						}}
+					</For>
+				</div>
 				<ComboboxControl>
 					<ComboboxInput />
 				</ComboboxControl>
diff --git a/packages/ui/src/skeleton.tsx b/packages/ui/src/skeleton.tsx
index 6d85d723..ca222de4 100644
--- a/packages/ui/src/skeleton.tsx
+++ b/packages/ui/src/skeleton.tsx
@@ -116,6 +116,7 @@ export function ListSkeleton(props: ListSkeletonProps) {
 }
 
 export type MediaGridSkeletonProps = {
+	aspectRatio?: "3/4" | "4/3";
 	class?: string;
 	count?: number;
 };
@@ -130,7 +131,12 @@ export function MediaGridSkeleton(props: MediaGridSkeletonProps) {
 			<div class={cn(mediaGridClassName, props.class)}>
 				<For each={Array.from({ length: props.count ?? 16 })}>
 					{() => (
-						<Skeleton class="media-grid-skeleton-item aspect-[3/4] w-full rounded-lg" />
+						<Skeleton
+							class={cn(
+								"media-grid-skeleton-item w-full rounded-md",
+								props.aspectRatio === "4/3" ? "aspect-[4/3]" : "aspect-[3/4]",
+							)}
+						/>
 					)}
 				</For>
 			</div>
@@ -140,9 +146,39 @@ export function MediaGridSkeleton(props: MediaGridSkeletonProps) {
 
 export type MediaDetailSkeletonProps = {
 	class?: string;
+	variant?: "default" | "v2";
 };
 
 export function MediaDetailSkeleton(props: MediaDetailSkeletonProps) {
+	if (props.variant === "v2") {
+		return (
+			<div
+				aria-hidden="true"
+				class={cn("flex h-full min-h-0 flex-col", props.class)}
+				data-skeleton="media-detail"
+			>
+				<div class="flex min-h-14 shrink-0 items-center gap-3 border-b px-4">
+					<Skeleton class="size-9" />
+					<div class="min-w-0 flex-1 space-y-2">
+						<Skeleton class="h-4 w-56 max-w-full" />
+						<Skeleton class="h-3 w-32 max-w-full" />
+					</div>
+					<Skeleton class="h-9 w-28" />
+				</div>
+				<div class="min-h-0 flex-1 lg:grid lg:grid-cols-[minmax(0,1fr)_22rem]">
+					<div class="flex min-h-[55dvh] items-center justify-center p-4 lg:min-h-0">
+						<Skeleton class="h-full max-h-full w-full rounded-none" />
+					</div>
+					<div class="space-y-4 border-t p-4 lg:border-t-0 lg:border-l">
+						<Skeleton class="h-6 w-2/3" />
+						<Skeleton class="h-20 w-full" />
+						<Skeleton class="h-28 w-full" />
+						<Skeleton class="h-10 w-full" />
+					</div>
+				</div>
+			</div>
+		);
+	}
 	return (
 		<div
 			aria-hidden="true"
diff --git a/packages/ui/src/sort-controls.tsx b/packages/ui/src/sort-controls.tsx
index c2473bcd..319fb9d9 100644
--- a/packages/ui/src/sort-controls.tsx
+++ b/packages/ui/src/sort-controls.tsx
@@ -1,4 +1,3 @@
-import { Label } from "./label";
 import {
 	Select,
 	SelectContent,
@@ -40,7 +39,7 @@ export function SortControls(props: SortControlsProps) {
 	return (
 		<div class={props.className}>
 			<div class="space-y-2">
-				<Label>ソート</Label>
+				<p class="font-medium text-sm leading-none">ソート</p>
 				<div class="grid grid-cols-2 gap-2">
 					<Select
 						itemComponent={(itemProps) => (
@@ -57,7 +56,7 @@ export function SortControls(props: SortControlsProps) {
 						placeholder="項目"
 						value={props.sortBy}
 					>
-						<SelectTrigger>
+						<SelectTrigger aria-label="ソート項目">
 							<SelectValue<string>>
 								{(state) =>
 									getSortLabel(
@@ -83,7 +82,7 @@ export function SortControls(props: SortControlsProps) {
 						placeholder="順序"
 						value={props.sortOrder}
 					>
-						<SelectTrigger>
+						<SelectTrigger aria-label="ソート順">
 							<SelectValue<string>>
 								{(state) =>
 									state.selectedOption() === "asc" ? "昇順" : "降順"
diff --git a/packages/ui/src/source-form-modal.tsx b/packages/ui/src/source-form-modal.tsx
index be07a924..4b9744f6 100644
--- a/packages/ui/src/source-form-modal.tsx
+++ b/packages/ui/src/source-form-modal.tsx
@@ -4,7 +4,17 @@ import type {
 } from "@solid-imager/core/domain/sources/schemas";
 import { getErrorMessage } from "@solid-imager/core/utils";
 import { createForm } from "@tanstack/solid-form";
-import { createEffect, Show } from "solid-js";
+import { createEffect, createSignal, Show } from "solid-js";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "./alert-dialog";
 import { Button } from "./button";
 import {
 	Dialog,
@@ -66,6 +76,7 @@ export type SourceFormModalProps = {
 	sourceTypes?: SourceFormType[];
 	description?: string;
 	submitLabel?: string;
+	variant?: "default" | "v2";
 };
 
 const SOURCE_TYPE_OPTIONS: { value: SourceFormType; label: string }[] = [
@@ -227,6 +238,7 @@ function SourceTextInput(props: SourceTextInputProps) {
 }
 
 export function SourceFormModal(props: SourceFormModalProps) {
+	const [showDiscardDialog, setShowDiscardDialog] = createSignal(false);
 	const sourceTypes = () => props.sourceTypes ?? ["local", "sftp", "s3"];
 	const defaultValues = () => {
 		const fallbackType = sourceTypes()[0] ?? "local";
@@ -264,6 +276,7 @@ export function SourceFormModal(props: SourceFormModalProps) {
 			restoreFocusElement =
 				activeElement instanceof HTMLElement ? activeElement : undefined;
 			form.reset(defaultValues());
+			setShowDiscardDialog(false);
 		}
 		wasOpen = isOpen;
 	});
@@ -273,327 +286,362 @@ export function SourceFormModal(props: SourceFormModalProps) {
 			sourceTypes().includes(option.value),
 		);
 	const fieldError = (errors: unknown[]) => getFormErrorMessage(errors[0]);
+	const requestClose = () => {
+		if (props.variant === "v2" && form.state.isDirty) {
+			setShowDiscardDialog(true);
+			return;
+		}
+		props.onClose();
+	};
+	const discardAndClose = () => {
+		form.reset(defaultValues());
+		setShowDiscardDialog(false);
+		props.onClose();
+	};
 
 	return (
-		<Dialog
-			onOpenChange={(open) => !open && props.onClose()}
-			open={props.isOpen}
-		>
-			<DialogContent
-				class="sm:max-w-[500px]"
-				onCloseAutoFocus={(event) => {
-					if (restoreFocusElement?.isConnected) {
-						event.preventDefault();
-						restoreFocusElement.focus();
-					}
-				}}
+		<>
+			<Dialog
+				onOpenChange={(open) => !open && requestClose()}
+				open={props.isOpen}
 			>
-				<DialogHeader>
-					<DialogTitle>
-						{props.editingSource ? "Edit Source" : "Add New Source"}
-					</DialogTitle>
-					<DialogDescription>
-						{props.description ??
-							"Configure the connection details for your media source."}
-					</DialogDescription>
-				</DialogHeader>
-
-				<form
-					class="space-y-4"
-					onSubmit={(event) => {
-						event.preventDefault();
-						event.stopPropagation();
-						void form.handleSubmit();
+				<DialogContent
+					class="sm:max-w-[500px]"
+					onCloseAutoFocus={(event) => {
+						if (restoreFocusElement?.isConnected) {
+							event.preventDefault();
+							restoreFocusElement.focus();
+						}
 					}}
 				>
-					<form.Field name="name">
-						{(field) => (
-							<TextField
-								class="space-y-2"
-								validationState={
-									field().state.meta.errors.length > 0 ? "invalid" : "valid"
-								}
-							>
-								<TextFieldLabel>Name</TextFieldLabel>
-								<TextFieldInput
-									id={field().name}
-									onBlur={field().handleBlur}
-									onInput={(event) =>
-										field().handleChange(event.currentTarget.value)
-									}
-									placeholder="My Media Source"
-									value={field().state.value}
-								/>
-								<Show when={fieldError(field().state.meta.errors)}>
-									{(message) => (
-										<TextFieldErrorMessage aria-live="polite">
-											{message()}
-										</TextFieldErrorMessage>
-									)}
-								</Show>
-							</TextField>
-						)}
-					</form.Field>
+					<DialogHeader>
+						<DialogTitle>
+							{props.editingSource ? "Edit Source" : "Add New Source"}
+						</DialogTitle>
+						<DialogDescription>
+							{props.description ??
+								"Configure the connection details for your media source."}
+						</DialogDescription>
+					</DialogHeader>
 
-					<form.Field name="description">
-						{(field) => (
-							<TextField class="space-y-2">
-								<TextFieldLabel>Description (Optional)</TextFieldLabel>
-								<TextFieldInput
-									id={field().name}
-									onBlur={field().handleBlur}
-									onInput={(event) =>
-										field().handleChange(event.currentTarget.value)
+					<form
+						class="space-y-4"
+						onSubmit={(event) => {
+							event.preventDefault();
+							event.stopPropagation();
+							void form.handleSubmit();
+						}}
+					>
+						<form.Field name="name">
+							{(field) => (
+								<TextField
+									class="space-y-2"
+									validationState={
+										field().state.meta.errors.length > 0 ? "invalid" : "valid"
 									}
-									placeholder="Photos from my camera"
-									value={field().state.value}
-								/>
-							</TextField>
-						)}
-					</form.Field>
+								>
+									<TextFieldLabel>Name</TextFieldLabel>
+									<TextFieldInput
+										id={field().name}
+										onBlur={field().handleBlur}
+										onInput={(event) =>
+											field().handleChange(event.currentTarget.value)
+										}
+										placeholder="My Media Source"
+										value={field().state.value}
+									/>
+									<Show when={fieldError(field().state.meta.errors)}>
+										{(message) => (
+											<TextFieldErrorMessage aria-live="polite">
+												{message()}
+											</TextFieldErrorMessage>
+										)}
+									</Show>
+								</TextField>
+							)}
+						</form.Field>
 
-					<Show when={sourceTypes().length > 1}>
-						<form.Field name="type">
+						<form.Field name="description">
 							{(field) => (
-								<div class="space-y-2">
-									<Label>Type</Label>
-									<Select
-										itemComponent={(itemProps) => (
-											<SelectItem item={itemProps.item}>
-												{itemProps.item.rawValue.label}
-											</SelectItem>
-										)}
-										onChange={(value) =>
-											field().handleChange(
-												parseSelectValue(
-													value?.value,
-													SOURCE_TYPE_VALUES,
-													"local",
-												),
-											)
+								<TextField class="space-y-2">
+									<TextFieldLabel>Description (Optional)</TextFieldLabel>
+									<TextFieldInput
+										id={field().name}
+										onBlur={field().handleBlur}
+										onInput={(event) =>
+											field().handleChange(event.currentTarget.value)
 										}
-										options={selectOptions()}
-										value={{
-											value: field().state.value,
-											label: getTypeLabel(field().state.value),
-										}}
-									>
-										<SelectTrigger>
-											<SelectValue<{ value: string; label: string }>>
-												{(state) => state.selectedOption().label}
-											</SelectValue>
-										</SelectTrigger>
-										<SelectContent />
-									</Select>
-								</div>
+										placeholder="Photos from my camera"
+										value={field().state.value}
+									/>
+								</TextField>
 							)}
 						</form.Field>
-					</Show>
 
-					<form.Subscribe selector={(state) => state.values.type}>
-						{(type) => (
-							<div class="space-y-4 rounded-md border p-4">
-								<h4 class="font-medium text-sm">Connection Details</h4>
-								<Show when={type() === "local"}>
-									<form.Field name="path">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Directory Path"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="/mnt/data/photos"
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-								</Show>
-								<Show when={type() === "sftp"}>
-									<div class="grid gap-4 sm:grid-cols-2">
-										<form.Field name="host">
+						<Show when={sourceTypes().length > 1}>
+							<form.Field name="type">
+								{(field) => (
+									<div class="space-y-2">
+										<Label>Type</Label>
+										<Select
+											itemComponent={(itemProps) => (
+												<SelectItem item={itemProps.item}>
+													{itemProps.item.rawValue.label}
+												</SelectItem>
+											)}
+											onChange={(value) =>
+												field().handleChange(
+													parseSelectValue(
+														value?.value,
+														SOURCE_TYPE_VALUES,
+														"local",
+													),
+												)
+											}
+											options={selectOptions()}
+											value={{
+												value: field().state.value,
+												label: getTypeLabel(field().state.value),
+											}}
+										>
+											<SelectTrigger>
+												<SelectValue<{ value: string; label: string }>>
+													{(state) => state.selectedOption().label}
+												</SelectValue>
+											</SelectTrigger>
+											<SelectContent />
+										</Select>
+									</div>
+								)}
+							</form.Field>
+						</Show>
+
+						<form.Subscribe selector={(state) => state.values.type}>
+							{(type) => (
+								<div class="space-y-4 rounded-md border p-4">
+									<h4 class="font-medium text-sm">Connection Details</h4>
+									<Show when={type() === "local"}>
+										<form.Field name="path">
 											{(field) => (
 												<SourceTextInput
 													errors={field().state.meta.errors}
 													id={field().name}
-													label="Host"
+													label="Directory Path"
 													onBlur={field().handleBlur}
 													onChange={field().handleChange}
-													placeholder="192.168.1.10"
+													placeholder="/mnt/data/photos"
 													value={field().state.value}
 												/>
 											)}
 										</form.Field>
-										<form.Field name="port">
+									</Show>
+									<Show when={type() === "sftp"}>
+										<div class="grid gap-4 sm:grid-cols-2">
+											<form.Field name="host">
+												{(field) => (
+													<SourceTextInput
+														errors={field().state.meta.errors}
+														id={field().name}
+														label="Host"
+														onBlur={field().handleBlur}
+														onChange={field().handleChange}
+														placeholder="192.168.1.10"
+														value={field().state.value}
+													/>
+												)}
+											</form.Field>
+											<form.Field name="port">
+												{(field) => (
+													<div class="space-y-2">
+														<Label for={field().name}>Port</Label>
+														<Input
+															aria-describedby={`${field().name}-error`}
+															aria-invalid={
+																field().state.meta.errors.length > 0
+															}
+															id={field().name}
+															min="1"
+															onBlur={field().handleBlur}
+															onInput={(event) =>
+																field().handleChange(
+																	event.currentTarget.valueAsNumber,
+																)
+															}
+															type="number"
+															value={field().state.value}
+														/>
+														<FormFieldMessage
+															id={`${field().name}-error`}
+															message={fieldError(field().state.meta.errors)}
+														/>
+													</div>
+												)}
+											</form.Field>
+										</div>
+										<form.Field name="username">
 											{(field) => (
-												<div class="space-y-2">
-													<Label for={field().name}>Port</Label>
-													<Input
-														aria-describedby={`${field().name}-error`}
-														aria-invalid={field().state.meta.errors.length > 0}
+												<SourceTextInput
+													errors={field().state.meta.errors}
+													id={field().name}
+													label="Username"
+													onBlur={field().handleBlur}
+													onChange={field().handleChange}
+													placeholder="user"
+													value={field().state.value}
+												/>
+											)}
+										</form.Field>
+										<form.Field name="password">
+											{(field) => (
+												<SourceTextInput
+													errors={field().state.meta.errors}
+													id={field().name}
+													label="Password (Optional)"
+													onBlur={field().handleBlur}
+													onChange={field().handleChange}
+													placeholder="********"
+													type="password"
+													value={field().state.value}
+												/>
+											)}
+										</form.Field>
+										<form.Field name="remotePath">
+											{(field) => (
+												<SourceTextInput
+													errors={field().state.meta.errors}
+													id={field().name}
+													label="Remote Path"
+													onBlur={field().handleBlur}
+													onChange={field().handleChange}
+													placeholder="/home/user/photos"
+													value={field().state.value}
+												/>
+											)}
+										</form.Field>
+									</Show>
+									<Show when={type() === "s3"}>
+										<div class="grid gap-4 sm:grid-cols-2">
+											<form.Field name="bucket">
+												{(field) => (
+													<SourceTextInput
+														errors={field().state.meta.errors}
 														id={field().name}
-														min="1"
+														label="Bucket"
 														onBlur={field().handleBlur}
-														onInput={(event) =>
-															field().handleChange(
-																event.currentTarget.valueAsNumber,
-															)
-														}
-														type="number"
+														onChange={field().handleChange}
+														placeholder="my-bucket"
 														value={field().state.value}
 													/>
-													<FormFieldMessage
-														id={`${field().name}-error`}
-														message={fieldError(field().state.meta.errors)}
+												)}
+											</form.Field>
+											<form.Field name="region">
+												{(field) => (
+													<SourceTextInput
+														errors={field().state.meta.errors}
+														id={field().name}
+														label="Region"
+														onBlur={field().handleBlur}
+														onChange={field().handleChange}
+														placeholder="us-east-1"
+														value={field().state.value}
 													/>
-												</div>
+												)}
+											</form.Field>
+										</div>
+										<form.Field name="accessKeyId">
+											{(field) => (
+												<SourceTextInput
+													errors={field().state.meta.errors}
+													id={field().name}
+													label="Access Key ID"
+													onBlur={field().handleBlur}
+													onChange={field().handleChange}
+													placeholder="AKIA..."
+													value={field().state.value}
+												/>
 											)}
 										</form.Field>
-									</div>
-									<form.Field name="username">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Username"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="user"
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-									<form.Field name="password">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Password (Optional)"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="********"
-												type="password"
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-									<form.Field name="remotePath">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Remote Path"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="/home/user/photos"
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-								</Show>
-								<Show when={type() === "s3"}>
-									<div class="grid gap-4 sm:grid-cols-2">
-										<form.Field name="bucket">
+										<form.Field name="secretAccessKey">
 											{(field) => (
 												<SourceTextInput
 													errors={field().state.meta.errors}
 													id={field().name}
-													label="Bucket"
+													label="Secret Access Key"
 													onBlur={field().handleBlur}
 													onChange={field().handleChange}
-													placeholder="my-bucket"
+													placeholder="********"
+													type="password"
 													value={field().state.value}
 												/>
 											)}
 										</form.Field>
-										<form.Field name="region">
+										<form.Field name="prefix">
 											{(field) => (
 												<SourceTextInput
 													errors={field().state.meta.errors}
 													id={field().name}
-													label="Region"
+													label="Prefix (Optional)"
 													onBlur={field().handleBlur}
 													onChange={field().handleChange}
-													placeholder="us-east-1"
+													placeholder="photos/"
 													value={field().state.value}
 												/>
 											)}
 										</form.Field>
-									</div>
-									<form.Field name="accessKeyId">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Access Key ID"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="AKIA..."
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-									<form.Field name="secretAccessKey">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Secret Access Key"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="********"
-												type="password"
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-									<form.Field name="prefix">
-										{(field) => (
-											<SourceTextInput
-												errors={field().state.meta.errors}
-												id={field().name}
-												label="Prefix (Optional)"
-												onBlur={field().handleBlur}
-												onChange={field().handleChange}
-												placeholder="photos/"
-												value={field().state.value}
-											/>
-										)}
-									</form.Field>
-								</Show>
-							</div>
-						)}
-					</form.Subscribe>
-
-					<form.Subscribe selector={(state) => state.errorMap.onSubmit}>
-						{(error) => <FormError message={getFormSubmitError(error())} />}
-					</form.Subscribe>
-
-					<DialogFooter>
-						<Button onClick={props.onClose} type="button" variant="outline">
-							Cancel
-						</Button>
-						<form.Subscribe
-							selector={(state) => ({
-								canSubmit: state.canSubmit,
-								isSubmitting: state.isSubmitting,
-							})}
-						>
-							{(state) => (
-								<Button
-									disabled={!state().canSubmit || state().isSubmitting}
-									type="submit"
-								>
-									{state().isSubmitting
-										? "Saving..."
-										: (props.submitLabel ??
-											(props.editingSource ? "Save Changes" : "Add Source"))}
-								</Button>
+									</Show>
+								</div>
 							)}
 						</form.Subscribe>
-					</DialogFooter>
-				</form>
-			</DialogContent>
-		</Dialog>
+
+						<form.Subscribe selector={(state) => state.errorMap.onSubmit}>
+							{(error) => <FormError message={getFormSubmitError(error())} />}
+						</form.Subscribe>
+
+						<DialogFooter>
+							<Button onClick={requestClose} type="button" variant="outline">
+								Cancel
+							</Button>
+							<form.Subscribe
+								selector={(state) => ({
+									canSubmit: state.canSubmit,
+									isSubmitting: state.isSubmitting,
+								})}
+							>
+								{(state) => (
+									<Button
+										disabled={!state().canSubmit || state().isSubmitting}
+										type="submit"
+									>
+										{state().isSubmitting
+											? "Saving..."
+											: (props.submitLabel ??
+												(props.editingSource ? "Save Changes" : "Add Source"))}
+									</Button>
+								)}
+							</form.Subscribe>
+						</DialogFooter>
+					</form>
+				</DialogContent>
+			</Dialog>
+			<AlertDialog
+				onOpenChange={setShowDiscardDialog}
+				open={showDiscardDialog()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Discard source changes?</AlertDialogTitle>
+						<AlertDialogDescription>
+							The values entered in this form have not been saved.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Keep editing</AlertDialogCancel>
+						<AlertDialogAction onClick={discardAndClose}>
+							Discard changes
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	);
 }
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 92869202..268dd430 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -1,5 +1,8 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
-import { createWindowVirtualizer } from "@tanstack/solid-virtual";
+import {
+	createVirtualizer,
+	createWindowVirtualizer,
+} from "@tanstack/solid-virtual";
 import type { Accessor, JSX, Setter } from "solid-js";
 import {
 	createEffect,
@@ -30,10 +33,12 @@ import {
 
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
-const GRID_ITEM_ASPECT_RATIO = 4 / 3;
 const VIRTUAL_ROWS_OVERSCAN = 4;
 
 type SourceMediaGridProps = {
+	detailBasePath?: string;
+	itemAspectRatio?: number;
+	scrollMode?: "element" | "window";
 	mediaResults: Accessor<Media[]>;
 	mediaSourceId: Accessor<string | undefined>;
 	state: Accessor<QueryUiState<Media[]>>;
@@ -55,6 +60,9 @@ type SourceMediaGridProps = {
 	hasNextPage?: boolean;
 	/** Called when virtual scroll reaches near the end. */
 	onLoadMore?: () => void;
+	/** Select a media item for the wide collection inspector. */
+	onPreviewSelect?: (media: Media) => void;
+	previewSelectedMediaId?: Accessor<string | null>;
 	/** Render a single media grid item. */
 	renderItem: (
 		media: Media,
@@ -62,6 +70,8 @@ type SourceMediaGridProps = {
 			onContextMenu: () => void;
 			isBulkSelectMode?: boolean;
 			isSelected?: boolean;
+			onPreviewSelect?: () => void;
+			isPreviewSelected?: boolean;
 		},
 	) => JSX.Element;
 	/** Enable virtualization for large lists. Default: false. */
@@ -95,6 +105,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	// --- Virtual grid setup ---
 	const [windowWidth, setWindowWidth] = createSignal(0);
 	const [mediaGridWidth, setMediaGridWidth] = createSignal(0);
+	const [scrollElement, setScrollElement] = createSignal<HTMLElement | null>(
+		null,
+	);
+	const [scrollMargin, setScrollMargin] = createSignal(0);
 	let mediaGridRef: HTMLDivElement | undefined;
 
 	const columnCount = createMemo(() => {
@@ -112,7 +126,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	const mediaItemHeight = createMemo(() => {
 		const width = mediaItemWidth();
 		if (width <= 0) return 0;
-		return width * GRID_ITEM_ASPECT_RATIO;
+		return width / (props.itemAspectRatio ?? 3 / 4);
 	});
 
 	const mediaRows = createMemo(() => {
@@ -127,16 +141,36 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 
 	const rowCount = createMemo(() => mediaRows().length);
 
-	const mediaRowVirtualizer = createWindowVirtualizer<HTMLDivElement>({
+	const windowRowVirtualizer = createWindowVirtualizer<HTMLDivElement>({
+		get count() {
+			return rowCount();
+		},
+		estimateSize: () => mediaItemHeight() || 320,
+		gap: GRID_GAP_PX,
+		getItemKey: (index) => index,
+		overscan: VIRTUAL_ROWS_OVERSCAN,
+		get scrollMargin() {
+			return scrollMargin();
+		},
+	});
+
+	const elementRowVirtualizer = createVirtualizer<HTMLElement, HTMLDivElement>({
 		get count() {
 			return rowCount();
 		},
+		getScrollElement: () => scrollElement(),
 		estimateSize: () => mediaItemHeight() || 320,
 		gap: GRID_GAP_PX,
 		getItemKey: (index) => index,
 		overscan: VIRTUAL_ROWS_OVERSCAN,
-		scrollMargin: 0,
+		get scrollMargin() {
+			return scrollMargin();
+		},
 	});
+	const mediaRowVirtualizer = () =>
+		props.scrollMode === "element"
+			? elementRowVirtualizer
+			: windowRowVirtualizer;
 
 	const shouldVirtualize = createMemo(
 		() =>
@@ -148,10 +182,23 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	const updateMediaGridMetrics = () => {
 		if (!mediaGridRef) return;
 		setMediaGridWidth(mediaGridRef.getBoundingClientRect().width);
+		const scroller = scrollElement();
+		setScrollMargin(
+			props.scrollMode === "element" && scroller
+				? mediaGridRef.getBoundingClientRect().top -
+						scroller.getBoundingClientRect().top +
+						scroller.scrollTop
+				: mediaGridRef.getBoundingClientRect().top + window.scrollY,
+		);
 	};
 
 	onMount(() => {
 		setWindowWidth(window.innerWidth);
+		setScrollElement(
+			props.scrollMode === "element"
+				? (mediaGridRef?.closest("[data-media-scroll]") as HTMLElement | null)
+				: null,
+		);
 		updateMediaGridMetrics();
 
 		const handleResize = () => {
@@ -177,7 +224,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		rowCount();
 		mediaItemHeight();
 		columnCount();
-		mediaRowVirtualizer.measure();
+		mediaRowVirtualizer().measure();
 	});
 
 	// Virtual scroll-based load more: trigger when user scrolls near the end
@@ -186,13 +233,15 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		const totalRows = rowCount();
 		const handleScroll = () => {
 			if (!props.hasNextPage || props.isFetchingNextPage) return;
-			const lastItem = mediaRowVirtualizer.getVirtualItems().at(-1);
+			const lastItem = mediaRowVirtualizer().getVirtualItems().at(-1);
 			if (lastItem && lastItem.index >= totalRows - 2) {
 				props.onLoadMore?.();
 			}
 		};
-		window.addEventListener("scroll", handleScroll, { passive: true });
-		onCleanup(() => window.removeEventListener("scroll", handleScroll));
+		const target = props.scrollMode === "element" ? scrollElement() : window;
+		if (!target) return;
+		target.addEventListener("scroll", handleScroll, { passive: true });
+		onCleanup(() => target.removeEventListener("scroll", handleScroll));
 	});
 
 	const contextMenuMediaId = () => props.contextMenuMediaId?.() ?? null;
@@ -214,7 +263,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 			}}
 			style={{
 				height: shouldVirtualize()
-					? `${mediaRowVirtualizer.getTotalSize()}px`
+					? `${mediaRowVirtualizer().getTotalSize()}px`
 					: undefined,
 			}}
 		>
@@ -231,6 +280,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 									get isSelected() {
 										return props.isSelected?.(media.id);
 									},
+									onPreviewSelect: () => props.onPreviewSelect?.(media),
+									get isPreviewSelected() {
+										return props.previewSelectedMediaId?.() === media.id;
+									},
 								})
 							}
 						</For>
@@ -238,7 +291,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 				}
 				when={shouldVirtualize()}
 			>
-				<For each={mediaRowVirtualizer.getVirtualItems()}>
+				<For each={mediaRowVirtualizer().getVirtualItems()}>
 					{(virtualRow) => {
 						const rowMedia = () => mediaRows()[virtualRow.index] || [];
 						return (
@@ -247,7 +300,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 								style={{
 									"grid-template-columns": `repeat(${columnCount()}, minmax(0, 1fr))`,
 									height: `${virtualRow.size}px`,
-									transform: `translateY(${virtualRow.start}px)`,
+									transform: `translateY(${
+										virtualRow.start -
+										mediaRowVirtualizer().options.scrollMargin
+									}px)`,
 									width: "100%",
 								}}
 							>
@@ -261,6 +317,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 											get isSelected() {
 												return props.isSelected?.(media.id);
 											},
+											onPreviewSelect: () => props.onPreviewSelect?.(media),
+											get isPreviewSelected() {
+												return props.previewSelectedMediaId?.() === media.id;
+											},
 										})
 									}
 								</For>
@@ -277,7 +337,9 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 			<Switch>
 				<Match when={props.state().phase === "pending"}>
 					<LoadingRegion label="メディア一覧を読み込んでいます...">
-						<MediaGridSkeleton />
+						<MediaGridSkeleton
+							aspectRatio={props.itemAspectRatio === 4 / 3 ? "4/3" : "3/4"}
+						/>
 					</LoadingRegion>
 				</Match>
 				<Match when={props.state().phase === "error"}>
@@ -367,7 +429,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 												const id = contextMenuMediaId();
 												const sourceId = props.mediaSourceId();
 												if (id && sourceId) {
-													window.open(`/sources/${sourceId}/${id}`, "_blank");
+													window.open(
+														`${props.detailBasePath ?? "/sources"}/${sourceId}/${id}`,
+														"_blank",
+													);
 												}
 											}}
 										>
diff --git a/packages/ui/src/source-media-page.tsx b/packages/ui/src/source-media-page.tsx
index d1bcc2ad..c2c2bcad 100644
--- a/packages/ui/src/source-media-page.tsx
+++ b/packages/ui/src/source-media-page.tsx
@@ -34,6 +34,7 @@ function clientOnlyQueryOptions<TData>(factory: QueryOptionFactory<TData>) {
 }
 
 export type SourceMediaPageProps = {
+	variant?: "default" | "v2";
 	mediaSourceId: Accessor<string>;
 	mediaSourceName?: Accessor<string | undefined>;
 	transport: MediaSourceEventTransport;
@@ -52,6 +53,8 @@ export type SourceMediaPageProps = {
 	moveCopyDialogComponent: SourceMediaScreenProps["moveCopyDialogComponent"];
 	uploadModalComponent: SourceMediaScreenProps["uploadModalComponent"];
 	renderItem: SourceMediaScreenProps["renderItem"];
+	renderMediaPreview?: SourceMediaScreenProps["renderMediaPreview"];
+	onOpenMediaDetail?: SourceMediaScreenProps["onOpenMediaDetail"];
 	showOpenInNewTab?: boolean;
 	onToggleSelect?: (mediaId: string) => void;
 	isBulkSelectMode?: () => boolean;
@@ -119,6 +122,8 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 		sortOrder: props.sortOrder,
 		onThumbnailReady: props.onThumbnailReady,
 		isSearchStateRestored,
+		scrollContainerSelector:
+			props.variant === "v2" ? "[data-media-scroll]" : undefined,
 	});
 
 	const renderActions: SourceMediaScreenProps["renderActions"] = (actions) => (
@@ -131,6 +136,7 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 
 	return (
 		<SourceMediaScreen
+			variant={props.variant}
 			enableVirtualization={props.enableVirtualization}
 			mediaSourceName={props.mediaSourceName}
 			onRetryFilters={async () => {
@@ -145,6 +151,8 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 			page={page}
 			renderActions={renderActions}
 			renderItem={props.renderItem}
+			onOpenMediaDetail={props.onOpenMediaDetail}
+			renderMediaPreview={props.renderMediaPreview}
 			moveCopyDialogComponent={props.moveCopyDialogComponent}
 			uploadModalComponent={props.uploadModalComponent}
 			showOpenInNewTab={props.showOpenInNewTab}
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index f91c0fac..b9324cc7 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -64,6 +64,57 @@
 		--radius: 0.5rem;
 	}
 
+	.v2-theme {
+		color-scheme: light;
+		--v2-canvas: #fafbf9;
+		--v2-surface: #ffffff;
+		--v2-surface-subtle: #fbfcfa;
+		--v2-surface-muted: #f1f4f2;
+		--v2-surface-selected: #e1f1ed;
+		--v2-border: #e1e5e2;
+		--v2-border-strong: #d9dfdb;
+		--v2-text: #202624;
+		--v2-text-secondary: #59615d;
+		--v2-text-muted: #68706c;
+		--v2-primary: #08766a;
+		--v2-primary-hover: #06645a;
+		--v2-focus: #0b8f80;
+		--v2-destructive: #b43a32;
+		--v2-destructive-hover: #982f29;
+		--v2-warning: #795313;
+		--v2-warning-surface: #fff8e8;
+		--v2-info: #426d86;
+		--v2-info-surface: #eef6fa;
+		--background: 90 20% 98%;
+		--foreground: 160 8.6% 13.7%;
+		--muted: 140 12% 95.1%;
+		--muted-foreground: 150 4.3% 36.5%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 160 8.6% 13.7%;
+		--border: 135 7.1% 89%;
+		--input: 140 8.6% 86.3%;
+		--card: 0 0% 100%;
+		--card-foreground: 160 8.6% 13.7%;
+		--primary: 173.5 87.3% 24.7%;
+		--primary-foreground: 0 0% 100%;
+		--secondary: 140 12% 95.1%;
+		--secondary-foreground: 160 8.6% 13.7%;
+		--accent: 165 36.4% 91.4%;
+		--accent-foreground: 173.5 87.3% 24.7%;
+		--destructive: 3.7 56.5% 45.1%;
+		--destructive-foreground: 0 0% 100%;
+		--info: 200 54.5% 95.7%;
+		--info-foreground: 202.1 34% 39.2%;
+		--success: 165 36.4% 91.4%;
+		--success-foreground: 173.5 87.3% 24.7%;
+		--warning: 41.7 100% 95.5%;
+		--warning-foreground: 37.6 72.9% 27.5%;
+		--error: 4 55% 95%;
+		--error-foreground: 3.7 56.5% 45.1%;
+		--ring: 173.2 85.7% 30.2%;
+		--radius: 0.375rem;
+	}
+
 	*,
 	::before,
 	::after {
diff --git a/packages/ui/src/toast.tsx b/packages/ui/src/toast.tsx
index 94dc5172..e4f645ca 100644
--- a/packages/ui/src/toast.tsx
+++ b/packages/ui/src/toast.tsx
@@ -47,25 +47,23 @@ if (!isServer) {
 
 export const toast = {
 	error: (msg: string, opts?: ToastOptions) =>
-		toastImpl.error(
-			msg,
-			opts as unknown as Parameters<typeof SonnerToast.error>[1],
-		),
+		toastImpl.error(msg, { duration: 9_000, ...opts } as unknown as Parameters<
+			typeof SonnerToast.error
+		>[1]),
 	success: (msg: string, opts?: ToastOptions) =>
-		toastImpl.success(
-			msg,
-			opts as unknown as Parameters<typeof SonnerToast.success>[1],
-		),
+		toastImpl.success(msg, {
+			duration: 4_000,
+			...opts,
+		} as unknown as Parameters<typeof SonnerToast.success>[1]),
 	info: (msg: string, opts?: ToastOptions) =>
-		toastImpl.info(
-			msg,
-			opts as unknown as Parameters<typeof SonnerToast.info>[1],
-		),
+		toastImpl.info(msg, { duration: 7_000, ...opts } as unknown as Parameters<
+			typeof SonnerToast.info
+		>[1]),
 	warning: (msg: string, opts?: ToastOptions) =>
-		toastImpl.warning(
-			msg,
-			opts as unknown as Parameters<typeof SonnerToast.warning>[1],
-		),
+		toastImpl.warning(msg, {
+			duration: 8_000,
+			...opts,
+		} as unknown as Parameters<typeof SonnerToast.warning>[1]),
 	loading: (msg: string, opts?: ToastOptions) =>
 		toastImpl.loading(
 			msg,
@@ -82,10 +80,10 @@ export const toast = {
 			opts as unknown as Parameters<typeof SonnerToast.custom>[1],
 		),
 	message: (msg: string, opts?: ToastOptions) =>
-		toastImpl.message(
-			msg,
-			opts as unknown as Parameters<typeof SonnerToast.message>[1],
-		),
+		toastImpl.message(msg, {
+			duration: 5_000,
+			...opts,
+		} as unknown as Parameters<typeof SonnerToast.message>[1]),
 };
 
 export const Toaster = () => {
@@ -116,7 +114,7 @@ export const Toaster = () => {
 							closeButtonAriaLabel: "Close notification",
 							classes: {
 								actionButton:
-									"group-[.toast]:bg-[#08766a] group-[.toast]:font-medium group-[.toast]:text-white hover:group-[.toast]:bg-[#06645a]",
+									"group-[.toast]:bg-primary group-[.toast]:font-medium group-[.toast]:text-primary-foreground hover:group-[.toast]:bg-primary/90",
 								cancelButton:
 									"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 								closeButton:
diff --git a/packages/ui/src/upload-media-modal.tsx b/packages/ui/src/upload-media-modal.tsx
index a1293c0c..fa416eb6 100644
--- a/packages/ui/src/upload-media-modal.tsx
+++ b/packages/ui/src/upload-media-modal.tsx
@@ -2,6 +2,16 @@ import { getErrorMessage } from "@solid-imager/core/utils";
 import { createForm } from "@tanstack/solid-form";
 import { createEffect, createSignal, For, on, onCleanup, Show } from "solid-js";
 import { z } from "zod";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "./alert-dialog";
 import { Button } from "./button";
 import {
 	Dialog,
@@ -104,6 +114,7 @@ export function UploadMediaModalContent(props: UploadMediaModalContentProps) {
 	const [lastFetchedUrl, setLastFetchedUrl] = createSignal<string | null>(null);
 	const [previewUrl, setPreviewUrl] = createSignal<string | null>(null);
 	const [asyncError, setAsyncError] = createSignal<string | null>(null);
+	const [showDiscardDialog, setShowDiscardDialog] = createSignal(false);
 	let fileInputRef: HTMLInputElement | undefined;
 
 	const form = createForm(() => ({
@@ -254,6 +265,7 @@ export function UploadMediaModalContent(props: UploadMediaModalContentProps) {
 					sourceUrl: props.pastedUrl ?? "",
 				});
 				setAsyncError(null);
+				setShowDiscardDialog(false);
 			},
 		),
 	);
@@ -265,149 +277,145 @@ export function UploadMediaModalContent(props: UploadMediaModalContentProps) {
 		}
 	});
 
+	const requestClose = () => {
+		if (form.state.isDirty || selectedFiles().length > 0 || isFetchingUrl()) {
+			setShowDiscardDialog(true);
+			return;
+		}
+		props.onClose();
+	};
+	const discardAndClose = () => {
+		setShowDiscardDialog(false);
+		props.onClose();
+	};
+
 	return (
-		<Dialog onOpenChange={props.onClose} open={props.isOpen}>
-			<Show when={props.isOpen}>
-				<DialogContent class="sm:max-w-[560px]">
-					<DialogHeader>
-						<DialogTitle>メディアをアップロード</DialogTitle>
-						<DialogDescription>
-							アップロードするメディアの詳細を入力してください。
-						</DialogDescription>
-					</DialogHeader>
-
-					<form
-						onSubmit={(event) => {
-							event.preventDefault();
-							event.stopPropagation();
-							void form.handleSubmit();
-						}}
-					>
-						<div class="grid gap-4 py-4">
-							<button
-								class={`rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
-									isDragging() ? "border-primary bg-primary/5" : "border-muted"
-								}`}
-								onClick={() => fileInputRef?.click()}
-								onKeyDown={(event) => {
-									if (event.key === "Enter" || event.key === " ") {
+		<>
+			<Dialog
+				onOpenChange={(open) => !open && requestClose()}
+				open={props.isOpen}
+			>
+				<Show when={props.isOpen}>
+					<DialogContent class="sm:max-w-[560px]">
+						<DialogHeader>
+							<DialogTitle>メディアをアップロード</DialogTitle>
+							<DialogDescription>
+								アップロードするメディアの詳細を入力してください。
+							</DialogDescription>
+						</DialogHeader>
+
+						<form
+							onSubmit={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								void form.handleSubmit();
+							}}
+						>
+							<div class="grid gap-4 py-4">
+								<button
+									class={`rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
+										isDragging()
+											? "border-primary bg-primary/5"
+											: "border-muted"
+									}`}
+									onClick={() => fileInputRef?.click()}
+									onKeyDown={(event) => {
+										if (event.key === "Enter" || event.key === " ") {
+											event.preventDefault();
+											fileInputRef?.click();
+										}
+									}}
+									onDragEnter={(event) => {
 										event.preventDefault();
-										fileInputRef?.click();
-									}
-								}}
-								onDragEnter={(event) => {
-									event.preventDefault();
-									setIsDragging(true);
-								}}
-								onDragLeave={(event) => {
-									event.preventDefault();
-									setIsDragging(false);
-								}}
-								onDragOver={(event) => event.preventDefault()}
-								onDrop={(event) => {
-									event.preventDefault();
-									setIsDragging(false);
-									handleDroppedFiles(event.dataTransfer?.files);
-								}}
-								type="button"
-							>
-								<p class="font-medium text-sm">ファイルをドラッグ&ドロップ</p>
-								<p class="mt-1 text-muted-foreground text-xs">
-									またはファイル選択ダイアログから追加します。
-								</p>
-								<span class="mt-3 inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 font-medium text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
-									ファイルを選択
-								</span>
-							</button>
-							<input
-								class="hidden"
-								multiple
-								onChange={(event) => {
-									handleDroppedFiles(event.currentTarget.files);
-									event.currentTarget.value = "";
-								}}
-								ref={(element) => {
-									fileInputRef = element;
-								}}
-								type="file"
-							/>
-
-							<Show when={selectedFiles().length > 0}>
-								<div class="rounded-md border p-3">
-									<p class="mb-2 font-medium text-sm">選択中のファイル</p>
-									<ul class="space-y-2">
-										<For each={selectedFiles()}>
-											{(file) => (
-												<li class="flex items-center justify-between gap-3 text-sm">
-													<span class="truncate">{file.name}</span>
-													<span class="shrink-0 text-muted-foreground text-xs">
-														{fileSizeLabel(file)}
-													</span>
-												</li>
-											)}
-										</For>
-									</ul>
-								</div>
-							</Show>
-
-							<form.Field name="filename">
-								{(field) => (
-									<div class="grid gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
-										<Label class="sm:text-right" for={field().name}>
-											ファイル名
-										</Label>
-										<div class="space-y-2 sm:col-span-3">
-											<Input
-												aria-describedby={`${field().name}-error`}
-												aria-invalid={field().state.meta.errors.length > 0}
-												id={field().name}
-												onBlur={field().handleBlur}
-												onInput={(event) =>
-													field().handleChange(event.currentTarget.value)
-												}
-												value={field().state.value}
-											/>
-											<FormFieldMessage
-												id={`${field().name}-error`}
-												message={getFormErrorMessage(
-													field().state.meta.errors[0],
+										setIsDragging(true);
+									}}
+									onDragLeave={(event) => {
+										event.preventDefault();
+										setIsDragging(false);
+									}}
+									onDragOver={(event) => event.preventDefault()}
+									onDrop={(event) => {
+										event.preventDefault();
+										setIsDragging(false);
+										handleDroppedFiles(event.dataTransfer?.files);
+									}}
+									type="button"
+								>
+									<p class="font-medium text-sm">ファイルをドラッグ&ドロップ</p>
+									<p class="mt-1 text-muted-foreground text-xs">
+										またはファイル選択ダイアログから追加します。
+									</p>
+									<span class="mt-3 inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 font-medium text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+										ファイルを選択
+									</span>
+								</button>
+								<input
+									class="hidden"
+									multiple
+									onChange={(event) => {
+										handleDroppedFiles(event.currentTarget.files);
+										event.currentTarget.value = "";
+									}}
+									ref={(element) => {
+										fileInputRef = element;
+									}}
+									type="file"
+								/>
+
+								<Show when={selectedFiles().length > 0}>
+									<div class="rounded-md border p-3">
+										<p class="mb-2 font-medium text-sm">選択中のファイル</p>
+										<ul class="space-y-2">
+											<For each={selectedFiles()}>
+												{(file) => (
+													<li class="flex items-center justify-between gap-3 text-sm">
+														<span class="truncate">{file.name}</span>
+														<span class="shrink-0 text-muted-foreground text-xs">
+															{fileSizeLabel(file)}
+														</span>
+													</li>
 												)}
-											/>
-										</div>
-									</div>
-								)}
-							</form.Field>
-
-							<form.Field name="description">
-								{(field) => (
-									<div class="grid gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
-										<Label class="sm:text-right" for={field().name}>
-											説明
-										</Label>
-										<Input
-											class="sm:col-span-3"
-											id={field().name}
-											onBlur={field().handleBlur}
-											onInput={(event) =>
-												field().handleChange(event.currentTarget.value)
-											}
-											value={field().state.value}
-										/>
+											</For>
+										</ul>
 									</div>
-								)}
-							</form.Field>
-
-							<form.Field name="sourceUrl">
-								{(field) => (
-									<div class="grid gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
-										<Label class="sm:text-right" for={field().name}>
-											ソースURL
-										</Label>
-										<div class="relative space-y-2 sm:col-span-3">
+								</Show>
+
+								<form.Field name="filename">
+									{(field) => (
+										<div class="grid gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
+											<Label class="sm:text-right" for={field().name}>
+												ファイル名
+											</Label>
+											<div class="space-y-2 sm:col-span-3">
+												<Input
+													aria-describedby={`${field().name}-error`}
+													aria-invalid={field().state.meta.errors.length > 0}
+													id={field().name}
+													onBlur={field().handleBlur}
+													onInput={(event) =>
+														field().handleChange(event.currentTarget.value)
+													}
+													value={field().state.value}
+												/>
+												<FormFieldMessage
+													id={`${field().name}-error`}
+													message={getFormErrorMessage(
+														field().state.meta.errors[0],
+													)}
+												/>
+											</div>
+										</div>
+									)}
+								</form.Field>
+
+								<form.Field name="description">
+									{(field) => (
+										<div class="grid gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
+											<Label class="sm:text-right" for={field().name}>
+												説明
+											</Label>
 											<Input
-												aria-describedby={`${field().name}-error`}
-												aria-invalid={field().state.meta.errors.length > 0}
-												disabled={isFetchingUrl()}
+												class="sm:col-span-3"
 												id={field().name}
 												onBlur={field().handleBlur}
 												onInput={(event) =>
@@ -415,144 +423,190 @@ export function UploadMediaModalContent(props: UploadMediaModalContentProps) {
 												}
 												value={field().state.value}
 											/>
-											<Show when={isFetchingUrl()}>
-												<div class="-translate-y-1/2 absolute top-1/2 right-2 text-muted-foreground text-xs">
-													Loading...
+										</div>
+									)}
+								</form.Field>
+
+								<form.Field name="sourceUrl">
+									{(field) => (
+										<div class="grid gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
+											<Label class="sm:text-right" for={field().name}>
+												ソースURL
+											</Label>
+											<div class="relative space-y-2 sm:col-span-3">
+												<Input
+													aria-describedby={`${field().name}-error`}
+													aria-invalid={field().state.meta.errors.length > 0}
+													disabled={isFetchingUrl()}
+													id={field().name}
+													onBlur={field().handleBlur}
+													onInput={(event) =>
+														field().handleChange(event.currentTarget.value)
+													}
+													value={field().state.value}
+												/>
+												<Show when={isFetchingUrl()}>
+													<div class="-translate-y-1/2 absolute top-1/2 right-2 text-muted-foreground text-xs">
+														Loading...
+													</div>
+												</Show>
+												<FormFieldMessage
+													id={`${field().name}-error`}
+													message={getFormErrorMessage(
+														field().state.meta.errors[0],
+													)}
+												/>
+											</div>
+											<Show when={previewUrl()}>
+												<div class="mt-2 flex justify-center sm:col-span-4">
+													<img
+														alt="Fetched preview"
+														class="max-h-48 rounded-md object-contain"
+														src={previewUrl() || undefined}
+													/>
 												</div>
 											</Show>
-											<FormFieldMessage
-												id={`${field().name}-error`}
-												message={getFormErrorMessage(
-													field().state.meta.errors[0],
-												)}
-											/>
 										</div>
-										<Show when={previewUrl()}>
-											<div class="mt-2 flex justify-center sm:col-span-4">
-												<img
-													alt="Fetched preview"
-													class="max-h-48 rounded-md object-contain"
-													src={previewUrl() || undefined}
-												/>
+									)}
+								</form.Field>
+
+								<form.Field name="conflictResolution">
+									{(field) => (
+										<div class="space-y-2">
+											<Label>競合時の処理</Label>
+											<div class="grid gap-2 sm:grid-cols-3">
+												<For each={resolutionOptions}>
+													{(option) => (
+														<label class="rounded-md border p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary/5">
+															<div class="flex items-center gap-2">
+																<input
+																	checked={field().state.value === option.value}
+																	name={field().name}
+																	onChange={() =>
+																		field().handleChange(option.value)
+																	}
+																	type="radio"
+																/>
+																<span class="font-medium">{option.label}</span>
+															</div>
+															<p class="mt-1 text-muted-foreground text-xs">
+																{option.description}
+															</p>
+														</label>
+													)}
+												</For>
 											</div>
-										</Show>
-									</div>
-								)}
-							</form.Field>
-
-							<form.Field name="conflictResolution">
-								{(field) => (
-									<div class="space-y-2">
-										<Label>競合時の処理</Label>
-										<div class="grid gap-2 sm:grid-cols-3">
-											<For each={resolutionOptions}>
-												{(option) => (
-													<label class="rounded-md border p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary/5">
-														<div class="flex items-center gap-2">
-															<input
-																checked={field().state.value === option.value}
-																name={field().name}
-																onChange={() =>
-																	field().handleChange(option.value)
-																}
-																type="radio"
-															/>
-															<span class="font-medium">{option.label}</span>
-														</div>
-														<p class="mt-1 text-muted-foreground text-xs">
-															{option.description}
-														</p>
-													</label>
+										</div>
+									)}
+								</form.Field>
+
+								<Show when={(props.conflicts?.length ?? 0) > 0}>
+									<div class="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-950 text-sm">
+										<p class="font-medium">同名ファイルがあります</p>
+										<ul class="mt-2 list-disc space-y-1 pl-5">
+											<For each={props.conflicts}>
+												{(conflict) => (
+													<li>
+														{conflict.filename}
+														<Show when={conflict.suggestedName}>
+															<span> → {conflict.suggestedName}</span>
+														</Show>
+													</li>
 												)}
 											</For>
-										</div>
+										</ul>
 									</div>
-								)}
-							</form.Field>
-
-							<Show when={(props.conflicts?.length ?? 0) > 0}>
-								<div class="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-950 text-sm">
-									<p class="font-medium">同名ファイルがあります</p>
-									<ul class="mt-2 list-disc space-y-1 pl-5">
-										<For each={props.conflicts}>
-											{(conflict) => (
-												<li>
-													{conflict.filename}
-													<Show when={conflict.suggestedName}>
-														<span> → {conflict.suggestedName}</span>
-													</Show>
-												</li>
-											)}
-										</For>
-									</ul>
-								</div>
-							</Show>
-
-							<Show when={props.uploadProgress}>
-								{(progress) => (
-									<div class="rounded-md border p-3 text-sm">
-										<div class="flex justify-between gap-3">
-											<span>{progress().filename || "アップロード中"}</span>
-											<span class="text-muted-foreground">
-												{progress().status ||
-													(progress().total
-														? `${progress().current ?? 0}/${progress().total}`
-														: "処理中")}
-											</span>
-										</div>
-										<div class="mt-2 h-2 overflow-hidden rounded bg-muted">
-											<div
-												class="h-full bg-primary transition-all"
-												style={{
-													width: (() => {
-														const total = progress().total;
-														return total
-															? `${Math.min(100, ((progress().current ?? 0) / total) * 100)}%`
-															: "35%";
-													})(),
-												}}
-											/>
+								</Show>
+
+								<Show when={props.uploadProgress}>
+									{(progress) => (
+										<div class="rounded-md border p-3 text-sm">
+											<div class="flex justify-between gap-3">
+												<span>{progress().filename || "アップロード中"}</span>
+												<span class="text-muted-foreground">
+													{progress().status ||
+														(progress().total
+															? `${progress().current ?? 0}/${progress().total}`
+															: "処理中")}
+												</span>
+											</div>
+											<div class="mt-2 h-2 overflow-hidden rounded bg-muted">
+												<div
+													class="h-full bg-primary transition-all"
+													style={{
+														width: (() => {
+															const total = progress().total;
+															return total
+																? `${Math.min(100, ((progress().current ?? 0) / total) * 100)}%`
+																: "35%";
+														})(),
+													}}
+												/>
+											</div>
 										</div>
-									</div>
-								)}
-							</Show>
-
-							<FormError message={asyncError()} />
-							<form.Subscribe selector={(state) => state.errorMap.onSubmit}>
-								{(error) => <FormError message={getFormSubmitError(error())} />}
-							</form.Subscribe>
-						</div>
-
-						<DialogFooter>
-							<Button onClick={props.onClose} type="button" variant="outline">
-								キャンセル
-							</Button>
-							<form.Subscribe
-								selector={(state) => ({
-									canSubmit: state.canSubmit,
-									isSubmitting: state.isSubmitting,
-								})}
-							>
-								{(state) => (
-									<Button
-										disabled={
-											!state().canSubmit ||
-											state().isSubmitting ||
-											isFetchingUrl()
-										}
-										type="submit"
-									>
-										{state().isSubmitting
-											? "アップロード中..."
-											: "アップロード"}
-									</Button>
-								)}
-							</form.Subscribe>
-						</DialogFooter>
-					</form>
-				</DialogContent>
-			</Show>
-		</Dialog>
+									)}
+								</Show>
+
+								<FormError message={asyncError()} />
+								<form.Subscribe selector={(state) => state.errorMap.onSubmit}>
+									{(error) => (
+										<FormError message={getFormSubmitError(error())} />
+									)}
+								</form.Subscribe>
+							</div>
+
+							<DialogFooter>
+								<Button onClick={requestClose} type="button" variant="outline">
+									キャンセル
+								</Button>
+								<form.Subscribe
+									selector={(state) => ({
+										canSubmit: state.canSubmit,
+										isSubmitting: state.isSubmitting,
+									})}
+								>
+									{(state) => (
+										<Button
+											disabled={
+												!state().canSubmit ||
+												state().isSubmitting ||
+												isFetchingUrl()
+											}
+											type="submit"
+										>
+											{state().isSubmitting
+												? "アップロード中..."
+												: "アップロード"}
+										</Button>
+									)}
+								</form.Subscribe>
+							</DialogFooter>
+						</form>
+					</DialogContent>
+				</Show>
+			</Dialog>
+			<AlertDialog
+				onOpenChange={setShowDiscardDialog}
+				open={showDiscardDialog()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>
+							アップロード内容を破棄しますか？
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							選択したファイルと入力内容は保存されていません。
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>編集を続ける</AlertDialogCancel>
+						<AlertDialogAction onClick={discardAndClose}>
+							破棄して閉じる
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	);
 }
 
diff --git a/packages/ui/src/v2/collection-inspector.tsx b/packages/ui/src/v2/collection-inspector.tsx
new file mode 100644
index 00000000..2d0aa895
--- /dev/null
+++ b/packages/ui/src/v2/collection-inspector.tsx
@@ -0,0 +1,109 @@
+import type { Media } from "@solid-imager/core/domain/media/schemas";
+import type { JSX } from "solid-js";
+import { getOwner, runWithOwner, Show } from "solid-js";
+import { Button } from "../button";
+
+type V2CollectionInspectorProps = {
+	media: Media | undefined;
+	sourceName?: string;
+	onOpenDetail?: (media: Media) => void;
+	renderPreview: (media: Media) => JSX.Element;
+};
+
+function formatFileSize(bytes: number | null) {
+	if (bytes === null) return null;
+	const units = ["B", "KB", "MB", "GB"];
+	let value = bytes;
+	let unitIndex = 0;
+	while (value >= 1024 && unitIndex < units.length - 1) {
+		value /= 1024;
+		unitIndex += 1;
+	}
+	return `${value >= 10 || unitIndex === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[unitIndex]}`;
+}
+
+function formatDate(date: Date) {
+	return new Intl.DateTimeFormat("ja-JP", {
+		dateStyle: "medium",
+		timeStyle: "short",
+	}).format(date);
+}
+
+export function V2CollectionInspector(props: V2CollectionInspectorProps) {
+	const owner = getOwner();
+	const renderOwned = (render: () => JSX.Element) =>
+		owner ? runWithOwner(owner, render) : render();
+
+	return (
+		<aside
+			aria-label="選択中のメディア"
+			class="sticky top-0 hidden h-fit min-w-0 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-3 2xl:block"
+		>
+			<Show
+				keyed
+				fallback={
+					<div class="flex aspect-[4/3] items-center justify-center rounded-md bg-[var(--v2-surface-muted)] px-6 text-center text-[var(--v2-text-muted)] text-sm">
+						メディアを選択すると、ここにプレビューと概要が表示されます
+					</div>
+				}
+				when={props.media}
+			>
+				{(media) => (
+					<div class="space-y-3">
+						<div class="aspect-[4/3] overflow-hidden rounded-md bg-[var(--v2-surface-muted)]">
+							{renderOwned(() => props.renderPreview(media))}
+						</div>
+						<div class="min-w-0">
+							<p
+								class="break-words font-semibold text-[var(--v2-text)] text-sm"
+								title={media.fileName}
+							>
+								{media.fileName}
+							</p>
+							<dl class="mt-3 grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-2 text-xs">
+								<dt class="text-[var(--v2-text-muted)]">解像度</dt>
+								<dd class="text-right text-[var(--v2-text)]">
+									{media.width} × {media.height}
+								</dd>
+								<Show when={formatFileSize(media.fileSize)}>
+									{(size) => (
+										<>
+											<dt class="text-[var(--v2-text-muted)]">サイズ</dt>
+											<dd class="text-right text-[var(--v2-text)]">{size()}</dd>
+										</>
+									)}
+								</Show>
+								<dt class="text-[var(--v2-text-muted)]">作成日</dt>
+								<dd class="text-right text-[var(--v2-text)]">
+									{formatDate(media.createdAt)}
+								</dd>
+								<Show when={props.sourceName}>
+									{(sourceName) => (
+										<>
+											<dt class="text-[var(--v2-text-muted)]">ソース</dt>
+											<dd
+												class="truncate text-right text-[var(--v2-text)]"
+												title={sourceName()}
+											>
+												{sourceName()}
+											</dd>
+										</>
+									)}
+								</Show>
+							</dl>
+						</div>
+						<Show when={props.onOpenDetail}>
+							<Button
+								class="min-h-11 w-full sm:min-h-9"
+								onClick={() => props.onOpenDetail?.(media)}
+								size="sm"
+							>
+								詳細を開く
+							</Button>
+						</Show>
+					</div>
+				)}
+			</Show>
+		</aside>
+	);
+}
diff --git a/packages/ui/src/v2/icons.tsx b/packages/ui/src/v2/icons.tsx
new file mode 100644
index 00000000..d59080b0
--- /dev/null
+++ b/packages/ui/src/v2/icons.tsx
@@ -0,0 +1,159 @@
+import type { Component, JSX } from "solid-js";
+import { splitProps } from "solid-js";
+
+type IconProps = JSX.SvgSVGAttributes<SVGSVGElement> & {
+	size?: number | string;
+};
+
+function icon(draw: () => JSX.Element): Component<IconProps> {
+	return (props) => {
+		const [local, rest] = splitProps(props, ["size"]);
+		return (
+			<svg
+				{...rest}
+				aria-hidden="true"
+				fill="none"
+				height={local.size ?? 24}
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				width={local.size ?? 24}
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				{draw()}
+			</svg>
+		);
+	};
+}
+
+// Inline Lucide geometry keeps SVGs visible without leaking lucide-solid's
+// CommonJS defaults into TanStack Start route modules (`template` regression).
+export const ArrowLeft = icon(() => (
+	<>
+		<path d="m12 19-7-7 7-7" />
+		<path d="M19 12H5" />
+	</>
+));
+export const BriefcaseBusiness = icon(() => (
+	<>
+		<path d="M12 12h.01" />
+		<path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
+		<path d="M22 13a18.15 18.15 0 0 1-20 0" />
+		<rect height="14" rx="2" width="20" x="2" y="6" />
+	</>
+));
+export const Binary = icon(() => (
+	<>
+		<rect height="8" rx="2" width="8" x="3" y="3" />
+		<path d="M7 7h.01M14 3h1v8m-1 0h2M3 14h1v7m-1 0h2" />
+		<rect height="8" rx="2" width="8" x="13" y="13" />
+		<path d="M17 17h.01" />
+	</>
+));
+export const Bot = icon(() => (
+	<>
+		<rect height="12" rx="2" width="18" x="3" y="8" />
+		<path d="M12 4v4M8 12h.01M16 12h.01M9 16h6M1 13h2M21 13h2" />
+	</>
+));
+export const ChevronDown = icon(() => <path d="m6 9 6 6 6-6" />);
+export const ChevronLeft = icon(() => <path d="m15 18-6-6 6-6" />);
+export const ChevronRight = icon(() => <path d="m9 18 6-6-6-6" />);
+export const CircleHelp = icon(() => (
+	<>
+		<circle cx="12" cy="12" r="10" />
+		<path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4" />
+		<path d="M12 18h.01" />
+	</>
+));
+export const Clock3 = icon(() => (
+	<>
+		<circle cx="12" cy="12" r="10" />
+		<path d="M12 6v6h4" />
+	</>
+));
+export const Database = icon(() => (
+	<>
+		<ellipse cx="12" cy="5" rx="9" ry="3" />
+		<path d="M3 5v14a9 3 0 0 0 18 0V5" />
+		<path d="M3 12a9 3 0 0 0 18 0" />
+	</>
+));
+export const Ellipsis = icon(() => (
+	<>
+		<circle cx="5" cy="12" r="1" />
+		<circle cx="12" cy="12" r="1" />
+		<circle cx="19" cy="12" r="1" />
+	</>
+));
+export const FileText = icon(() => (
+	<>
+		<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8l6 6v12a2 2 0 0 1-2 2z" />
+		<path d="M14 2v5a1 1 0 0 0 1 1h5M8 13h8M8 17h8" />
+	</>
+));
+export const Image = icon(() => (
+	<>
+		<rect height="18" rx="2" width="18" x="3" y="3" />
+		<circle cx="9" cy="9" r="2" />
+		<path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
+	</>
+));
+export const Library = icon(() => (
+	<>
+		<path d="M4 4v16M8 8v12M12 6v14m4-14 4 14" />
+	</>
+));
+export const Menu = icon(() => <path d="M4 5h16M4 12h16M4 19h16" />);
+export const PanelLeftClose = icon(() => (
+	<>
+		<rect height="18" rx="2" width="18" x="3" y="3" />
+		<path d="M9 3v18m7-6-3-3 3-3" />
+	</>
+));
+export const PanelLeftOpen = icon(() => (
+	<>
+		<rect height="18" rx="2" width="18" x="3" y="3" />
+		<path d="M9 3v18m5-12 3 3-3 3" />
+	</>
+));
+export const Plus = icon(() => <path d="M5 12h14M12 5v14" />);
+export const RefreshCw = icon(() => (
+	<>
+		<path d="M3 12a9 9 0 0 1 15.7-6.3L21 8" />
+		<path d="M21 3v5h-5M21 12a9 9 0 0 1-15.7 6.3L3 16" />
+		<path d="M8 16H3v5" />
+	</>
+));
+export const Scan = icon(() => (
+	<>
+		<path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" />
+		<circle cx="12" cy="12" r="3" />
+	</>
+));
+export const ScanSearch = icon(() => (
+	<>
+		<path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M7 21H5a2 2 0 0 1-2-2v-2" />
+		<circle cx="14" cy="14" r="3" />
+		<path d="m21 21-4.9-4.9" />
+	</>
+));
+export const Search = icon(() => (
+	<>
+		<path d="m21 21-4.34-4.34" />
+		<circle cx="11" cy="11" r="8" />
+	</>
+));
+export const Settings = icon(() => (
+	<>
+		<path d="M9.67 4.14a2.34 2.34 0 0 1 4.66 0 2.34 2.34 0 0 0 3.32 1.91 2.34 2.34 0 0 1 2.33 4.03 2.34 2.34 0 0 0 0 3.84 2.34 2.34 0 0 1-2.33 4.03 2.34 2.34 0 0 0-3.32 1.91 2.34 2.34 0 0 1-4.66 0 2.34 2.34 0 0 0-3.32-1.91 2.34 2.34 0 0 1-2.33-4.03 2.34 2.34 0 0 0 0-3.84 2.34 2.34 0 0 1 2.33-4.03 2.34 2.34 0 0 0 3.32-1.91" />
+		<circle cx="12" cy="12" r="3" />
+	</>
+));
+export const Sparkles = icon(() => (
+	<>
+		<path d="m12 3-1.5 4.5L6 9l4.5 1.5L12 15l1.5-4.5L18 9l-4.5-1.5zM5 17l-.75 2.25L2 20l2.25.75L5 23l.75-2.25L8 20l-2.25-.75zM19 15l-.75 2.25L16 18l2.25.75L19 21l.75-2.25L22 18l-2.25-.75z" />
+	</>
+));
diff --git a/packages/ui/src/v2/management-layout.tsx b/packages/ui/src/v2/management-layout.tsx
new file mode 100644
index 00000000..6db45af7
--- /dev/null
+++ b/packages/ui/src/v2/management-layout.tsx
@@ -0,0 +1,68 @@
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+
+type V2ManagementHeaderProps = {
+	actions?: JSX.Element;
+	description: string;
+	eyebrow?: string;
+	title: string;
+};
+
+export function V2ManagementHeader(props: V2ManagementHeaderProps) {
+	return (
+		<header class="shrink-0 border-[var(--v2-border)] border-b bg-[var(--v2-surface)] px-4 py-3 sm:px-6">
+			<div class="flex flex-wrap items-start justify-between gap-3">
+				<div class="min-w-0">
+					<p class="font-medium text-xs text-[var(--v2-primary)]">
+						{props.eyebrow ?? "Workspace"}
+					</p>
+					<h1 class="mt-0.5 font-semibold text-xl text-[var(--v2-text)]">
+						{props.title}
+					</h1>
+					<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+						{props.description}
+					</p>
+				</div>
+				<Show when={props.actions}>
+					<div class="shrink-0">{props.actions}</div>
+				</Show>
+			</div>
+		</header>
+	);
+}
+
+export const V2_CATEGORY_TABS_CLASS =
+	"min-h-11 shrink-0 gap-2.5 rounded-md px-2.5 text-[var(--v2-text-secondary)] shadow-none data-[selected]:bg-[var(--v2-surface-selected)] data-[selected]:text-[var(--v2-primary)] lg:min-h-10 lg:w-full lg:justify-start";
+
+export function v2CategoryButtonClass(active: boolean): string {
+	return `flex min-h-10 w-full items-center gap-2.5 rounded-md px-2.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] ${
+		active
+			? "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"
+			: "text-[var(--v2-text-secondary)] hover:bg-[var(--v2-surface-muted)]"
+	}`;
+}
+
+export function V2CategoryLabel(props: {
+	description: string;
+	icon: JSX.Element;
+	label: string;
+	responsiveDescription?: "lg" | "md";
+}) {
+	const descriptionBreakpoint = () =>
+		props.responsiveDescription === "md" ? "md:block" : "lg:block";
+	return (
+		<>
+			<span class="shrink-0">{props.icon}</span>
+			<span class="min-w-0 text-left">
+				<strong class="block truncate font-medium text-sm">
+					{props.label}
+				</strong>
+				<span
+					class={`hidden truncate text-[11px] text-[var(--v2-text-muted)] ${descriptionBreakpoint()}`}
+				>
+					{props.description}
+				</span>
+			</span>
+		</>
+	);
+}
diff --git a/packages/ui/src/v2/search-composer-utils.ts b/packages/ui/src/v2/search-composer-utils.ts
new file mode 100644
index 00000000..eb8ecb74
--- /dev/null
+++ b/packages/ui/src/v2/search-composer-utils.ts
@@ -0,0 +1,146 @@
+import type { SearchPageFilterData } from "../hooks/use-search-page";
+
+export type SearchArrayKey =
+	| "excludeTags"
+	| "selectedAuthors"
+	| "selectedCharacters"
+	| "selectedIps"
+	| "selectedProjects"
+	| "selectedTags";
+
+export type SearchToken = {
+	destructive?: boolean;
+	key: SearchArrayKey | "searchQuery";
+	prefix: string;
+	value: string;
+};
+
+export type SearchSuggestion = {
+	key: SearchArrayKey;
+	label: string;
+	prefix: string;
+	value: string;
+};
+
+type SuggestionSource = keyof SearchPageFilterData;
+
+type SuggestionConfig = {
+	key: SearchArrayKey;
+	prefix: string;
+	source: SuggestionSource;
+};
+
+const SUGGESTION_CONFIGS: Record<string, SuggestionConfig> = {
+	author: { key: "selectedAuthors", prefix: "author", source: "authors" },
+	character: {
+		key: "selectedCharacters",
+		prefix: "character",
+		source: "characters",
+	},
+	"-tag": { key: "excludeTags", prefix: "-tag", source: "tags" },
+	ip: { key: "selectedIps", prefix: "ip", source: "ips" },
+	project: { key: "selectedProjects", prefix: "project", source: "projects" },
+	tag: { key: "selectedTags", prefix: "tag", source: "tags" },
+};
+
+type ActiveToken = {
+	config: SuggestionConfig;
+	query: string;
+};
+
+function getActiveToken(value: string): ActiveToken | undefined {
+	const match = value.match(/(?:^|\s)([^\s]*)$/);
+	if (!match) return undefined;
+
+	const rawToken = match[1];
+	const separatorIndex = rawToken.indexOf(":");
+	if (separatorIndex < 1) return undefined;
+
+	const config =
+		SUGGESTION_CONFIGS[rawToken.slice(0, separatorIndex).toLowerCase()];
+	if (!config) return undefined;
+
+	const rawValue = rawToken.slice(separatorIndex + 1);
+	if (rawValue.includes(",")) return undefined;
+
+	return {
+		config,
+		query: rawValue.replace(/^"|"$/g, ""),
+	};
+}
+
+export function removeActiveSearchToken(value: string): string {
+	const match = value.match(/(?:^|\s)([^\s]*)$/);
+	if (!match) return value;
+	const tokenStart = (match.index ?? 0) + match[0].length - match[1].length;
+	const remaining = value.slice(0, tokenStart).trimEnd();
+	return remaining.length > 0 ? `${remaining} ` : "";
+}
+
+function getSourceValues(
+	filterData: SearchPageFilterData,
+	source: SuggestionSource,
+): Array<{ label: string; value: string }> {
+	switch (source) {
+		case "authors":
+			return (filterData.authors ?? []).map((author) => ({
+				label: author.accountId
+					? `${author.name}：${author.accountId}`
+					: author.name,
+				value: author.name,
+			}));
+		case "characters":
+			return (filterData.characters ?? []).map((character) => ({
+				label: character.name,
+				value: character.name,
+			}));
+		case "ips":
+			return (filterData.ips ?? []).map((ip) => ({
+				label: ip.name,
+				value: ip.name,
+			}));
+		case "projects":
+			return (filterData.projects ?? []).map((project) => ({
+				label: project.name,
+				value: project.name,
+			}));
+		case "tags":
+			return (filterData.tags ?? []).map((tag) => ({
+				label: tag.name,
+				value: tag.name,
+			}));
+	}
+}
+
+export function getSearchComposerSuggestions(
+	draft: string,
+	filterData: SearchPageFilterData,
+	tokens: SearchToken[],
+): SearchSuggestion[] {
+	const active = getActiveToken(draft);
+	if (!active) return [];
+
+	const selectedValues = new Set(
+		tokens
+			.filter((token) => token.key === active.config.key)
+			.map((token) => token.value),
+	);
+	const query = active.query.toLowerCase();
+	const seen = new Set<string>();
+
+	return getSourceValues(filterData, active.config.source)
+		.filter(({ value }) => {
+			const normalized = value.toLowerCase();
+			if (selectedValues.has(value) || seen.has(value)) return false;
+			if (!normalized.includes(query)) return false;
+			seen.add(value);
+			return true;
+		})
+		.slice(0, 100)
+		.map(({ label, value }) => ({
+			key: active.config.key,
+			label,
+			prefix: active.config.prefix,
+			value,
+		}));
+}
diff --git a/packages/ui/src/v2/search-composer.test.ts b/packages/ui/src/v2/search-composer.test.ts
new file mode 100644
index 00000000..7207de87
--- /dev/null
+++ b/packages/ui/src/v2/search-composer.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import type { SearchPageFilterData } from "../hooks/use-search-page";
+import {
+	getSearchComposerSuggestions,
+	type SearchToken,
+} from "./search-composer-utils";
+
+const filterData = {
+	tags: [{ name: "blue hair" }, { name: "blush" }, { name: "green" }],
+	ips: [{ name: "Idolmaster" }],
+	characters: [{ name: "Hoshino Ai" }],
+	authors: [{ name: "Artist", accountId: "artist_01" }],
+	projects: [{ name: "Summer collection" }],
+} as SearchPageFilterData;
+
+describe("getSearchComposerSuggestions", () => {
+	it("maps each relation prefix to its selected state key", () => {
+		expect(getSearchComposerSuggestions("tag:blue", filterData, [])).toEqual([
+			{
+				key: "selectedTags",
+				label: "blue hair",
+				prefix: "tag",
+				value: "blue hair",
+			},
+		]);
+		expect(getSearchComposerSuggestions("-tag:", filterData, [])[0]?.key).toBe(
+			"excludeTags",
+		);
+		expect(getSearchComposerSuggestions("ip:ido", filterData, [])[0]?.key).toBe(
+			"selectedIps",
+		);
+		expect(
+			getSearchComposerSuggestions("character:ai", filterData, [])[0]?.key,
+		).toBe("selectedCharacters");
+		expect(
+			getSearchComposerSuggestions("author:artist", filterData, [])[0]?.label,
+		).toBe("Artist：artist_01");
+		expect(
+			getSearchComposerSuggestions("project:summer", filterData, [])[0]?.key,
+		).toBe("selectedProjects");
+	});
+
+	it("matches case-insensitively and excludes selected values", () => {
+		const tokens: SearchToken[] = [
+			{ key: "selectedTags", prefix: "tag", value: "blue hair" },
+		];
+
+		expect(
+			getSearchComposerSuggestions("tag:BLUE", filterData, tokens),
+		).toEqual([]);
+		expect(
+			getSearchComposerSuggestions("tag:", filterData, tokens).map(
+				(suggestion) => suggestion.value,
+			),
+		).toEqual(["blush", "green"]);
+	});
+
+	it("does not offer suggestions for free text or comma-separated values", () => {
+		expect(getSearchComposerSuggestions("image", filterData, [])).toEqual([]);
+		expect(
+			getSearchComposerSuggestions("tag:blue,red", filterData, []),
+		).toEqual([]);
+	});
+});
diff --git a/packages/ui/src/v2/search-composer.tsx b/packages/ui/src/v2/search-composer.tsx
new file mode 100644
index 00000000..2ac4b5fb
--- /dev/null
+++ b/packages/ui/src/v2/search-composer.tsx
@@ -0,0 +1,199 @@
+import Search from "lucide-solid/icons/search";
+import type { JSX } from "solid-js";
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import {
+	Combobox,
+	ComboboxControl,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxItemLabel,
+	useComboboxContext,
+	VirtualComboboxContent,
+} from "../combobox";
+import type { SearchPageFilterData } from "../hooks/use-search-page";
+import { Label } from "../label";
+import { createDebouncedSignal } from "../utils/debounce";
+
+export type {
+	SearchArrayKey,
+	SearchSuggestion,
+	SearchToken,
+} from "./search-composer-utils";
+
+import {
+	getSearchComposerSuggestions,
+	removeActiveSearchToken,
+	type SearchSuggestion,
+	type SearchToken,
+} from "./search-composer-utils";
+
+export type SearchComposerProps = {
+	draft: string;
+	filterData: SearchPageFilterData;
+	onDraftChange: (value: string) => void;
+	onRemoveToken: (token: SearchToken) => void;
+	onSelectSuggestion: (suggestion: SearchSuggestion) => void;
+	onSubmit: () => void;
+	inputRef?: (element: HTMLInputElement) => void;
+	tokens: SearchToken[];
+};
+
+function ComposerInput(props: {
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onFocus: () => void;
+	onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
+	placeholder: string;
+	ref?: (element: HTMLInputElement) => void;
+}) {
+	const context = useComboboxContext();
+	createEffect(() => context.setInputValue(props.draft));
+
+	return (
+		<ComboboxInput
+			aria-label="メディアを検索"
+			class="h-7 min-h-7 min-w-40 flex-1 border-0 bg-transparent px-1 py-0 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+			enterkeyhint="search"
+			id="v2-search-composer"
+			onFocus={props.onFocus}
+			onInput={(event) => props.onDraftChange(event.currentTarget.value)}
+			onKeyDown={props.onKeyDown}
+			placeholder={props.placeholder}
+			ref={props.ref}
+		/>
+	);
+}
+
+export function SearchComposer(props: SearchComposerProps) {
+	const [selectedSuggestion, setSelectedSuggestion] =
+		createSignal<SearchSuggestion | null>(null);
+	const [menuOpen, setMenuOpen] = createSignal(false);
+	const [suggestionDraft, setSuggestionDraft] = createDebouncedSignal("", 150);
+	const suggestions = createMemo(() =>
+		getSearchComposerSuggestions(
+			suggestionDraft(),
+			props.filterData,
+			props.tokens,
+		),
+	);
+
+	const handleSelect = (suggestion: SearchSuggestion | null) => {
+		if (!suggestion) return;
+		props.onSelectSuggestion(suggestion);
+		setSelectedSuggestion(suggestion);
+		setMenuOpen(false);
+		requestAnimationFrame(() => {
+			setSelectedSuggestion(null);
+			props.onDraftChange(removeActiveSearchToken(props.draft));
+		});
+	};
+
+	const handleKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (
+		event,
+	) => {
+		if (event.key === "Backspace" && props.draft.length === 0) {
+			const token = props.tokens[props.tokens.length - 1];
+			if (token) {
+				event.preventDefault();
+				props.onRemoveToken(token);
+				return;
+			}
+		}
+		if (event.key === "Enter" && !(menuOpen() && suggestions().length > 0)) {
+			event.preventDefault();
+			props.onSubmit();
+		}
+	};
+
+	return (
+		<form
+			autocomplete="off"
+			class="relative min-w-[min(16rem,100%)] flex-1"
+			onSubmit={(event) => {
+				event.preventDefault();
+				props.onSubmit();
+			}}
+		>
+			<Label class="sr-only" for="v2-search-composer">
+				メディアを検索
+			</Label>
+			<Search
+				aria-hidden="true"
+				class="absolute top-[0.7rem] left-3 z-10 text-[var(--v2-text-muted)]"
+				size={16}
+			/>
+			<Combobox<SearchSuggestion>
+				allowDuplicateSelectionEvents={false}
+				closeOnSelection
+				defaultFilter={() => true}
+				disallowEmptySelection={false}
+				itemComponent={(itemProps) => (
+					<ComboboxItem item={itemProps.item}>
+						<ComboboxItemLabel>
+							{itemProps.item.rawValue.label}
+						</ComboboxItemLabel>
+					</ComboboxItem>
+				)}
+				onChange={handleSelect}
+				onInputChange={(value) => {
+					props.onDraftChange(value);
+					setSuggestionDraft(value);
+					setMenuOpen(true);
+				}}
+				onOpenChange={setMenuOpen}
+				open={menuOpen() && suggestions().length > 0}
+				optionLabel="label"
+				optionTextValue="label"
+				optionValue={(suggestion) => `${suggestion.key}:${suggestion.value}`}
+				options={suggestions()}
+				removeOnBackspace={false}
+				triggerMode="input"
+				value={selectedSuggestion()}
+			>
+				<ComboboxControl<SearchSuggestion>
+					aria-label="メディアを検索"
+					class="flex h-auto min-h-11 flex-wrap items-center gap-1.5 rounded-md border border-[var(--v2-border-strong)] bg-white py-1 pr-8 pl-9 focus-within:ring-2 focus-within:ring-[var(--v2-focus)] focus-within:ring-offset-1 sm:min-h-9"
+				>
+					<For each={props.tokens.slice(0, 4)}>
+						{(token) => (
+							<span
+								class={`inline-flex h-6 max-w-52 items-center gap-1 rounded px-1.5 font-medium text-[11px] ${token.destructive ? "bg-red-50 text-destructive" : "bg-[var(--v2-surface-selected)] text-[var(--v2-primary)]"}`}
+							>
+								<span class="truncate">
+									{token.prefix}:{token.value}
+								</span>
+								<button
+									aria-label={`${token.prefix}:${token.value}を解除`}
+									class="flex size-4 shrink-0 items-center justify-center rounded hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)]"
+									onClick={() => props.onRemoveToken(token)}
+									type="button"
+								>
+									×
+								</button>
+							</span>
+						)}
+					</For>
+					<Show when={props.tokens.length > 4}>
+						<span class="inline-flex h-6 items-center rounded bg-[var(--v2-surface-muted)] px-2 font-medium text-[11px] text-[var(--v2-text-secondary)]">
+							ほか{props.tokens.length - 4}件
+						</span>
+					</Show>
+					<ComposerInput
+						draft={props.draft}
+						onDraftChange={props.onDraftChange}
+						onFocus={() => {
+							if (suggestions().length > 0) setMenuOpen(true);
+						}}
+						onKeyDown={handleKeyDown}
+						placeholder="検索、または tag: / author: / ip: …"
+						ref={props.inputRef}
+					/>
+				</ComboboxControl>
+				<VirtualComboboxContent class="v2-theme w-[min(28rem,calc(100dvw-1.5rem))] p-1 shadow-xl" />
+			</Combobox>
+			<kbd class="absolute top-2 right-2 rounded border border-[var(--v2-border)] bg-[var(--v2-surface-muted)] px-1.5 py-0.5 text-[10px] text-[var(--v2-text-muted)]">
+				/
+			</kbd>
+		</form>
+	);
+}
diff --git a/packages/ui/src/v2/search-toolbar.tsx b/packages/ui/src/v2/search-toolbar.tsx
new file mode 100644
index 00000000..ae9b4451
--- /dev/null
+++ b/packages/ui/src/v2/search-toolbar.tsx
@@ -0,0 +1,506 @@
+import type { SearchState } from "@solid-imager/core/domain/search/schema";
+import type { SafeMediaSource } from "@solid-imager/core/domain/sources/schemas";
+import ArrowDownUp from "lucide-solid/icons/arrow-down-up";
+import ChevronDown from "lucide-solid/icons/chevron-down";
+import Filter from "lucide-solid/icons/filter";
+import Grid3X3 from "lucide-solid/icons/grid-3-x-3";
+import List from "lucide-solid/icons/list";
+import type { JSX } from "solid-js";
+import {
+	batch,
+	createMemo,
+	createSignal,
+	onCleanup,
+	onMount,
+	Show,
+} from "solid-js";
+import { Button, buttonVariants } from "../button";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import type { PresetManagerClient } from "../search-control-panel";
+import { SearchControlPanel } from "../search-control-panel";
+import { SortControls } from "../sort-controls";
+import {
+	clearPresetFilters,
+	searchState,
+	setSearchState,
+} from "../stores/search-store";
+import {
+	type SearchArrayKey,
+	SearchComposer,
+	type SearchSuggestion,
+	type SearchToken,
+} from "./search-composer";
+
+export type V2SearchToolbarProps = {
+	actions?: JSX.Element;
+	context: "global" | "source";
+	filterData: {
+		authors:
+			| import("@solid-imager/core/domain/authors/schemas").Author[]
+			| undefined;
+		characters:
+			| import("@solid-imager/core/domain/characters/schemas").Character[]
+			| undefined;
+		ips: import("@solid-imager/core/domain/ips/schemas").Ip[] | undefined;
+		projects:
+			| import("@solid-imager/core/domain/projects/schemas").Project[]
+			| undefined;
+		tags:
+			| import("@solid-imager/core/domain/tags/schemas").TagResponse[]
+			| undefined;
+	};
+	itemCount?: number;
+	onSearch: () => void;
+	onSelectSource?: (id: string) => void;
+	presetClient: PresetManagerClient;
+	selectedSource?: string;
+	sourceName: string;
+	sources?: SafeMediaSource[];
+};
+
+function parseValues(value: string): string[] {
+	return [
+		...new Set(
+			value
+				.split(",")
+				.map((part) => part.trim())
+				.filter(Boolean),
+		),
+	];
+}
+
+function appendValues(key: SearchArrayKey, rawValue: string) {
+	const values = parseValues(rawValue);
+	if (values.length === 0) return;
+	setSearchState(key, [...new Set([...searchState[key], ...values])]);
+}
+
+function removeToken(token: SearchToken) {
+	if (token.key === "searchQuery") {
+		setSearchState("searchQuery", "");
+		return;
+	}
+	setSearchState(
+		token.key,
+		searchState[token.key].filter((value) => value !== token.value),
+	);
+}
+
+const SEARCH_APPLY_DEBOUNCE_MS = 250;
+
+function tokenId(token: Pick<SearchToken, "key" | "value">): string {
+	return `${token.key}\u0000${token.value}`;
+}
+
+function submitComposerDraft(rawDraft: string): boolean {
+	const parts = rawDraft.match(/(?:[^\s"]+|"[^"]*")+/g) ?? [];
+	const freeText: string[] = [];
+	let changed = false;
+
+	for (const part of parts) {
+		const separatorIndex = part.indexOf(":");
+		if (separatorIndex < 1) {
+			freeText.push(part.replace(/^"|"$/g, ""));
+			continue;
+		}
+		const prefix = part.slice(0, separatorIndex).toLowerCase();
+		const value = part
+			.slice(separatorIndex + 1)
+			.replace(/^"|"$/g, "")
+			.trim();
+		if (!value) continue;
+
+		switch (prefix) {
+			case "name":
+				setSearchState("searchQuery", value);
+				changed = true;
+				break;
+			case "tag":
+				appendValues("selectedTags", value);
+				changed = true;
+				break;
+			case "-tag":
+				appendValues("excludeTags", value);
+				changed = true;
+				break;
+			case "character":
+				appendValues("selectedCharacters", value);
+				changed = true;
+				break;
+			case "ip":
+				appendValues("selectedIps", value);
+				changed = true;
+				break;
+			case "author":
+				appendValues("selectedAuthors", value);
+				changed = true;
+				break;
+			case "project":
+				appendValues("selectedProjects", value);
+				changed = true;
+				break;
+			default:
+				freeText.push(part);
+		}
+	}
+
+	if (freeText.length > 0) {
+		setSearchState("searchQuery", freeText.join(" "));
+		changed = true;
+	}
+	return changed;
+}
+
+function tokensFromState(state: SearchState): SearchToken[] {
+	return [
+		...(state.searchQuery
+			? [
+					{
+						key: "searchQuery" as const,
+						prefix: "name",
+						value: state.searchQuery,
+					},
+				]
+			: []),
+		...state.selectedTags.map((value) => ({
+			key: "selectedTags" as const,
+			prefix: "tag",
+			value,
+		})),
+		...state.excludeTags.map((value) => ({
+			destructive: true,
+			key: "excludeTags" as const,
+			prefix: "-tag",
+			value,
+		})),
+		...state.selectedCharacters.map((value) => ({
+			key: "selectedCharacters" as const,
+			prefix: "character",
+			value,
+		})),
+		...state.selectedIps.map((value) => ({
+			key: "selectedIps" as const,
+			prefix: "ip",
+			value,
+		})),
+		...state.selectedAuthors.map((value) => ({
+			key: "selectedAuthors" as const,
+			prefix: "author",
+			value,
+		})),
+		...state.selectedProjects.map((value) => ({
+			key: "selectedProjects" as const,
+			prefix: "project",
+			value,
+		})),
+	];
+}
+
+function sortLabel(state: SearchState): string {
+	const labels: Record<SearchState["sortBy"], string> = {
+		date: "作成日",
+		name: "名前",
+		rating: "評価",
+		size: "サイズ",
+		viewCount: "閲覧数",
+	};
+	const field = labels[state.sortBy];
+	return `${field}・${state.sortOrder === "desc" ? "降順" : "昇順"}`;
+}
+
+export function V2SearchToolbar(props: V2SearchToolbarProps) {
+	const [draft, setDraft] = createSignal("");
+	const [pendingSuggestions, setPendingSuggestions] = createSignal<
+		SearchSuggestion[]
+	>([]);
+	const [pendingRemovals, setPendingRemovals] = createSignal<SearchToken[]>([]);
+	const [filterOpen, setFilterOpen] = createSignal(false);
+	const [sortOpen, setSortOpen] = createSignal(false);
+	const tokens = createMemo(() => {
+		const removalIds = new Set(pendingRemovals().map(tokenId));
+		return [
+			...tokensFromState(searchState).filter(
+				(token) => !removalIds.has(tokenId(token)),
+			),
+			...pendingSuggestions().map((suggestion) => ({
+				key: suggestion.key,
+				prefix: suggestion.prefix,
+				value: suggestion.value,
+			})),
+		];
+	});
+	let composerInput: HTMLInputElement | undefined;
+	let searchApplyTimer: ReturnType<typeof setTimeout> | undefined;
+	const applyPendingChanges = () => {
+		searchApplyTimer = undefined;
+		const additions = pendingSuggestions();
+		const removals = pendingRemovals();
+		if (additions.length === 0 && removals.length === 0) return;
+
+		batch(() => {
+			for (const token of removals) removeToken(token);
+			for (const suggestion of additions) {
+				setSearchState(suggestion.key, [
+					...new Set([...searchState[suggestion.key], suggestion.value]),
+				]);
+			}
+		});
+		setPendingSuggestions([]);
+		setPendingRemovals([]);
+		props.onSearch();
+	};
+	const scheduleSearchApply = () => {
+		if (searchApplyTimer) clearTimeout(searchApplyTimer);
+		searchApplyTimer = setTimeout(
+			applyPendingChanges,
+			SEARCH_APPLY_DEBOUNCE_MS,
+		);
+	};
+	onCleanup(() => {
+		if (searchApplyTimer) clearTimeout(searchApplyTimer);
+	});
+	const selectSuggestion = (suggestion: SearchSuggestion) => {
+		const suggestionId = tokenId(suggestion);
+		if (pendingRemovals().some((token) => tokenId(token) === suggestionId)) {
+			setPendingRemovals((current) =>
+				current.filter((token) => tokenId(token) !== suggestionId),
+			);
+			scheduleSearchApply();
+			return;
+		}
+		setPendingSuggestions((current) =>
+			current.some(
+				(item) =>
+					item.key === suggestion.key && item.value === suggestion.value,
+			)
+				? current
+				: [...current, suggestion],
+		);
+		scheduleSearchApply();
+	};
+	const submitDraft = () => {
+		if (searchApplyTimer) clearTimeout(searchApplyTimer);
+		searchApplyTimer = undefined;
+		const additions = pendingSuggestions();
+		const removals = pendingRemovals();
+		let changed = additions.length > 0 || removals.length > 0;
+		batch(() => {
+			for (const token of removals) removeToken(token);
+			for (const suggestion of additions) {
+				setSearchState(suggestion.key, [
+					...new Set([...searchState[suggestion.key], suggestion.value]),
+				]);
+			}
+			if (submitComposerDraft(draft())) changed = true;
+		});
+		if (!changed) return;
+		setPendingSuggestions([]);
+		setPendingRemovals([]);
+		setDraft("");
+		props.onSearch();
+	};
+
+	onMount(() => {
+		const focusComposer = (event: KeyboardEvent) => {
+			const target = event.target;
+			const isEditing =
+				target instanceof HTMLElement &&
+				(target.matches("input, textarea, select") || target.isContentEditable);
+			if (
+				event.key !== "/" ||
+				event.metaKey ||
+				event.ctrlKey ||
+				event.altKey ||
+				isEditing
+			) {
+				return;
+			}
+			event.preventDefault();
+			composerInput?.focus();
+		};
+		window.addEventListener("keydown", focusComposer);
+		onCleanup(() => window.removeEventListener("keydown", focusComposer));
+	});
+
+	return (
+		<header class="shrink-0 border-[var(--v2-border)] border-b bg-[var(--v2-surface-subtle)] px-3 py-3 sm:px-4">
+			<div class="mb-2 flex min-h-6 items-center gap-2 text-sm">
+				<span class="text-[var(--v2-text-secondary)]">Library</span>
+				<span aria-hidden="true" class="text-[var(--v2-border-strong)]">
+					/
+				</span>
+				<strong class="min-w-0 truncate font-semibold">
+					{props.sourceName}
+				</strong>
+				<Show when={props.itemCount !== undefined}>
+					<span class="ml-auto shrink-0 text-xs text-[var(--v2-text-muted)]">
+						{props.itemCount?.toLocaleString()} items
+					</span>
+				</Show>
+			</div>
+			<div class="flex min-w-0 flex-wrap items-start gap-2">
+				<SearchComposer
+					draft={draft()}
+					filterData={props.filterData}
+					onDraftChange={(value) => setDraft(value)}
+					onRemoveToken={(token) => {
+						const id = tokenId(token);
+						const pending = pendingSuggestions();
+						if (pending.some((item) => tokenId(item) === id)) {
+							setPendingSuggestions((current) =>
+								current.filter((item) => tokenId(item) !== id),
+							);
+							scheduleSearchApply();
+							return;
+						}
+						setPendingRemovals((current) =>
+							current.some((item) => tokenId(item) === id)
+								? current
+								: [...current, token],
+						);
+						scheduleSearchApply();
+					}}
+					onSelectSuggestion={selectSuggestion}
+					onSubmit={submitDraft}
+					inputRef={(element) => {
+						composerInput = element;
+					}}
+					tokens={tokens()}
+				/>
+
+				<Popover
+					forceMount
+					onOpenChange={setFilterOpen}
+					open={filterOpen()}
+					placement="bottom-end"
+				>
+					<PopoverTrigger
+						aria-label={`検索フィルター、${tokens().length}件の条件`}
+						class={buttonVariants({
+							class:
+								"min-h-11 border-[var(--v2-border-strong)] bg-white px-3 shadow-none sm:min-h-9",
+							size: "sm",
+							variant: "outline",
+						})}
+					>
+						<Filter aria-hidden="true" size={15} />
+						フィルター
+						<Show when={tokens().length > 0}>
+							<span class="flex min-w-5 items-center justify-center rounded-full bg-[var(--v2-primary)] px-1.5 py-0.5 text-[10px] text-white">
+								{tokens().length}
+							</span>
+						</Show>
+					</PopoverTrigger>
+					<PopoverContent
+						aria-label="検索フィルター"
+						class="v2-theme flex max-h-[min(42rem,calc(100dvh-2rem))] w-[min(24rem,calc(100dvw-1.5rem))] flex-col overflow-hidden bg-[var(--v2-surface)] p-0 text-[var(--v2-text)] shadow-xl data-[closed]:hidden data-[expanded]:animate-none"
+					>
+						<div class="flex items-start justify-between border-[var(--v2-border)] border-b px-4 py-3">
+							<div>
+								<h2 class="font-semibold text-sm">検索フィルター</h2>
+								<p class="mt-0.5 text-[11px] text-[var(--v2-text-muted)]">
+									検索バーと同じ条件を編集します
+								</p>
+							</div>
+							<Button
+								class="h-7 px-2 text-xs"
+								onClick={() => {
+									clearPresetFilters();
+									props.onSearch();
+								}}
+								size="sm"
+								variant="ghost"
+							>
+								すべて解除
+							</Button>
+						</div>
+						<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4">
+							<SearchControlPanel
+								context={props.context}
+								filterData={props.filterData}
+								onSearch={props.onSearch}
+								onSelectSource={props.onSelectSource}
+								presetClient={props.presetClient}
+								selectedSource={props.selectedSource}
+								showSearchButton={false}
+								sources={props.sources}
+								usePopover={false}
+							/>
+						</div>
+						<div class="flex shrink-0 justify-end gap-2 border-[var(--v2-border)] border-t bg-white p-3">
+							<Button
+								onClick={() => setFilterOpen(false)}
+								size="sm"
+								variant="outline"
+							>
+								閉じる
+							</Button>
+							<Button
+								disabled={
+									searchState.mode === "vector" &&
+									!searchState.similarityAnchorMediaId
+								}
+								onClick={() => {
+									props.onSearch();
+									setFilterOpen(false);
+								}}
+								size="sm"
+							>
+								適用
+							</Button>
+						</div>
+					</PopoverContent>
+				</Popover>
+
+				<Popover
+					onOpenChange={setSortOpen}
+					open={sortOpen()}
+					placement="bottom-end"
+				>
+					<PopoverTrigger
+						aria-label={`並び替え、現在は${sortLabel(searchState)}`}
+						class={buttonVariants({
+							class:
+								"min-h-11 border-[var(--v2-border-strong)] bg-white px-3 shadow-none sm:min-h-9",
+							size: "sm",
+							variant: "outline",
+						})}
+					>
+						<ArrowDownUp aria-hidden="true" size={15} />
+						<span class="hidden sm:inline">{sortLabel(searchState)}</span>
+						<ChevronDown aria-hidden="true" size={13} />
+					</PopoverTrigger>
+					<PopoverContent class="v2-theme w-72 p-4 shadow-xl">
+						<SortControls
+							onSortByChange={(value) => setSearchState("sortBy", value)}
+							onSortOrderChange={(value) => setSearchState("sortOrder", value)}
+							sortBy={searchState.sortBy}
+							sortOrder={searchState.sortOrder}
+						/>
+					</PopoverContent>
+				</Popover>
+				<div class="flex rounded-md border border-[var(--v2-border-strong)] bg-white p-0.5">
+					<Button
+						aria-label="グリッド表示"
+						aria-pressed="true"
+						class="size-11 bg-[var(--v2-primary)] p-0 text-white hover:bg-[var(--v2-primary-hover)] sm:size-8"
+						size="icon"
+					>
+						<Grid3X3 aria-hidden="true" size={15} />
+					</Button>
+					<Button
+						aria-label="リスト表示（未実装）"
+						class="size-11 p-0 sm:size-8"
+						disabled
+						size="icon"
+						title="リスト表示は今後実装予定です"
+						variant="ghost"
+					>
+						<List aria-hidden="true" size={15} />
+					</Button>
+				</div>
+				{props.actions}
+			</div>
+		</header>
+	);
+}