diff --git a/src/App.vue b/src/App.vue
index b8863a1..80e0537 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,14 @@
 <script setup lang="ts">
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcContent from '@nextcloud/vue/components/NcContent'
-import NcDialog from '@nextcloud/vue/components/NcDialog'
 import { computed, onMounted, ref, watch } from 'vue'
-
-type AppOption = {
-	id: string
-	label: string
-	description: string
-	summary: string
-	preview: string
-	isCore: boolean
-}
-
-type AppVersion = {
-	version: string
-}
-
-type InstallDebugEntry = {
-	stage: string
-	data?: unknown
-}
-
-type InstallResult = {
-	appId: string
-	fromVersion?: string | null
-	toVersion: string
-	installedVersion?: string | null
-	updateType?: string
-	message: string
-	dryRun: boolean
-	installStatus: string
-	debug?: InstallDebugEntry[]
-}
+import AppInfoPanel from './components/AppInfoPanel.vue'
+import AppPickerPanel from './components/AppPickerPanel.vue'
+import AppSettingsPanel from './components/AppSettingsPanel.vue'
+import DowngradeConfirmDialog from './components/DowngradeConfirmDialog.vue'
+import InstallResultPanel from './components/InstallResultPanel.vue'
+import type { AppOption, AppVersion, InstallDebugEntry, InstallResult } from './types'
+import { compareVersions, getVersionRangeSummary, versionRangeText } from './utils/versioning'
 
 const isAdmin = ref(false)
 const isLoading = ref(true)
@@ -66,100 +42,6 @@ const hasInstallResult = ref(false)
 const installRequestFromVersion = ref('')
 const installRequestToVersion = ref('')
 
