includio-cms 0.14.2 → 0.14.3

package/dist/admin/client/maintenance/maintenance-page.svelte

@@ -12,6 +12,8 @@
 	import Transform from '@tabler/icons-svelte/icons/transform';
 	import Database from '@tabler/icons-svelte/icons/database';
 	import Server from '@tabler/icons-svelte/icons/server';
+	import Clock from '@tabler/icons-svelte/icons/clock';
+	import Settings from '@tabler/icons-svelte/icons/automation';
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as Card from '../../../components/ui/card/index.js';
 	import { toast } from 'svelte-sonner';
@@ -56,6 +58,13 @@
 		systemInfo: SystemInfo;
 	}
 
+	interface MaintenanceStatus {
+		running: boolean;
+		lastRun: string | null;
+		nextRun: string | null;
+		lastResult: { stylesCreated: number; postersCreated: number; transcodesCreated: number; orphansDeleted: number } | null;
+	}
+
 	function formatBytes(bytes: number): string {
 		if (bytes === 0) return '0 B';
 		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
@@ -63,8 +72,28 @@
 		return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
 	}
 
+	function timeAgo(dateStr: string): string {
+		const diff = Date.now() - new Date(dateStr).getTime();
+		const mins = Math.floor(diff / 60000);
+		if (mins < 1) return 'przed chwilą';
+		if (mins < 60) return `${mins} min temu`;
+		const hours = Math.floor(mins / 60);
+		if (hours < 24) return `${hours}h temu`;
+		return `${Math.floor(hours / 24)}d temu`;
+	}
+
+	function timeUntil(dateStr: string): string {
+		const diff = new Date(dateStr).getTime() - Date.now();
+		const mins = Math.floor(diff / 60000);
+		if (mins < 1) return 'za chwilę';
+		if (mins < 60) return `za ${mins} min`;
+		const hours = Math.floor(mins / 60);
+		return `za ${hours}h`;
+	}
+
 	let report = $state<GcReport | null>(null);
 	let sysInfo = $state<SystemInfoResponse | null>(null);
+	let maintenanceStatus = $state<MaintenanceStatus | null>(null);
 	let loading = $state(true);
 	let purging = $state(false);
 	let cleaningOrphans = $state(false);
@@ -110,18 +139,35 @@
 		report ? report.videoStylesExpected - report.videoStylesDone : 0
 	);
 