-type VersionRangeInfo = {
-	major: number
-	minor: number
-	patch: number
-	direction: 'upgrade' | 'degrade'
-	from: string
-	to: string
-}
-
-const parseVersionCore = (version: string): { major: number, minor: number, patch: number } => {
-	const [core] = version.split('-', 2)
-	const [rawMajor, rawMinor, rawPatch] = core.split('.')
-
-	return {
-		major: Number.parseInt(rawMajor || '0', 10) || 0,
-		minor: Number.parseInt(rawMinor || '0', 10) || 0,
-		patch: Number.parseInt(rawPatch || '0', 10) || 0,
-	}
-}
-
-const compareVersions = (left: string, right: string): number => {
-	const [leftCore, leftPre = ''] = left.split('-', 2)
-	const [rightCore, rightPre = ''] = right.split('-', 2)
-	const leftParts = leftCore.split('.').map((part) => Number(part || '0'))
-	const rightParts = rightCore.split('.').map((part) => Number(part || '0'))
-
-	for (let index = 0; index < Math.max(leftParts.length, rightParts.length); index++) {
-		const leftPart = leftParts[index] ?? 0
-		const rightPart = rightParts[index] ?? 0
-
-		if (leftPart > rightPart) {
-			return 1
-		}
-		if (leftPart < rightPart) {
-			return -1
-		}
-	}
-
-	if (leftPre === rightPre) {
-		return 0
-	}
-	if (!leftPre) {
-		return 1
-	}
-	if (!rightPre) {
-		return -1
-	}
-
-	const leftPreParts = leftPre.split('.')
-	const rightPreParts = rightPre.split('.')
-	for (let index = 0; index < Math.max(leftPreParts.length, rightPreParts.length); index++) {
-		const leftPart = leftPreParts[index]
-		const rightPart = rightPreParts[index]
-
-		if (leftPart === undefined) {
-			return -1
-		}
-		if (rightPart === undefined) {
-			return 1
-		}
-
-		const leftNumeric = /^\d+$/.test(leftPart)
-		const rightNumeric = /^\d+$/.test(rightPart)
-
-		if (leftNumeric && rightNumeric) {
-			const leftNum = Number(leftPart)
-			const rightNum = Number(rightPart)
-			if (leftNum > rightNum) {
-				return 1
-			}
-			if (leftNum < rightNum) {
-				return -1
-			}
-			continue
-		}
-
-		if (leftNumeric) {
-			return -1
-		}
-		if (rightNumeric) {
-			return 1
-		}
-
-		if (leftPart > rightPart) {
-			return 1
-		}
-		if (leftPart < rightPart) {
-			return -1
-		}
-	}
-
-	return 0
-}
-
 const changeActionLabel = computed(() => {
 	if (!selectedApp.value || !selectedVersion.value) {
 		return ''
@@ -183,7 +65,6 @@ const changeActionLabel = computed(() => {
 
 const hasSidebarSelect = computed(() => isAdmin.value)
 const sidebarLabel = computed(() => hasSidebarSelect.value ? 'Select an app from store' : 'Loading…')
-const hasInfoPanel = computed(() => selectedApp.value || installedVersion.value || versions.value.length > 0 || availableSource.value || errorMessage.value || hasCheckedVersions.value)
 const hasSplitLayout = computed(() => Boolean(selectedApp.value || installedVersion.value || hasInstallResult.value))
 const isSafeMode = computed(() => safeModeEnabled.value)
 const includeDebug = computed(() => debugModeEnabled.value)
@@ -210,10 +91,6 @@ const withOcsJson = (path: string, query: Record<string, string | number | boole
 }
 
 const unwrapOcsResponse = async <T>(response: Response): Promise<T> => {
-	if (!response.ok) {
-		// Keep payload-based failures parseable for callers that return useful data with 4xx.
-	}
-
 	const raw = await response.json()
 	if (typeof raw !== 'object' || raw === null) {
 		throw new Error('Unexpected response format')
@@ -395,9 +272,9 @@ const checkVersions = async (preserveInstallResult = false): Promise<void> => {
 	isCheckingVersions.value = true
 	errorMessage.value = ''
 
-		try {
-			const url = withOcsJson(`/ocs/v2.php/apps/app_versions/api/app/${encodeURIComponent(appId)}/versions`)
-			const response = await fetch(apiUrl(url), { headers: { ...ocsHeaders, Accept: 'application/json' } })
+	try {
+		const url = withOcsJson(`/ocs/v2.php/apps/app_versions/api/app/${encodeURIComponent(appId)}/versions`)
+		const response = await fetch(apiUrl(url), { headers: { ...ocsHeaders, Accept: 'application/json' } })
 		const payload = await unwrapOcsResponse<{
 			availableVersions?: AppVersion[]
 			versions?: AppVersion[]
@@ -483,28 +360,13 @@ const filteredApps = computed(() => {
 		return visibleApps
 	}
 
-	return visibleApps.filter((app) => {
-		return app.label.toLowerCase().includes(filter) || app.id.toLowerCase().includes(filter)
-	})
+	return visibleApps.filter((app) => app.label.toLowerCase().includes(filter) || app.id.toLowerCase().includes(filter))
 })
 
 const selectedAppOption = computed(() => {
 	return apps.value.find((app) => app.id === selectedApp.value) ?? null
 })
 
-const appCardDescription = (app: AppOption): string => {
-	return app.summary || app.description || 'No description available.'
-}
-
-const appCardFallback = (app: AppOption): string => {
-	const source = (app.label || app.id).trim()
-	if (source === '') {
-		return '?'
-	}
-
-	return source.charAt(0).toUpperCase()
-}
-
 const filteredVersions = computed(() => {
 	const filter = versionFilter.value.trim().toLowerCase()
 	const list = isSafeMode.value && installedVersion.value
@@ -527,186 +389,17 @@ const visibleVersions = computed(() => {
 	return filteredVersions.value
 })
 
-const debugValueToString = (value: unknown): string => {
-	if (value === null) {
-		return 'null'
-	}
-
-	if (typeof value === 'string') {
-		return value
-	}
-
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value)
-	}
-
-	if (typeof value === 'bigint') {
-		return value.toString()
-	}
-
-	return JSON.stringify(value)
-}
-
-const formatDebugLines = (value: unknown, depth = 0): string[] => {
-	const indent = ' '.repeat(depth * 2)
-	const lines: string[] = []
-
-	if (value === null || value === undefined) {
-		lines.push(`${indent}—`)
-		return lines
-	}
-
-	if (Array.isArray(value)) {
-		if (value.length === 0) {
-			lines.push(`${indent}[]`)
-			return lines
-		}
-
-		value.forEach((entry, index) => {
-			if (entry === null || entry === undefined) {
-				lines.push(`${indent}[${index}]: —`)
-				return
-			}
-
-			if (typeof entry === 'object') {
-				lines.push(`${indent}[${index}]:`)
-				lines.push(...formatDebugLines(entry, depth + 1))
-			} else {
-				lines.push(`${indent}[${index}]: ${debugValueToString(entry)}`)
-			}
-		})
-
-		return lines
-	}
-
-	if (typeof value === 'object') {
-		const objectValue = value as Record<string, unknown>
-		const keys = Object.keys(objectValue)
-		if (keys.length === 0) {
-			lines.push(`${indent}{}`)
-			return lines
-		}
-
-		for (const key of keys) {
-			const nested = objectValue[key]
-			if (nested === null || nested === undefined) {
-				lines.push(`${indent}${key}: —`)
-				continue
-			}
-
-			if (typeof nested === 'object') {
-				lines.push(`${indent}${key}:`)
-				lines.push(...formatDebugLines(nested, depth + 1))
-				continue
-			}
-
-			lines.push(`${indent}${key}: ${debugValueToString(nested)}`)
-		}
-		return lines
-	}
-
-	lines.push(`${indent}${debugValueToString(value)}`)
-	return lines
-}
-
-const debugHasData = (value: unknown): boolean => {
-	if (value === null || value === undefined) {
-		return false
-	}
-
-	if (typeof value === 'string') {
-		return value.trim() !== ''
-	}
-
-	return true
-}
-
-const debugToTextLines = (value: unknown): string[] => {
-	const lines = formatDebugLines(value)
-	if (lines.length === 0) {
-		return ['—']
-	}
-
-	return lines
-}
-
-const getVersionRangeSummary = (from: string, to: string): VersionRangeInfo | null => {
-	if (!from || !to || from === to) {
-		return null
-	}
-
-	const direction = compareVersions(to, from)
-	const comparison = direction === 0 ? 0 : (direction > 0 ? 1 : -1)
-	const low = comparison <= 0 ? to : from
-	const high = comparison <= 0 ? from : to
-
-	const inRange = versions.value.filter((entry) => {
-		return compareVersions(entry.version, low) >= 0 && compareVersions(entry.version, high) <= 0
-	})
-
-	const majors = new Set<number>()
-	const minors = new Set<string>()
-	for (const entry of inRange) {
-		const parsed = parseVersionCore(entry.version)
-		majors.add(parsed.major)
-		minors.add(`${parsed.major}.${parsed.minor}`)
-	}
-
-	const fromParsed = parseVersionCore(low)
-	const toParsed = parseVersionCore(high)
-	const patch = fromParsed.major === toParsed.major && fromParsed.minor === toParsed.minor
-		? Math.abs(toParsed.patch - fromParsed.patch)
-		: 0
-
-	if (majors.size === 0) {
-		const major = Math.abs(toParsed.major - fromParsed.major)
-		const minor = comparison === 0
-			? 0
-			: (toParsed.major === fromParsed.major ? Math.abs(toParsed.minor - fromParsed.minor) : Math.abs(toParsed.minor - fromParsed.minor))
-
-		return {
-			major,
-			minor,
-			patch,
-			direction: comparison > 0 ? 'upgrade' : 'degrade',
-			from,
-			to,
-		}
-	}
-
-	return {
-		major: Math.max(0, majors.size - 1),
-		minor: Math.max(0, minors.size - 1),
-		patch,
-		direction: comparison > 0 ? 'upgrade' : 'degrade',
-		from,
-		to,
-	}
-}
-
 const selectedVersionRange = computed(() => {
 	if (!installedVersion.value || !selectedVersion.value || installedVersion.value === selectedVersion.value) {
 		return null
 	}
 
-	return getVersionRangeSummary(installedVersion.value, selectedVersion.value)
+	return getVersionRangeSummary(installedVersion.value, selectedVersion.value, versions.value)
 })
 
-const downgradeVersionRange = computed(() => getVersionRangeSummary(downgradeConfirmFromVersion.value, downgradeConfirmToVersion.value))
-
-const versionRangeText = (summary: VersionRangeInfo | null): string => {
-	if (!summary) {
-		return ''
-	}
-
-	if (summary.major === 0 && summary.minor === 0 && summary.patch > 0) {
-		return `${summary.direction === 'upgrade' ? 'Upgrade' : 'Downgrade'} stays within major/minor and changes ${summary.patch} patch version step${summary.patch === 1 ? '' : 's'}.`
-	}
-
-	return `${summary.direction === 'upgrade' ? 'Upgrade' : 'Downgrade'} crosses ${summary.major} major and ${summary.minor} minor version step${summary.minor === 1 ? '' : 's'}.`
-}
+const downgradeVersionRange = computed(() => getVersionRangeSummary(downgradeConfirmFromVersion.value, downgradeConfirmToVersion.value, versions.value))
 
-	const downgradeConfirmButtons = computed(() => [
+const downgradeConfirmButtons = computed(() => [
 	{
 		label: 'Cancel',
 		type: 'tertiary',
@@ -778,7 +471,6 @@ const performInstall = async (): Promise<void> => {
 
 	if (isDowngrade) {
 		const proceed = await confirmDowngrade(selectedAppValue, installedVersion.value, selectedVersionValue)
-
 		if (!proceed) {
 			return
 		}
@@ -795,13 +487,13 @@ const performInstall = async (): Promise<void> => {
 	try {
 		await ensurePasswordConfirmation()
 
-const endpoint = withOcsJson(
-	`/ocs/v2.php/apps/app_versions/api/app/${encodeURIComponent(selectedAppValue)}/versions/${encodeURIComponent(selectedVersionValue)}/install`,
-	{
-		debug: includeDebug.value ? '1' : '0',
-		targetVersion: selectedVersionValue,
-	}
-)
+		const endpoint = withOcsJson(
+			`/ocs/v2.php/apps/app_versions/api/app/${encodeURIComponent(selectedAppValue)}/versions/${encodeURIComponent(selectedVersionValue)}/install`,
+			{
+				debug: includeDebug.value ? '1' : '0',
+				targetVersion: selectedVersionValue,
+			}
+		)
 		const response = await fetch(apiUrl(endpoint), {
 			method: 'POST',
 			headers: {
@@ -835,40 +527,40 @@ const endpoint = withOcsJson(
 				: result.toVersion || requestedTo,
 			installedVersion: result.installedVersion ?? requestedFrom,
 		}
-			lastInstallDebug.value = result.debug ?? []
-			hasInstallResult.value = true
-
-			if (metaMessage) {
-				errorMessage.value = metaMessage
-				if (lastInstallResult.value) {
-					lastInstallResult.value = {
-						...lastInstallResult.value,
-						message: metaMessage,
-						installStatus: 'failed',
-					}
+		lastInstallDebug.value = result.debug ?? []
+		hasInstallResult.value = true
+
+		if (metaMessage) {
+			errorMessage.value = metaMessage
+			if (lastInstallResult.value) {
+				lastInstallResult.value = {
+					...lastInstallResult.value,
+					message: metaMessage,
+					installStatus: 'failed',
 				}
-			} else {
-				selectedApp.value = ''
-				installedVersion.value = ''
-				availableSource.value = ''
-				selectedVersion.value = ''
-				await checkVersions(true)
 			}
-		} catch (error) {
-			errorMessage.value = error instanceof Error ? error.message : 'Could not install selected version.'
-			hasInstallResult.value = true
-			lastInstallResult.value = {
-				appId: selectedAppValue,
-				fromVersion: requestedFromVersion || null,
-				toVersion: requestedToVersion,
-				message: errorMessage.value,
-				dryRun: false,
-				installStatus: 'failed',
-				updateType: 'none',
-			}
-		} finally {
-			isInstallingVersion.value = false
+		} else {
+			selectedApp.value = ''
+			installedVersion.value = ''
+			availableSource.value = ''
+			selectedVersion.value = ''
+			await checkVersions(true)
 		}
+	} catch (error) {
+		errorMessage.value = error instanceof Error ? error.message : 'Could not install selected version.'
+		hasInstallResult.value = true
+		lastInstallResult.value = {
+			appId: selectedAppValue,
+			fromVersion: requestedFromVersion || null,
+			toVersion: requestedToVersion,
+			message: errorMessage.value,
+			dryRun: false,
+			installStatus: 'failed',
+			updateType: 'none',
+		}
+	} finally {
+		isInstallingVersion.value = false
+	}
 }
 
 onMounted(async () => {
@@ -910,314 +602,84 @@ watch(debugModeEnabled, () => {
 <template>
 	<NcContent app-name="app_versions">
 		<NcAppContent :class="$style.content">
-			<NcDialog
+			<DowngradeConfirmDialog
 				:open="isDowngradeConfirmOpen"
-				name="Confirm downgrade"
 				:buttons="downgradeConfirmButtons"
+				:app-id="downgradeConfirmApp"
+				:from-version="downgradeConfirmFromVersion"
+				:to-version="downgradeConfirmToVersion"
+				:range="downgradeVersionRange"
+				:version-range-text="versionRangeText"
 				@update:open="onDowngradeDialogClose"
-			>
-				<p class="$style.downgradeConfirmText">
-					<strong>{{ downgradeConfirmApp }}</strong>
-				</p>
-				<p class="$style.versionTransitionRow">
-					<span :class="$style.versionChip">{{ downgradeConfirmFromVersion || '—' }}</span>
-					<span :class="$style.versionArrow">→</span>
-					<span :class="$style.versionChip">{{ downgradeConfirmToVersion }}</span>
-				</p>
-				<p v-if="downgradeVersionRange" :class="$style.versionRangeSummary">
-					<strong>Downgrade info:</strong> {{ versionRangeText(downgradeVersionRange) }}
-				</p>
-				<p :class="$style.versionItemDegradeMessage">
-					Downgrading can break database schema assumptions if migrations were already applied in newer versions. Continue only if you are sure no incompatible schema changes are involved.
-				</p>
-				</NcDialog>
-				<div :class="$style.layout">
-					<main :class="$style.mainContent">
-						<h2>App Versions!</h2>
-						<div :class="$style.settingsPanel">
-							<p v-if="updateChannel" :class="$style.updateChannel">
-								Update channel: <strong>{{ updateChannel }}</strong>
-							</p>
-							<div :class="$style.settingsToggles">
-								<label :class="$style.safeMode">
-									<input
-										type="checkbox"
-										v-model="safeModeEnabled"
-										:class="$style.safeModeCheckbox"
-										:disabled="isInstallingVersion"
-									/>
-									<span>Safe mode (block downgrades and respects update channel)</span>
-								</label>
-								<label :class="$style.safeMode">
-									<input
-										type="checkbox"
-										v-model="debugModeEnabled"
-										:class="$style.safeModeCheckbox"
-										:disabled="isInstallingVersion"
-									/>
-									<span>Enable install dry-run (show debug output)</span>
-								</label>
-							</div>
+			/>
+
+			<div :class="$style.layout">
+				<main :class="$style.mainContent">
+					<h2>App Versions!</h2>
+
+					<AppSettingsPanel
+						:update-channel="updateChannel"
+						:safe-mode-enabled="safeModeEnabled"
+						:debug-mode-enabled="debugModeEnabled"
+						:disabled="isInstallingVersion"
+						@update:safe-mode-enabled="safeModeEnabled = $event"
+						@update:debug-mode-enabled="debugModeEnabled = $event"
+					/>
+
+					<div :class="[$style.contentRow, { [$style.contentRowSplit]: hasSplitLayout }]">
+						<div :class="[$style.leftColumn, { [$style.leftColumnFull]: !hasSplitLayout }]">
+							<AppPickerPanel
+								:apps="filteredApps"
+								:app-filter="appFilter"
+								:show-filters="showFilters"
+								:core-apps-visibility="coreAppsVisibility"
+								:selected-app="selectedApp"
+								:has-split-layout="hasSplitLayout"
+								:has-sidebar-select="hasSidebarSelect"
+								:is-loading="isLoading"
+								:is-checking-versions="isCheckingVersions"
+								:is-installing-version="isInstallingVersion"
+								:sidebar-label="sidebarLabel"
+								@update:app-filter="appFilter = $event"
+								@update:show-filters="showFilters = $event"
+								@update:core-apps-visibility="coreAppsVisibility = $event"
+								@pick-app="onPickApp"
+							/>
+
+							<AppInfoPanel
+								:selected-app="selectedApp"
+								:selected-app-option="selectedAppOption"
+								:installed-version="installedVersion"
+								:selected-version="selectedVersion"
+								:selected-version-range="selectedVersionRange"
+								:version-range-text="versionRangeText"
+								:versions="versions"
+								:filtered-versions="filteredVersions"
+								:visible-versions="visibleVersions"
+								:version-filter="versionFilter"
+								:change-action-label="changeActionLabel"
+								:available-source="availableSource"
+								:has-checked-versions="hasCheckedVersions"
+								:error-message="errorMessage"
+								:is-checking-versions="isCheckingVersions"
+								:is-installing-version="isInstallingVersion"
+								@update:version-filter="versionFilter = $event"
+								@clear-selected-app="clearSelectedApp"
+								@select-version="onSelectVersion"
+								@deselect-version="selectedVersion = ''"
+								@perform-install="performInstall"
+							/>
 						</div>
-						<div :class="[$style.contentRow, { [$style.contentRowSplit]: hasSplitLayout }]">
-							<div :class="[$style.leftColumn, { [$style.leftColumnFull]: !hasSplitLayout }]">
-								<div :class="$style.selectSection">
-									<label :class="$style.label" for="app-filter">Pick an installed App</label>
-									<div :class="$style.filterToolbar">
-										<button
-											type="button"
-											:class="$style.filterToggleButton"
-											@click="showFilters = !showFilters"
-										>
-											{{ showFilters ? 'Hide filters' : 'Show filters' }}
-										</button>
-									</div>
-									<div v-if="showFilters" :class="$style.filterPanel">
-										<label :class="$style.filterField">
-											<span :class="$style.filterFieldLabel">Core apps</span>
-											<select v-model="coreAppsVisibility" :class="$style.filterSelect">
-												<option value="show">Show core apps</option>
-												<option value="hide">Hide core apps</option>
-											</select>
-										</label>
-									</div>
-									<input
-										id="app-filter"
-									v-model="appFilter"
-									type="text"
-									placeholder="Search apps"
-									:class="$style.appFilterInput"
-										:disabled="!hasSidebarSelect || isLoading || apps.length === 0 || isCheckingVersions || isInstallingVersion"
-										:aria-label="sidebarLabel"
-									/>
-									<div
-										v-if="!selectedApp"
-										:class="[$style.appCardList, { [$style.appCardListSplit]: hasSplitLayout }]"
-									>
-										<article
-											v-for="app in filteredApps"
-											:key="app.id"
-										:class="[$style.appCard, { [$style.appCardSelected]: selectedApp === app.id, [$style.appCardCore]: app.isCore }]"
-										>
-											<div :class="$style.appCardBody">
-												<div :class="$style.appCardHeader">
-													<div :class="$style.appCardTitleBlock">
-														<div :class="$style.appCardTitleRow">
-															<p :class="$style.appCardTitle">{{ app.label }}</p>
-															<span v-if="app.isCore" :class="$style.appCardCoreFlag">CORE</span>
-														</div>
-														<p :class="$style.appCardMeta">{{ app.id }}</p>
-													</div>
-													<div :class="$style.appCardMedia">
-														<img
-															v-if="app.preview"
-															:src="app.preview"
-															:alt="`${app.label} icon`"
-															:class="$style.appCardIcon"
-														/>
-														<div v-else :class="$style.appCardFallbackIcon" aria-hidden="true">
-															{{ appCardFallback(app) }}
-														</div>
-													</div>
-												</div>
-												<p :class="$style.appCardDescription">{{ appCardDescription(app) }}</p>
-											</div>
-											<button
-											v-if="!app.isCore"
-											type="button"
-											:class="$style.appCardButton"
-											:disabled="isCheckingVersions || isInstallingVersion"
-											@click="onPickApp(app.id)"
-										>
-											{{ selectedApp === app.id && isCheckingVersions ? 'Loading…' : 'Choose app' }}
-										</button>
-										</article>
-									</div>
-									<p v-if="!selectedApp && filteredApps.length === 0" :class="$style.noFilterResult">
-										No apps match your filter.
-									</p>
-								</div>
-							<div
-								:class="[$style.infoPanel, { [$style.infoPanelOpen]: hasInfoPanel }]"
-							>
-								<div v-if="selectedApp || installedVersion" :class="$style.installed">
-									<div v-if="selectedApp" :class="$style.selectedApp">
-										<span :class="$style.installedLabel">Selected app</span>
-										<span :class="$style.installedValue">{{ selectedAppOption?.label || selectedApp }}</span>
-										<span v-if="selectedAppOption?.label && selectedAppOption.id !== selectedAppOption.label" :class="$style.installedSubvalue">{{ selectedApp }}</span>
-										<button
-											type="button"
-											:class="$style.changeAppButton"
-											:disabled="isCheckingVersions || isInstallingVersion"
-											@click="clearSelectedApp"
-										>
-											Choose another app
-										</button>
-									</div>
-									<div v-if="installedVersion" :class="$style.installedCurrent">
-										<span :class="$style.installedLabel">Current installed</span>
-										<span :class="$style.installedValue">{{ installedVersion }}</span>
-									</div>
-									<div v-if="selectedVersion" :class="$style.selectedVersion">
-										<span :class="$style.installedLabel">Selected version</span>
-										<span :class="$style.versionTransition">
-											<span :class="$style.versionChip">{{ installedVersion || '—' }}</span>
-											<span :class="$style.versionArrow">→</span>
-											<span :class="$style.versionChip">{{ selectedVersion }}</span>
-										</span>
-									</div>
-									<p
-										v-if="selectedVersionRange"
-										:class="$style.versionSummary"
-									>
-										{{ versionRangeText(selectedVersionRange) }}
-									</p>
-									<p
-										v-if="selectedVersionRange?.direction === 'degrade'"
-										:class="$style.versionDegradeSummary"
-									>
-										Downgrade path detected.
-									</p>
-								</div>
-								<div v-if="versions.length > 0" :class="$style.versionListContainer">
-									<input
-										v-if="!selectedVersion"
-										v-model="versionFilter"
-										type="text"
-										placeholder="Filter versions"
-										:class="$style.versionFilterInput"
-										:disabled="isInstallingVersion"
-									/>
-									<div :class="$style.versionListWrapper">
-										<transition-group
-											name="versionFade"
-											tag="ul"
-											:class="$style.versionList"
-										>
-											<li v-for="version in visibleVersions" :key="version.version" :class="$style.versionItem">
-												<div :class="$style.versionItemMain">
-													<span>{{ version.version }}</span>
-													<button
-														v-if="selectedVersion !== version.version"
-														type="button"
-														:class="$style.versionSelectButton"
-														:disabled="isInstallingVersion"
-														@click="onSelectVersion(version.version)"
-													>
-														Select
-													</button>
-													<span
-														v-else
-														:class="$style.selectedVersionFlag"
-													>
-														Selected
-													</span>
-												</div>
-												<div
-													v-if="selectedVersion === version.version && selectedVersion !== ''"
-													:class="$style.versionActionGroup"
-												>
-													<p
-														v-if="changeActionLabel === 'Degrade'"
-														:class="$style.versionDegradeWarning"
-													>
-														Warning! Downgrading can result in breaking the database if earlier updates or migrations added database columns. Only do this when u can fix the database or are sure no migrations have been executed since the version u downgrade to!
-													</p>
-													<div :class="$style.versionItemActions">
-														<button
-															v-if="changeActionLabel"
-															type="button"
-															:class="[$style.versionActionButton, changeActionLabel === 'Update' ? $style.versionActionUpdateButton : (changeActionLabel === 'Degrade' ? $style.versionActionDegradeButton : '')]"
-															:aria-busy="isInstallingVersion"
-															:disabled="isInstallingVersion"
-															@click="performInstall"
-														>
-															<span v-if="isInstallingVersion" :class="$style.spinner" aria-hidden="true" />
-															{{ isInstallingVersion ? 'Installing…' : changeActionLabel }}
-														</button>
-														<button
-															type="button"
-															:class="$style.versionDeselectButton"
-															:disabled="isInstallingVersion"
-															@click="selectedVersion = ''"
-														>
-															Pick other
-														</button>
-													</div>
-												</div>
-											</li>
-										</transition-group>
-										<p v-if="filteredVersions.length === 0" :class="$style.noFilterResult">
-											No versions match your filter.
-										</p>
-									</div>
-								</div>
-								<p v-if="availableSource" :class="$style.note">
-									Versions source: {{ availableSource }}
-								</p>
-								<p v-else-if="hasCheckedVersions" :class="$style.note">
-									No versions available for this app.
-								</p>
-								<p v-if="errorMessage" :class="$style.error">{{ errorMessage }}</p>
-							</div>
-						</div>
-							<div v-if="hasSplitLayout" :class="$style.rightColumn">
-							<div v-if="hasInstallResult && lastInstallResult" :class="$style.resultPanel">
-								<p :class="$style.versionSummary">Install result</p>
-								<p :class="[$style.resultStatus, $style[`resultStatus${installStatusTone.charAt(0).toUpperCase() + installStatusTone.slice(1)}`]]">
-									{{ installStatusLabel }}
-								</p>
-								<p :class="$style.resultMessage">{{ lastInstallResult.message }}</p>
-								<div :class="$style.resultGrid">
-									<div>
-										<span>App</span>
-										<strong>{{ lastInstallResult.appId || '-' }}</strong>
-									</div>
-									<div>
-										<span>Transition</span>
-										<strong>{{ lastInstallResult.fromVersion || 'N/A' }} → {{ lastInstallResult.toVersion }}</strong>
-									</div>
-									<div>
-										<span>Mode</span>
-										<strong>{{ lastInstallResult.installStatus === 'dry-run' ? 'Dry-run (no write)' : (lastInstallResult.dryRun ? 'Dry-run' : 'Live install') }}</strong>
-									</div>
-									<div>
-										<span>Result</span>
-										<strong>{{ lastInstallResult.installedVersion || lastInstallResult.toVersion }}</strong>
-									</div>
-								</div>
-								<div
-									v-if="debugModeEnabled && lastInstallDebug.length > 0"
-									:class="$style.debugPanel"
-								>
-									<p :class="$style.debugSubtitle">Install debug ({{ lastInstallDebug.length }} step(s))</p>
-									<div :class="$style.debugTimeline">
-										<article
-											v-for="(entry, entryIndex) in lastInstallDebug"
-											:key="`${entry.stage}-${entryIndex}`"
-											:class="$style.debugStep"
-										>
-											<p :class="$style.debugStepHeader">
-												<span :class="$style.debugStepIndex">{{ entryIndex + 1 }}</span>
-												<span :class="$style.debugStepStage">{{ entry.stage }}</span>
-											</p>
-											<p v-if="!debugHasData(entry.data)" :class="$style.debugNoData">No details</p>
-											<details v-else :class="$style.debugStepDetails" :open="entryIndex === 0">
-												<summary :class="$style.debugStepSummary">View details</summary>
-												<ul :class="$style.debugOutput">
-													<li
-														v-for="(line, lineIndex) in debugToTextLines(entry.data)"
-														:key="`${entry.stage}-line-${lineIndex}`"
-														:class="$style.debugOutputLine"
-													>
-														{{ line }}
-													</li>
-												</ul>
-											</details>
-										</article>
-									</div>
-								</div>
-							</div>
+
+						<div v-if="hasSplitLayout" :class="$style.rightColumn">
+							<InstallResultPanel
+								v-if="hasInstallResult && lastInstallResult"
+								:result="lastInstallResult"
+								:tone="installStatusTone"
+								:label="installStatusLabel"
+								:debug-mode-enabled="debugModeEnabled"
+								:debug-entries="lastInstallDebug"
+							/>
 						</div>
 					</div>
 				</main>
@@ -1226,835 +688,4 @@ watch(debugModeEnabled, () => {
 	</NcContent>
 </template>
 
-<style module>
-.content {
-	height: 100%;
-	margin: 16px;
-}
-
-.layout {
-	width: 100%;
-}
-
-.updateChannel {
-	margin: 0;
-	color: var(--color-text-maxcontrast);
-	font-size: 13px;
-}
-
-.mainContent {
-	width: 100%;
-	padding-left: 16px;
-	padding-right: 16px;
-	box-sizing: border-box;
-}
-
-.settingsPanel {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	margin-top: 8px;
-	padding: 12px;
-	border: 1px solid var(--color-border);
-	border-radius: 8px;
-	background: var(--color-main-background);
-}
-
-.settingsToggles {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 12px;
-}
-
-.selectSection {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	margin-top: 12px;
-}
-
-.filterToolbar {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-}
-
-.filterToggleButton {
-	align-self: flex-start;
-}
-
-.filterPanel {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	padding: 10px 12px;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 8px;
-	background: var(--color-main-background);
-}
-
-.filterField {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	max-width: 260px;
-}
-
-.filterFieldLabel {
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--color-text-maxcontrast);
-}
-
-.filterSelect {
-	width: 100%;
-	box-sizing: border-box;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 6px;
-	padding: 8px 10px;
-	background: var(--color-main-background);
-}
-
-.appFilterInput {
-	width: 100%;
-	box-sizing: border-box;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 6px;
-	padding: 8px 10px;
-}
-
-.appCardList {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
-	gap: 16px;
-	overflow-y: visible;
-	overflow-x: hidden;
-	padding-inline-end: 4px;
-	align-content: start;
-}
-
-.appCardListSplit {
-	max-height: 360px;
-	overflow-y: auto;
-}
-
-.appCard {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 12px;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 8px;
-	background: var(--color-main-background);
-	min-height: 124px;
-	min-width: 0;
-	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
-}
-
-.appCardMedia {
-	display: flex;
-	align-items: center;
-	margin-left: auto;
-	flex-shrink: 0;
-}
-
-.appCardSelected {
-	border-color: var(--color-primary-element);
-	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-element) 30%, transparent);
-}
-
-.appCardCore {
-	border-color: #ef4444;
-	box-shadow: 0 6px 18px rgba(127, 29, 29, 0.12);
-}
-
-.appCardIcon,
-.appCardFallbackIcon {
-	width: 48px;
-	height: 48px;
-	border-radius: 10px;
-	border: 1px solid var(--color-border-dark);
-	background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary-element) 8%);
-}
-
-.appCardIcon {
-	display: block;
-	object-fit: contain;
-	padding: 6px;
-	box-sizing: border-box;
-}
-
-.appCardFallbackIcon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: 700;
-	font-size: 18px;
-	color: var(--color-primary-element);
-}
-
-.appCardBody {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	min-width: 0;
-}
-
-.appCardHeader {
-	display: flex;
-	align-items: flex-start;
-	gap: 12px;
-	min-width: 0;
-	justify-content: space-between;
-}
-
-.appCardTitleBlock {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	min-width: 0;
-}
-
-.appCardTitleRow {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-}
-
-.appCardTitle,
-.appCardMeta {
-	margin: 0;
-}
-
-.appCardTitle {
-	font-weight: 700;
-	color: var(--color-main-text);
-	word-break: break-word;
-}
-
-.appCardMeta {
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-	word-break: break-all;
-}
-
-.appCardCoreFlag {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px 8px;
-	border-radius: 9999px;
-	background: #fee2e2;
-	border: 1px solid #ef4444;
-	color: #991b1b;
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.04em;
-	flex-shrink: 0;
-}
-
-.appCardDescription {
-	margin: 0;
-	font-size: 13px;
-	line-height: 1.35;
-	color: var(--color-text-maxcontrast);
-}
-
-.appCardButton {
-	align-self: flex-start;
-}
-
-.installedSubvalue {
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-.changeAppButton {
-	align-self: flex-start;
-	margin-top: 8px;
-}
-
-.contentRow {
-	display: block;
-	margin-top: 8px;
-}
-
-.contentRowSplit {
-	display: flex;
-	gap: 16px;
-	align-items: stretch;
-}
-
-.leftColumn,
-.rightColumn {
-	flex: 1 1 0;
-	min-width: 0;
-}
-
-.leftColumnFull {
-	width: 100%;
-}
-
-.rowInline {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 10px;
-}
-
-.installed {
-	border-left: 4px solid var(--color-border-dark);
-	padding: 8px 10px;
-	width: 100%;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.infoPanel {
-	margin-top: 8px;
-	width: 100%;
-	overflow: visible;
-	max-height: 0;
-	opacity: 0;
-	transform: scaleX(0);
-	transform-origin: right center;
-	pointer-events: none;
-	background: var(--color-main-background);
-	border: 1px solid var(--color-border-dark);
-	border-left-width: 4px;
-	border-radius: 6px;
-	padding: 10px;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	box-sizing: border-box;
-	transition:
-		max-height 0.28s ease,
-		opacity 0.2s ease,
-		transform 0.28s ease;
-}
-
-.infoPanelOpen {
-	opacity: 1;
-	transform: scaleX(1);
-	max-height: calc(100vh - 160px);
-	pointer-events: auto;
-}
-
-.selectedApp,
-.installedCurrent {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.installedLabel {
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-	margin-right: 6px;
-}
-
-.installedValue {
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-	font-weight: 600;
-	font-size: 14px;
-}
-
-.versionList {
-	padding-inline-start: 20px;
-	margin: 8px 0 0;
-}
-
-.versionItem {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	gap: 6px;
-	justify-content: flex-start;
-	padding: 6px 0;
-	transition:
-		opacity 0.18s ease,
-		transform 0.18s ease,
-		max-height 0.18s ease;
-	overflow: visible;
-}
-
-.versionItemMain {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 10px;
-	width: 100%;
-}
-
-.versionActionGroup {
-	flex-direction: column;
-	gap: 8px;
-	display: flex;
-	width: 100%;
-}
-
-.versionDegradeWarning {
-	margin: 0;
-	padding: 8px 10px;
-	border: 1px solid #fdba74;
-	background: #ffedd5;
-	color: #7c2d12;
-	border-radius: 6px;
-	font-size: 12px;
-	line-height: 1.3;
-}
-
-.downgradeConfirmText {
-	font-size: 14px;
-	line-height: 1.4;
-}
-
-.versionItemDegradeMessage {
-	margin: 8px 0 0;
-	padding: 8px 10px;
-	border: 1px solid #fdba74;
-	background: #ffedd5;
-	color: #7c2d12;
-	border-radius: 6px;
-	font-size: 12px;
-	line-height: 1.3;
-}
-
-.versionItemActions {
-	margin-top: 8px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 10px;
-	width: 100%;
-}
-
-.versionSelectButton {
-	line-height: 1.1;
-	margin: 2px 0;
-	visibility: hidden;
-	opacity: 0;
-	transition: opacity 0.12s ease;
-	padding: 3px 10px;
-	border: 1px solid var(--color-primary-element);
-	color: var(--color-primary-element);
-	border-radius: 6px;
-	background: var(--color-main-background);
-	font-size: 12px;
-}
-
-.versionItem:hover .versionSelectButton,
-.versionSelectButton:focus-visible {
-	visibility: visible;
-	opacity: 1;
-}
-
-.versionSelectButton:hover {
-	filter: brightness(1.05);
-}
-
-.selectedVersionFlag {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 12px;
-	font-weight: 600;
-	color: #1f2937;
-	background: #e0f2fe;
-	border: 1px solid #38bdf8;
-	border-radius: 9999px;
-	padding: 2px 10px;
-	line-height: 1.3;
-	margin-left: auto;
-}
-
-.versionActionButton {
-	appearance: none;
-	-webkit-appearance: none;
-	border-radius: 6px;
-	padding: 3px 10px;
-	font-size: 12px;
-	line-height: 1.1;
-	cursor: pointer;
-	box-sizing: border-box;
-	flex: 1 1 0;
-	width: calc(50% - 5px);
-}
-
-.versionActionUpdateButton {
-	color: #166534 !important;
-	border: 1px solid #22c55e !important;
-	background: #dcfce7 !important;
-}
-
-.versionActionUpdateButton:hover {
-	background: #bbf7d0 !important;
-}
-
-.versionActionDegradeButton {
-	color: #991b1b !important;
-	border: 1px solid #ef4444 !important;
-	background: #fee2e2 !important;
-}
-
-.versionActionDegradeButton:hover {
-	background: #fecaca !important;
-}
-
-:global(.versionFade-move),
-:global(.versionFade-enter-active),
-:global(.versionFade-leave-active) {
-	transition: all 0.2s ease;
-}
-
-:global(.versionFade-enter-from),
-:global(.versionFade-leave-to) {
-	opacity: 0;
-	transform: translateY(-4px);
-}
-
-:global(.versionFade-leave-active) {
-	position: absolute;
-}
-
-.versionListContainer {
-	max-height: calc(100vh - 420px);
-	min-height: 120px;
-	overflow: hidden;
-	overflow-x: hidden;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	padding-inline-end: 4px;
-}
-
-.versionListWrapper {
-	width: 100%;
-	max-height: calc(100vh - 460px);
-	min-height: 80px;
-	flex: 1;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	scrollbar-gutter: stable;
-	scrollbar-width: thin;
-	scrollbar-color: var(--color-text-maxcontrast) var(--color-background-dark);
-}
-
-.versionFilterInput {
-	width: 100%;
-	box-sizing: border-box;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 6px;
-	padding: 6px 8px;
-	margin-bottom: 8px;
-}
-
-.noFilterResult {
-	margin: 0;
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-}
-
-.versionListWrapper::-webkit-scrollbar {
-	width: 8px;
-}
-
-.versionListWrapper::-webkit-scrollbar-track {
-	background: var(--color-background-dark);
-	border-radius: 4px;
-}
-
-.versionListWrapper::-webkit-scrollbar-thumb {
-	background: var(--color-text-maxcontrast);
-	border-radius: 4px;
-}
-
-.versionListWrapper::-webkit-scrollbar-thumb:hover {
-	background: var(--color-text-light);
-}
-
-:global(.versionFade-move) {
-	transition: transform 0.2s ease;
-}
-
-.label {
-	font-weight: 600;
-}
-
-.safeMode {
-	display: inline-flex;
-	gap: 8px;
-	align-items: center;
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-	width: 100%;
-}
-
-.safeModeCheckbox {
-	accent-color: var(--color-primary-element);
-}
-
-.versionDeselectButton {
-	box-sizing: border-box;
-	flex: 1 1 0;
-	width: calc(50% - 5px);
-}
-
-.spinner {
-	display: inline-block;
-	width: 0.95em;
-	height: 0.95em;
-	border: 2px solid rgba(255, 255, 255, 0.35);
-	border-top-color: currentColor;
-	border-radius: 50%;
-	margin-right: 7px;
-	vertical-align: -1px;
-	animation: spin 0.85s linear infinite;
-}
-
-@keyframes spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-.selectedVersion {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.versionTransition {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 14px;
-}
-
-.versionTransitionRow {
-	margin: 0;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 14px;
-}
-
-.versionChip {
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-	font-weight: 600;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px 8px;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 9999px;
-	background: var(--color-main-background);
-}
-
-.versionArrow {
-	font-weight: 700;
-	color: var(--color-text-light);
-}
-
-.versionSummary,
-.versionRangeSummary {
-	margin: 0;
-	font-size: 12px;
-	color: var(--color-text-light);
-}
-
-.debugPanel {
-	margin-top: 0;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	border: 1px solid var(--color-border);
-	border-radius: 6px;
-	padding: 8px;
-	background: var(--color-main-background);
-}
-
-.resultPanel {
-	border: 1px solid var(--color-border);
-	border-radius: 6px;
-	padding: 8px;
-	background: var(--color-main-background);
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.resultStatus {
-	margin: 0;
-	align-self: flex-start;
-	padding: 3px 10px;
-	border-radius: 9999px;
-	font-size: 11px;
-	font-weight: 700;
-	color: var(--color-main-background);
-}
-
-.resultStatusSuccess {
-	background: #16a34a;
-}
-
-.resultStatusWarning {
-	background: #ea580c;
-}
-
-.resultStatusError {
-	background: #dc2626;
-}
-
-.resultStatusInfo {
-	background: #475569;
-}
-
-.resultMessage {
-	margin: 0;
-	font-size: 13px;
-	font-weight: 600;
-}
-
-.resultGrid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 8px;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 6px;
-	padding: 8px;
-}
-
-.resultGrid div {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.resultGrid span {
-	font-size: 11px;
-	color: var(--color-text-maxcontrast);
-}
-
-.resultGrid strong {
-	font-size: 12px;
-	word-break: break-all;
-}
-
-.debugSubtitle {
-	margin: 0;
-	font-size: 11px;
-	color: var(--color-text-maxcontrast);
-}
-
-.debugTimeline {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.debugStep {
-	border: 1px solid var(--color-border-dark);
-	border-radius: 6px;
-	padding: 6px 8px;
-	background: color-mix(in srgb, var(--color-main-background) 96%, white 4%);
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.debugStepHeader {
-	margin: 0;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 12px;
-}
-
-.debugStepIndex {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 20px;
-	height: 20px;
-	border-radius: 9999px;
-	font-weight: 700;
-	font-size: 11px;
-	padding: 0 6px;
-	background: var(--color-primary-element);
-	color: var(--color-primary-element-text);
-}
-
-.debugStepStage {
-	font-weight: 600;
-}
-
-.debugStepDetails {
-	margin: 0;
-}
-
-.debugStepSummary {
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-	cursor: pointer;
-}
-
-.debugOutput {
-	list-style: none;
-	max-height: 260px;
-	overflow: auto;
-	margin: 4px 0 0;
-	padding: 8px;
-	background: #0f172a;
-	color: #e2e8f0;
-	border-radius: 4px;
-	border: 1px solid #1e293b;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-	font-size: 12px;
-	line-height: 1.35;
-}
-
-.debugOutputLine {
-	margin: 0;
-	padding: 0;
-	line-height: 1.35;
-	white-space: pre;
-	font-family: inherit;
-}
-
-.debugNoData {
-	margin: 0;
-	font-size: 12px;
-	color: var(--color-text-maxcontrast);
-}
-
-.versionDegradeSummary {
-	margin: 2px 0 0;
-	color: #7c2d12;
-	font-size: 12px;
-	font-weight: 600;
-}
-
-.note {
-	font-size: 12px;
-	margin: 2px 0 0;
-	color: var(--color-text-maxcontrast);
-}
-
-.error {
-	margin: 12px 0 0;
-	color: var(--color-error);
-	font-size: 13px;
-}
-
-</style>
+<style module src="./styles/App.module.css"></style>
diff --git a/src/components/AppInfoPanel.vue b/src/components/AppInfoPanel.vue
new file mode 100644
index 0000000..6b7425e
--- /dev/null
+++ b/src/components/AppInfoPanel.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { AppOption, AppVersion, VersionRangeInfo } from '../types'
+
+const props = defineProps<{
+	selectedApp: string
+	selectedAppOption: AppOption | null
+	installedVersion: string
+	selectedVersion: string
+	selectedVersionRange: VersionRangeInfo | null
+	versionRangeText: (summary: VersionRangeInfo | null) => string
+	versions: AppVersion[]
+	filteredVersions: AppVersion[]
+	visibleVersions: AppVersion[]
+	versionFilter: string
+	changeActionLabel: string
+	availableSource: string
+	hasCheckedVersions: boolean
+	errorMessage: string
+	isCheckingVersions: boolean
+	isInstallingVersion: boolean
+}>()
+
+const emit = defineEmits<{
+	'update:versionFilter': [value: string]
+	'clear-selected-app': []
+	'select-version': [version: string]
+	'deselect-version': []
+	'perform-install': []
+}>()
+</script>
+
+<template>
+	<div :class="[$style.infoPanel, { [$style.infoPanelOpen]: props.selectedApp || props.installedVersion || props.versions.length > 0 || props.availableSource || props.errorMessage || props.hasCheckedVersions }]">
+		<div v-if="props.selectedApp || props.installedVersion" :class="$style.installed">
+			<div v-if="props.selectedApp" :class="$style.selectedApp">
+				<span :class="$style.installedLabel">Selected app</span>
+				<span :class="$style.installedValue">{{ props.selectedAppOption?.label || props.selectedApp }}</span>
+				<span v-if="props.selectedAppOption?.label && props.selectedAppOption.id !== props.selectedAppOption.label" :class="$style.installedSubvalue">{{ props.selectedApp }}</span>
+				<button
+					type="button"
+					:class="$style.changeAppButton"
+					:disabled="props.isCheckingVersions || props.isInstallingVersion"
+					@click="emit('clear-selected-app')"
+				>
+					Choose another app
+				</button>
+			</div>
+			<div v-if="props.installedVersion" :class="$style.installedCurrent">
+				<span :class="$style.installedLabel">Current installed</span>
+				<span :class="$style.installedValue">{{ props.installedVersion }}</span>
+			</div>
+			<div v-if="props.selectedVersion" :class="$style.selectedVersion">
+				<span :class="$style.installedLabel">Selected version</span>
+				<span :class="$style.versionTransition">
+					<span :class="$style.versionChip">{{ props.installedVersion || '—' }}</span>
+					<span :class="$style.versionArrow">→</span>
+					<span :class="$style.versionChip">{{ props.selectedVersion }}</span>
+				</span>
+			</div>
+			<p v-if="props.selectedVersionRange" :class="$style.versionSummary">
+				{{ props.versionRangeText(props.selectedVersionRange) }}
+			</p>
+			<p v-if="props.selectedVersionRange?.direction === 'degrade'" :class="$style.versionDegradeSummary">
+				Downgrade path detected.
+			</p>
+		</div>
+
+		<div v-if="props.versions.length > 0" :class="$style.versionListContainer">
+			<input
+				v-if="!props.selectedVersion"
+				:value="props.versionFilter"
+				type="text"
+				placeholder="Filter versions"
+				:class="$style.versionFilterInput"
+				:disabled="props.isInstallingVersion"
+				@input="emit('update:versionFilter', ($event.target as HTMLInputElement).value)"
+			/>
+			<div :class="$style.versionListWrapper">
+				<transition-group
+					name="versionFade"
+					tag="ul"
+					:class="$style.versionList"
+				>
+					<li v-for="version in props.visibleVersions" :key="version.version" :class="$style.versionItem">
+						<div :class="$style.versionItemMain">
+							<span>{{ version.version }}</span>
+							<button
+								v-if="props.selectedVersion !== version.version"
+								type="button"
+								:class="$style.versionSelectButton"
+								:disabled="props.isInstallingVersion"
+								@click="emit('select-version', version.version)"
+							>
+								Select
+							</button>
+							<span v-else :class="$style.selectedVersionFlag">
+								Selected
+							</span>
+						</div>
+						<div
+							v-if="props.selectedVersion === version.version && props.selectedVersion !== ''"
+							:class="$style.versionActionGroup"
+						>
+							<p
+								v-if="props.changeActionLabel === 'Degrade'"
+								:class="$style.versionDegradeWarning"
+							>
+								Warning! Downgrading can result in breaking the database if earlier updates or migrations added database columns. Only do this when u can fix the database or are sure no migrations have been executed since the version u downgrade to!
+							</p>
+							<div :class="$style.versionItemActions">
+								<button
+									v-if="props.changeActionLabel"
+									type="button"
+									:class="[$style.versionActionButton, props.changeActionLabel === 'Update' ? $style.versionActionUpdateButton : (props.changeActionLabel === 'Degrade' ? $style.versionActionDegradeButton : '')]"
+									:aria-busy="props.isInstallingVersion"
+									:disabled="props.isInstallingVersion"
+									@click="emit('perform-install')"
+								>
+									<span v-if="props.isInstallingVersion" :class="$style.spinner" aria-hidden="true" />
+									{{ props.isInstallingVersion ? 'Installing…' : props.changeActionLabel }}
+								</button>
+								<button
+									type="button"
+									:class="$style.versionDeselectButton"
+									:disabled="props.isInstallingVersion"
+									@click="emit('deselect-version')"
+								>
+									Pick other
+								</button>
+							</div>
+						</div>
+					</li>
+				</transition-group>
+				<p v-if="props.filteredVersions.length === 0" :class="$style.noFilterResult">
+					No versions match your filter.
+				</p>
+			</div>
+		</div>
+
+		<p v-if="props.availableSource" :class="$style.note">
+			Versions source: {{ props.availableSource }}
+		</p>
+		<p v-else-if="props.hasCheckedVersions" :class="$style.note">
+			No versions available for this app.
+		</p>
+		<p v-if="props.errorMessage" :class="$style.error">{{ props.errorMessage }}</p>
+	</div>
+</template>
+
+<style module src="../styles/AppInfoPanel.module.css"></style>
diff --git a/src/components/AppPickerPanel.vue b/src/components/AppPickerPanel.vue
new file mode 100644
index 0000000..b1d718e
--- /dev/null
+++ b/src/components/AppPickerPanel.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { AppOption } from '../types'
+
+const props = defineProps<{
+	apps: AppOption[]
+	appFilter: string
+	showFilters: boolean
+	coreAppsVisibility: 'show' | 'hide'
+	selectedApp: string
+	hasSplitLayout: boolean
+	hasSidebarSelect: boolean
+	isLoading: boolean
+	isCheckingVersions: boolean
+	isInstallingVersion: boolean
+	sidebarLabel: string
+}>()
+
+const emit = defineEmits<{
+	'update:appFilter': [value: string]
+	'update:showFilters': [value: boolean]
+	'update:coreAppsVisibility': [value: 'show' | 'hide']
+	'pick-app': [appId: string]
+}>()
+
+const appCardDescription = (app: AppOption): string => app.summary || app.description || 'No description available.'
+
+const appCardFallback = (app: AppOption): string => {
+	const source = (app.label || app.id).trim()
+	return source === '' ? '?' : source.charAt(0).toUpperCase()
+}
+</script>
+
+<template>
+	<div :class="$style.selectSection">
+		<label :class="$style.label" for="app-filter">Pick an installed App</label>
+		<div :class="$style.filterToolbar">
+			<button
+				type="button"
+				:class="$style.filterToggleButton"
+				@click="emit('update:showFilters', !props.showFilters)"
+			>
+				{{ props.showFilters ? 'Hide filters' : 'Show filters' }}
+			</button>
+		</div>
+		<div v-if="props.showFilters" :class="$style.filterPanel">
+			<label :class="$style.filterField">
+				<span :class="$style.filterFieldLabel">Core apps</span>
+				<select
+					:value="props.coreAppsVisibility"
+					:class="$style.filterSelect"
+					@change="emit('update:coreAppsVisibility', ($event.target as HTMLSelectElement).value as 'show' | 'hide')"
+				>
+					<option value="show">Show core apps</option>
+					<option value="hide">Hide core apps</option>
+				</select>
+			</label>
+		</div>
+		<input
+			id="app-filter"
+			:value="props.appFilter"
+			type="text"
+			placeholder="Search apps"
+			:class="$style.appFilterInput"
+			:disabled="!props.hasSidebarSelect || props.isLoading || props.apps.length === 0 || props.isCheckingVersions || props.isInstallingVersion"
+			:aria-label="props.sidebarLabel"
+			@input="emit('update:appFilter', ($event.target as HTMLInputElement).value)"
+		/>
+		<div
+			v-if="!props.selectedApp"
+			:class="[$style.appCardList, { [$style.appCardListSplit]: props.hasSplitLayout }]"
+		>
+			<article
+				v-for="app in props.apps"
+				:key="app.id"
+				:class="[$style.appCard, { [$style.appCardSelected]: props.selectedApp === app.id, [$style.appCardCore]: app.isCore }]"
+			>
+				<div :class="$style.appCardBody">
+					<div :class="$style.appCardHeader">
+						<div :class="$style.appCardTitleBlock">
+							<div :class="$style.appCardTitleRow">
+								<p :class="$style.appCardTitle">{{ app.label }}</p>
+								<span v-if="app.isCore" :class="$style.appCardCoreFlag">CORE</span>
+							</div>
+							<p :class="$style.appCardMeta">{{ app.id }}</p>
+						</div>
+						<div :class="$style.appCardMedia">
+							<img
+								v-if="app.preview"
+								:src="app.preview"
+								:alt="`${app.label} icon`"
+								:class="$style.appCardIcon"
+							/>
+							<div v-else :class="$style.appCardFallbackIcon" aria-hidden="true">
+								{{ appCardFallback(app) }}
+							</div>
+						</div>
+					</div>
+					<p :class="$style.appCardDescription">{{ appCardDescription(app) }}</p>
+				</div>
+				<button
+					v-if="!app.isCore"
+					type="button"
+					:class="$style.appCardButton"
+					:disabled="props.isCheckingVersions || props.isInstallingVersion"
+					@click="emit('pick-app', app.id)"
+				>
+					{{ props.selectedApp === app.id && props.isCheckingVersions ? 'Loading…' : 'Choose app' }}
+				</button>
+			</article>
+		</div>
+		<p v-if="!props.selectedApp && props.apps.length === 0" :class="$style.noFilterResult">
+			No apps match your filter.
+		</p>
+	</div>
+</template>
+
+<style module src="../styles/AppPickerPanel.module.css"></style>
diff --git a/src/components/AppSettingsPanel.vue b/src/components/AppSettingsPanel.vue
new file mode 100644
index 0000000..02ccc7d
--- /dev/null
+++ b/src/components/AppSettingsPanel.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps<{
+	updateChannel: string
+	safeModeEnabled: boolean
+	debugModeEnabled: boolean
+	disabled: boolean
+}>()
+
+const emit = defineEmits<{
+	'update:safeModeEnabled': [value: boolean]
+	'update:debugModeEnabled': [value: boolean]
+}>()
+</script>
+
+<template>
+	<div :class="$style.settingsPanel">
+		<p v-if="props.updateChannel" :class="$style.updateChannel">
+			Update channel: <strong>{{ props.updateChannel }}</strong>
+		</p>
+		<div :class="$style.settingsToggles">
+			<label :class="$style.safeMode">
+				<input
+					type="checkbox"
+					:checked="props.safeModeEnabled"
+					:class="$style.safeModeCheckbox"
+					:disabled="props.disabled"
+					@change="emit('update:safeModeEnabled', ($event.target as HTMLInputElement).checked)"
+				/>
+				<span>Safe mode (block downgrades and respects update channel)</span>
+			</label>
+			<label :class="$style.safeMode">
+				<input
+					type="checkbox"
+					:checked="props.debugModeEnabled"
+					:class="$style.safeModeCheckbox"
+					:disabled="props.disabled"
+					@change="emit('update:debugModeEnabled', ($event.target as HTMLInputElement).checked)"
+				/>
+				<span>Enable install dry-run (show debug output)</span>
+			</label>
+		</div>
+	</div>
+</template>
+
+<style module src="../styles/AppSettingsPanel.module.css"></style>
diff --git a/src/components/DowngradeConfirmDialog.vue b/src/components/DowngradeConfirmDialog.vue
new file mode 100644
index 0000000..0be4b91
--- /dev/null
+++ b/src/components/DowngradeConfirmDialog.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import type { VersionRangeInfo } from '../types'
+
+defineProps<{
+	open: boolean
+	buttons: Array<Record<string, unknown>>
+	appId: string
+	fromVersion: string
+	toVersion: string
+	range: VersionRangeInfo | null
+	versionRangeText: (summary: VersionRangeInfo | null) => string
+}>()
+
+const emit = defineEmits<{
+	'update:open': [value: boolean]
+}>()
+</script>
+
+<template>
+	<NcDialog
+		:open="open"
+		name="Confirm downgrade"
+		:buttons="buttons"
+		@update:open="emit('update:open', $event)"
+	>
+		<p :class="$style.downgradeConfirmText">
+			<strong>{{ appId }}</strong>
+		</p>
+		<p :class="$style.versionTransitionRow">
+			<span :class="$style.versionChip">{{ fromVersion || '—' }}</span>
+			<span :class="$style.versionArrow">→</span>
+			<span :class="$style.versionChip">{{ toVersion }}</span>
+		</p>
+		<p v-if="range" :class="$style.versionRangeSummary">
+			<strong>Downgrade info:</strong> {{ versionRangeText(range) }}
+		</p>
+		<p :class="$style.versionItemDegradeMessage">
+			Downgrading can break database schema assumptions if migrations were already applied in newer versions. Continue only if you are sure no incompatible schema changes are involved.
+		</p>
+	</NcDialog>
+</template>
+
+<style module src="../styles/DowngradeConfirmDialog.module.css"></style>
diff --git a/src/components/InstallResultPanel.vue b/src/components/InstallResultPanel.vue
new file mode 100644
index 0000000..f87d25f
--- /dev/null
+++ b/src/components/InstallResultPanel.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { InstallDebugEntry, InstallResult } from '../types'
+import { debugHasData, debugToTextLines } from '../utils/debug'
+
+defineProps<{
+	result: InstallResult
+	tone: 'success' | 'warning' | 'error' | 'info'
+	label: string
+	debugModeEnabled: boolean
+	debugEntries: InstallDebugEntry[]
+}>()
+</script>
+
+<template>
+	<div :class="$style.resultPanel">
+		<p :class="$style.versionSummary">Install result</p>
+		<p :class="[$style.resultStatus, $style[`resultStatus${tone.charAt(0).toUpperCase() + tone.slice(1)}`]]">
+			{{ label }}
+		</p>
+		<p :class="$style.resultMessage">{{ result.message }}</p>
+		<div :class="$style.resultGrid">
+			<div>
+				<span>App</span>
+				<strong>{{ result.appId || '-' }}</strong>
+			</div>
+			<div>
+				<span>Transition</span>
+				<strong>{{ result.fromVersion || 'N/A' }} → {{ result.toVersion }}</strong>
+			</div>
+			<div>
+				<span>Mode</span>
+				<strong>{{ result.installStatus === 'dry-run' ? 'Dry-run (no write)' : (result.dryRun ? 'Dry-run' : 'Live install') }}</strong>
+			</div>
+			<div>
+				<span>Result</span>
+				<strong>{{ result.installedVersion || result.toVersion }}</strong>
+			</div>
+		</div>
+		<div
+			v-if="debugModeEnabled && debugEntries.length > 0"
+			:class="$style.debugPanel"
+		>
+			<p :class="$style.debugSubtitle">Install debug ({{ debugEntries.length }} step(s))</p>
+			<div :class="$style.debugTimeline">
+				<article
+					v-for="(entry, entryIndex) in debugEntries"
+					:key="`${entry.stage}-${entryIndex}`"
+					:class="$style.debugStep"
+				>
+					<p :class="$style.debugStepHeader">
+						<span :class="$style.debugStepIndex">{{ entryIndex + 1 }}</span>
+						<span :class="$style.debugStepStage">{{ entry.stage }}</span>
+					</p>
+					<p v-if="!debugHasData(entry.data)" :class="$style.debugNoData">No details</p>
+					<details v-else :class="$style.debugStepDetails" :open="entryIndex === 0">
+						<summary :class="$style.debugStepSummary">View details</summary>
+						<ul :class="$style.debugOutput">
+							<li
+								v-for="(line, lineIndex) in debugToTextLines(entry.data)"
+								:key="`${entry.stage}-line-${lineIndex}`"
+								:class="$style.debugOutputLine"
+							>
+								{{ line }}
+							</li>
+						</ul>
+					</details>
+				</article>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style module src="../styles/InstallResultPanel.module.css"></style>
diff --git a/src/styles/App.module.css b/src/styles/App.module.css
new file mode 100644
index 0000000..fc067d6
--- /dev/null
+++ b/src/styles/App.module.css
@@ -0,0 +1,36 @@
+.content {
+	height: 100%;
+	margin: 16px;
+}
+
+.layout {
+	width: 100%;
+}
+
+.mainContent {
+	width: 100%;
+	padding-left: 16px;
+	padding-right: 16px;
+	box-sizing: border-box;
+}
+
+.contentRow {
+	display: block;
+	margin-top: 8px;
+}
+
+.contentRowSplit {
+	display: flex;
+	gap: 16px;
+	align-items: stretch;
+}
+
+.leftColumn,
+.rightColumn {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
+.leftColumnFull {
+	width: 100%;
+}
diff --git a/src/styles/AppInfoPanel.module.css b/src/styles/AppInfoPanel.module.css
new file mode 100644
index 0000000..8574059
--- /dev/null
+++ b/src/styles/AppInfoPanel.module.css
@@ -0,0 +1,342 @@
+.infoPanel {
+	margin-top: 8px;
+	width: 100%;
+	overflow: visible;
+	max-height: 0;
+	opacity: 0;
+	transform: scaleX(0);
+	transform-origin: right center;
+	pointer-events: none;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-left-width: 4px;
+	border-radius: 6px;
+	padding: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	box-sizing: border-box;
+	transition:
+		max-height 0.28s ease,
+		opacity 0.2s ease,
+		transform 0.28s ease;
+}
+
+.infoPanelOpen {
+	opacity: 1;
+	transform: scaleX(1);
+	max-height: calc(100vh - 160px);
+	pointer-events: auto;
+}
+
+.installed {
+	border-left: 4px solid var(--color-border-dark);
+	padding: 8px 10px;
+	width: 100%;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.selectedApp,
+.installedCurrent,
+.selectedVersion {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.installedLabel {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	margin-right: 6px;
+}
+
+.installedValue {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	font-weight: 600;
+	font-size: 14px;
+}
+
+.installedSubvalue {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.changeAppButton {
+	align-self: flex-start;
+	margin-top: 8px;
+}
+
+.versionTransition {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+}
+
+.versionChip {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	font-weight: 600;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px 8px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 9999px;
+	background: var(--color-main-background);
+}
+
+.versionArrow {
+	font-weight: 700;
+	color: var(--color-text-light);
+}
+
+.versionSummary {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-light);
+}
+
+.versionDegradeSummary {
+	margin: 2px 0 0;
+	color: #7c2d12;
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.versionListContainer {
+	max-height: calc(100vh - 420px);
+	min-height: 120px;
+	overflow: hidden;
+	overflow-x: hidden;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding-inline-end: 4px;
+}
+
+.versionFilterInput {
+	width: 100%;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 6px;
+	padding: 6px 8px;
+	margin-bottom: 8px;
+}
+
+.versionListWrapper {
+	width: 100%;
+	max-height: calc(100vh - 460px);
+	min-height: 80px;
+	flex: 1;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	scrollbar-gutter: stable;
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-text-maxcontrast) var(--color-background-dark);
+}
+
+.versionListWrapper::-webkit-scrollbar {
+	width: 8px;
+}
+
+.versionListWrapper::-webkit-scrollbar-track {
+	background: var(--color-background-dark);
+	border-radius: 4px;
+}
+
+.versionListWrapper::-webkit-scrollbar-thumb {
+	background: var(--color-text-maxcontrast);
+	border-radius: 4px;
+}
+
+.versionListWrapper::-webkit-scrollbar-thumb:hover {
+	background: var(--color-text-light);
+}
+
+.versionList {
+	padding-inline-start: 20px;
+	margin: 8px 0 0;
+}
+
+.versionItem {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 6px;
+	justify-content: flex-start;
+	padding: 6px 0;
+	transition:
+		opacity 0.18s ease,
+		transform 0.18s ease,
+		max-height 0.18s ease;
+	overflow: visible;
+}
+
+.versionItemMain {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+}
+
+.versionSelectButton {
+	line-height: 1.1;
+	margin: 2px 0;
+	visibility: hidden;
+	opacity: 0;
+	transition: opacity 0.12s ease;
+	padding: 3px 10px;
+	border: 1px solid var(--color-primary-element);
+	color: var(--color-primary-element);
+	border-radius: 6px;
+	background: var(--color-main-background);
+	font-size: 12px;
+}
+
+.versionItem:hover .versionSelectButton,
+.versionSelectButton:focus-visible {
+	visibility: visible;
+	opacity: 1;
+}
+
+.versionSelectButton:hover {
+	filter: brightness(1.05);
+}
+
+.selectedVersionFlag {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	font-weight: 600;
+	color: #1f2937;
+	background: #e0f2fe;
+	border: 1px solid #38bdf8;
+	border-radius: 9999px;
+	padding: 2px 10px;
+	line-height: 1.3;
+	margin-left: auto;
+}
+
+.versionActionGroup {
+	flex-direction: column;
+	gap: 8px;
+	display: flex;
+	width: 100%;
+}
+
+.versionDegradeWarning {
+	margin: 0;
+	padding: 8px 10px;
+	border: 1px solid #fdba74;
+	background: #ffedd5;
+	color: #7c2d12;
+	border-radius: 6px;
+	font-size: 12px;
+	line-height: 1.3;
+}
+
+.versionItemActions {
+	margin-top: 8px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+}
+
+.versionActionButton {
+	appearance: none;
+	-webkit-appearance: none;
+	border-radius: 6px;
+	padding: 3px 10px;
+	font-size: 12px;
+	line-height: 1.1;
+	cursor: pointer;
+	box-sizing: border-box;
+	flex: 1 1 0;
+	width: calc(50% - 5px);
+}
+
+.versionActionUpdateButton {
+	color: #166534 !important;
+	border: 1px solid #22c55e !important;
+	background: #dcfce7 !important;
+}
+
+.versionActionUpdateButton:hover {
+	background: #bbf7d0 !important;
+}
+
+.versionActionDegradeButton {
+	color: #991b1b !important;
+	border: 1px solid #ef4444 !important;
+	background: #fee2e2 !important;
+}
+
+.versionActionDegradeButton:hover {
+	background: #fecaca !important;
+}
+
+.versionDeselectButton {
+	box-sizing: border-box;
+	flex: 1 1 0;
+	width: calc(50% - 5px);
+}
+
+.spinner {
+	display: inline-block;
+	width: 0.95em;
+	height: 0.95em;
+	border: 2px solid rgba(255, 255, 255, 0.35);
+	border-top-color: currentColor;
+	border-radius: 50%;
+	margin-right: 7px;
+	vertical-align: -1px;
+	animation: spin 0.85s linear infinite;
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+:global(.versionFade-move),
+:global(.versionFade-enter-active),
+:global(.versionFade-leave-active) {
+	transition: all 0.2s ease;
+}
+
+:global(.versionFade-enter-from),
+:global(.versionFade-leave-to) {
+	opacity: 0;
+	transform: translateY(-4px);
+}
+
+:global(.versionFade-leave-active) {
+	position: absolute;
+}
+
+:global(.versionFade-move) {
+	transition: transform 0.2s ease;
+}
+
+.noFilterResult,
+.note {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.error {
+	margin: 12px 0 0;
+	color: var(--color-error);
+	font-size: 13px;
+}
diff --git a/src/styles/AppPickerPanel.module.css b/src/styles/AppPickerPanel.module.css
new file mode 100644
index 0000000..1cb563e
--- /dev/null
+++ b/src/styles/AppPickerPanel.module.css
@@ -0,0 +1,210 @@
+.selectSection {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin-top: 12px;
+}
+
+.label {
+	font-weight: 600;
+}
+
+.filterToolbar {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.filterToggleButton {
+	align-self: flex-start;
+}
+
+.filterPanel {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 10px 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 8px;
+	background: var(--color-main-background);
+}
+
+.filterField {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	max-width: 260px;
+}
+
+.filterFieldLabel {
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+}
+
+.filterSelect {
+	width: 100%;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 6px;
+	padding: 8px 10px;
+	background: var(--color-main-background);
+}
+
+.appFilterInput {
+	width: 100%;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 6px;
+	padding: 8px 10px;
+}
+
+.appCardList {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
+	gap: 16px;
+	overflow-y: visible;
+	overflow-x: hidden;
+	padding-inline-end: 4px;
+	align-content: start;
+}
+
+.appCardListSplit {
+	max-height: 360px;
+	overflow-y: auto;
+}
+
+.appCard {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 8px;
+	background: var(--color-main-background);
+	min-height: 124px;
+	min-width: 0;
+	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
+}
+
+.appCardSelected {
+	border-color: var(--color-primary-element);
+	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-element) 30%, transparent);
+}
+
+.appCardCore {
+	border-color: #ef4444;
+	box-shadow: 0 6px 18px rgba(127, 29, 29, 0.12);
+}
+
+.appCardBody {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+}
+
+.appCardHeader {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	min-width: 0;
+	justify-content: space-between;
+}
+
+.appCardTitleBlock {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+}
+
+.appCardTitleRow {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.appCardTitle,
+.appCardMeta {
+	margin: 0;
+}
+
+.appCardTitle {
+	font-weight: 700;
+	color: var(--color-main-text);
+	word-break: break-word;
+}
+
+.appCardMeta {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	word-break: break-all;
+}
+
+.appCardCoreFlag {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px 8px;
+	border-radius: 9999px;
+	background: #fee2e2;
+	border: 1px solid #ef4444;
+	color: #991b1b;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	flex-shrink: 0;
+}
+
+.appCardMedia {
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.appCardIcon,
+.appCardFallbackIcon {
+	width: 48px;
+	height: 48px;
+	border-radius: 10px;
+	border: 1px solid var(--color-border-dark);
+	background: color-mix(in srgb, var(--color-main-background) 92%, var(--color-primary-element) 8%);
+}
+
+.appCardIcon {
+	display: block;
+	object-fit: contain;
+	padding: 6px;
+	box-sizing: border-box;
+}
+
+.appCardFallbackIcon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 700;
+	font-size: 18px;
+	color: var(--color-primary-element);
+}
+
+.appCardDescription {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.35;
+	color: var(--color-text-maxcontrast);
+}
+
+.appCardButton {
+	align-self: flex-start;
+}
+
+.noFilterResult {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
diff --git a/src/styles/AppSettingsPanel.module.css b/src/styles/AppSettingsPanel.module.css
new file mode 100644
index 0000000..125f338
--- /dev/null
+++ b/src/styles/AppSettingsPanel.module.css
@@ -0,0 +1,36 @@
+.updateChannel {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.settingsPanel {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-top: 8px;
+	padding: 12px;
+	border: 1px solid var(--color-border);
+	border-radius: 8px;
+	background: var(--color-main-background);
+}
+
+.settingsToggles {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.safeMode {
+	display: inline-flex;
+	gap: 8px;
+	align-items: center;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	width: 100%;
+}
+
+.safeModeCheckbox {
+	accent-color: var(--color-primary-element);
+}
diff --git a/src/styles/DowngradeConfirmDialog.module.css b/src/styles/DowngradeConfirmDialog.module.css
new file mode 100644
index 0000000..5b5cb6b
--- /dev/null
+++ b/src/styles/DowngradeConfirmDialog.module.css
@@ -0,0 +1,46 @@
+.downgradeConfirmText {
+	font-size: 14px;
+	line-height: 1.4;
+}
+
+.versionTransitionRow {
+	margin: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+}
+
+.versionChip {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	font-weight: 600;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px 8px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 9999px;
+	background: var(--color-main-background);
+}
+
+.versionArrow {
+	font-weight: 700;
+	color: var(--color-text-light);
+}
+
+.versionRangeSummary {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-light);
+}
+
+.versionItemDegradeMessage {
+	margin: 8px 0 0;
+	padding: 8px 10px;
+	border: 1px solid #fdba74;
+	background: #ffedd5;
+	color: #7c2d12;
+	border-radius: 6px;
+	font-size: 12px;
+	line-height: 1.3;
+}
diff --git a/src/styles/InstallResultPanel.module.css b/src/styles/InstallResultPanel.module.css
new file mode 100644
index 0000000..485f102
--- /dev/null
+++ b/src/styles/InstallResultPanel.module.css
@@ -0,0 +1,171 @@
+.versionSummary {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-light);
+}
+
+.resultPanel {
+	border: 1px solid var(--color-border);
+	border-radius: 6px;
+	padding: 8px;
+	background: var(--color-main-background);
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.resultStatus {
+	margin: 0;
+	align-self: flex-start;
+	padding: 3px 10px;
+	border-radius: 9999px;
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--color-main-background);
+}
+
+.resultStatusSuccess {
+	background: #16a34a;
+}
+
+.resultStatusWarning {
+	background: #ea580c;
+}
+
+.resultStatusError {
+	background: #dc2626;
+}
+
+.resultStatusInfo {
+	background: #475569;
+}
+
+.resultMessage {
+	margin: 0;
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.resultGrid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 8px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 6px;
+	padding: 8px;
+}
+
+.resultGrid div {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.resultGrid span {
+	font-size: 11px;
+	color: var(--color-text-maxcontrast);
+}
+
+.resultGrid strong {
+	font-size: 12px;
+	word-break: break-all;
+}
+
+.debugPanel {
+	margin-top: 0;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	border: 1px solid var(--color-border);
+	border-radius: 6px;
+	padding: 8px;
+	background: var(--color-main-background);
+}
+
+.debugSubtitle {
+	margin: 0;
+	font-size: 11px;
+	color: var(--color-text-maxcontrast);
+}
+
+.debugTimeline {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.debugStep {
+	border: 1px solid var(--color-border-dark);
+	border-radius: 6px;
+	padding: 6px 8px;
+	background: color-mix(in srgb, var(--color-main-background) 96%, white 4%);
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.debugStepHeader {
+	margin: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 12px;
+}
+
+.debugStepIndex {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	border-radius: 9999px;
+	font-weight: 700;
+	font-size: 11px;
+	padding: 0 6px;
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+}
+
+.debugStepStage {
+	font-weight: 600;
+}
+
+.debugStepDetails {
+	margin: 0;
+}
+
+.debugStepSummary {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	cursor: pointer;
+}
+
+.debugOutput {
+	list-style: none;
+	max-height: 260px;
+	overflow: auto;
+	margin: 4px 0 0;
+	padding: 8px;
+	background: #0f172a;
+	color: #e2e8f0;
+	border-radius: 4px;
+	border: 1px solid #1e293b;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	font-size: 12px;
+	line-height: 1.35;
+}
+
+.debugOutputLine {
+	margin: 0;
+	padding: 0;
+	line-height: 1.35;
+	white-space: pre;
+	font-family: inherit;
+}
+
+.debugNoData {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..0fa1d4e
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,38 @@
+export type AppOption = {
+	id: string
+	label: string
+	description: string
+	summary: string
+	preview: string
+	isCore: boolean
+}
+
+export type AppVersion = {
+	version: string
+}
+
+export type InstallDebugEntry = {
+	stage: string
+	data?: unknown
+}
+
+export type InstallResult = {
+	appId: string
+	fromVersion?: string | null
+	toVersion: string
+	installedVersion?: string | null
+	updateType?: string
+	message: string
+	dryRun: boolean
+	installStatus: string
+	debug?: InstallDebugEntry[]
+}
+
+export type VersionRangeInfo = {
+	major: number
+	minor: number
+	patch: number
+	direction: 'upgrade' | 'degrade'
+	from: string
+	to: string
+}
diff --git a/src/utils/debug.ts b/src/utils/debug.ts
new file mode 100644
index 0000000..f754b35
--- /dev/null
+++ b/src/utils/debug.ts
@@ -0,0 +1,102 @@
+const debugValueToString = (value: unknown): string => {
+	if (value === null) {
+		return 'null'
+	}
+
+	if (typeof value === 'string') {
+		return value
+	}
+
+	if (typeof value === 'number' || typeof value === 'boolean') {
+		return String(value)
+	}
+
+	if (typeof value === 'bigint') {
+		return value.toString()
+	}
+
+	return JSON.stringify(value)
+}
+
+const formatDebugLines = (value: unknown, depth = 0): string[] => {
+	const indent = ' '.repeat(depth * 2)
+	const lines: string[] = []
+
+	if (value === null || value === undefined) {
+		lines.push(`${indent}—`)
+		return lines
+	}
+
+	if (Array.isArray(value)) {
+		if (value.length === 0) {
+			lines.push(`${indent}[]`)
+			return lines
+		}
+
+		value.forEach((entry, index) => {
+			if (entry === null || entry === undefined) {
+				lines.push(`${indent}[${index}]: —`)
+				return
+			}
+
+			if (typeof entry === 'object') {
+				lines.push(`${indent}[${index}]:`)
+				lines.push(...formatDebugLines(entry, depth + 1))
+			} else {
+				lines.push(`${indent}[${index}]: ${debugValueToString(entry)}`)
+			}
+		})
+
+		return lines
+	}
+
+	if (typeof value === 'object') {
+		const objectValue = value as Record<string, unknown>
+		const keys = Object.keys(objectValue)
+		if (keys.length === 0) {
+			lines.push(`${indent}{}`)
+			return lines
+		}
+
+		for (const key of keys) {
+			const nested = objectValue[key]
+			if (nested === null || nested === undefined) {
+				lines.push(`${indent}${key}: —`)
+				continue
+			}
+
+			if (typeof nested === 'object') {
+				lines.push(`${indent}${key}:`)
+				lines.push(...formatDebugLines(nested, depth + 1))
+				continue
+			}
+
+			lines.push(`${indent}${key}: ${debugValueToString(nested)}`)
+		}
+		return lines
+	}
+
+	lines.push(`${indent}${debugValueToString(value)}`)
+	return lines
+}
+
+export const debugHasData = (value: unknown): boolean => {
+	if (value === null || value === undefined) {
+		return false
+	}
+
+	if (typeof value === 'string') {
+		return value.trim() !== ''
+	}
+
+	return true
+}
+
+export const debugToTextLines = (value: unknown): string[] => {
+	const lines = formatDebugLines(value)
+	if (lines.length === 0) {
+		return ['—']
+	}
+
+	return lines
+}
diff --git a/src/utils/versioning.ts b/src/utils/versioning.ts
new file mode 100644
index 0000000..c79bcae
--- /dev/null
+++ b/src/utils/versioning.ts
@@ -0,0 +1,152 @@
+import type { AppVersion, VersionRangeInfo } from '../types'
+
+export const parseVersionCore = (version: string): { major: number, minor: number, patch: number } => {
+	const [core] = version.split('-', 2)
+	const [rawMajor, rawMinor, rawPatch] = core.split('.')
+
+	return {
+		major: Number.parseInt(rawMajor || '0', 10) || 0,
+		minor: Number.parseInt(rawMinor || '0', 10) || 0,
+		patch: Number.parseInt(rawPatch || '0', 10) || 0,
+	}
+}
+
+export const compareVersions = (left: string, right: string): number => {
+	const [leftCore, leftPre = ''] = left.split('-', 2)
+	const [rightCore, rightPre = ''] = right.split('-', 2)
+	const leftParts = leftCore.split('.').map((part) => Number(part || '0'))
+	const rightParts = rightCore.split('.').map((part) => Number(part || '0'))
+
+	for (let index = 0; index < Math.max(leftParts.length, rightParts.length); index++) {
+		const leftPart = leftParts[index] ?? 0
+		const rightPart = rightParts[index] ?? 0
+
+		if (leftPart > rightPart) {
+			return 1
+		}
+		if (leftPart < rightPart) {
+			return -1
+		}
+	}
+
+	if (leftPre === rightPre) {
+		return 0
+	}
+	if (!leftPre) {
+		return 1
+	}
+	if (!rightPre) {
+		return -1
+	}
+
+	const leftPreParts = leftPre.split('.')
+	const rightPreParts = rightPre.split('.')
+	for (let index = 0; index < Math.max(leftPreParts.length, rightPreParts.length); index++) {
+		const leftPart = leftPreParts[index]
+		const rightPart = rightPreParts[index]
+
+		if (leftPart === undefined) {
+			return -1
+		}
+		if (rightPart === undefined) {
+			return 1
+		}
+
+		const leftNumeric = /^\d+$/.test(leftPart)
+		const rightNumeric = /^\d+$/.test(rightPart)
+
+		if (leftNumeric && rightNumeric) {
+			const leftNum = Number(leftPart)
+			const rightNum = Number(rightPart)
+			if (leftNum > rightNum) {
+				return 1
+			}
+			if (leftNum < rightNum) {
+				return -1
+			}
+			continue
+		}
+
+		if (leftNumeric) {
+			return -1
+		}
+		if (rightNumeric) {
+			return 1
+		}
+
+		if (leftPart > rightPart) {
+			return 1
+		}
+		if (leftPart < rightPart) {
+			return -1
+		}
+	}
+
+	return 0
+}
+
+export const getVersionRangeSummary = (from: string, to: string, versions: AppVersion[]): VersionRangeInfo | null => {
+	if (!from || !to || from === to) {
+		return null
+	}
+
+	const direction = compareVersions(to, from)
+	const comparison = direction === 0 ? 0 : (direction > 0 ? 1 : -1)
+	const low = comparison <= 0 ? to : from
+	const high = comparison <= 0 ? from : to
+
+	const inRange = versions.filter((entry) => {
+		return compareVersions(entry.version, low) >= 0 && compareVersions(entry.version, high) <= 0
+	})
+
+	const majors = new Set<number>()
+	const minors = new Set<string>()
+	for (const entry of inRange) {
+		const parsed = parseVersionCore(entry.version)
+		majors.add(parsed.major)
+		minors.add(`${parsed.major}.${parsed.minor}`)
+	}
+
+	const fromParsed = parseVersionCore(low)
+	const toParsed = parseVersionCore(high)
+	const patch = fromParsed.major === toParsed.major && fromParsed.minor === toParsed.minor
+		? Math.abs(toParsed.patch - fromParsed.patch)
+		: 0
+
+	if (majors.size === 0) {
+		const major = Math.abs(toParsed.major - fromParsed.major)
+		const minor = comparison === 0
+			? 0
+			: (toParsed.major === fromParsed.major ? Math.abs(toParsed.minor - fromParsed.minor) : Math.abs(toParsed.minor - fromParsed.minor))
+
+		return {
+			major,
+			minor,
+			patch,
+			direction: comparison > 0 ? 'upgrade' : 'degrade',
+			from,
+			to,
+		}
+	}
+
+	return {
+		major: Math.max(0, majors.size - 1),
+		minor: Math.max(0, minors.size - 1),
+		patch,
+		direction: comparison > 0 ? 'upgrade' : 'degrade',
+		from,
+		to,
+	}
+}
+
+export const versionRangeText = (summary: VersionRangeInfo | null): string => {
+	if (!summary) {
+		return ''
+	}
+
+	if (summary.major === 0 && summary.minor === 0 && summary.patch > 0) {
+		return `${summary.direction === 'upgrade' ? 'Upgrade' : 'Downgrade'} stays within major/minor and changes ${summary.patch} patch version step${summary.patch === 1 ? '' : 's'}.`
+	}
+
+	return `${summary.direction === 'upgrade' ? 'Upgrade' : 'Downgrade'} crosses ${summary.major} major and ${summary.minor} minor version step${summary.minor === 1 ? '' : 's'}.`
+}