+	let diskSegments = $derived(
+		sysInfo
+			? [
+					{ bytes: sysInfo.diskUsage.originals.images, color: 'var(--primary)', label: 'Obrazy' },
+					{ bytes: sysInfo.diskUsage.originals.videos, color: '#8B5CF6', label: 'Wideo' },
+					{ bytes: sysInfo.diskUsage.originals.audio + sysInfo.diskUsage.originals.pdf + sysInfo.diskUsage.originals.other, color: '#6B7280', label: 'Inne' },
+					{ bytes: sysInfo.diskUsage.imageStyles.bytes, color: '#3B82F6', label: 'Style obrazów' },
+					{ bytes: sysInfo.diskUsage.videoStyles.bytes, color: '#A855F7', label: 'Style wideo' },
+					{ bytes: sysInfo.diskUsage.posters.bytes, color: '#EC4899', label: 'Postery' }
+				].filter((s) => s.bytes > 0)
+			: []
+	);
+
 	async function loadReport() {
 		loading = true;
 		try {
-			const [gcRes, sysRes] = await Promise.all([
+			const [gcRes, sysRes, msRes] = await Promise.all([
 				fetch('/admin/api/media-gc'),
-				fetch('/admin/api/system-info')
+				fetch('/admin/api/system-info'),
+				fetch('/admin/api/maintenance-status')
 			]);
 			if (!gcRes.ok) throw new Error('Failed to load GC report');
 			report = await gcRes.json();
 			if (sysRes.ok) {
 				sysInfo = await sysRes.json();
 			}
+			if (msRes.ok) {
+				maintenanceStatus = await msRes.json();
+			}
 		} catch {
 			toast.error('Nie udało się załadować raportu');
 		} finally {
@@ -159,60 +205,55 @@
 		}
 	}
 
+	async function handleSSE(
+		url: string,
+		abort: AbortController,
+		onEvent: (event: Record<string, unknown>) => void
+	) {
+		const res = await fetch(url, { method: 'POST', signal: abort.signal });
+		if (!res.ok) throw new Error('Failed to start');
+		if (!res.body) throw new Error('No response body');
+
+		const reader = res.body.getReader();
+		const decoder = new TextDecoder();
+		let buffer = '';
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+
+			buffer += decoder.decode(value, { stream: true });
+			const chunks = buffer.split('\n\n');
+			buffer = chunks.pop() || '';
+
+			for (const chunk of chunks) {
+				if (!chunk.startsWith('data: ')) continue;
+				onEvent(JSON.parse(chunk.slice(6)));
+			}
+		}
+	}
+
 	async function startBatchGenerate() {
 		generating = true;
-		genTotal = 0;
-		genProcessed = 0;
-		genCreated = 0;
-		genSkipped = 0;
-		genCurrentFile = '';
-		genErrors = 0;
+		genTotal = 0; genProcessed = 0; genCreated = 0; genSkipped = 0; genCurrentFile = ''; genErrors = 0;
 		genAbort = new AbortController();
 
 		try {
-			const res = await fetch('/admin/api/generate-styles', {
-				method: 'POST',
-				signal: genAbort.signal
-			});
-
-			if (!res.ok) throw new Error('Failed to start');
-			if (!res.body) throw new Error('No response body');
-
-			const reader = res.body.getReader();
-			const decoder = new TextDecoder();
-			let buffer = '';
-
-			while (true) {
-				const { done, value } = await reader.read();
-				if (done) break;
-
-				buffer += decoder.decode(value, { stream: true });
-				const chunks = buffer.split('\n\n');
-				buffer = chunks.pop() || '';
-
-				for (const chunk of chunks) {
-					if (!chunk.startsWith('data: ')) continue;
-					const event = JSON.parse(chunk.slice(6));
-
-					genTotal = event.total ?? genTotal;
-					genProcessed = event.processed ?? genProcessed;
-					genCreated = event.created ?? genCreated;
-					genSkipped = event.skipped ?? genSkipped;
-					genCurrentFile = event.currentFile ?? genCurrentFile;
-
-					if (event.type === 'error') {
-						genErrors++;
-					}
-
-					if (event.type === 'done') {
-						const parts = [`Przetworzono ${genTotal} obrazów`];
-						if (genCreated > 0) parts.push(`utworzono ${genCreated} styli`);
-						if (genSkipped > 0) parts.push(`pominięto ${genSkipped} (już istnieją)`);
-						if (genErrors > 0) parts.push(`${genErrors} błędów`);
-						toast.success(parts.join(', '));
-					}
+			await handleSSE('/admin/api/generate-styles', genAbort, (event) => {
+				genTotal = (event.total as number) ?? genTotal;
+				genProcessed = (event.processed as number) ?? genProcessed;
+				genCreated = (event.created as number) ?? genCreated;
+				genSkipped = (event.skipped as number) ?? genSkipped;
+				genCurrentFile = (event.currentFile as string) ?? genCurrentFile;
+				if (event.type === 'error') genErrors++;
+				if (event.type === 'done') {
+					const parts = [`Przetworzono ${genTotal} obrazów`];
+					if (genCreated > 0) parts.push(`utworzono ${genCreated} styli`);
+					if (genSkipped > 0) parts.push(`pominięto ${genSkipped} (już istnieją)`);
+					if (genErrors > 0) parts.push(`${genErrors} błędów`);
+					toast.success(parts.join(', '));
 				}
-			}
+			});
 		} catch (e) {
 			if (e instanceof DOMException && e.name === 'AbortError') {
 				toast.info(`Przerwano po ${genProcessed}/${genTotal} obrazów`);
@@ -226,64 +267,27 @@
 		}
 	}
 
-	function cancelBatchGenerate() {
-		genAbort?.abort();
-	}
-
 	async function startPosterGenerate() {
 		posterGenerating = true;
-		posterTotal = 0;
-		posterProcessed = 0;
-		posterCreated = 0;
-		posterSkipped = 0;
-		posterCurrentFile = '';
-		posterErrors = 0;
+		posterTotal = 0; posterProcessed = 0; posterCreated = 0; posterSkipped = 0; posterCurrentFile = ''; posterErrors = 0;
 		posterAbort = new AbortController();
 
 		try {
-			const res = await fetch('/admin/api/regenerate-posters', {
-				method: 'POST',
-				signal: posterAbort.signal
-			});
-
-			if (!res.ok) throw new Error('Failed to start');
-			if (!res.body) throw new Error('No response body');
-
-			const reader = res.body.getReader();
-			const decoder = new TextDecoder();
-			let buffer = '';
-
-			while (true) {
-				const { done, value } = await reader.read();
-				if (done) break;
-
-				buffer += decoder.decode(value, { stream: true });
-				const chunks = buffer.split('\n\n');
-				buffer = chunks.pop() || '';
-
-				for (const chunk of chunks) {
-					if (!chunk.startsWith('data: ')) continue;
-					const event = JSON.parse(chunk.slice(6));
-
-					posterTotal = event.total ?? posterTotal;
-					posterProcessed = event.processed ?? posterProcessed;
-					posterCreated = event.created ?? posterCreated;
-					posterSkipped = event.skipped ?? posterSkipped;
-					posterCurrentFile = event.currentFile ?? posterCurrentFile;
-
-					if (event.type === 'error') {
-						posterErrors++;
-					}
-
-					if (event.type === 'done') {
-						const parts = [`Przetworzono ${posterTotal} filmów`];
-						if (posterCreated > 0) parts.push(`utworzono ${posterCreated} posterów`);
-						if (posterSkipped > 0) parts.push(`pominięto ${posterSkipped} (już istnieją)`);
-						if (posterErrors > 0) parts.push(`${posterErrors} błędów`);
-						toast.success(parts.join(', '));
-					}
+			await handleSSE('/admin/api/regenerate-posters', posterAbort, (event) => {
+				posterTotal = (event.total as number) ?? posterTotal;
+				posterProcessed = (event.processed as number) ?? posterProcessed;
+				posterCreated = (event.created as number) ?? posterCreated;
+				posterSkipped = (event.skipped as number) ?? posterSkipped;
+				posterCurrentFile = (event.currentFile as string) ?? posterCurrentFile;
+				if (event.type === 'error') posterErrors++;
+				if (event.type === 'done') {
+					const parts = [`Przetworzono ${posterTotal} filmów`];
+					if (posterCreated > 0) parts.push(`utworzono ${posterCreated} posterów`);
+					if (posterSkipped > 0) parts.push(`pominięto ${posterSkipped} (już istnieją)`);
+					if (posterErrors > 0) parts.push(`${posterErrors} błędów`);
+					toast.success(parts.join(', '));
 				}
-			}
+			});
 		} catch (e) {
 			if (e instanceof DOMException && e.name === 'AbortError') {
 				toast.info(`Przerwano po ${posterProcessed}/${posterTotal} filmów`);
@@ -297,64 +301,27 @@
 		}
 	}
 
-	function cancelPosterGenerate() {
-		posterAbort?.abort();
-	}
-
 	async function startTranscode() {
 		transcoding = true;
-		transTotal = 0;
-		transProcessed = 0;
-		transCreated = 0;
-		transSkipped = 0;
-		transCurrentFile = '';
-		transErrors = 0;
+		transTotal = 0; transProcessed = 0; transCreated = 0; transSkipped = 0; transCurrentFile = ''; transErrors = 0;
 		transAbort = new AbortController();
 
 		try {
-			const res = await fetch('/admin/api/transcode-videos', {
-				method: 'POST',
-				signal: transAbort.signal
-			});
-
-			if (!res.ok) throw new Error('Failed to start');
-			if (!res.body) throw new Error('No response body');
-
-			const reader = res.body.getReader();
-			const decoder = new TextDecoder();
-			let buffer = '';
-
-			while (true) {
-				const { done, value } = await reader.read();
-				if (done) break;
-
-				buffer += decoder.decode(value, { stream: true });
-				const chunks = buffer.split('\n\n');
-				buffer = chunks.pop() || '';
-
-				for (const chunk of chunks) {
-					if (!chunk.startsWith('data: ')) continue;
-					const event = JSON.parse(chunk.slice(6));
-
-					transTotal = event.total ?? transTotal;
-					transProcessed = event.processed ?? transProcessed;
-					transCreated = event.created ?? transCreated;
-					transSkipped = event.skipped ?? transSkipped;
-					transCurrentFile = event.currentFile ?? transCurrentFile;
-
-					if (event.type === 'error') {
-						transErrors++;
-					}
-
-					if (event.type === 'done') {
-						const parts = [`Przetworzono ${transTotal} wariantów`];
-						if (transCreated > 0) parts.push(`utworzono ${transCreated}`);
-						if (transSkipped > 0) parts.push(`pominięto ${transSkipped}`);
-						if (transErrors > 0) parts.push(`${transErrors} błędów`);
-						toast.success(parts.join(', '));
-					}
+			await handleSSE('/admin/api/transcode-videos', transAbort, (event) => {
+				transTotal = (event.total as number) ?? transTotal;
+				transProcessed = (event.processed as number) ?? transProcessed;
+				transCreated = (event.created as number) ?? transCreated;
+				transSkipped = (event.skipped as number) ?? transSkipped;
+				transCurrentFile = (event.currentFile as string) ?? transCurrentFile;
+				if (event.type === 'error') transErrors++;
+				if (event.type === 'done') {
+					const parts = [`Przetworzono ${transTotal} wariantów`];
+					if (transCreated > 0) parts.push(`utworzono ${transCreated}`);
+					if (transSkipped > 0) parts.push(`pominięto ${transSkipped}`);
+					if (transErrors > 0) parts.push(`${transErrors} błędów`);
+					toast.success(parts.join(', '));
 				}
-			}
+			});
 		} catch (e) {
 			if (e instanceof DOMException && e.name === 'AbortError') {
 				toast.info(`Przerwano po ${transProcessed}/${transTotal} wariantów`);
@@ -368,10 +335,6 @@
 		}
 	}
 
-	function cancelTranscode() {
-		transAbort?.abort();
-	}
-
 	async function purgeVideoStylesAction() {
 		purgingVideoStyles = true;
 		try {
@@ -393,508 +356,451 @@
 </script>
 
 <div class="p-5 pb-24 md:p-7">
-	<div class="mb-6">
-		<h1 class="mb-1 text-2xl font-bold">Konserwacja</h1>
-		<p class="text-sm" style="color: var(--muted-foreground);">
-			Narzędzia do zarządzania plikami mediów i stylami obrazów
-		</p>
+	<!-- Header -->
+	<div class="mb-6 flex items-start justify-between">
+		<div>
+			<h1 class="mb-1 text-2xl font-bold">Konserwacja</h1>
+			<p class="text-sm" style="color: var(--muted-foreground);">
+				Zarządzanie mediami, optymalizacja i automatyczna konserwacja
+			</p>
+		</div>
+		<Button variant="outline" size="sm" onclick={loadReport} disabled={loading}>
+			{#if loading}
+				<Loader2 class="size-4 animate-spin" />
+			{:else}
+				<Refresh class="size-4" />
+			{/if}
+			Odśwież
+		</Button>
 	</div>
 
+	<!-- Auto-maintenance status -->
+	{#if maintenanceStatus}
+		<div
+			class="mb-6 flex items-center gap-3 rounded-lg border px-4 py-3 text-sm"
+			style="border-color: var(--border); background: var(--muted, #f9fafb);"
+		>
+			<Settings class="size-4 shrink-0" style="color: var(--primary);" />
+			<div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+				<span class="font-medium">Automatyczna konserwacja</span>
+				{#if maintenanceStatus.running}
+					<span class="flex items-center gap-1.5" style="color: var(--primary);">
+						<Loader2 class="size-3.5 animate-spin" />
+						W trakcie...
+					</span>
+				{:else if maintenanceStatus.lastRun}
+					<span style="color: var(--muted-foreground);">
+						Ostatnio: {timeAgo(maintenanceStatus.lastRun)}
+					</span>
+				{/if}
+				{#if maintenanceStatus.nextRun && !maintenanceStatus.running}
+					<span style="color: var(--muted-foreground);">
+						<Clock class="mr-0.5 inline size-3.5" style="vertical-align: -2px;" />
+						Następnie: {timeUntil(maintenanceStatus.nextRun)}
+					</span>
+				{/if}
+				{#if maintenanceStatus.lastResult}
+					{@const r = maintenanceStatus.lastResult}
+					{#if r.stylesCreated + r.postersCreated + r.transcodesCreated + r.orphansDeleted > 0}
+						<span style="color: var(--muted-foreground);">
+							Ostatni wynik:
+							{[
+								r.stylesCreated > 0 ? `${r.stylesCreated} styli` : '',
+								r.postersCreated > 0 ? `${r.postersCreated} posterów` : '',
+								r.transcodesCreated > 0 ? `${r.transcodesCreated} transkodowań` : '',
+								r.orphansDeleted > 0 ? `${r.orphansDeleted} osieroconych` : ''
+							].filter(Boolean).join(', ')}
+						</span>
+					{/if}
+				{/if}
+			</div>
+		</div>
+	{/if}
+
 	{#if loading}
 		<div class="flex items-center justify-center py-20">
 			<Loader2 class="size-6 animate-spin" style="color: var(--muted-foreground);" />
 		</div>
 	{:else if report}
-		<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
-			<!-- Image styles -->
-			<Card.Root>
-				<Card.Header>
-					<div class="flex items-center gap-2">
-						<Photo class="size-5" style="color: var(--primary);" />
-						<Card.Title>Style obrazów</Card.Title>
-					</div>
-					<Card.Description>
-						Wygenerowane warianty (mniejsze rozmiary, WebP/AVIF)
-					</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<p class="mb-1 text-3xl font-bold" style="color: var(--primary);">
-						{report.imageStylesCount}
-						<span class="text-base font-normal" style="color: var(--muted-foreground);">/ {report.expectedStylesCount}</span>
-					</p>
-					<p class="mb-4 text-xs" style="color: var(--muted-foreground);">
-						{report.processableImagesCount} obrazów, {report.expectedStylesCount} oczekiwanych styli
-					</p>
-
-					<!-- Batch generate -->
-					{#if generating}
-						<div class="mb-4">
-							<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
-								<span>{genProcessed}/{genTotal} obrazów</span>
-								<span>{genPercent}%</span>
-							</div>
-							<div class="h-2 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
-								<div
-									class="h-full rounded-full transition-all duration-300"
-									style="width: {genPercent}%; background: var(--primary);"
-								></div>
+		<!-- Section: Media Processing -->
+		<div class="mb-8">
+			<h2 class="mb-3 text-sm font-semibold uppercase tracking-wider" style="color: var(--muted-foreground);">
+				Przetwarzanie mediów
+			</h2>
+			<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+				<!-- Image styles -->
+				<Card.Root>
+					<Card.Header class="pb-3">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<Photo class="size-5" style="color: var(--primary);" />
+								<Card.Title class="text-base">Style obrazów</Card.Title>
 							</div>
-							<p class="mt-1 text-xs" style="color: var(--muted-foreground);">
-								Utworzono: {genCreated}, pominięto: {genSkipped}{genErrors > 0 ? `, błędów: ${genErrors}` : ''}
-							</p>
-							<p class="mt-0.5 truncate text-xs" style="color: var(--muted-foreground);">
-								{genCurrentFile}
-							</p>
-							<Button
-								variant="outline"
-								size="sm"
-								onclick={cancelBatchGenerate}
-								class="mt-2"
-							>
-								<PlayerStop class="size-4" />
-								Anuluj
-							</Button>
-						</div>
-					{:else if report.missingStylesCount > 0}
-						<div class="mb-3">
-							<p class="mb-2 text-sm" style="color: var(--warning, #C4893A);">
-								Brakuje {report.missingStylesCount} styli — generowanie odbywa się przy wyświetleniu, co może spowalniać aplikację.
-							</p>
-							<Button
-								variant="default"
-								size="sm"
-								onclick={startBatchGenerate}
-							>
-								<PlayerPlay class="size-4" />
-								Generuj brakujące style
-							</Button>
+							{#if report.missingStylesCount === 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--success, #3A8A5C) 15%, transparent); color: var(--success, #3A8A5C);">OK</span>
+							{:else}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--warning, #C4893A) 15%, transparent); color: var(--warning, #C4893A);">Brakuje {report.missingStylesCount}</span>
+							{/if}
 						</div>
-					{:else}
-						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
-							<CircleCheck class="size-4" />
-							Wszystkie style wygenerowane
+					</Card.Header>
+					<Card.Content>
+						<p class="text-sm" style="color: var(--muted-foreground);">
+							Warianty (WebP, AVIF, responsywne rozmiary)
+						</p>
+						<div class="mt-3 flex items-baseline gap-1.5">
+							<span class="text-2xl font-bold">{report.imageStylesCount}</span>
+							<span class="text-sm" style="color: var(--muted-foreground);">styli</span>
 						</div>
-					{/if}
+						<p class="mt-0.5 text-xs" style="color: var(--muted-foreground);">
+							{report.processableImagesCount} obrazów{report.missingStylesCount > 0 ? `, brakuje ${report.missingStylesCount} domyślnych` : ''}
+						</p>
 
-					<Button
-						variant="destructive"
-						size="sm"
-						onclick={purgeStyles}
-						disabled={purging || generating || report.imageStylesCount === 0}
-					>
-						{#if purging}
-							<Loader2 class="size-4 animate-spin" />
+						{#if generating}
+							<div class="mt-3">
+								<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
+									<span>{genProcessed}/{genTotal} obrazów</span>
+									<span>{genPercent}%</span>
+								</div>
+								<div class="h-1.5 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
+									<div class="h-full rounded-full transition-all duration-300" style="width: {genPercent}%; background: var(--primary);"></div>
+								</div>
+								<p class="mt-1 truncate text-xs" style="color: var(--muted-foreground);">{genCurrentFile}</p>
+								<Button variant="outline" size="sm" onclick={() => genAbort?.abort()} class="mt-2">
+									<PlayerStop class="size-3.5" /> Anuluj
+								</Button>
+							</div>
 						{:else}
-							<Trash class="size-4" />
-						{/if}
-						Usuń wszystkie i regeneruj
-					</Button>
-					<p class="mt-2 text-xs" style="color: var(--text-light);">
-						Style zostaną odtworzone automatycznie przy kolejnym wyświetleniu
-					</p>
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Video posters -->
-			<Card.Root>
-				<Card.Header>
-					<div class="flex items-center gap-2">
-						<Video class="size-5" style="color: var(--primary);" />
-						<Card.Title>Postery video</Card.Title>
-					</div>
-					<Card.Description>
-						Miniaturki i postery generowane z plików wideo (ffmpeg)
-					</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<p class="mb-1 text-3xl font-bold" style="color: var(--primary);">
-						{report.videosWithPosters}
-						<span class="text-base font-normal" style="color: var(--muted-foreground);">/ {report.videosCount}</span>
-					</p>
-					<p class="mb-4 text-xs" style="color: var(--muted-foreground);">
-						{report.videosCount} filmów, {report.videosMissingPosters} bez posterów
-					</p>
-
-					{#if posterGenerating}
-						<div class="mb-4">
-							<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
-								<span>{posterProcessed}/{posterTotal} filmów</span>
-								<span>{posterPercent}%</span>
+							<div class="mt-3 flex flex-wrap gap-2">
+								{#if report.missingStylesCount > 0}
+									<Button variant="default" size="sm" onclick={startBatchGenerate}>
+										<PlayerPlay class="size-3.5" /> Generuj brakujące
+									</Button>
+								{/if}
+								{#if report.imageStylesCount > 0}
+									<Button variant="outline" size="sm" onclick={purgeStyles} disabled={purging || generating}>
+										{#if purging}<Loader2 class="size-3.5 animate-spin" />{:else}<Trash class="size-3.5" />{/if}
+										Regeneruj wszystkie
+									</Button>
+								{/if}
 							</div>
-							<div class="h-2 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
-								<div
-									class="h-full rounded-full transition-all duration-300"
-									style="width: {posterPercent}%; background: var(--primary);"
-								></div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Video posters -->
+				<Card.Root>
+					<Card.Header class="pb-3">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<Video class="size-5" style="color: var(--primary);" />
+								<Card.Title class="text-base">Postery wideo</Card.Title>
 							</div>
-							<p class="mt-1 text-xs" style="color: var(--muted-foreground);">
-								Utworzono: {posterCreated}, pominięto: {posterSkipped}{posterErrors > 0 ? `, błędów: ${posterErrors}` : ''}
-							</p>
-							<p class="mt-0.5 truncate text-xs" style="color: var(--muted-foreground);">
-								{posterCurrentFile}
-							</p>
-							<Button
-								variant="outline"
-								size="sm"
-								onclick={cancelPosterGenerate}
-								class="mt-2"
-							>
-								<PlayerStop class="size-4" />
-								Anuluj
-							</Button>
+							{#if report.videosCount === 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--muted-foreground) 15%, transparent); color: var(--muted-foreground);">Brak wideo</span>
+							{:else if report.videosMissingPosters === 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--success, #3A8A5C) 15%, transparent); color: var(--success, #3A8A5C);">OK</span>
+							{:else}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--warning, #C4893A) 15%, transparent); color: var(--warning, #C4893A);">Brakuje {report.videosMissingPosters}</span>
+							{/if}
 						</div>
-					{:else if report.videosCount > 0}
-						<Button
-							variant="default"
-							size="sm"
-							onclick={startPosterGenerate}
-						>
-							<PlayerPlay class="size-4" />
-							Generuj brakujące postery
-						</Button>
-					{:else}
-						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
-							<CircleCheck class="size-4" />
-							Brak plików wideo
+					</Card.Header>
+					<Card.Content>
+						<p class="text-sm" style="color: var(--muted-foreground);">
+							Miniaturki i postery z plików wideo (ffmpeg)
+						</p>
+						<div class="mt-3 flex items-baseline gap-1.5">
+							<span class="text-2xl font-bold">{report.videosWithPosters}</span>
+							<span class="text-sm" style="color: var(--muted-foreground);">/ {report.videosCount} filmów</span>
 						</div>
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Video transcoding -->
-			<Card.Root>
-				<Card.Header>
-					<div class="flex items-center gap-2">
-						<Transform class="size-5" style="color: var(--primary);" />
-						<Card.Title>Transkodowanie wideo</Card.Title>
-					</div>
-					<Card.Description>
-						Warianty wideo (mp4 h264, webm vp9) zoptymalizowane do wyświetlania
-					</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<p class="mb-1 text-3xl font-bold" style="color: var(--primary);">
-						{report.videoStylesDone}
-						<span class="text-base font-normal" style="color: var(--muted-foreground);">/ {report.videoStylesExpected}</span>
-					</p>
-					<p class="mb-4 text-xs" style="color: var(--muted-foreground);">
-						{report.videosCount} filmów{report.videoStylesPending > 0 ? `, ${report.videoStylesPending} w kolejce` : ''}{report.videoStylesFailed > 0 ? `, ${report.videoStylesFailed} błędów` : ''}
-					</p>
-
-					{#if transcoding}
-						<div class="mb-4">
-							<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
-								<span>{transProcessed}/{transTotal} wariantów</span>
-								<span>{transPercent}%</span>
+
+						{#if posterGenerating}
+							<div class="mt-3">
+								<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
+									<span>{posterProcessed}/{posterTotal} filmów</span>
+									<span>{posterPercent}%</span>
+								</div>
+								<div class="h-1.5 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
+									<div class="h-full rounded-full transition-all duration-300" style="width: {posterPercent}%; background: var(--primary);"></div>
+								</div>
+								<p class="mt-1 truncate text-xs" style="color: var(--muted-foreground);">{posterCurrentFile}</p>
+								<Button variant="outline" size="sm" onclick={() => posterAbort?.abort()} class="mt-2">
+									<PlayerStop class="size-3.5" /> Anuluj
+								</Button>
 							</div>
-							<div class="h-2 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
-								<div
-									class="h-full rounded-full transition-all duration-300"
-									style="width: {transPercent}%; background: var(--primary);"
-								></div>
+						{:else if report.videosMissingPosters > 0}
+							<div class="mt-3">
+								<Button variant="default" size="sm" onclick={startPosterGenerate}>
+									<PlayerPlay class="size-3.5" /> Generuj brakujące
+								</Button>
 							</div>
-							<p class="mt-1 text-xs" style="color: var(--muted-foreground);">
-								Utworzono: {transCreated}, pominięto: {transSkipped}{transErrors > 0 ? `, błędów: ${transErrors}` : ''}
-							</p>
-							<p class="mt-0.5 truncate text-xs" style="color: var(--muted-foreground);">
-								{transCurrentFile}
-							</p>
-							<Button
-								variant="outline"
-								size="sm"
-								onclick={cancelTranscode}
-								class="mt-2"
-							>
-								<PlayerStop class="size-4" />
-								Anuluj
-							</Button>
-						</div>
-					{:else if videoStylesMissing > 0 || report.videoStylesFailed > 0}
-						<div class="mb-3">
-							{#if videoStylesMissing > 0}
-								<p class="mb-2 text-sm" style="color: var(--warning, #C4893A);">
-									Brakuje {videoStylesMissing} wariantów wideo.
-								</p>
-							{/if}
-							{#if report.videoStylesFailed > 0}
-								<p class="mb-2 text-sm" style="color: var(--error, #C44B4B);">
-									{report.videoStylesFailed} wariantów nie udało się wygenerować.
-								</p>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Video transcoding -->
+				<Card.Root>
+					<Card.Header class="pb-3">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<Transform class="size-5" style="color: var(--primary);" />
+								<Card.Title class="text-base">Transkodowanie</Card.Title>
+							</div>
+							{#if report.videosCount === 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--muted-foreground) 15%, transparent); color: var(--muted-foreground);">Brak wideo</span>
+							{:else if report.videoStylesFailed > 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--error, #C44B4B) 15%, transparent); color: var(--error, #C44B4B);">{report.videoStylesFailed} błędów</span>
+							{:else if videoStylesMissing > 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--warning, #C4893A) 15%, transparent); color: var(--warning, #C4893A);">Brakuje {videoStylesMissing}</span>
+							{:else if report.videoStylesPending > 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary);">
+									<Loader2 class="mr-1 inline size-3 animate-spin" style="vertical-align: -1px;" />
+									{report.videoStylesPending} w kolejce
+								</span>
+							{:else}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--success, #3A8A5C) 15%, transparent); color: var(--success, #3A8A5C);">OK</span>
 							{/if}
-							<Button
-								variant="default"
-								size="sm"
-								onclick={startTranscode}
-							>
-								<PlayerPlay class="size-4" />
-								Transkoduj brakujące
-							</Button>
 						</div>
-					{:else if report.videosCount > 0}
-						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
-							<CircleCheck class="size-4" />
-							Wszystkie warianty wygenerowane
-						</div>
-					{:else}
-						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
-							<CircleCheck class="size-4" />
-							Brak plików wideo
+					</Card.Header>
+					<Card.Content>
+						<p class="text-sm" style="color: var(--muted-foreground);">
+							Warianty wideo (mp4 h264, webm vp9)
+						</p>
+						<div class="mt-3 flex items-baseline gap-1.5">
+							<span class="text-2xl font-bold">{report.videoStylesDone}</span>
+							<span class="text-sm" style="color: var(--muted-foreground);">/ {report.videoStylesExpected} wariantów</span>
 						</div>
-					{/if}
+						<p class="mt-0.5 text-xs" style="color: var(--muted-foreground);">
+							{report.videosCount} filmów{report.videoStylesPending > 0 ? `, ${report.videoStylesPending} w kolejce` : ''}{report.videoStylesFailed > 0 ? `, ${report.videoStylesFailed} z błędami` : ''}
+						</p>
 
-					{#if report.videoStylesCount > 0}
-						<Button
-							variant="destructive"
-							size="sm"
-							onclick={purgeVideoStylesAction}
-							disabled={purgingVideoStyles || transcoding}
-						>
-							{#if purgingVideoStyles}
-								<Loader2 class="size-4 animate-spin" />
+						{#if transcoding}
+							<div class="mt-3">
+								<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
+									<span>{transProcessed}/{transTotal} wariantów</span>
+									<span>{transPercent}%</span>
+								</div>
+								<div class="h-1.5 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
+									<div class="h-full rounded-full transition-all duration-300" style="width: {transPercent}%; background: var(--primary);"></div>
+								</div>
+								<p class="mt-1 truncate text-xs" style="color: var(--muted-foreground);">{transCurrentFile}</p>
+								<Button variant="outline" size="sm" onclick={() => transAbort?.abort()} class="mt-2">
+									<PlayerStop class="size-3.5" /> Anuluj
+								</Button>
+							</div>
+						{:else}
+							<div class="mt-3 flex flex-wrap gap-2">
+								{#if videoStylesMissing > 0 || report.videoStylesFailed > 0}
+									<Button variant="default" size="sm" onclick={startTranscode}>
+										<PlayerPlay class="size-3.5" /> Transkoduj brakujące
+									</Button>
+								{/if}
+								{#if report.videoStylesCount > 0}
+									<Button variant="outline" size="sm" onclick={purgeVideoStylesAction} disabled={purgingVideoStyles || transcoding}>
+										{#if purgingVideoStyles}<Loader2 class="size-3.5 animate-spin" />{:else}<Trash class="size-3.5" />{/if}
+										Regeneruj wszystkie
+									</Button>
+								{/if}
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+			</div>
+		</div>
+
+		<!-- Section: File Integrity -->
+		<div class="mb-8">
+			<h2 class="mb-3 text-sm font-semibold uppercase tracking-wider" style="color: var(--muted-foreground);">
+				Integralność plików
+			</h2>
+			<div class="grid gap-4 md:grid-cols-2">
+				<!-- Orphaned disk files -->
+				<Card.Root>
+					<Card.Header class="pb-3">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<FileSearch class="size-5" style="color: var(--muted-foreground);" />
+								<Card.Title class="text-base">Osierocone pliki</Card.Title>
+							</div>
+							{#if report.orphanedDiskFiles.length === 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--success, #3A8A5C) 15%, transparent); color: var(--success, #3A8A5C);">OK</span>
 							{:else}
-								<Trash class="size-4" />
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--warning, #C4893A) 15%, transparent); color: var(--warning, #C4893A);">{report.orphanedDiskFiles.length} plików</span>
 							{/if}
-							Usuń wszystkie i transkoduj ponownie
-						</Button>
-						<p class="mt-2 text-xs" style="color: var(--text-light);">
-							Warianty zostaną odtworzone przy następnym transkodowaniu
+						</div>
+					</Card.Header>
+					<Card.Content>
+						<p class="text-sm" style="color: var(--muted-foreground);">
+							Pliki na dysku bez rekordów w bazie danych
 						</p>
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Orphaned disk files -->
-			<Card.Root>
-				<Card.Header>
-					<div class="flex items-center gap-2">
-						<FileSearch class="size-5" style="color: var(--warning, #C4893A);" />
-						<Card.Title>Osierocone pliki</Card.Title>
-					</div>
-					<Card.Description>
-						Pliki na dysku bez odpowiadających rekordów w bazie danych
-					</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<p class="mb-4 text-3xl font-bold" style="color: {report.orphanedDiskFiles.length > 0 ? 'var(--warning, #C4893A)' : 'var(--success, #3A8A5C)'};">
-						{report.orphanedDiskFiles.length}
-					</p>
-					{#if report.orphanedDiskFiles.length > 0}
-						<Button
-							variant="outline"
-							size="sm"
-							onclick={cleanOrphans}
-							disabled={cleaningOrphans}
-						>
-							{#if cleaningOrphans}
-								<Loader2 class="size-4 animate-spin" />
-							{:else}
-								<Trash class="size-4" />
-							{/if}
-							Usuń osierocone pliki
-						</Button>
-						<details class="mt-3">
-							<summary class="cursor-pointer text-xs" style="color: var(--text-light);">
-								Pokaż pliki ({report.orphanedDiskFiles.length})
-							</summary>
-							<ul class="mt-1 max-h-40 overflow-auto text-xs" style="color: var(--muted-foreground);">
-								{#each report.orphanedDiskFiles as file}
-									<li class="truncate py-0.5">{file}</li>
-								{/each}
-							</ul>
-						</details>
-					{:else}
-						<p class="text-sm" style="color: var(--success, #3A8A5C);">Wszystko w porządku</p>
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Missing disk files -->
-			<Card.Root>
-				<Card.Header>
-					<div class="flex items-center gap-2">
-						<AlertTriangle class="size-5" style="color: var(--error, #C44B4B);" />
-						<Card.Title>Brakujące pliki</Card.Title>
-					</div>
-					<Card.Description>
-						Rekordy w bazie danych bez plików na dysku
-					</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<p class="mb-4 text-3xl font-bold" style="color: {report.missingDiskRecords.length > 0 ? 'var(--error, #C44B4B)' : 'var(--success, #3A8A5C)'};">
-						{report.missingDiskRecords.length}
-					</p>
-					{#if report.missingDiskRecords.length > 0}
-						<details>
-							<summary class="cursor-pointer text-xs" style="color: var(--text-light);">
-								Pokaż rekordy ({report.missingDiskRecords.length})
-							</summary>
-							<ul class="mt-1 max-h-40 overflow-auto text-xs" style="color: var(--muted-foreground);">
-								{#each report.missingDiskRecords as rec}
-									<li class="truncate py-0.5">{rec.table}: {rec.url}</li>
-								{/each}
-							</ul>
-						</details>
-					{:else}
-						<p class="text-sm" style="color: var(--success, #3A8A5C);">Wszystko w porządku</p>
-					{/if}
-				</Card.Content>
-			</Card.Root>
+						{#if report.orphanedDiskFiles.length > 0}
+							<p class="mt-2 text-xs" style="color: var(--muted-foreground);">
+								Zostaną automatycznie usunięte przy następnym cyklu konserwacji.
+							</p>
+							<div class="mt-3 flex items-center gap-2">
+								<Button variant="outline" size="sm" onclick={cleanOrphans} disabled={cleaningOrphans}>
+									{#if cleaningOrphans}<Loader2 class="size-3.5 animate-spin" />{:else}<Trash class="size-3.5" />{/if}
+									Usuń teraz
+								</Button>
+							</div>
+							<details class="mt-3">
+								<summary class="cursor-pointer text-xs" style="color: var(--muted-foreground);">
+									Pokaż pliki ({report.orphanedDiskFiles.length})
+								</summary>
+								<ul class="mt-1 max-h-40 overflow-auto text-xs" style="color: var(--muted-foreground);">
+									{#each report.orphanedDiskFiles as file}
+										<li class="truncate py-0.5">{file}</li>
+									{/each}
+								</ul>
+							</details>
+						{:else}
+							<p class="mt-2 text-sm" style="color: var(--success, #3A8A5C);">Wszystko w porządku</p>
+						{/if}
+					</Card.Content>
+				</Card.Root>
 
-			<!-- Disk usage -->
-			{#if sysInfo}
-				{@const du = sysInfo.diskUsage}
+				<!-- Missing disk files -->
 				<Card.Root>
-					<Card.Header>
-						<div class="flex items-center gap-2">
-							<Database class="size-5" style="color: var(--primary);" />
-							<Card.Title>Zużycie dysku</Card.Title>
+					<Card.Header class="pb-3">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<AlertTriangle class="size-5" style="color: var(--muted-foreground);" />
+								<Card.Title class="text-base">Brakujące pliki</Card.Title>
+							</div>
+							{#if report.missingDiskRecords.length === 0}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--success, #3A8A5C) 15%, transparent); color: var(--success, #3A8A5C);">OK</span>
+							{:else}
+								<span class="rounded-full px-2 py-0.5 text-xs font-medium" style="background: color-mix(in srgb, var(--error, #C44B4B) 15%, transparent); color: var(--error, #C44B4B);">{report.missingDiskRecords.length} brakuje</span>
+							{/if}
 						</div>
-						<Card.Description>
-							Rozmiar plików mediów i wygenerowanych wariantów
-						</Card.Description>
 					</Card.Header>
 					<Card.Content>
-						<p class="mb-4 text-3xl font-bold" style="color: var(--primary);">
-							{formatBytes(du.total)}
+						<p class="text-sm" style="color: var(--muted-foreground);">
+							Rekordy w bazie danych bez plików na dysku
 						</p>
-						<dl class="space-y-1.5 text-sm">
-							{#if du.originals.images > 0}
-								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Obrazy</dt>
-									<dd class="font-medium">{formatBytes(du.originals.images)}</dd>
+						{#if report.missingDiskRecords.length > 0}
+							<details class="mt-3">
+								<summary class="cursor-pointer text-xs" style="color: var(--muted-foreground);">
+									Pokaż rekordy ({report.missingDiskRecords.length})
+								</summary>
+								<ul class="mt-1 max-h-40 overflow-auto text-xs" style="color: var(--muted-foreground);">
+									{#each report.missingDiskRecords as rec}
+										<li class="truncate py-0.5">{rec.table}: {rec.url}</li>
+									{/each}
+								</ul>
+							</details>
+						{:else}
+							<p class="mt-2 text-sm" style="color: var(--success, #3A8A5C);">Wszystko w porządku</p>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+			</div>
+		</div>
+
+		<!-- Section: System -->
+		{#if sysInfo}
+			{@const du = sysInfo.diskUsage}
+			{@const si = sysInfo.systemInfo}
+			<div>
+				<h2 class="mb-3 text-sm font-semibold uppercase tracking-wider" style="color: var(--muted-foreground);">
+					System
+				</h2>
+				<div class="grid gap-4 md:grid-cols-2">
+					<!-- Disk usage -->
+					<Card.Root>
+						<Card.Header class="pb-3">
+							<div class="flex items-center gap-2">
+								<Database class="size-5" style="color: var(--primary);" />
+								<Card.Title class="text-base">Zużycie dysku</Card.Title>
+							</div>
+						</Card.Header>
+						<Card.Content>
+							<p class="mb-3 text-2xl font-bold">{formatBytes(du.total)}</p>
+
+							<!-- Stacked bar -->
+							{#if du.total > 0}
+								<div class="mb-3 flex h-2 overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
+									{#each diskSegments as seg}
+										<div
+											class="h-full"
+											style="width: {(seg.bytes / du.total * 100).toFixed(1)}%; background: {seg.color};"
+										></div>
+									{/each}
 								</div>
 							{/if}
-							{#if du.originals.videos > 0}
+
+							<dl class="space-y-1 text-sm">
+								{#each diskSegments as seg}
+									<div class="flex items-center justify-between">
+										<dt class="flex items-center gap-2" style="color: var(--muted-foreground);">
+											<span class="inline-block size-2 rounded-full" style="background: {seg.color};"></span>
+											{seg.label}
+										</dt>
+										<dd class="font-medium">{formatBytes(seg.bytes)}</dd>
+									</div>
+								{/each}
+							</dl>
+						</Card.Content>
+					</Card.Root>
+
+					<!-- System info -->
+					<Card.Root>
+						<Card.Header class="pb-3">
+							<div class="flex items-center gap-2">
+								<Server class="size-5" style="color: var(--primary);" />
+								<Card.Title class="text-base">Środowisko</Card.Title>
+							</div>
+						</Card.Header>
+						<Card.Content>
+							<dl class="space-y-1.5 text-sm">
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Wideo</dt>
-									<dd class="font-medium">{formatBytes(du.originals.videos)}</dd>
+									<dt style="color: var(--muted-foreground);">includio-cms</dt>
+									<dd class="font-medium">{si.cmsVersion}</dd>
 								</div>
-							{/if}
-							{#if du.originals.audio > 0}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Audio</dt>
-									<dd class="font-medium">{formatBytes(du.originals.audio)}</dd>
+									<dt style="color: var(--muted-foreground);">Node.js</dt>
+									<dd class="font-medium">{si.nodeVersion}</dd>
 								</div>
-							{/if}
-							{#if du.originals.pdf > 0}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">PDF</dt>
-									<dd class="font-medium">{formatBytes(du.originals.pdf)}</dd>
+									<dt style="color: var(--muted-foreground);">PostgreSQL</dt>
+									<dd class="font-medium">{si.postgresVersion ?? 'niedostępny'}</dd>
 								</div>
-							{/if}
-							{#if du.originals.other > 0}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Inne</dt>
-									<dd class="font-medium">{formatBytes(du.originals.other)}</dd>
+									<dt style="color: var(--muted-foreground);">ffmpeg</dt>
+									<dd class="font-medium">
+										{#if si.ffmpeg.available}
+											{si.ffmpeg.version}
+											<span class="ml-1.5 inline-flex gap-1">
+												<span class="rounded px-1 py-0.5 text-xs" style="background: {si.ffmpeg.codecs.h264 ? 'var(--success, #3A8A5C)' : 'var(--error, #C44B4B)'}; color: white;">h264</span>
+												<span class="rounded px-1 py-0.5 text-xs" style="background: {si.ffmpeg.codecs.vp9 ? 'var(--success, #3A8A5C)' : 'var(--error, #C44B4B)'}; color: white;">vp9</span>
+											</span>
+										{:else}
+											<span style="color: var(--error, #C44B4B);">niedostępny</span>
+										{/if}
+									</dd>
 								</div>
-							{/if}
-							{#if du.imageStyles.count > 0}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Style obrazów ({du.imageStyles.count})</dt>
-									<dd class="font-medium">{formatBytes(du.imageStyles.bytes)}</dd>
+									<dt style="color: var(--muted-foreground);">sharp</dt>
+									<dd class="font-medium">
+										{#if si.sharp.available}{si.sharp.version}{:else}<span style="color: var(--error, #C44B4B);">niedostępny</span>{/if}
+									</dd>
 								</div>
-							{/if}
-							{#if du.videoStyles.count > 0}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Style wideo ({du.videoStyles.count})</dt>
-									<dd class="font-medium">{formatBytes(du.videoStyles.bytes)}</dd>
+									<dt style="color: var(--muted-foreground);">OS</dt>
+									<dd class="font-medium">{si.os.platform} {si.os.release}</dd>
 								</div>
-							{/if}
-							{#if du.posters.count > 0}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Postery/miniaturki ({du.posters.count})</dt>
-									<dd class="font-medium">{formatBytes(du.posters.bytes)}</dd>
+									<dt style="color: var(--muted-foreground);">CPU / RAM</dt>
+									<dd class="font-medium">{si.os.cpus} rdzeni / {formatBytes(si.os.totalMemory)}</dd>
 								</div>
-							{/if}
-						</dl>
-					</Card.Content>
-				</Card.Root>
-
-				<!-- System info -->
-				{@const si = sysInfo.systemInfo}
-				<Card.Root>
-					<Card.Header>
-						<div class="flex items-center gap-2">
-							<Server class="size-5" style="color: var(--primary);" />
-							<Card.Title>System</Card.Title>
-						</div>
-						<Card.Description>
-							Informacje o środowisku i zależnościach
-						</Card.Description>
-					</Card.Header>
-					<Card.Content>
-						<dl class="space-y-1.5 text-sm">
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">includio-cms</dt>
-								<dd class="font-medium">{si.cmsVersion}</dd>
-							</div>
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">Node.js</dt>
-								<dd class="font-medium">{si.nodeVersion}</dd>
-							</div>
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">PostgreSQL</dt>
-								<dd class="font-medium">{si.postgresVersion ?? 'niedostępny'}</dd>
-							</div>
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">ffmpeg</dt>
-								<dd class="font-medium">
-									{#if si.ffmpeg.available}
-										{si.ffmpeg.version}
-									{:else}
-										<span style="color: var(--error, #C44B4B);">niedostępny</span>
-									{/if}
-								</dd>
-							</div>
-							{#if si.ffmpeg.available}
 								<div class="flex justify-between">
-									<dt style="color: var(--muted-foreground);">Kodeki</dt>
-									<dd class="flex gap-1.5 font-medium">
-										<span
-											class="rounded px-1.5 py-0.5 text-xs"
-											style="background: {si.ffmpeg.codecs.h264 ? 'var(--success, #3A8A5C)' : 'var(--error, #C44B4B)'}; color: white;"
-										>h264</span>
-										<span
-											class="rounded px-1.5 py-0.5 text-xs"
-											style="background: {si.ffmpeg.codecs.vp9 ? 'var(--success, #3A8A5C)' : 'var(--error, #C44B4B)'}; color: white;"
-										>vp9</span>
-									</dd>
+									<dt style="color: var(--muted-foreground);">Uploads</dt>
+									<dd class="max-w-[200px] truncate font-medium" title={si.uploads.path}>{si.uploads.path}</dd>
 								</div>
-							{/if}
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">sharp</dt>
-								<dd class="font-medium">
-									{#if si.sharp.available}
-										{si.sharp.version}
-									{:else}
-										<span style="color: var(--error, #C44B4B);">niedostępny</span>
-									{/if}
-								</dd>
-							</div>
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">OS</dt>
-								<dd class="font-medium">{si.os.platform} {si.os.release}</dd>
-							</div>
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">CPU / RAM</dt>
-								<dd class="font-medium">{si.os.cpus} rdzeni / {formatBytes(si.os.totalMemory)}</dd>
-							</div>
-							<div class="flex justify-between">
-								<dt style="color: var(--muted-foreground);">Katalog uploads</dt>
-								<dd class="max-w-[200px] truncate font-medium" title={si.uploads.path}>{si.uploads.path}</dd>
-							</div>
-						</dl>
-					</Card.Content>
-				</Card.Root>
-			{/if}
-		</div>
-
-		<!-- Refresh button -->
-		<div class="mt-6">
-			<Button variant="outline" size="sm" onclick={loadReport} disabled={loading}>
-				<Refresh class="size-4" />
-				Odśwież raport
-			</Button>
-		</div>
+							</dl>
+						</Card.Content>
+					</Card.Root>
+				</div>
+			</div>
+		{/if}
 	{/if}
 </div>